/* Trading AI Assistant Web App - Styles */

:root {
    /* Dark theme (default) */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-hover: #30363d;
    --text-primary: #f0f6fc;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --border-color: #30363d;
    --accent-color: #238636;
    --accent-hover: #2ea043;
    --accent-secondary: #1f6feb;
    --danger-color: #f85149;
    --warning-color: #d29922;
    --success-color: #3fb950;
    --message-user-bg: #1f6feb;
    --message-assistant-bg: #21262d;
    --input-bg: #0d1117;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f6f8fa;
    --bg-tertiary: #eaeef2;
    --bg-hover: #d0d7de;
    --text-primary: #1f2328;
    --text-secondary: #57606a;
    --text-muted: #8c959f;
    --border-color: #d0d7de;
    --accent-color: #1a7f37;
    --accent-hover: #218c3a;
    --accent-secondary: #0969da;
    --danger-color: #cf222e;
    --warning-color: #9a6700;
    --success-color: #1a7f37;
    --message-user-bg: #0969da;
    --message-assistant-bg: #f6f8fa;
    --input-bg: #ffffff;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Login Screen */
.login-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
}

.login-container {
    text-align: center;
    padding: 3rem;
    background: var(--bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    max-width: 400px;
    width: 90%;
}

.login-logo img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    border: 3px solid var(--accent-color);
}

.login-container h1 {
    color: var(--text-primary);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.login-container h2 {
    color: var(--accent-secondary);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.login-subtitle {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    background: var(--accent-secondary);
    border: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.login-btn:hover {
    background: #0969da;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 111, 235, 0.4);
}

.login-btn i {
    font-size: 1.25rem;
}

.login-footer {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 2rem;
}

/* User info in sidebar */
.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.user-avatar {
    font-size: 2rem;
    color: var(--text-secondary);
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--accent-color);
}

.account-info i {
    font-size: 0.75rem;
}

.account-number {
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 500;
}

.user-details .btn-link {
    padding: 0;
    font-size: 0.8rem;
    text-decoration: none;
}

.user-details .btn-link:hover {
    text-decoration: underline;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    /* Use dynamic viewport height so mobile browser chrome (URL bar, keyboard)
       does not crop the layout. Falls back to 100vh on older browsers. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    /* Honor iOS / Android notches and gesture areas. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Lock background scroll when the mobile sidebar is open. */
body.sidebar-open { overflow: hidden; }

/* App Container */
.app-container {
    display: flex;
    height: 100vh;
    height: 100dvh;
    /* Allow children (sidebar, main) to size against the container. */
    position: relative;
}

/* Mobile sidebar backdrop — hidden on desktop, fades in on small screens. */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.sidebar-backdrop.show { opacity: 1; }

/* Sidebar */
.sidebar {
    width: 280px;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.logo i {
    font-size: 1.5rem;
    color: var(--accent-color);
}

.logo-image {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.btn-new-chat {
    width: 100%;
    padding: 12px 16px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    transition: background-color 0.2s;
    margin-bottom: 20px;
}

.btn-new-chat:hover {
    background: var(--accent-hover);
}

.quick-actions h6,
.chat-history h6 {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.suggestion-btn {
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.suggestion-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-secondary);
}

.suggestion-btn.compact .icon {
    font-size: 1.1rem;
}

.suggestion-btn.compact .text {
    font-size: 0.9rem;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.agent-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning-color);
}

.status-indicator.connected {
    background: var(--success-color);
}

.status-indicator.disconnected {
    background: var(--danger-color);
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Header */
.chat-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-secondary);
}

.header-title h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.header-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--bg-hover);
}

/* Header user menu (signed-in avatar + dropdown) */
.user-menu .user-menu-toggle {
    /* btn-icon already sets size; tweak for avatar styling. */
    padding: 0;
    overflow: hidden;
}

.user-menu .user-menu-toggle::after {
    /* Hide Bootstrap's default dropdown caret on the icon button. */
    display: none;
}

.user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text-primary);
}

.user-menu-avatar.lg {
    font-size: 2.4rem;
    color: var(--accent-secondary, var(--text-secondary));
}

.user-menu-dropdown {
    min-width: 260px;
    padding: 0.5rem 0;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.user-menu-dropdown .dropdown-item {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

.user-menu-dropdown .dropdown-item:hover,
.user-menu-dropdown .dropdown-item:focus {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.user-menu-dropdown .dropdown-item.text-danger:hover,
.user-menu-dropdown .dropdown-item.text-danger:focus {
    background: var(--bg-hover);
    color: var(--danger-color, #dc3545) !important;
}

.user-menu-dropdown .dropdown-divider {
    border-top-color: var(--border-color);
    margin: 0.25rem 0;
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.user-menu-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-menu-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.user-menu-email {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Chat Container */
.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Welcome Screen */
.welcome-screen {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: auto;
    padding: 8px 0 0;
}

.welcome-content {
    text-align: center;
    max-width: 100%;
    width: 100%;
    padding: 0 20px;
}

.welcome-icon {
    font-size: 4rem;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.welcome-content h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.welcome-content > p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.capabilities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.capability-card {
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s;
}

.capability-card:hover {
    border-color: var(--accent-secondary);
    transform: translateY(-2px);
}

.capability-card i {
    font-size: 2rem;
    color: var(--accent-secondary);
    margin-bottom: 12px;
}

.capability-card h5 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.capability-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.suggested-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.suggested-prompts .suggestion-btn {
    width: auto;
    flex-direction: row;
    padding: 6px 12px;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.2;
    border-radius: 999px;
}

.suggested-prompts .suggestion-btn .title {
    font-weight: 500;
    margin: 0;
}

/* Messages */
.messages-container {
    display: none;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.message {
    display: flex;
    gap: 12px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-message {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.user-message .message-avatar {
    background: var(--message-user-bg);
    color: white;
}

.assistant-message .message-avatar {
    background: var(--accent-color);
    color: white;
}

.message-content {
    max-width: 85%;
    position: relative;
    min-width: 0; /* Allow flex item to shrink below content size */
}

.user-message .message-content {
    text-align: right;
}

.message-text {
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--message-assistant-bg);
    border: 1px solid var(--border-color);
    overflow: hidden; /* Contain overflow within message bubble */
}

.user-message .message-text {
    background: var(--message-user-bg);
    color: white;
    border: none;
    border-radius: 16px 16px 4px 16px;
}

.assistant-message .message-text {
    border-radius: 16px 16px 16px 4px;
}

/* Markdown content styling */
.message-text h1, .message-text h2, .message-text h3, 
.message-text h4, .message-text h5, .message-text h6 {
    margin-top: 16px;
    margin-bottom: 8px;
}

.message-text h1:first-child, .message-text h2:first-child, 
.message-text h3:first-child {
    margin-top: 0;
}

.message-text p {
    margin-bottom: 12px;
}

.message-text p:last-child {
    margin-bottom: 0;
}

.message-text ul, .message-text ol {
    margin: 12px 0;
    padding-left: 24px;
}

.message-text li {
    margin-bottom: 4px;
}

.message-text code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 0.9em;
}

.message-text pre {
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 12px 0;
}

.message-text pre code {
    background: none;
    padding: 0;
}

/* Table wrapper for horizontal scrolling */
.message-text .table-wrapper {
    overflow-x: auto;
    margin: 12px 0;
}

.message-text table {
    border-collapse: collapse;
    margin: 12px 0;
    min-width: 100%;
    width: max-content;
    font-size: 0.9em;
}

.message-text th, .message-text td {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
}

.message-text th {
    background: var(--bg-tertiary);
    font-weight: 600;
}

.message-text tr:nth-child(even) {
    background: var(--bg-tertiary);
}

.message-text tr:hover {
    background: var(--bg-hover);
}

.message-text blockquote {
    border-left: 3px solid var(--accent-secondary);
    padding-left: 16px;
    margin: 12px 0;
    color: var(--text-secondary);
}

.message-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.message:hover .message-actions {
    opacity: 1;
}

.message-actions .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Loading animation */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: bounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Error message */
.error-message {
    justify-content: center;
}

.error-message .message-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(248, 81, 73, 0.1);
    border: 1px solid var(--danger-color);
    border-radius: 8px;
    color: var(--danger-color);
}

/* Input Area */
.input-area {
    padding: 12px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

/* Chat panel: input at top, suggestions/messages underneath */
[data-view-root="chat"] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Dashboard view: claim the remaining vertical space inside .main-content
 * (which is flex-column with overflow: hidden on its body parent) and let
 * its own content scroll vertically. Without this, on mobile the dashboard
 * renders below the visible viewport with no scrollbar because body has
 * overflow: hidden. */
[data-view-root="dashboard"] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.input-area.chat-input-top {
    border-top: none;
    border-bottom: 1px solid var(--border-color);
}

.input-container {
    display: flex;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 12px;
    transition: border-color 0.2s;
}

.input-container:focus-within {
    border-color: var(--accent-secondary);
}

.input-container textarea {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    resize: none;
    outline: none;
    min-height: 24px;
    max-height: 200px;
    padding: 8px 0;
}

.input-container textarea::placeholder {
    color: var(--text-muted);
}

.btn-send {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: var(--accent-color);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-send:hover:not(:disabled) {
    background: var(--accent-hover);
}

.btn-send:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 8px auto 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.char-count {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * Responsive layout
 * Breakpoints:
 *   ≤992px  — small tablets / large phones in landscape
 *   ≤768px  — phones / tablets in portrait (sidebar becomes overlay)
 *   ≤576px  — narrow phones (denser typography + stacked headers)
 *   ≤380px  — very small phones (single-column KPI grid)
 * Plus dual-screen / foldable handling via viewport-segments below.
 * ------------------------------------------------------------------ */

@media (max-width: 992px) {
    .chat-header { padding: 12px 16px; }
    .chat-container { padding: 16px; }
    .input-area { padding: 10px 16px; }
    .header-title h1 { font-size: 1.1rem; }
    .header-subtitle { font-size: 0.8rem; }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        width: min(280px, 86vw);
        z-index: 1000;
        transition: left 0.3s ease;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sidebar.show {
        left: 0;
        box-shadow: var(--shadow);
    }

    .sidebar-backdrop { display: block; }
    body:not(.sidebar-open) .sidebar-backdrop { pointer-events: none; }

    .chat-header .btn-link {
        display: flex;
    }

    .chat-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .header-title h1 { font-size: 1.05rem; }
    .header-subtitle { display: none; }

    .capabilities {
        grid-template-columns: repeat(2, 1fr);
    }

    .suggested-prompts .suggestion-btn {
        min-width: 0;
    }

    .message-content { max-width: 92%; }
    .message-text { padding: 10px 12px; font-size: 0.95rem; }
    .input-container { padding: 6px 10px; gap: 8px; }
    .input-container textarea { font-size: 16px; /* prevent iOS auto-zoom */ }
    .btn-send { width: 36px; height: 36px; }

    .welcome-content { padding: 0 12px; }
    .welcome-content h2 { font-size: 1.5rem; }

    /* Modal-overlay dialogs (settings, excel import) — give them more room. */
    .settings-modal { width: 96%; max-height: 92dvh; border-radius: 10px; }
    .settings-body { padding: 1rem; }
    .settings-header, .settings-footer { padding: 0.75rem 1rem; }
}

@media (max-width: 576px) {
    .chat-header { padding: 8px 10px; }
    .chat-container { padding: 12px; }
    .input-area { padding: 8px 10px; }
    .input-footer { font-size: 0.7rem; }
    .input-footer .disclaimer { display: none; }
    .message { gap: 8px; }
    .message-avatar { width: 30px; height: 30px; font-size: 0.9rem; }
    .message-content { max-width: 95%; }
    .login-container { padding: 2rem 1.5rem; border-radius: 12px; }
    .login-container h1 { font-size: 1.5rem; }
    .login-container h2 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .capabilities {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------
 * Foldable / dual-screen support.
 * When the viewport spans two horizontal segments (e.g. Surface Duo),
 * keep the sidebar pinned to the left segment and let main content
 * occupy the right segment, avoiding rendering across the hinge.
 * ------------------------------------------------------------------ */
@media (horizontal-viewport-segments: 2) {
    .app-container { gap: env(viewport-segment-left 1 0); }
    .sidebar {
        width: env(viewport-segment-width 0 0);
        position: static;
        left: 0;
    }
    .main-content {
        width: env(viewport-segment-width 1 0);
    }
    .sidebar-backdrop { display: none !important; }
}

/* When the viewport spans two vertical segments (foldable in landscape),
 * stack sidebar above main content so neither crosses the hinge. */
@media (vertical-viewport-segments: 2) {
    .app-container { flex-direction: column; }
    .sidebar {
        position: static;
        width: 100%;
        height: env(viewport-segment-height 0 0);
        flex-direction: row;
        overflow-x: auto;
    }
    .sidebar-content { flex: 1; padding: 8px; }
    .sidebar-nav { flex-direction: row; }
    .sidebar-footer, .sidebar-header { display: none; }
}

/* Landscape phones with very short viewports — trim vertical chrome. */
@media (max-height: 480px) and (orientation: landscape) {
    .chat-header { padding: 6px 12px; }
    .input-area { padding: 6px 12px; }
    .login-container { padding: 1.25rem; }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* Streaming message styles */
.message.streaming .message-text {
    min-height: 1.5em;
}

.streaming-cursor {
    display: inline-block;
    animation: blink 1s infinite;
    color: var(--accent-color);
    font-weight: normal;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.message.streaming .message-actions {
    opacity: 0.3;
    pointer-events: none;
}

.message.finalized .streaming-cursor {
    display: none;
}

.status-message {
    color: var(--text-secondary);
    font-style: italic;
    display: inline-block;
    margin-right: 0.5em;
}

/* Settings Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.settings-modal {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.settings-header h3 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-header h3 i {
    color: var(--accent-secondary);
}

.settings-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.settings-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.settings-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.settings-section {
    margin-bottom: 1.5rem;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-section h4 i {
    color: var(--accent-color);
}

.settings-field {
    margin-bottom: 1rem;
}

.settings-field:last-child {
    margin-bottom: 0;
}

.settings-field label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.settings-field input[type="text"],
.settings-field input[type="url"],
.settings-field input[type="date"],
.settings-field input[type="file"],
.settings-field select {
    width: 100%;
    padding: 0.75rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

.settings-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

.settings-field select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.settings-field input:focus,
.settings-field select:focus {
    outline: none;
    border-color: var(--accent-secondary);
}

.settings-field input::placeholder {
    color: var(--text-muted);
}

.settings-field small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

/* Checkbox field */
.checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.checkbox-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
    cursor: pointer;
}

.checkbox-field label {
    margin: 0;
    cursor: pointer;
}

.settings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.settings-reset {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.settings-reset:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.settings-actions {
    display: flex;
    gap: 0.75rem;
}

.settings-cancel {
    padding: 0.625rem 1.25rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.settings-cancel:hover {
    background: var(--bg-tertiary);
}

.settings-save {
    padding: 0.625rem 1.25rem;
    background: var(--accent-color);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.settings-save:hover {
    background: var(--accent-hover);
}

/* Settings Sync Status Indicator */
.settings-sync-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
}

.settings-sync-status.synced {
    background: rgba(63, 185, 80, 0.15);
    color: var(--success-color);
}

.settings-sync-status.local {
    background: rgba(139, 148, 158, 0.15);
    color: var(--text-secondary);
}

.settings-sync-status i {
    font-size: 0.875rem;
}

/* Settings Header with Sync Status */
.settings-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.settings-header h3 {
    margin: 0;
}

/* Settings Toast Notification */
.settings-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--accent-color);
    color: white;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 2000;
}

.settings-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.settings-toast i {
    font-size: 1.125rem;
}

/* Settings button in header */
.settings-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.settings-btn i {
    font-size: 1.25rem;
}

/* Responsive settings modal */
@media (max-width: 576px) {
    .settings-modal {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        border-radius: 10px;
    }

    .settings-footer {
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .settings-actions,
    .settings-footer .btn {
        width: 100%;
    }

    .settings-cancel,
    .settings-save {
        flex: 1;
    }

    /* Excel-import sheet picker: keep label + select stacked with tighter
     * spacing and a slightly smaller font so a workbook with many tabs
     * still fits without horizontal scroll. */
    .sheet-picker-row { margin-bottom: 0.6rem; }
    .sheet-picker-row label { font-size: 0.8rem; }
    .sheet-picker-row select { font-size: 0.8rem; padding: 0.55rem; }

    /* The footer hint sits below the buttons on the import modal —
     * keep it readable but flush with the safe-area-aware footer. */
    .modal-footer-hint { padding: 0 1rem 0.75rem; font-size: 0.75rem; }
}

@media (max-width: 480px) {
    /* Edge-to-edge import modal on the smallest phones to maximize the
     * preview/apply table width inside .table-wrapper. */
    .settings-modal {
        border-radius: 0;
        height: 100dvh;
        max-height: 100dvh;
    }
}


/* Helper used in the Excel-import modal footer hint. Replaces a former
 * inline style block on the <small> element. */
.modal-footer-hint {
    display: block;
    padding: 0 1.5rem 1rem;
    opacity: 0.75;
}

/* Manual trade-sync button spin + toast */
.btn-icon .bi.spin {
    animation: trade-sync-spin 1s linear infinite;
    display: inline-block;
}
@keyframes trade-sync-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.app-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    max-width: 420px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--bg-secondary, #2a2a2a);
    color: var(--text-primary, #fff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    line-height: 1.4;
    z-index: 10000;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    border-left: 4px solid #6c757d;
}
.app-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.app-toast-success { border-left-color: #198754; }
.app-toast-warning { border-left-color: #ffc107; }
.app-toast-error   { border-left-color: #dc3545; }

/* ── Reduced-motion override ───────────────────────────────────────────────
 * Honor the OS-level "reduce motion" preference (vestibular accessibility,
 * battery conservation). This is the standard global escape hatch — it
 * neutralizes every transition and animation in the app without touching
 * the individual rules. Anything that genuinely needs motion can opt back
 * in with its own ``@media (prefers-reduced-motion: no-preference)`` block.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
 * AI Assistant FAB + slide-in copilot panel (Microsoft Copilot pattern)
 * ===================================================================== */

.copilot-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--accent-secondary, #1f6feb) 0%, #6a4cff 100%);
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 1040;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, opacity 0.18s ease-out;
}
.copilot-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32), 0 3px 6px rgba(0, 0, 0, 0.18);
}
.copilot-fab:active { transform: scale(0.96); }
.copilot-fab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* While the panel is open, hide the FAB so it doesn't compete with the
   panel's close button visually. */
body.copilot-open .copilot-fab {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.copilot-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease-out;
  z-index: 1050;
  /* Visually hidden by default — width:auto keeps inner layout valid
     so chat init can measure DOM nodes when needed. */
}
body.copilot-open .copilot-panel {
  transform: translateX(0);
}

.copilot-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
}
@media (max-width: 768px) {
  /* Mobile: full-width panel + tap-backdrop-to-close. */
  .copilot-panel { width: 100vw; }
  body.copilot-open .copilot-backdrop {
    display: block !important;
  }
}

.copilot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.copilot-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
}
.copilot-title i {
  color: var(--accent-secondary, #1f6feb);
  font-size: 1.2rem;
}
.copilot-header-actions {
  display: flex;
  gap: 4px;
}
.copilot-header-actions .btn-icon {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}

/* The chat section inside the panel needs to fill the remaining height
   and never break out of the panel. Override any global rules from
   style.css that assume chat is the main view. */
.copilot-panel [data-view-root="chat"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.copilot-panel .chat-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.copilot-panel .input-area {
  flex: 0 0 auto;
}