@import url('./design-tokens.css');

/* Loxmetis Design System — Dual-theme (Dark/Light) */

/* Layout constants (theme-independent) */
:root {
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 56px;
    --drawer-width: 380px;
    --topbar-height: 52px;
    --radius-btn: 8px;
    --radius-card: 12px;
    --radius-chip: 6px;
    --radius-pill: 20px;
}

/* ===== DARK THEME (default — cool slate) ===== */
/* Brand colors must stay in sync with backend/app/core/brand.py.
   Email templates cannot use CSS variables — they reference brand.py directly.
   When changing the color scheme: update brand.py FIRST, then match here. */
:root {
    --bg-deepest: #0F172A;              /* slate-900 */
    --bg-main: #1E293B;                 /* slate-800 */
    --bg-elevated: #334155;             /* slate-700 */
    --bg-hover: rgba(45, 212, 191, 0.08);
    --bg-active: rgba(45, 212, 191, 0.12);
    --text-primary: #F1F5F9;            /* slate-100 */
    --text-secondary: #CBD5E1;          /* slate-300 */
    --text-muted: #64748B;              /* slate-500 */
    --text-disabled: #475569;           /* slate-600 */
    --border: rgba(255, 255, 255, 0.10);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --accent: #0D9488;
    --accent-hover: #0F766E;
    --accent-text: #5EEAD4;
    --accent-glow: rgba(13, 148, 136, 0.20);
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --input-bg: #334155;                /* slate-700 */
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    --scrollbar-thumb: rgba(255, 255, 255, 0.22);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
    --chat-scrollbar-thumb: rgba(255, 255, 255, 0.4);
    --chat-scrollbar-thumb-hover: rgba(255, 255, 255, 0.6);
    --chat-scrollbar-track: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(30, 41, 59, 0.5);  /* slate-800 */
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --code-bg: rgba(0, 0, 0, 0.25);
    --strong-text: #F1F5F9;             /* slate-100 */
    --code-text: #5EEAD4;
    --kbd-bg: #0F172A;                  /* slate-900 */
    --kbd-border: #334155;              /* slate-700 */
    --tooltip-bg: #334155;              /* slate-700 */
    --tooltip-text: #F1F5F9;            /* slate-100 */
    --user-avatar-bg: linear-gradient(135deg, #334155, #475569);
    --switch-track: #334155;            /* slate-700 */
    --switch-knob: #64748B;             /* slate-500 */
    --select-bg: #334155;              /* slate-700 */
    --panel-bg: #334155;               /* slate-700 */

    /* Semantic status colors — theme-aware */
    --color-green: #10B981;
    --color-blue: #3B82F6;
    --color-amber: #F59E0B;
    --color-red: #EF4444;
    --badge-green-bg: rgba(16,185,129,0.15);
    --badge-blue-bg: rgba(59,130,246,0.15);
    --badge-amber-bg: rgba(245,158,11,0.15);
    --badge-red-bg: rgba(239,68,68,0.15);
    --color-purple: #8B5CF6;
    --badge-purple-bg: rgba(139,92,246,0.15);
    --bg-card: var(--bg-elevated);

    /* Teal palette */
    --teal-50: #F0FDFA;
    --teal-100: #CCFBF1;
    --teal-400: #2DD4BF;
    --teal-600: #0D9488;
    --teal-800: #115E59;

    /* Surface hierarchy */
    --surface-page: var(--bg-main);
    --surface-card: var(--bg-elevated);

    /* Typography tokens */
    --font-size-stat: 22px;
    --font-weight-stat: 300;
    --font-tracking-stat: -0.03em;
    --font-size-label: 10px;
    --font-weight-label: 500;
    --font-tracking-label: 0.07em;

    /* Border tokens */
    --border-width: 0.5px;
    --border-width-focus: 1px;

    /* Shadow tokens */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 2px 8px rgba(0,0,0,0.08);

    /* Danger-soft tokens (failed document rows) */
    --bg-danger-soft: rgba(239, 68, 68, 0.06);
    --bg-danger-soft-hover: rgba(239, 68, 68, 0.10);

    /* Soft semantic surfaces (coverage chips, status icons, panel counts) */
    --bg-success-soft: rgba(16, 185, 129, 0.14);
    --bg-warning-soft: rgba(245, 158, 11, 0.16);
    --bg-info-soft: rgba(99, 102, 241, 0.14);
    --text-success: #6EE7B7;
    --text-warning: #FCD34D;
    --text-danger: #FCA5A5;
    --border-info: rgba(99, 102, 241, 0.55);

    /* Vault badge + type-badge tokens (Task 3.6) */
    --vault-badge-processing-bg: rgba(251, 191, 36, 0.15);
    --vault-badge-processing-text: #FCD34D;
    --vault-type-pdf-bg: rgba(59, 130, 246, 0.15);
    --vault-type-pdf-text: #93C5FD;
    --vault-type-image-bg: rgba(245, 158, 11, 0.15);
    --vault-type-image-text: #FCD34D;
    --vault-type-sheet-bg: rgba(16, 185, 129, 0.15);
    --vault-type-sheet-text: #6EE7B7;
    --vault-type-doc-bg: rgba(99, 102, 241, 0.15);
    --vault-type-doc-text: #A5B4FC;

    /* Brand semantic tokens (Issue #2347, punch list #2347-v2) */
    --btn-primary-bg:    var(--brand-gold);
    --btn-primary-text:  var(--brand-navy);
    --btn-primary-icon:  var(--brand-navy);
    --nav-active-bg:     rgba(255, 255, 255, 0.12);
    --nav-active-text:   #ffffff;
    --nav-hover-bg:      rgba(255, 255, 255, 0.04);
    --nav-text:          rgba(255, 255, 255, 0.7);
    --nav-text-muted:    rgba(255, 255, 255, 0.45);
    --progress-fill:     var(--brand-teal);
    --progress-leading:  var(--brand-gold);
    --kpi-sub:           var(--brand-gold);
    --logo-bg:           var(--brand-gold);
    --logo-text:         var(--brand-navy);

    /* === v3 BRIDGE: remap legacy vars to canonical design tokens === */
    /* Surfaces — navy ramp instead of slate */
    --bg-deepest:    var(--brand-navy);        /* sidebar frame: #05193a */
    --bg-main:       var(--brand-navy-deep);   /* content panel: #020e1f */
    --bg-elevated:   var(--brand-navy-light);  /* cards: #0a2347 */
    --bg-hover:      rgba(255,255,255,0.06);
    --bg-active:     rgba(255,255,255,0.12);
    --bg-sidebar:    var(--brand-navy);
    --surface-card:  var(--brand-navy-lighter);
    /* Interactive — gold CTA instead of teal */
    --primary:       var(--btn-primary-bg);
    --primary-hover: var(--brand-gold-light);
    --accent-glow:   rgba(183,151,96,0.3);
}

/* ===== LIGHT THEME (Redesign v2 — cool slate palette) ===== */
[data-theme="light"] {
    --bg-deepest: #F1F5F9;         /* sidebar — slate-100 */
    --bg-main: #F8FAFC;             /* content area — slate-50 */
    --bg-elevated: #FFFFFF;          /* cards — white */
    --bg-hover: rgba(15, 118, 110, 0.08);
    --bg-active: rgba(15, 118, 110, 0.12);
    --text-primary: #1E293B;         /* slate-800 */
    --text-secondary: #475569;       /* slate-600 */
    --text-muted: #94A3B8;           /* slate-400 */
    --text-disabled: #CBD5E1;        /* slate-300 */
    --border: #E2E8F0;              /* slate-200 */
    --border-subtle: #F1F5F9;       /* slate-100 */
    --accent: #0F766E;
    --accent-hover: #0D5F58;
    --accent-text: #0F766E;
    --accent-glow: rgba(15, 118, 110, 0.15);
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --input-bg: #FFFFFF;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(0, 0, 0, 0.18);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.30);
    --chat-scrollbar-thumb: rgba(0, 0, 0, 0.25);
    --chat-scrollbar-thumb-hover: rgba(0, 0, 0, 0.40);
    --chat-scrollbar-track: rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --overlay-bg: rgba(0, 0, 0, 0.30);
    --code-bg: rgba(0, 0, 0, 0.04);
    --strong-text: #1E293B;
    --code-text: #0F766E;
    --kbd-bg: #F1F5F9;
    --kbd-border: #E2E8F0;
    --tooltip-bg: #1E293B;
    --tooltip-text: #FFFFFF;
    --user-avatar-bg: linear-gradient(135deg, #0F766E, #0D5F58);
    --switch-track: #CBD5E1;
    --switch-knob: #94A3B8;
    --select-bg: #FFFFFF;
    --panel-bg: #FFFFFF;

    /* Semantic status colors — darker for light backgrounds */
    --color-green: #059669;
    --color-blue: #2563EB;
    --color-amber: #D97706;
    --color-red: #DC2626;
    --badge-green-bg: rgba(5,150,105,0.12);
    --badge-blue-bg: rgba(37,99,235,0.12);
    --badge-amber-bg: rgba(217,119,6,0.12);
    --badge-red-bg: rgba(220,38,38,0.12);
    --color-purple: #7C3AED;
    --badge-purple-bg: rgba(124,58,237,0.12);
    --bg-card: #FFFFFF;

    /* Surface hierarchy */
    --surface-page: var(--bg-main);
    --surface-card: #FFFFFF;

    /* Shadow tokens */
    --shadow-card: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-card-hover: 0 2px 6px rgba(0,0,0,0.06);

    /* Danger-soft tokens (failed document rows) */
    --bg-danger-soft: rgba(220, 38, 38, 0.05);
    --bg-danger-soft-hover: rgba(220, 38, 38, 0.09);

    /* Soft semantic surfaces (coverage chips, status icons, panel counts) */
    --bg-success-soft: rgba(5, 150, 105, 0.10);
    --bg-warning-soft: rgba(217, 119, 6, 0.12);
    --bg-info-soft: rgba(37, 99, 235, 0.10);
    --text-success: #047857;
    --text-warning: #B45309;
    --text-danger: #B91C1C;
    --border-info: rgba(37, 99, 235, 0.60);

    /* Vault badge + type-badge tokens (Task 3.6) */
    --vault-badge-processing-bg: #FEF9C3;
    --vault-badge-processing-text: #854D0E;
    --vault-type-pdf-bg: #DBEAFE;
    --vault-type-pdf-text: #1D4ED8;
    --vault-type-image-bg: #FDE68A;
    --vault-type-image-text: #92400E;
    --vault-type-sheet-bg: #D1FAE5;
    --vault-type-sheet-text: #065F46;
    --vault-type-doc-bg: #E0E7FF;
    --vault-type-doc-text: #3730A3;

    /* Brand semantic tokens — light (v3: gold CTAs + gold mark both modes) */
    --btn-primary-bg:    var(--brand-gold);
    --btn-primary-text:  var(--brand-navy);
    --btn-primary-icon:  var(--brand-navy);
    --nav-active-bg:     rgba(255, 255, 255, 0.12);
    --nav-active-text:   #ffffff;
    --nav-hover-bg:      rgba(255, 255, 255, 0.06);
    --nav-text:          rgba(255, 255, 255, 0.7);
    --nav-text-muted:    rgba(255, 255, 255, 0.45);
    --progress-fill:     var(--brand-navy);
    --progress-leading:  var(--brand-teal);
    --kpi-sub:           var(--brand-gold);
    --logo-bg:           var(--brand-gold);
    --logo-text:         var(--brand-navy);

    /* === v3 BRIDGE light mode === */
    --bg-deepest:    var(--brand-navy);
    --bg-main:       #ffffff;
    --bg-elevated:   #ffffff;
    --bg-hover:      rgba(0,0,0,0.04);
    --bg-active:     rgba(0,0,0,0.08);
    --bg-sidebar:    var(--brand-navy);
    --surface-card:  #efece4;
    --primary:       var(--btn-primary-bg);
    --primary-hover: var(--brand-gold-light);
    --accent:        var(--brand-teal-muted);
    --accent-hover:  var(--brand-teal);
    --accent-glow:   rgba(183,151,96,0.2);
}

/* ===== LIGHT THEME — global overrides for hardcoded color:white ===== */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
    color: var(--text-primary) !important;
}
[data-theme="light"] .router-tab.active {
    color: var(--text-primary) !important;
}
[data-theme="light"] .admin-tab.active {
    color: var(--text-primary) !important;
}
[data-theme="light"] .collab-tab {
    color: var(--text-primary) !important;
}
[data-theme="light"] .nav-label {
    color: var(--nav-text);
}

/* ===== LIGHT THEME — Component Overrides (Redesign v2) ===== */

/* Top header bar: navy background in both modes (v3 brand) */
[data-theme="light"] .top-bar,
[data-theme="light"] [class*="header-bar"],
[data-theme="light"] .header-top {
    background-color: var(--bg-header) !important;
    border-bottom-color: rgba(255,255,255,0.12) !important;
}

/* Breadcrumb: better contrast */
/* Breadcrumb sits on the navy header in BOTH modes — no light overrides.
   Base rules above use white-on-navy tokens and apply to both themes. */

/* Header case chip: teal pill */
[data-theme="light"] .header-case-chip {
    background: var(--teal-50);
    color: var(--teal-800);
    border-color: var(--teal-100);
}

[data-theme="light"] .header-case-chip .case-name-text {
    color: var(--teal-800);
}

/* Active case block in sidebar */
[data-theme="light"] .case-badge,
[data-theme="light"] .active-case-pill {
    background: #CCFBF1;
    border-color: #99F6E4;
    color: #0D4F4A;
}

/* Nav section labels — sidebar is navy in both modes, so always white */
[data-theme="light"] .nav-section-label,
[data-theme="light"] .sidebar-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--nav-text-muted);
}

/* Nav items: navy sidebar in both modes → always white text */
[data-theme="light"] .nav-btn {
    color: var(--nav-text);
    font-weight: 500;
}
[data-theme="light"] .nav-btn:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-active-text);
}
[data-theme="light"] .nav-btn.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    font-weight: 600;
}
[data-theme="light"] .nav-btn .icon {
    opacity: 0.8;
}
[data-theme="light"] .nav-btn.active .icon {
    opacity: 1;
    color: var(--nav-active-text);
}

/* Main content area */
[data-theme="light"] .main-content {
    background-color: #F8FAFC !important;
}

/* Chat messages */
[data-theme="light"] .message-bubble {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}
[data-theme="light"] .message-bubble.user {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

/* Chat input area */
[data-theme="light"] .chat-input-container,
[data-theme="light"] .input-container {
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
}
[data-theme="light"] .chat-input,
[data-theme="light"] .message-input {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    color: #1E293B;
}
[data-theme="light"] .chat-input:focus,
[data-theme="light"] .message-input:focus {
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* Send button */
[data-theme="light"] .send-btn {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
[data-theme="light"] .send-btn:hover {
    background: var(--brand-navy-lighter, #0f2d54);
}

/* Persona selector pills */
[data-theme="light"] .persona-btn {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #475569;
}
[data-theme="light"] .persona-btn:hover {
    background: #E2E8F0;
}
[data-theme="light"] .persona-btn.active {
    background: var(--nav-active-bg);
    border-color: var(--brand-navy);
    color: var(--nav-active-text);
}

/* Onboarding card lives INSIDE the navy sidebar in both modes — use nested-card tokens.
   No [data-theme="light"] override: sidebar is navy in both modes, card is a subtle chip. */
.onboarding-card {
    background: var(--nested-card-bg);
    border: 1px solid var(--nested-card-border);
    color: var(--nested-card-text);
}
.onboarding-card .onboarding-item,
.onboarding-card .onboarding-step,
.onboarding-card li { color: var(--nested-card-text); }
.onboarding-card .completed,
.onboarding-card .done { color: var(--nested-card-text-mute); text-decoration: line-through; }

/* Getting started card — same treatment when embedded in sidebar */
.getting-started-card {
    background: var(--nested-card-bg);
    border: 1px solid var(--nested-card-border);
    color: var(--nested-card-text);
}

/* Settings/preferences panels */
/* Settings/Preferences panels — routed through card tokens for v3.1 consistency */
.preferences-panel,
.settings-panel {
    background: var(--card-bg);
}

/* Sidebar footer — on navy sidebar */
[data-theme="light"] .sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Trust footer (Privacy · Terms · Security) */
.trust-footer {
    padding: 6px 4px 2px;
    font-size: 0.72rem;
    text-align: center;
    line-height: 1.8;
    color: var(--text-muted);
}
.trust-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.trust-footer a:hover {
    color: var(--accent);
}
.trust-footer-dot {
    margin: 0 2px;
}

/* Search bar — on navy sidebar in both modes */
[data-theme="light"] .search-bar,
[data-theme="light"] .sidebar-search {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

/* Collapsed sidebar hover in light mode — navy sidebar, white tint */
[data-theme="light"] .sidebar.collapsed:hover .sidebar-toggle-btn {
    background: var(--nav-hover-bg) !important;
}

/* Cards and modals */
[data-theme="light"] .card,
[data-theme="light"] .modal-content {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Login styling — 2.10.10: the login overlay is theme-locked to navy + white
   regardless of which theme the user has active. Marc's request: "i dont want
   a dark and light mode log in screen". The LEFT brand panel inherits these
   dark tokens (navy bg + white text). The RIGHT form panel overrides them
   below to render light (white bg + dark text) for high contrast across the
   center divider — single look in every theme. */
.login-overlay {
    --bg-deepest: var(--brand-navy);
    --bg-elevated: var(--brand-navy-light, #0a2347);
    --text-primary: #FFFFFF;
    --text-muted: #94A3B8;
    --border: rgba(255, 255, 255, 0.12);
    --card-bg: var(--brand-navy-light, #0a2347);
    --card-border: rgba(255, 255, 255, 0.12);
    color-scheme: dark;
}
.login-overlay,
.login-overlay .login-brand {
    color: var(--text-primary);
}

/* 2.10.11 — right form panel = white for contrast with the navy left panel.
   Override the in-scope CSS variables back to light values so all descendants
   (inputs, labels, buttons, card surface, tab toggle inactive state) inherit
   the light treatment automatically. */
.login-overlay .login-form-panel {
    --bg-deepest: #FFFFFF;
    --bg-elevated: #F8FAFC;
    --text-primary: #1E293B;
    --text-muted: #64748B;
    --border: #E2E8F0;
    --card-bg: #FFFFFF;
    --card-border: #E2E8F0;
    color-scheme: light;
    background: #FFFFFF;
    color: var(--text-primary);
}
.login-overlay .login-form-panel .login-card {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-primary);
}
.login-overlay .login-form-panel .login-input,
.login-overlay .login-form-panel .login-input:focus {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border);
}
.login-overlay .login-form-panel label {
    color: var(--text-primary);
}
.login-overlay .login-form-panel .login-subtitle {
    color: var(--text-muted);
}
/* Inactive auth tab on white needs a visible muted treatment, not the
   dark-elevated grey that came from the .login-overlay scope. */
.login-overlay .login-form-panel #tabSignUp,
.login-overlay .login-form-panel #tabSignIn {
    /* active state colors are written inline via switchAuthTab(); we only
       restyle the muted background here so the inactive tab reads on white. */
}
.login-overlay .login-form-panel #authTabs > div {
    border-color: var(--border);
}

/* 2.10.13 — OAuth buttons on the white right panel.
   The base .oauth-btn rule resolves color via var(--text-main) → var(--text-primary).
   In some browser/cache combos the chain didn't pick up the form-panel's redefined
   --text-primary and "Sign in with Google" rendered as near-invisible faint grey on
   white. Explicit color + weight + border tokens leaves no room for ambiguity. */
.login-overlay .login-form-panel .oauth-btn {
    color: #1E293B;
    font-weight: 600;
    background: #FFFFFF;
    border-color: #CBD5E1;
}
.login-overlay .login-form-panel .oauth-btn:hover {
    background: #F1F5F9;
    border-color: #94A3B8;
    color: #0F172A;
}
/* The trust footer inline-styled #64748b on the navy panel; on white it
   reads OK but the policy links should still be visible. */
.login-overlay .login-form-panel .trust-footer {
    color: #64748B;
    border-top-color: var(--border) !important;
}
.login-overlay .login-form-panel .trust-footer a {
    color: #475569;
}

[data-theme="light"] .login-card { border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); }
[data-theme="light"] .login-brand { background: var(--brand-navy); border-right: none; }
[data-theme="light"] .login-brand-title { color: #FFFFFF; }
[data-theme="light"] .login-brand-tagline, [data-theme="light"] .login-brand-feature { color: var(--brand-gold-soft); }
[data-theme="light"] .login-brand-icon { background: rgba(183, 151, 96, 0.2); }
[data-theme="light"] .login-brand-icon svg { stroke: var(--brand-gold); color: var(--brand-gold); }
/* 2.10.11 — the form panel is intentionally WHITE (overridden by the
   .login-overlay .login-form-panel rule above). The previous rule that
   forced it to navy in light mode is gone — navy left + white right is
   the canonical look regardless of the user's active theme. */

/* Workspace and chat */
[data-theme="light"] .workspace { background: #F8FAFC; }
[data-theme="light"] .chat-container { background: #FFFFFF; }

/* Table headers */
[data-theme="light"] th,
[data-theme="light"] .table-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #94A3B8;
    background: #F8FAFC;
}

/* Modal overlay */
[data-theme="light"] .modal-overlay {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
}

/* Toolbox grid cards */
.toolbox-card {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.toolbox-card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.toolbox-card-icon {
    font-size: 28px;
    margin-bottom: 10px;
}
.toolbox-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.toolbox-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
[data-theme="light"] .toolbox-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
[data-theme="light"] .toolbox-card:hover {
    border-color: #0F766E;
    background: #CCFBF1;
}

/* ===== OVERVIEW PAGE ===== */
.ov-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.ov-greeting { font-size: 20px; font-weight: 800; color: var(--text-primary); margin: 0 0 2px; }
.ov-date { font-size: 13px; color: var(--card-text-muted); margin: 0; }
.ov-actions { display: flex; gap: 8px; align-items: center; }
/* All buttons default to gold (Case Wizard treatment) unless explicitly differentiated.
   .btn-outline is kept as a name for backward compat but now renders as gold too. */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; font-family: inherit; background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn:hover { opacity: 0.9; }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-primary:hover { opacity: 0.9; }
.btn-outline { background: var(--btn-primary-bg); color: var(--btn-primary-text); border: 1.5px solid var(--btn-primary-bg); }
.btn-outline:hover { opacity: 0.9; }
.ov-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.ov-stat-card { background: var(--card-bg); border: var(--border-width) solid var(--card-border); border-radius: var(--radius-card); padding: 14px 18px; box-shadow: var(--card-shadow); color: var(--card-text); transition: box-shadow 0.2s ease, background 0.2s ease; }
.ov-stat-card:hover { background: var(--card-bg-hover); box-shadow: var(--shadow-card-hover); }

/* ── Stat card accent colors (number only — Apple-clean) ── */
#ovStats .ov-stat-card:nth-child(1) .ov-stat-val { color: var(--color-blue); }
#ovStats .ov-stat-card:nth-child(2) .ov-stat-val { color: var(--color-green); }
#ovStats .ov-stat-card:nth-child(3) .ov-stat-val { color: var(--accent-text); }
#ovStats .ov-stat-card:nth-child(4) .ov-stat-val { color: var(--color-green); }
#ovStats .ov-stat-card:nth-child(5) .ov-stat-val { color: var(--color-amber); }

/* Library stat card accent colors (number only) */
#libraryAnalyticsCards .ov-stat-card:nth-child(1) .ov-stat-val { color: var(--color-blue); }
#libraryAnalyticsCards .ov-stat-card:nth-child(2) .ov-stat-val { color: var(--color-purple); }
#libraryAnalyticsCards .ov-stat-card:nth-child(3) .ov-stat-val { color: var(--color-green); }
#libraryAnalyticsCards .ov-stat-card:nth-child(4) .ov-stat-val { color: var(--accent-text); }
#libraryAnalyticsCards .ov-stat-card:nth-child(5) .ov-stat-val { color: var(--color-amber); }

/* Firm Intelligence: clean card backgrounds */
#firm-intel-view .wq-ss-card { background: var(--surface-card); }

.ov-stat-label { font-size: var(--font-size-label); font-weight: var(--font-weight-label); color: var(--card-label); text-transform: uppercase; letter-spacing: var(--font-tracking-label); margin-bottom: 6px; }
.ov-stat-val { font-size: var(--font-size-stat); font-weight: var(--font-weight-stat); letter-spacing: var(--font-tracking-stat); line-height: 1; color: var(--card-value); }
.ov-stat-delta { font-size: 11px; color: var(--success); margin-top: 4px; }
.ov-stat-delta.neg { color: var(--danger); }
.ov-two-col { display: grid; grid-template-columns: 1fr 360px; gap: 16px; }
.ov-three-col { display: grid; grid-template-columns: 1fr 1fr 280px; gap: 14px; flex: 1; min-height: 0; }
.ov-card { background: var(--card-bg); border: var(--border-width) solid var(--card-border); border-radius: var(--radius-card); padding: 16px; box-shadow: var(--card-shadow); color: var(--card-text); transition: box-shadow 0.2s ease; }
.ov-card-title { font-size: 13px; font-weight: 700; color: var(--card-text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
/* UI cleanup (2026-06-09): reset native <button> chrome so this class
   renders identically whether the markup uses <span> (Edit, Add Task)
   or <button> (+ Invite). Without the reset the browser default border
   + padding made Invite look like a different control. */
.ov-card-action {
    margin-left: auto;
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    line-height: inherit;
}
.ov-card-action:hover { text-decoration: underline; }
.ov-task-list { display: flex; flex-direction: column; }
.ov-task-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: var(--border-width) solid var(--border-subtle); }
.ov-task-item:last-child { border-bottom: none; }
.ov-task-cb { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 11px; color: var(--accent); position: relative; transition: border-color 0.15s ease, background 0.15s ease; }
.ov-task-cb::before { content: ''; position: absolute; inset: -12px; }
.ov-task-cb:hover { border-color: var(--accent); background: var(--bg-hover); }
.ov-task-cb.wip { border-color: #6366f1; background: rgba(99,102,241,0.1); color: #6366f1; font-size: 9px; }
.ov-task-cb.wip:hover { border-color: #818cf8; background: rgba(99,102,241,0.2); }
.ov-task-cb.checked { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.ov-task-text { flex: 1; min-width: 0; font-size: 13px; color: var(--card-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-task-text.done { text-decoration: line-through; color: var(--card-text-muted); }
.ov-task-priority { padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; pointer-events: none; }
.ov-task-priority.high { background: var(--badge-red-bg); color: var(--color-red); }
.ov-task-priority.med { background: var(--badge-amber-bg); color: var(--color-amber); }
.ov-task-priority.low { background: var(--badge-blue-bg); color: var(--color-blue); }
.ov-task-due { font-size: 11px; color: var(--card-text-muted); flex-shrink: 0; width: 70px; text-align: right; }
.ov-task-body { display: flex; align-items: center; flex: 1; gap: 6px; cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: background 0.15s ease; min-width: 0; }
.ov-task-body:hover { background: var(--bg-hover); }
.ov-task-chevron { font-size: 16px; color: var(--card-text-muted); opacity: 0; transition: opacity 0.15s ease; flex-shrink: 0; pointer-events: none; }
.ov-task-body:hover .ov-task-chevron { opacity: 1; }
.dkt-completed-divider { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--card-text-muted); padding: 10px 0 4px; border-top: var(--border-width) solid var(--card-border); margin-top: 4px; }
.ov-activity-list { display: flex; flex-direction: column; gap: 12px; }
.ov-activity-item { display: flex; gap: 10px; align-items: center; }
.ov-activity-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.ov-activity-title { font-size: 12px; font-weight: 600; color: var(--card-text); }
.ov-activity-sub { font-size: 11px; color: var(--card-text-muted); margin-top: 1px; }
/* Activity feed — per-case docket tab (#1353) */
.dkt-activity-feed { display: flex; flex-direction: column; gap: 0; }
.dkt-activity-entry { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--card-border); }
.dkt-activity-entry:last-child { border-bottom: none; }
.dkt-activity-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--btn-primary-text); background: var(--btn-primary-bg); }
.dkt-activity-body { flex: 1; min-width: 0; }
.dkt-activity-name { font-size: 13px; font-weight: 600; color: var(--card-text); }
.dkt-activity-desc { font-size: 12px; color: var(--card-text-muted); margin-top: 1px; }
.dkt-activity-time { font-size: 11px; color: var(--card-text-muted); white-space: nowrap; margin-left: auto; padding-top: 2px; flex-shrink: 0; }
/* Skeleton loading */
.dkt-activity-skeleton { display: flex; flex-direction: column; gap: 12px; }
.dkt-act-skel-row { height: 44px; border-radius: 8px; background: var(--card-bg-hover); animation: skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes skeleton-pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }

/* Docket detail skeleton (deep-link refresh) — reserves the header + two-col layout
   so the case page appears as one piece instead of a piecemeal header->details->rest
   rebuild. Shown by _dktShowDetailSkeleton(), hidden once the real content renders. */
.dkt-skel { background: rgba(255,255,255,0.09); border-radius: 8px; animation: skeleton-pulse 1.4s ease-in-out infinite; }
[data-theme="light"] .dkt-skel { background: rgba(0,0,0,0.07); }
.dkt-skel-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
#docketDetailSkeleton .dkt-skel-row { display: flex; gap: 24px; }
#docketDetailSkeleton .dkt-skel-col { flex: 1; }
@media (max-width: 900px) { #docketDetailSkeleton .dkt-skel-row { flex-direction: column; } #docketDetailSkeleton .dkt-skel-card { max-width: none !important; } }
/* Fade the real detail in when it swaps in for the skeleton (one smooth reveal). */
.dkt-detail-fade-in { animation: dkt-detail-fade 0.22s ease-out; }
@keyframes dkt-detail-fade { from { opacity: 0; } to { opacity: 1; } }
/* Docket sub-tab active state */
.dkt-subtab:hover { color: var(--card-text) !important; }
.dkt-subtab.active { color: var(--brand-gold) !important; border-bottom-color: var(--brand-gold) !important; }
.ov-case-list { display: flex; flex-direction: column; gap: 10px; }
.ov-case-card { background: var(--card-bg); border: var(--border-width) solid var(--card-border); border-radius: var(--radius-card); padding: 14px; cursor: pointer; color: var(--card-text); transition: all 0.2s ease; box-shadow: var(--card-shadow); }
.ov-case-card:hover { border-color: var(--brand-teal); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); background: var(--card-bg-hover); }
[data-theme="light"] .ov-case-card:hover { border-color: var(--brand-navy); background: var(--brand-navy-wash); box-shadow: var(--shadow-card-hover); }
.ov-case-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.ov-case-num { font-size: 10px; font-weight: 700; color: var(--card-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ov-case-name { font-size: 13px; font-weight: 700; color: var(--card-text); margin-top: 2px; }
.ov-case-badge { margin-left: auto; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.ov-badge-active { background: #CCFBF1; color: #0D4F4A; box-shadow: 0 1px 3px rgba(13,79,74,0.15); }
.ov-badge-open { background: #DBEAFE; color: #1D4ED8; box-shadow: 0 1px 3px rgba(29,78,216,0.15); }
.ov-badge-closed { background: #F1F5F9; color: #475569; box-shadow: 0 1px 3px rgba(71,85,105,0.1); }
.ov-lifecycle { display: flex; gap: 3px; margin-bottom: 8px; }
.ov-lc-step { flex: 1; height: 5px; border-radius: 3px; background: var(--border); transition: background 0.3s ease; }
.ov-lc-step.done { background: linear-gradient(135deg, var(--progress-fill), var(--progress-leading)); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.ov-lc-step.current { background: linear-gradient(135deg, var(--progress-leading), var(--progress-fill)); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.ov-case-meta { font-size: 11px; color: var(--card-text-muted); }
/* Overview Calendar */
.ov-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ov-cal-month { font-size: 13px; font-weight: 700; color: var(--card-text); }
.ov-cal-nav { background: none; border: 1px solid var(--card-border); border-radius: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--card-text-muted); font-size: 12px; transition: all 0.15s; }
.ov-cal-nav:hover { background: var(--card-bg-hover); border-color: var(--brand-gold); color: var(--brand-gold); }
.ov-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ov-cal-dow { font-size: 10px; font-weight: 600; color: var(--card-text-muted); padding: 4px 0; text-transform: uppercase; }
.ov-cal-day { position: relative; padding: 6px 2px; font-size: 12px; color: var(--card-text); border-radius: 6px; cursor: default; transition: all 0.12s; min-height: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ov-cal-day.today { background: var(--brand-navy); color: #fff; font-weight: 700; border-radius: 6px; }
[data-theme="dark"] .ov-cal-day.today { background: var(--brand-teal); color: #fff; }
.ov-cal-day.has-events { cursor: pointer; font-weight: 700; color: var(--card-text); }
.ov-cal-day.has-events:hover { background: var(--card-bg-hover); }
.ov-cal-day.empty { color: transparent; pointer-events: none; }
.ov-cal-dots { display: flex; gap: 2px; justify-content: center; height: 5px; }
.ov-cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.ov-cal-dot.task { background: var(--color-amber); }
.ov-cal-dot.overdue { background: var(--color-red); }
.ov-cal-dot.case { background: var(--color-green); }
.ov-cal-dot.case-date { background: var(--color-blue); }
.ov-cal-dot.milestone { background: var(--brand-teal); }
.ov-cal-legend { display: flex; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.ov-cal-legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--card-text-muted); }
.ov-cal-legend-dot { width: 6px; height: 6px; border-radius: 50%; }
/* This Week digest */
.ov-cal-week { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.ov-cal-week-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--card-text-muted); margin-bottom: 6px; }
.ov-cal-week-date { font-size: 10px; font-weight: 600; color: var(--text-secondary); margin: 6px 0 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.ov-cal-week-item { display: flex; align-items: flex-start; gap: 6px; padding: 2px 0; }
.ov-cal-week-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.ov-cal-week-text { display: flex; flex-direction: column; min-width: 0; }
.ov-cal-week-title { font-size: 11px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ov-cal-week-type { font-size: 10px; color: var(--text-muted); }
.ov-cal-week-empty { font-size: 11px; color: var(--text-muted); font-style: italic; }
/* Calendar popup */
.ov-cal-popup { position: fixed; z-index: 1000; min-width: 220px; max-width: 300px; background: var(--surface-card); border: var(--border-width) solid var(--border); border-radius: 10px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.ov-cal-popup-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.ov-cal-popup-item { font-size: 11px; color: var(--text-secondary); padding: 4px 0; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 6px; }
.ov-cal-popup-item:last-child { border-bottom: none; }

@media (max-width: 1100px) { .ov-three-col { grid-template-columns: 1fr 1fr; } .ov-three-col > div:last-child { display: none; } }
@media (max-width: 900px) { .ov-stat-grid { grid-template-columns: repeat(2, 1fr); } .ov-two-col { grid-template-columns: 1fr; } .ov-three-col { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ov-stat-grid { grid-template-columns: 1fr; } }


/* DOCKET LIFECYCLE — v3 semantic tokens */
.dkt-lifecycle-wrap{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:20px 24px;color:var(--card-text);}
.dkt-lifecycle-title{font-size:13px;font-weight:700;color:var(--card-text);margin-bottom:18px;}
.dkt-lifecycle-steps{display:flex;align-items:center;}
.dkt-lc-step{display:flex;flex-direction:column;align-items:center;flex:1;}
.dkt-lc-circle{width:36px;height:36px;border-radius:50%;border:2px solid var(--card-border);background:var(--card-bg-hover);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--card-text-muted);margin-bottom:8px;}
.dkt-lc-step.done .dkt-lc-circle{background:var(--progress-fill);border-color:var(--progress-fill);color:#FFF;}
.dkt-lc-step.current .dkt-lc-circle{border-color:var(--progress-leading);color:var(--progress-leading);box-shadow:0 0 0 3px rgba(183,151,96,.15);}
.dkt-lc-label{font-size:11px;font-weight:600;color:var(--card-text-muted);}
.dkt-lc-step.done .dkt-lc-label,.dkt-lc-step.current .dkt-lc-label{color:var(--card-text);}
.dkt-lc-connector{flex:1;height:2px;background:var(--card-border);margin:0 -4px;margin-bottom:26px;}
.dkt-lc-connector.done{background:var(--progress-fill);}
.btn-sm{padding:5px 12px;font-size:12px;}
.ov-overdue{color:var(--danger);font-weight:600;}

/* DOCKET TWO-COLUMN */
.dkt-two-col{display:grid;grid-template-columns:1fr 340px;gap:16px;margin-bottom:20px;}
.dkt-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:18px;color:var(--card-text);}
.dkt-card-title{font-size:13px;font-weight:700;color:var(--card-text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.dkt-detail-label{font-size:11px;font-weight:600;color:var(--card-label);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;}
.dkt-detail-val{font-size:14px;font-weight:700;color:var(--card-text);}
.dkt-uuid{font-family:'SF Mono',ui-monospace,monospace;font-size:12px;font-weight:500;color:var(--card-text-muted);word-break:break-all;display:flex;align-items:center;gap:6px;}
.dkt-uuid-copy{cursor:pointer;font-size:14px;opacity:0.5;transition:opacity 0.15s;}
.dkt-uuid-copy:hover{opacity:1;}
.dkt-status-pill{display:inline-block;padding:4px 14px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#fff;}
.dkt-status-pill.status-active{background:var(--color-green);}
.dkt-status-pill.status-on-hold{background:var(--color-amber);}
.dkt-status-pill.status-settled{background:var(--color-blue);}
.dkt-status-pill.status-closed{background:var(--card-text-muted);}
.dkt-status-pill.status-archived{background:var(--card-text-muted);opacity:0.6;}
.dkt-status-pill.status-withdrawn{background:var(--color-red);}
@keyframes dkt-pulse{0%{box-shadow:0 0 0 0 var(--color-blue);}50%{box-shadow:0 0 12px 4px var(--color-blue);}100%{box-shadow:0 0 0 0 var(--color-blue);}}
.dkt-date-highlight{animation:dkt-pulse 0.75s ease-in-out 2;border-radius:6px;padding:2px 4px;}
.cal-pill-case-date{background:var(--badge-blue-bg);color:var(--color-blue);border:1px solid var(--color-blue);}
.dkt-snapshot-item{padding:12px 0;border-bottom:1px solid var(--card-border);}
.dkt-snapshot-item:last-child{border-bottom:none;}
.dkt-snapshot-label{font-size:11px;font-weight:600;color:var(--card-label);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;}
.dkt-snapshot-val{font-size:14px;font-weight:700;color:var(--card-text);}
/* Comparable outcomes inline panel */
.dkt-comp-panel{border-top:2px solid var(--brand-gold);padding-top:12px;margin-top:12px;}
.dkt-comp-context{font-size:12px;color:var(--card-text-muted);margin-bottom:10px;}
.dkt-comp-table{width:100%;border-collapse:collapse;font-size:12px;}
.dkt-comp-table th{padding:6px 8px;text-align:left;color:var(--card-label);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.3px;border-bottom:1px solid var(--card-border);}
.dkt-comp-table td{padding:6px 8px;color:var(--card-text);border-bottom:1px solid var(--card-border);}
.dkt-comp-table td:nth-child(2){text-align:right;font-weight:600;}
.dkt-comp-table td:nth-child(3){text-align:center;}
.dkt-comp-match{font-weight:700;font-size:11px;padding:2px 6px;border-radius:4px;}
.dkt-comp-match.high{color:var(--color-green);background:var(--badge-green-bg);}
.dkt-comp-match.med{color:var(--color-amber);background:var(--badge-amber-bg);}
.dkt-comp-match.low{color:var(--color-red);background:var(--badge-red-bg);}
.dkt-comp-explore{display:block;width:100%;margin-top:10px;padding:8px;border:1px solid var(--btn-primary-bg);border-radius:8px;background:var(--btn-primary-bg);color:var(--btn-primary-text);font-size:12px;font-weight:600;cursor:pointer;text-align:center;font-family:inherit;transition:opacity 0.15s;}
.dkt-comp-explore:hover{opacity:0.9;}
.dkt-file-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--card-border);}
.dkt-file-item:last-child{border-bottom:none;}
.dkt-file-icon{font-size:18px;}
.dkt-file-name{font-size:13px;font-weight:600;color:var(--card-text);}
.dkt-file-meta{font-size:11px;color:var(--card-text-muted);}
.dkt-file-badge{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;}
.dkt-file-badge.ready{background:var(--vault-type-sheet-bg);color:var(--vault-type-sheet-text);}
.dkt-file-badge.processing{background:var(--vault-badge-processing-bg);color:var(--vault-badge-processing-text);}
@media(max-width:900px){.dkt-two-col{grid-template-columns:1fr;}}

/* ===== DOCUMENT VAULT — v3 semantic tokens ===== */
.vault-banner{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:16px 20px;margin-bottom:16px;color:var(--card-text);}
/* File-missing banner (orphan retry — #1929 follow-up). Reuses vault-banner shell. */
.vault-missing-banner{display:flex;gap:12px;align-items:flex-start;background:var(--card-bg);border:1px solid var(--color-amber);border-radius:12px;padding:14px 18px;}
.vault-missing-banner__body{flex:1;min-width:0;}
.vault-missing-banner__title{font-size:13px;font-weight:700;color:var(--card-text);margin-bottom:2px;}
.vault-missing-banner__text{font-size:12px;color:var(--card-text-muted);line-height:1.4;}
.vault-missing-banner__close{background:none;border:0;color:var(--card-text-muted);cursor:pointer;font-size:18px;line-height:1;padding:0 4px;}
.vault-missing-banner__close:hover{color:var(--card-text);}
.vault-progress-bar{height:6px;background:var(--card-bg-hover);border-radius:3px;overflow:hidden;}
.vault-progress-fill{height:100%;background:var(--progress-fill);border-radius:3px;transition:width 0.3s;}
.vault-progress-fill,
[class*="progress"][class*="fill"] {
  background: linear-gradient(90deg,
    var(--progress-fill) 0%,
    var(--progress-fill) 85%,
    var(--progress-leading) 100%
  );
}
.vault-badge{padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.vault-badge.processing{background:var(--vault-badge-processing-bg);color:var(--vault-badge-processing-text);}
.vault-layout{display:flex;gap:16px;min-height:400px;}
.vault-sidebar{width:220px;flex-shrink:0;background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:16px;align-self:flex-start;color:var(--card-text);}
.vault-main{flex:1;min-width:0;}
.vault-folder-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--card-label);margin-bottom:8px;}
.vault-folder-item{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--card-text-muted);transition:all 0.12s;margin-bottom:2px;}
.vault-folder-item:hover{background:var(--card-bg-hover);color:var(--card-text);}
.vault-folder-item.active{background:rgba(183,151,96,0.15);color:var(--brand-gold);font-weight:600;}
.vault-folder-count{font-size:12px;color:var(--card-text-muted);font-weight:600;}
.vault-status-filter{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--card-text-muted);margin-bottom:2px;}
.vault-status-filter:hover{background:var(--card-bg-hover);color:var(--card-text);}
.vault-status-filter.active{background:rgba(183,151,96,0.15);color:var(--brand-gold);font-weight:600;}
.vault-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.vault-dot.ready{background:var(--success);}
.vault-dot.processing{background:var(--warning);}
.vault-dot.failed{background:var(--danger);}
.vault-dot.storage-missing{background:var(--color-amber);}
.vault-table-wrap{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;color:var(--card-text);}
.vault-table{width:100%;border-collapse:collapse;font-size:13px;}
.vault-table th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--card-label);background:var(--card-bg-hover);border-bottom:1px solid var(--card-border);}
.vault-table td{padding:10px 14px;border-bottom:1px solid var(--card-border);}
.vault-row:hover{background:var(--card-bg-hover);}
.vault-doc-name{font-weight:600;color:var(--card-text);}
.vault-doc-meta{font-size:11px;color:var(--card-text-muted);margin-top:2px;}
.vault-type-badge{padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;}
.vault-type-badge.pdf{background:var(--vault-type-pdf-bg);color:var(--vault-type-pdf-text);}
.vault-type-badge.image{background:var(--vault-type-image-bg);color:var(--vault-type-image-text);}
.vault-type-badge.sheet{background:var(--vault-type-sheet-bg);color:var(--vault-type-sheet-text);}
.vault-type-badge.doc{background:var(--vault-type-doc-bg);color:var(--vault-type-doc-text);}
.vault-type-badge.file{background:var(--card-bg-hover);color:var(--card-text-muted);}
.vault-date{font-size:12px;color:var(--card-text-muted);}
.vault-status-dot{font-size:10px;}
.vault-status-dot.ready{color:var(--success);}
.vault-status-dot.processing{color:var(--warning);}
.vault-status-dot.failed{color:var(--danger);}
.vault-status-dot.storage-missing{color:var(--color-amber);}
.vault-storage-missing-hint{font-size:11px;color:var(--color-amber);white-space:nowrap;}
.vault-actions{display:flex;gap:4px;}
.vault-act-btn{background:var(--btn-primary-bg);border:1px solid var(--btn-primary-bg);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:12px;color:var(--btn-primary-text);font-weight:600;transition:opacity 0.12s;}
.vault-act-btn:hover{opacity:0.9;}
.vault-act-btn.retry{color:var(--danger);border-color:var(--danger);background:transparent;}
.vault-act-btn.retry:hover{background:rgba(239,68,68,0.08);opacity:1;}
/* UI cleanup (2026-06-09): keep the gold action-button box on the trash so
   it matches the other row icons; only the icon glyph stays red. Hover
   swaps to the soft-red wash so the destructive intent still reads. */
.vault-act-btn.danger{color:var(--danger);}
.vault-act-btn.danger:hover{background:rgba(239,68,68,0.18);border-color:var(--danger);color:var(--danger);opacity:1;}

/* 2.10.16 — Cases page row trash. Inherits the gold box from
   .btn.btn-outline.btn-sm so it sits flush next to Chat/Docs/Edit, but the
   glyph stays red. Hover swaps to the soft-red wash so destructive intent
   still reads. Mirrors the Doc Vault .vault-act-btn.danger pattern above. */
.lib-action-delete { color: var(--danger); }
.lib-action-delete:hover {
    background: rgba(239,68,68,0.18) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
    opacity: 1 !important;
}

.vault-cb{width:16px;height:16px;accent-color:var(--brand-gold);}
.vault-row-selected{background:rgba(183,151,96,0.10);}
.vault-row--failed { background: var(--bg-danger-soft); }
.vault-row--failed:hover { background: var(--bg-danger-soft-hover); }
/* Bulk action floating bar */
.vault-bulk-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:10px 16px;display:flex;align-items:center;gap:16px;box-shadow:0 4px 20px rgba(0,0,0,0.18);z-index:1000;white-space:nowrap;color:var(--card-text);}
.vault-bulk-label{font-size:13px;font-weight:600;color:var(--card-text);}
.vault-bulk-delete-btn{background:var(--danger);color:#fff;border:none;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity 0.12s;}
.vault-bulk-delete-btn:hover{opacity:0.88;}
/* Delete confirmation modal */
.vault-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;}
.vault-modal{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;padding:28px;max-width:440px;width:100%;position:relative;box-shadow:0 8px 40px rgba(0,0,0,0.22);color:var(--card-text);}
.vault-modal-close{position:absolute;top:12px;right:12px;background:none;border:1px solid var(--card-border);border-radius:8px;padding:4px 6px;cursor:pointer;color:var(--card-text-muted);transition:all 0.12s;line-height:0;}
.vault-modal-close:hover{background:var(--card-bg-hover);color:var(--card-text);}
.vault-modal-body{text-align:center;padding:8px 0 16px;}
.vault-modal-icon{margin-bottom:12px;color:var(--danger);}
.vault-modal-title{font-size:18px;font-weight:700;color:var(--card-text);margin:0 0 8px;}
.vault-modal-desc{font-size:14px;color:var(--card-text-muted);margin:0;line-height:1.5;}
.vault-modal-footer{display:flex;gap:10px;justify-content:flex-end;}
.vault-modal-confirm-btn{background:var(--danger);color:#fff;border:none;border-radius:8px;padding:8px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity 0.12s;}
.vault-modal-confirm-btn:hover{opacity:0.88;}
@media(max-width:900px){.vault-layout{flex-direction:column;}.vault-sidebar{width:100%;}}

/* Legacy aliases for backward compat — v3.1 routes --primary through brand gold
   so EVERY consumer of var(--primary) across the app (buttons, badges, accents)
   adopts the brand standard in one place. */
:root, [data-theme="light"] {
    --bg-card: var(--bg-elevated);
    --bg-input: var(--input-bg);
    --primary: var(--btn-primary-bg);              /* gold — was teal */
    --primary-hover: var(--brand-gold-light);
    --primary-active: var(--brand-gold-dark);
    --text-main: var(--text-primary);
    --text-faint: var(--text-disabled);
    --border-highlight: var(--border-subtle);
    --error: var(--danger);
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background-color: var(--bg-main);
    color: var(--text-primary);
}
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s, color 0.2s;
}

/* Anti-flash now handled by inline <style> in index.html <head> — html bg is set
   during HTML tokenization (before first paint), so app-container can render
   normally without extra visibility/opacity tricks. */

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

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

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

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

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* --- Layout --- */
.app-container {
    display: flex;
    position: fixed;
    inset: 0;
    overflow: hidden;
    background-color: var(--bg-main);
}

.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    z-index: 50;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.2s ease, min-width 0.2s ease, background-color 0.2s, border-color 0.2s;
    min-width: var(--sidebar-width);
}

/* Sidebar fully hidden — toggled by header hamburger button (Olympus-style).
   Main content expands to full width. State persists via localStorage. */
.app-container.sidebar-hidden .sidebar {
    width: 0 !important;
    min-width: 0 !important;
    border-right: none;
}

/* Sidebar toggle button in header — X when sidebar visible, hamburger when hidden */
.sidebar-toggle {
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-on-navy);
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
}
.sidebar-toggle:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--brand-gold);
    color: var(--brand-gold);
}
.sidebar-toggle:active {
    transform: scale(0.95);
}
/* Default: X icon visible, hamburger hidden (sidebar is open) */
.sidebar-toggle .sidebar-toggle-icon-x { display: block; }
.sidebar-toggle .sidebar-toggle-icon-menu { display: none; }
/* When sidebar is hidden: hamburger visible, X hidden */
.app-container.sidebar-hidden .sidebar-toggle .sidebar-toggle-icon-x { display: none; }
.app-container.sidebar-hidden .sidebar-toggle .sidebar-toggle-icon-menu { display: block; }

/* Sidebar Collapsed State */
.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
}

/* Hide text labels and secondary sections when collapsed */
.sidebar.collapsed .sidebar-header .logo-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-btn span:not(.icon),
.sidebar.collapsed .case-badge,
.sidebar.collapsed .case-chip,
.sidebar.collapsed .history-list,
.sidebar.collapsed .toolbox-sub-items,
.sidebar.collapsed .lobby-chats-items,
.sidebar.collapsed .search-bar,
.sidebar.collapsed .nav-section--case-selector,
.sidebar.collapsed .onboarding-card {
    display: none !important;
}

/* Show collapsed home button */
.sidebar.collapsed .collapsed-home-btn {
    display: flex !important;
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

/* Remove sub-group dividers/margins inside collapsed tool sections */
.sidebar.collapsed .nav-section div[style*="border-top"] {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Collapsed header: logo + toggle stacked vertically */
.sidebar.collapsed .sidebar-header {
    padding: 0.75rem 0 0.5rem;
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.25rem !important;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}

.sidebar.collapsed .sidebar-header .logo {
    justify-content: center;
}

.sidebar.collapsed .sidebar-header .logo svg {
    width: 28px !important;
    height: 28px !important;
}

/* Collapsed toggle: subtle inline chevron */
.sidebar.collapsed .sidebar-toggle-btn {
    width: 32px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    font-size: 0.55rem !important;
    opacity: 0.3;
    position: static !important;
    margin: 0 auto;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.sidebar.collapsed:hover .sidebar-toggle-btn {
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Collapsed nav: centered icon column */
.sidebar.collapsed .sidebar-nav {
    align-items: center;
    padding: 0 0.5rem;
    gap: 0.125rem;
}

.sidebar.collapsed .nav-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Collapsed nav buttons: clean icon pills with tooltips */
.sidebar.collapsed .nav-btn {
    justify-content: center;
    padding: 0.5rem;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    margin: 1px 0;
    transition: all 0.15s ease;
    font-size: 0;
    overflow: visible;
    position: relative;
}

.sidebar.collapsed .nav-btn:hover {
    background: var(--bg-hover);
    transform: none;
}

/* Tooltip on hover for collapsed nav buttons */
.sidebar.collapsed .nav-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 200;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.sidebar.collapsed .nav-btn:hover::after {
    opacity: 1;
}

/* Tooltip for collapsed footer icons */
.sidebar.collapsed .sidebar-footer span::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 200;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.sidebar.collapsed .sidebar-footer span {
    position: relative;
}

.sidebar.collapsed .sidebar-footer span:hover::after {
    opacity: 1;
}

.sidebar.collapsed .nav-btn.active {
    background: var(--bg-active) !important;
    border-color: transparent !important;
}

.sidebar.collapsed .nav-btn .icon {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1;
}

/* Tighten up inner button containers when collapsed */
.sidebar.collapsed .nav-section > div {
    gap: 0.125rem !important;
    align-items: center;
}

/* Collapsed nav-section dividers — subtle lines per reference */
.sidebar.collapsed .nav-section + .nav-section {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

/* Collapsed footer: centered, subtle */
.sidebar.collapsed .sidebar-footer {
    padding: 0.5rem 0 !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.sidebar.collapsed .sidebar-footer span {
    width: 32px;
    height: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem !important;
    transition: background 0.15s ease;
}

.sidebar.collapsed .sidebar-footer span:hover {
    background: var(--bg-hover);
}

.sidebar-footer {
    flex-shrink: 0;
}

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    transition: all 0.2s ease;
    opacity: 0.3;
    flex-shrink: 0;
}

.sidebar:hover .sidebar-toggle-btn {
    opacity: 0.7;
}

.sidebar-toggle-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    opacity: 1 !important;
}

/* Login Page — Split Layout */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    background: var(--bg-deepest);
    animation: fadeIn 0.3s ease;
}

.login-page {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Left: Brand panel */
.login-brand {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 30% 50%, var(--bg-elevated) 0%, var(--bg-deepest) 80%);
    border-right: 1px solid var(--border);
    padding: 3rem;
}

.login-brand-content {
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 2.10.9 — brand mark on the login left panel. clamp() so the icon stays
   proportional to the viewport: floor 120px, target 14vw, ceiling 200px.
   At a 1440px-wide screen that's ~200px; on a smaller laptop ~140-180px. */
.login-brand-mark {
    width: clamp(120px, 14vw, 200px);
    height: auto;
    margin-bottom: 1rem;
    display: block;
}

.login-brand-title {
    font-size: 3.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0.25rem 0 0.5rem;
    letter-spacing: -0.025em;
    line-height: 1;
}

.login-brand-tagline {
    font-size: 1.1rem;
    color: var(--brand-gold-soft);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.login-brand-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-brand-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--brand-gold-soft);
}

.login-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(183, 151, 96, 0.2);
    flex-shrink: 0;
}

/* Right: Form panel */
.login-form-panel {
    flex: 1;
    display: flex;
    /* safe center = center vertically, but FALL BACK to flex-start when content
       overflows. Fixes the sign-up form (taller than viewport) running off the
       top because plain `center` pushed half the form above the scroll origin. */
    align-items: safe center;
    justify-content: center;
    overflow-y: auto;
    padding: 2rem;
    background: var(--bg-deepest);
}

.login-card {
    background: var(--bg-elevated);
    padding: 2rem 2.5rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.login-logo {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

/* 2.10.9 — brand mark above the wordmark in the right-side form card.
   96px display fills the 400px-max-width card without dominating. */
.login-card-mark {
    width: 96px;
    height: 96px;
    display: block;
    margin: 0 auto 0.5rem;
}

.login-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

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

.login-form .form-group {
    margin-bottom: 1rem;
    text-align: left;
}

.login-form label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.login-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.login-btn {
    width: 100%;
    padding: 0.75rem;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 0.5rem;
    transition: opacity 0.2s, transform 0.1s;
}

.login-btn:hover {
    opacity: 0.9;
}

.error-msg {
    color: var(--error);
    font-size: 0.85rem;
    margin-top: 1rem;
    display: none;
}

/* --- OAuth SSO Buttons --- */
.login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.oauth-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}
.oauth-btn svg {
    flex-shrink: 0;
}

/* --- Account Action Links (Settings) --- */
.pref-account-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    font-family: inherit;
}
.pref-account-link:hover { background: var(--bg-hover); }
.pref-account-link.pref-logout { color: var(--danger); }
.pref-account-link.pref-logout:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.pref-link-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Toggle Switch (Settings) --- */
.pref-switch {
    position: relative;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}
.pref-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.pref-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 11px;
    background: var(--switch-track, var(--border));
    transition: background 0.2s;
    cursor: pointer;
}
.pref-switch-track::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--switch-knob, #fff);
    transition: all 0.2s;
}
.pref-switch input:checked + .pref-switch-track {
    background: var(--btn-primary-bg);
}
.pref-switch input:checked + .pref-switch-track::after {
    transform: translateX(16px);
    background: #fff;
}
.pref-switch input:focus-visible + .pref-switch-track {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* --- Frequency Pill Selector (Settings > Notifications) --- */
.pref-freq-pills {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.pref-freq-pill {
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.pref-freq-pill:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.pref-freq-pill.active {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

/* --- Select Dropdown (Settings) --- */
.pref-select {
    background: var(--select-bg, var(--panel-bg));
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pref-select:hover { border-color: var(--text-muted); }
.pref-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.pref-select option { background: var(--panel-bg); color: var(--text-primary); }

/* --- Theme Toggle Group (Settings) --- */
.theme-toggle-group {
    display: flex;
    gap: 4px;
    padding: 4px 10px;
    background: var(--border-subtle, var(--bg-deepest, rgba(0,0,0,.15)));
    border-radius: 8px;
    border: 1px solid var(--border);
    margin: 0 10px;
}
.theme-toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
}
.theme-toggle-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.theme-toggle-btn.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
    box-shadow: 0 2px 8px rgba(5, 25, 58, 0.2);
}

/* --- Header Theme Picker Dropdown --- */
.theme-picker-wrap {
    position: relative;
}
.theme-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.theme-picker-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--panel-bg));
}
.theme-picker-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    min-width: 150px;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    color: var(--text-primary);
}
.theme-picker-menu.open {
    display: block;
}
.theme-picker-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: 7px;
    background: none;
    color: inherit;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
    opacity: 1;
}
.theme-picker-opt:hover {
    background: var(--bg-hover);
}
.theme-picker-opt.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.theme-picker-opt svg {
    opacity: 0.8;
    flex-shrink: 0;
}

/* --- Change Password Modal --- */
.cpw-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    backdrop-filter: blur(12px);
}
.cpw-panel {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 360px;
    max-width: 92vw;
    padding: 20px;
    box-shadow: var(--shadow);
}
.cpw-panel h3 {
    margin: 0 0 16px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.cpw-panel .pref-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-primary);
    background: var(--input-bg, var(--panel-bg));
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cpw-panel .pref-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.cpw-msg {
    font-size: 0.75rem;
    min-height: 1.1em;
    margin-bottom: 8px;
}
.cpw-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
.cpw-actions button {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.cpw-cancel {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.cpw-cancel:hover { background: var(--bg-hover); }
.cpw-submit {
    background: var(--btn-primary-bg);
    border: none;
    color: var(--btn-primary-text);
}
.cpw-submit:hover { opacity: 0.9; }

/* --- Practice Setup Wizard (Practitioner Memory WS4 — #2741) --- */
.pw-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    backdrop-filter: blur(12px);
    padding: 16px;
}
.pw-panel {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 440px;
    max-width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: var(--shadow);
}
.pw-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.pw-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.pw-panel h3 {
    margin: 0 28px 6px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}
.pw-sub {
    margin: 0 0 18px 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.pw-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.pw-field { display: flex; flex-direction: column; gap: 5px; }
.pw-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}
.pw-field-hint {
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--text-muted);
}
.pw-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 70px;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-primary);
    background: var(--input-bg, var(--panel-bg));
    outline: none;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pw-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.pw-msg {
    font-size: 0.75rem;
    min-height: 1.1em;
    margin: 8px 0 4px 0;
    color: var(--text-muted);
}
.pw-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}
.pw-actions button {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.pw-skip {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.pw-skip:hover { background: var(--bg-hover); color: var(--text-primary); }
.pw-save {
    background: var(--btn-primary-bg);
    border: none;
    color: var(--btn-primary-text);
}
.pw-save:hover { opacity: 0.9; }
.pw-save:disabled { opacity: 0.6; cursor: default; }

/* --- Linked Accounts (Settings) --- */
.linked-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}
.linked-account-row:hover { background: var(--bg-hover); }
.linked-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-hover);
    color: var(--accent-text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.linked-connect-btn {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.linked-connect-btn:hover {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

.sidebar-header {
    padding: 16px 16px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: padding 0.2s ease;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 16px 0 12px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-main);
    letter-spacing: -0.02em;
    transition: all 0.2s ease;
}

.logo svg {
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* v3 Logo */
.sb-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
/* Sidebar mark — sized to comfortably fill the header. Icon and wordmark
   share visual weight: 44px square mark + 22px wordmark, gap 12px. The
   image variant below overrides width/height for the <img> child. */
.sb-logo-icon {
    width: 44px;
    height: 44px;
    background: var(--logo-bg);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--logo-text);
    font-size: 20px;
    font-weight: 800;
    flex-shrink: 0;
}
/* Image variant of the sidebar mark — drop the gold square so the brand
   PNG's own design + transparency render cleanly. The 10px radius is kept
   via overflow:hidden so the image inherits the rounded corners. */
.sb-logo-icon--img {
    background: transparent;
    overflow: hidden;
    padding: 0;
}
.sb-logo-icon--img img {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
}
.sb-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: var(--logo-wordmark);
    letter-spacing: -0.01em;
    line-height: 1;
}

/* User Avatar + Dropdown */
.user-avatar-wrap {
    position: relative;
}
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.user-avatar:hover {
    opacity: 0.85;
}
.user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1000;
}
.user-menu.open {
    display: block;
}
.user-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
}
.user-menu button:hover {
    background: var(--bg-hover);
}
.user-menu button.user-menu-danger {
    color: var(--danger);
}
.user-menu button.user-menu-danger:hover {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    gap: 0;
    overflow-y: auto;
}

.sidebar.collapsed .sidebar-content {
    padding: 0 6px;
}

.section-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-disabled);
    font-weight: 600;
    margin-bottom: 0;
    display: block;
    letter-spacing: 0.06em;
}

/* Sidebar nav-label: 10px uppercase section headers per reference */
.nav-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-disabled);
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 12px 12px 6px;
    display: block;
}

.case-selector input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.75rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px;
}

.nav-section {
    display: flex;
    flex-direction: column;
    padding-bottom: 4px;
}

.nav-section + .nav-section {
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

/* ── Collapsible nav groups ── */
.nav-group {
    display: flex;
    flex-direction: column;
}

.nav-group + .nav-group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

.nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-disabled);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-group-header:hover {
    color: var(--text-muted);
}

.nav-group-chevron {
    font-size: 8px;
    transition: transform 0.2s ease;
    line-height: 1;
}

.nav-group-header[aria-expanded="false"] .nav-group-chevron {
    transform: rotate(-90deg);
}

.nav-group-items {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: max-height 0.2s ease, opacity 0.15s ease;
    max-height: 500px;
    opacity: 1;
}

.nav-group.collapsed .nav-group-items {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Hide group headers + chevrons when sidebar is icon-collapsed */
.sidebar.collapsed .nav-group-header {
    display: none;
}

/* In collapsed sidebar, show nav-group-items as flat icon list */
.sidebar.collapsed .nav-group-items {
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.sidebar.collapsed .nav-group + .nav-group {
    margin-top: 2px;
    padding-top: 2px;
}

.sidebar.collapsed .sidebar-nav {
    padding: 0 6px;
    align-items: center;
}

.case-badge {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.status-dot {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-btn);
    background: transparent;
    border: none;
    color: var(--nav-text);
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    width: 100%;
    transition: all 0.15s ease;
    font-family: inherit;
}

.nav-btn:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-active-text);
}

.nav-btn.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    font-weight: 600;
}

.nav-btn .icon {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.nav-btn.active .icon {
    opacity: 1;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--bg-active);
    color: var(--primary);
    font-weight: 500;
    border-color: var(--accent-glow);
}

.nav-item .icon {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-section.grow {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.conversation-item {
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversation-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.conversation-item.active {
    background: var(--bg-card);
    color: var(--text-primary);
}

.delete-btn {
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

.conversation-item:hover .delete-btn {
    opacity: 1;
}

.delete-btn:hover {
    color: var(--error);
}


/* Main Pane */
.main-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--bg-main);
    overflow: hidden;
}

/* Header & Mobile Styling */
.mobile-header {
    display: none;
    /* Hidden on Desktop */
    padding: 1rem;
    background: var(--bg-sidebar);
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.mobile-menu {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
}

.mobile-menu.open {
    display: block;
}

.mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: var(--bg-sidebar);
    padding: 1rem;
    z-index: 201;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.5);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Chat View */
/* Chat View - Claude-inspired Layout */
.view-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Center the content track */
.chat-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* --- Empty chat: centered greeting + input (Claude.ai style) --- */
.chat-area--empty {
    justify-content: center;
}

.chat-area--empty .chat-top-bar {
    display: none;
}

.chat-area--empty .chat-messages {
    flex: 0 0 auto;
    overflow: visible;
    justify-content: flex-end;
}

/* Scrollable messages region */
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    scroll-behavior: smooth;
    position: relative;
}


.chat-messages > .message {
    padding-left: 24px;
    padding-right: 24px;
}

/* Message Container — Flat, no bubbles (per reference) */
.message {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0 auto;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.message:last-child {
    border-bottom: none;
}

/* Both user and assistant: left-aligned, flat */
.message.user,
.message.assistant {
    align-items: flex-start;
}

/* Message header: avatar + name + timestamp inline */
.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.message-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

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

.message.assistant .message-avatar {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(45, 212, 191, 0.07));
    border: 1px solid rgba(45, 212, 191, 0.27);
}

.message-sender {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

/* AI persona names get their persona color via inline style */
.message.assistant .message-sender {
    color: var(--primary);
}

.message-time {
    font-size: 11px;
    color: var(--text-disabled);
    opacity: 0;
    transition: opacity 0.15s ease;
}

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

/* Legacy label (hidden, replaced by message-header) */
.message-label {
    display: none;
}

/* Message content — no bubble, flat, indented 32px */
.message-content {
    padding: 0 0 0 32px;
    border-radius: 0;
    background: transparent;
    max-width: 100%;
    line-height: 1.7;
    font-size: 14px;
    color: var(--text-secondary);
    border: none;
}

.message-content p {
    margin-bottom: 0.75rem;
}

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

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

.message-content h3 {
    font-size: 1.1rem;
}

.message-content ul,
.message-content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    display: block;
}

.message-content ul {
    list-style-type: disc;
}

.message-content ol {
    list-style-type: decimal;
}

.message-content li {
    margin-bottom: 0.25rem;
    line-height: 1.6;
}

.message-content strong {
    font-weight: 700;
    color: var(--strong-text);
}

.message-content code {
    background: var(--code-bg);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
    color: var(--code-text);
}

.message-content pre {
    background: var(--code-bg);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.message-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* Citation verification warning banner (#1372) */
.citation-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    margin-left: 32px;
    padding: 7px 10px;
    border-left: 3px solid var(--color-amber, #f59e0b);
    border-radius: 0 4px 4px 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.5;
    opacity: 0.85;
}

/* Remove all bubble styling from user/assistant */
.message.user .message-content,
.message.assistant .message-content {
    background: transparent;
    border: none;
    border-radius: 0;
    max-width: 100%;
    color: var(--text-main);
}

/* Long message compaction — high specificity to survive cascade */
.message .message-content.is-collapsed {
    max-height: 300px !important;
    overflow: hidden !important;
    position: relative;
}

.message .message-content.is-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--bg-main));
    pointer-events: none;
    z-index: 1;
}

.message-expand-toggle {
    display: inline-block;
    margin: 0.25rem 0 0 32px;
    padding: 0;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}

.message-expand-toggle:hover {
    text-decoration: underline;
}

/* Sources - Compact */
.sources {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
}

.sources-label {
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.source-item {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
    border-radius: 4px;
    transition: background 0.15s;
}

.source-clickable:hover {
    background: var(--bg-active);
}

.source-item:last-child {
    border-bottom: none;
}

.source-ref {
    color: var(--accent);
    font-weight: 600;
    margin-right: 0.25rem;
}

.source-page {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.source-sim {
    color: var(--text-muted);
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Input Area (per reference) */
.chat-input-wrapper {
    flex-shrink: 0;
    padding: 12px 24px 12px;
    background: transparent;
    width: 100%;
    margin: 0 auto;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floating container: persona bar + input */
.chat-input-floating {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 0;
    transition: border-color 0.2s, background-color 0.2s;
}

.chat-input-floating:focus-within {
    border-color: rgba(45, 212, 191, 0.25);
}

.input-pill-container {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 16px 8px;
    display: flex;
    align-items: center;
    gap: 0;
    box-shadow: none;
}

.input-pill-container:focus-within {
    border-color: transparent;
    box-shadow: none;
}

/* Input footer / disclaimer */
.input-footer {
    text-align: center;
    font-size: 11px;
    color: var(--text-disabled);
    padding: 4px 0 0 0;
    letter-spacing: 0.01em;
}

/* Chat Top Bar */
.chat-top-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    min-height: 40px;
}

/* Welcome Message */
.welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 600px;
    margin: auto;
}

/* Persona selector bar — circular avatar buttons per reference */
.persona-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px 0;
    overflow-x: auto;
    margin-bottom: 0;
}

.persona-selector-wrapper::-webkit-scrollbar {
    display: none;
}

/* Circular persona avatar button */
.persona-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    opacity: 0.5;
    flex-shrink: 0;
}

.persona-icon:hover {
    opacity: 0.8;
}

.persona-icon.active {
    opacity: 1;
    /* border-color and background set via inline style per persona color */
}

/* Tools Toggle Button */
.tools-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.tools-toggle-btn:hover {
    background: var(--text-muted);
    color: var(--bg-main);
}

.tools-btn-wrap {
    position: relative;
    flex-shrink: 0;
}

/* Floating Tools Menu — fixed to viewport to escape overflow:hidden ancestors */
.tools-menu {
    position: fixed;
    bottom: auto;
    left: auto;
    margin-bottom: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-highlight);
    border-radius: 12px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    min-width: 200px;
}

.tools-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.tool-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-main);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
    transition: background 0.1s;
}

.tool-item:hover {
    background: var(--bg-input);
}

/* Chat Image Preview Strip */
.chat-image-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    border-radius: 12px 12px 0 0;
}

.chat-image-preview .preview-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.chat-image-preview .preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chat-image-preview .preview-filename {
    font-size: 0.82rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-image-preview .preview-size {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg-main);
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.chat-image-preview .preview-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--bg-main);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.15s;
    flex-shrink: 0;
}

.chat-image-preview .preview-remove:hover {
    background: var(--danger);
    color: white;
}

/* Chat drop zone highlight */
.chat-input-wrapper.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    background: rgba(45, 212, 191, 0.05);
}

/* Textarea */
.chat-textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-main);
    resize: none;
    min-height: 24px;
    max-height: 200px;
    overflow-y: auto;
    font-family: inherit;
    font-size: 14px;
    padding: 0.5rem 0;
    line-height: 1.5;
}

.chat-textarea:focus {
    outline: none;
}

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

/* Microphone Dictation Button */
.mic-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--text-muted);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

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

.mic-btn.recording {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1.5px solid rgba(239, 68, 68, 0.5);
    animation: mic-pulse 1.5s ease-in-out infinite;
}

@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.mic-btn.processing {
    opacity: 0.6;
    pointer-events: none;
    animation: mic-processing 1s ease-in-out infinite;
}

@keyframes mic-processing {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Evaluate button — triggers ORCHESTRATE:case_eval */
.evaluate-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.evaluate-btn:hover:not(:disabled) {
    background: var(--bg-active, var(--bg-hover));
}

.evaluate-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Dictation polishing state — dims input while Gemini adds punctuation */
.chat-textarea.dictation-polishing {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.chat-textarea:not(.dictation-polishing) {
    transition: opacity 0.3s ease;
}

/* Pulsing interim indicator while speech-to-text is listening */
.chat-textarea.has-dictation-interim {
    animation: dictation-pulse 1.2s ease-in-out infinite;
}

/* Per-message Copy Button */
.copy-msg-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.2s ease, background 0.15s ease;
}

.message:hover .copy-msg-btn {
    opacity: 1;
}

.copy-msg-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}

.copy-msg-btn.copied {
    color: #22c55e;
}

/* Send Button — purple when text present, gray when empty */
.send-btn-pill {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--text-disabled);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.send-btn-pill.has-text {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    cursor: pointer;
}

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

/* Drawer */
.drawer {
    position: absolute;
    top: 0;
    right: 0;
    top: 0;
    right: 0;
    width: 450px;
    display: none;
    /* HOTFIX: Hide by default to prevent clipping */
    /* Slightly wider for documents */
    height: 100%;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.5);
}

.drawer.open {
    display: flex;
    /* Display when open */
    transform: translateX(0);
}

.drawer-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: var(--border-subtle);
    /* Subtle highlight */
}

.drawer-content {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
}

.upload-zone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 3rem 1rem;
    text-align: center;
    background: var(--border-subtle);
    cursor: pointer;
    transition: all 0.2s;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.drawer-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Feature Lab */
.lab-container {
    padding: 2rem;
    overflow-y: auto;
}

.lab-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
}

/* --- Premium Button System --- */
.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1.4;
}

/* Primary (Brand) */
.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 6px -1px var(--accent-glow);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 10px -2px var(--accent-glow);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Secondary buttons — gold by default per brand standard */
.btn-secondary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 1px solid var(--btn-primary-bg);
}

.btn-secondary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Size Variants — see .btn-sm below (Phase 2 block) */

/* Status Messages */
.status-message {
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.status-message.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.status-message.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.status-message.loading {
    background: var(--bg-hover);
    color: var(--primary);
}

/* Icons */
.icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
}

.icon-btn:hover {
    color: var(--text-primary);
}

/* --- Ask Lox Button (Calculator AI helper) --- */
.ask-lox-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--btn-primary-bg);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    height: 24px;
}

.ask-lox-btn img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
}

.ask-lox-btn:hover {
    opacity: 0.9;
    box-shadow: 0 2px 4px rgba(183,151,96,0.3);
}

/* --- Info Tip (hover tooltip) --- */
.info-tip {
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: help;
    position: relative;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.info-tip:hover {
    opacity: 1;
    color: var(--primary);
}

.info-tip:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-sidebar);
    color: var(--text-main);
    font-size: 0.72rem;
    line-height: 1.4;
    border-radius: 6px;
    border: 1px solid var(--border-highlight);
    white-space: normal;
    width: 200px;
    z-index: 100;
    pointer-events: none;
    box-shadow: var(--shadow);
}

/* Mobile Queries */
@media (max-width: 768px) {

    .sidebar,
    .sidebar-toggle-btn {
        display: none;
    }

    .mobile-header {
        display: flex;
    }

    .logo-mobile {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        font-size: 1.1rem;
    }

    .drawer {
        width: 100%;
    }

    .chat-messages {
        padding: 0.75rem;
    }

    .chat-input-wrapper {
        padding: 0 0.75rem;
        padding-bottom: 1rem;
        max-width: 100%;
        position: relative;
        z-index: 10;
    }

    .message {
        max-width: 100%;
    }
}

/* Tablet/Laptop Scaling for Dashboard */
@media (max-width: 1280px) {

    /* Increased breakpoint to catch common laptop screens */
    .dash-grid {
        grid-template-columns: 1fr !important;
        /* Stack panels vertical */
        gap: 1rem;
    }

    .dashboard-container {
        padding: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Large Screen Optimization */
@media (min-width: 1600px) {
    .dashboard-container {
        max-width: 1600px;
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Component: Agent Capabilities Row (Production) */
.agent-team-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: center;
}

.agent-team-row::-webkit-scrollbar {
    display: none;
}

.agent-icon-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    /* Pill Shape */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.agent-icon-btn span:first-child {
    font-size: 1.1rem;
    /* Slightly larger emoji */
}

.agent-icon-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.agent-icon-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- Dashboard Polish (Added via Agent) --- */

.dash-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

/* ============================================================
   TOOL PAGE TEMPLATE
   Every toolbox tool (Calculator, Lien Waterfall, Scenario Compare,
   future tools…) reuses this card pattern. Just wrap content in
   .page-body > .dash-panel and inherit consistent v3 brand styling.
   ============================================================ */
.dash-panel {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 16px;
    padding: 0;
    box-shadow: var(--card-shadow);
    color: var(--card-text);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Inputs/selects/textareas inside ANY tool-page card pick up card-bg-hover —
   darker beige in light, darker navy in dark. !important beats inline JS styles. */
.dash-panel input, .dash-panel select, .dash-panel textarea {
    background: var(--card-bg-hover) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--card-text) !important;
}
.dash-panel input::placeholder, .dash-panel textarea::placeholder { color: var(--card-text-muted) !important; }
.dash-panel input:focus, .dash-panel select:focus, .dash-panel textarea:focus { border-color: var(--brand-gold) !important; }

/* Card titles and body text use card tokens */
.dash-panel h3 { color: var(--card-text) !important; }
.dash-panel label { color: var(--card-text-muted) !important; }

/* Panel Header */
.panel-header {
    background: var(--card-bg-hover) !important;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--card-border) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--card-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.panel-body {
    padding: 1.5rem;
    flex: 1;
    background: transparent;
}

.panel-footer {
    background: var(--card-bg-hover) !important;
    border-top: 1px solid var(--card-border) !important;
}

/* Table Polish */
.ledger-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ledger-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    background: var(--code-bg);
}

.ledger-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    /* ultra subtle row line */
    transition: background 0.1s;
    vertical-align: middle;
}

.ledger-table tr:last-child td {
    border-bottom: none;
}

.ledger-table tr:hover td {
    background: var(--border-subtle);
}

.table-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-main);
    width: 100%;
    padding: 0.4rem 0.6rem;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 0.9rem;
}

.table-input:hover {
    background: var(--bg-hover);
}

.table-input:focus {
    background: var(--bg-input);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    outline: none;
}

.icon-btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
}

/* Polished Inputs */
.input-dark {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    transition: all 0.2s;
    /* Large numbers for calculator */
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* Upload Zone Drag & Drop */
.drag-over {
    border-color: var(--primary) !important;
    background: var(--bg-hover) !important;
    transform: scale(1.02);
}

.input-dark:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--accent-glow);
    /* primary ring */
    background: var(--code-bg);
    outline: none;
}

/* Range Slider Polish */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 0.5rem 0;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0 0 0 4px var(--bg-card);
    /* Stroke effect via shadow */
    transition: transform 0.1s;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: var(--primary-hover);
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: var(--bg-input);
    border-radius: 2px;
}

/* Result Card Glow */
.result-card {
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.05);
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
}

.result-card .value {
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
}

/* Floating Label/Value pairs for sliders */
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.slider-val {
    font-weight: 600;
    font-feature-settings: "tnum";
    background: var(--bg-hover);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* --- Modal System (Router) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--overlay-bg);
    /* Slightly clearer than login */
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: none;
    /* Toggled by JS */
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: var(--bg-card);
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    border: 1px solid var(--border-highlight);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: var(--border-subtle);
}

/* --- FE-SEC-004: Idle Warning Modal --- */
.idle-warning-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.idle-warning-box {
    background: var(--bg-card);
    border: 1px solid var(--border-highlight);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    text-align: center;
    animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.idle-warning-box h3 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.idle-warning-box p {
    margin: 0 0 1.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.idle-warning-box #idle-countdown {
    font-weight: 700;
    color: var(--color-amber, var(--warning, #f59e0b));
}

.idle-warning-actions {
    display: flex;
    justify-content: center;
}

.idle-stay-btn {
    padding: 0.65rem 2rem;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.idle-stay-btn:hover {
    background: var(--accent-hover);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== Shared Page Layout ===== */
.page-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    height: 100%;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .page-body { padding: 1.5rem; }
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.page-header .page-subtitle {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

/* --- Work Queue — Paralegal Command Center --- */
.wq-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.wq-header-left { display:flex; flex-direction:column; gap:2px; }
.wq-header-actions { display:flex; align-items:center; gap:8px; }
/* Top action buttons (Upload, Ask AI) — gold by default per brand standard */
.wq-topbtn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:8px; border:1px solid var(--btn-primary-bg); background:var(--btn-primary-bg); font-family:inherit; font-size:0.78rem; font-weight:600; color:var(--btn-primary-text); cursor:pointer; transition:all 0.12s; white-space:nowrap; }
.wq-topbtn:hover { opacity:0.9; }
.wq-topbtn.primary { background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:var(--btn-primary-bg); }
.wq-topbtn.primary:hover { opacity:0.9; }

/* Summary strip */
.wq-summary { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:16px; }
.wq-ss-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:12px 14px; position:relative; overflow:hidden; box-shadow: var(--card-shadow); color: var(--card-text); transition: all 0.2s ease; }
.wq-ss-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.wq-ss-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.wq-ss-card.ss-tasks::before { background:var(--accent); }
.wq-ss-card.ss-overdue::before { background:var(--danger); }
.wq-ss-card.ss-week::before { background:var(--warning); }
.wq-ss-card.ss-hours::before { background:var(--color-blue); }
.wq-ss-card.ss-docs::before { background:var(--color-purple); }
/* Warm tinted backgrounds on Work Queue stat cards */
/* Per-variant background tints removed — KPI cards share one card-bg per overview standard.
   The colored top stripe (::before) still differentiates them. */
.wq-ss-val { font-size:1.5rem; font-weight:800; line-height:1; }
.wq-ss-label { font-size:0.65rem; font-weight:600; color:var(--card-label); margin-top:4px; text-transform:uppercase; letter-spacing:0.3px; }

/* Tab navigation */
.wq-tabs { display:flex; gap:0; border-bottom:2px solid var(--card-border); margin-bottom:16px; }
.wq-tab { background:none; border:none; padding:10px 20px; font-size:0.85rem; font-weight:600; color:var(--card-text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color 0.15s, border-color 0.15s; }
.wq-tab:hover { color:var(--card-text); }
.wq-tab.active { color:var(--brand-gold); border-bottom-color:var(--brand-gold); }

/* Tab panels */
.wq-tab-panel { display:none; }
.wq-tab-panel.active { display:block; }

.wq-content { transition:margin-right 0.3s ease; }
.wq-content.chat-open { margin-right:380px; }

/* Card */
.wq-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; overflow:hidden; margin-bottom:14px; box-shadow: var(--card-shadow); color: var(--card-text); transition: box-shadow 0.2s ease; }
.wq-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.wq-card-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--card-border); }
.wq-card-title { font-size:0.85rem; font-weight:700; color:var(--card-text); }
.wq-tooltip-wrap:hover .wq-tooltip-text { opacity:1 !important; pointer-events:auto !important; }
.wq-card-sub { font-size:0.7rem; color:var(--card-text-muted); margin-top:1px; }
.wq-card-body { padding:12px 16px; }
.wq-card-body.scroll { max-height:calc(100vh - 420px); overflow-y:auto; }
/* All wq-* buttons default to gold per brand standard */
.wq-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:7px; font-family:inherit; font-size:0.72rem; font-weight:600; cursor:pointer; border:1px solid var(--btn-primary-bg); background:var(--btn-primary-bg); color:var(--btn-primary-text); transition:all 0.12s; white-space:nowrap; }
.wq-btn:hover { opacity:0.9; }
.wq-btn-primary { background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:var(--btn-primary-bg); }
.wq-btn-primary:hover { opacity:0.9; }
.wq-btn-ghost { background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:var(--btn-primary-bg); }
.wq-btn-ghost:hover { opacity:0.9; }

/* Task filters */
.wq-task-filters { display:flex; gap:2px; background:rgba(0,0,0,0.10); border-radius:8px; padding:3px; margin-bottom:10px; }
[data-theme="light"] .wq-task-filters { background: rgba(5,25,58,0.05); }
.wq-ftab { flex:1; text-align:center; padding:5px 8px; border-radius:6px; font-size:0.72rem; font-weight:600; color:var(--card-text-muted); cursor:pointer; transition:all 0.12s; border:none; background:transparent; font-family:inherit; }
.wq-ftab:hover { color:var(--card-text); }
.wq-ftab.active { background:var(--btn-primary-bg); color:var(--btn-primary-text); box-shadow:0 1px 3px rgba(0,0,0,0.15); }

/* Task item */
.wq-task-item { display:flex; align-items:flex-start; gap:8px; padding:9px 0; border-bottom:1px solid var(--card-border); cursor:pointer; transition:background 0.08s; }
.wq-task-item:last-child { border-bottom:none; }
.wq-t-pri { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:6px; }
.wq-t-pri.high { background:var(--danger); }
.wq-t-pri.med { background:var(--warning); }
.wq-t-pri.low { background:var(--color-blue, #3B82F6); }
.wq-t-check { width:18px; height:18px; border:2px solid var(--card-border); border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.12s; margin-top:2px; font-size:10px; color:transparent; }
.wq-t-check:hover { border-color:var(--brand-gold); background:var(--card-bg-hover); }
.wq-t-check.wip { border-color:var(--color-purple, #6366f1); background:var(--badge-purple-bg, rgba(99,102,241,0.1)); color:var(--color-purple, #6366f1); }
.wq-t-check.done { background:var(--success); border-color:var(--success); color:#fff; }
.wq-t-body { flex:1; min-width:0; }
.wq-t-name { font-size:0.82rem; font-weight:600; color:var(--card-text); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wq-t-name.completed { text-decoration:line-through; opacity:0.5; }
.wq-t-meta { display:flex; align-items:center; gap:5px; margin-top:3px; font-size:0.7rem; color:var(--card-text-muted); flex-wrap:wrap; }
.wq-t-tag { padding:1px 6px; border-radius:4px; font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
.wq-t-tag.records_request { background:#EDE9FE; color:#6D28D9; }
.wq-t-tag.document_review { background:#FEF3C7; color:#B45309; }
.wq-t-tag.filing { background:#DBEAFE; color:#2563EB; }
.wq-t-tag.medical { background:#FCE7F3; color:#BE185D; }
.wq-t-tag.other { background:var(--bg-hover); color:var(--text-muted); }
.wq-t-due { font-size:0.7rem; font-weight:600; white-space:nowrap; flex-shrink:0; margin-top:2px; }
.wq-t-due.overdue { color:var(--danger); }
.wq-t-due.today { color:var(--warning); }
.wq-t-due.soon { color:var(--card-text-muted); }
.wq-t-due.done { color:var(--success); }

/* Task action buttons (edit / delete) — reveal on hover */
.wq-t-actions { display:flex; gap:2px; flex-shrink:0; opacity:0; transition:opacity 0.12s; margin-top:1px; }
.wq-task-item:hover .wq-t-actions { opacity:1; }
.wq-t-action-btn { background:none; border:none; cursor:pointer; padding:2px 5px; border-radius:4px; font-size:0.85rem; line-height:1; transition:background 0.1s, color 0.1s; color:var(--card-text-muted); }
.wq-t-action-btn:hover { background:var(--card-bg-hover); }
.wq-t-action-btn.edit:hover { color:var(--brand-gold); }
.wq-t-action-btn.delete:hover { color:var(--danger); }

/* Task edit modal */
.wq-edit-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:9999; display:flex; align-items:center; justify-content:center; }
.wq-edit-modal { background:var(--card-bg); border-radius:12px; width:380px; max-width:92vw; box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden; color:var(--card-text); }
.wq-edit-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--card-border); }
.wq-edit-header h3 { margin:0; font-size:0.95rem; font-weight:700; color:var(--card-text); }
.wq-edit-close { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--card-text-muted); padding:0 4px; line-height:1; }
.wq-edit-close:hover { color:var(--card-text); }
.wq-edit-body { padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.wq-edit-body label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--card-text-muted); margin-bottom:-6px; }
.wq-edit-body input, .wq-edit-body select { border:1px solid var(--card-border); border-radius:6px; padding:7px 10px; font-family:inherit; font-size:0.82rem; color:var(--card-text); background:var(--card-bg-hover); outline:none; }
.wq-edit-body input:focus, .wq-edit-body select:focus { border-color:var(--brand-gold); }
.wq-edit-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--card-border); }
.wq-edit-cancel { background:none; border:1px solid var(--border); border-radius:6px; padding:6px 14px; font-size:0.8rem; cursor:pointer; color:var(--text-secondary); }
.wq-edit-cancel:hover { background:var(--bg-hover); }
.wq-edit-save { background:var(--btn-primary-bg); color:var(--btn-primary-text); border:none; border-radius:6px; padding:6px 18px; font-size:0.8rem; font-weight:600; cursor:pointer; }
.wq-edit-save:hover { opacity:0.9; }

/* Task detail modal — key-value rows */
.wq-detail-row { display:flex; align-items:baseline; gap:10px; font-size:0.82rem; }
.wq-detail-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); white-space:nowrap; min-width:70px; }
.wq-detail-val { color:var(--text-primary); }
.wq-detail-desc-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); margin-top:4px; }
.wq-detail-desc { font-size:0.82rem; color:var(--text-secondary); line-height:1.5; white-space:pre-wrap; background:var(--bg-hover); border:1px solid var(--border); border-radius:6px; padding:8px 10px; margin-top:4px; }

/* New task input row */
.wq-new-task { display:flex; align-items:center; gap:6px; padding:10px 0; border-top:1px solid var(--card-border); margin-top:4px; }
.wq-new-task input, .wq-new-task select { border:1px solid var(--card-border); border-radius:6px; padding:4px 8px; font-family:inherit; font-size:0.78rem; color:var(--card-text); background:var(--card-bg-hover); outline:none; }
.wq-new-task input:focus, .wq-new-task select:focus { border-color:var(--brand-gold); }
.wq-new-task input { flex:1; }
.wq-new-task input::placeholder { color:var(--card-text-muted); }

/* Calendar */
.wq-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.wq-cal-month { font-size:0.95rem; font-weight:700; color:var(--text-primary); }
.wq-cal-nav { display:flex; gap:4px; }
.wq-cal-nav button { width:26px; height:26px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:6px; background:transparent; color:var(--text-muted); border:1px solid var(--border); cursor:pointer; font-size:12px; }
.wq-cal-nav button:hover { background:var(--bg-hover); color:var(--text-primary); }
.wq-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; text-align:center; }
.wq-cal-dow { font-size:0.6rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; padding:2px 0 5px; }
.wq-cal-day { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:7px; font-size:0.75rem; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:all 0.1s; position:relative; }
.wq-cal-day:hover { background:var(--bg-hover); }
.wq-cal-day.today { background:var(--brand-navy); color:#fff; font-weight:700; border-radius:50%; }
[data-theme="dark"] .wq-cal-day.today { background:var(--brand-teal); }
.wq-cal-day.other { opacity:0.2; pointer-events:none; }
.wq-cal-day.has-event::after { content:''; width:4px; height:4px; border-radius:50%; background:var(--danger); position:absolute; bottom:2px; }
.wq-cal-day.today.has-event::after { background:#fff; }

/* Event list */
.wq-evt-list { margin-top:12px; border-top:1px solid var(--border); padding-top:8px; }
.wq-evt-label { font-size:0.62rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.wq-evt-item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-subtle, var(--border)); font-size:0.75rem; }
.wq-evt-item:last-child { border-bottom:none; }
.wq-evt-dot { width:6px; height:6px; border-radius:2px; flex-shrink:0; }
.wq-evt-info { flex:1; min-width:0; }
.wq-evt-name { font-weight:600; color:var(--text-primary); font-size:0.75rem; }
.wq-evt-detail { font-size:0.65rem; color:var(--text-muted); }
.wq-evt-date { font-size:0.65rem; font-weight:600; color:var(--text-muted); white-space:nowrap; }

/* Timer */
.wq-timer-wrap { text-align:center; padding:6px 0 2px; }
.wq-timer-digits { font-size:2.2rem; font-weight:800; letter-spacing:2px; font-variant-numeric:tabular-nums; color:var(--card-text); line-height:1; font-family:'SF Mono','Fira Code',monospace; }
.wq-timer-case { font-size:0.7rem; color:var(--card-text-muted); margin-top:4px; }
.wq-timer-controls { display:flex; gap:8px; justify-content:center; margin-top:10px; }
.wq-timer-btn { padding:7px 20px; border-radius:8px; border:none; font-family:inherit; font-size:0.82rem; font-weight:700; cursor:pointer; transition:all 0.12s; }
.wq-timer-btn.start { background:var(--btn-primary-bg); color:var(--btn-primary-text); }
.wq-timer-btn.start:hover { opacity:0.9; }
.wq-timer-btn.start.running { background:var(--danger); }
.wq-timer-btn.start.running:hover { background:#DC2626; }
.wq-timer-btn.reset { background:var(--card-bg-hover); color:var(--card-text); border:1px solid var(--card-border); }
.wq-timer-btn.reset:hover { background:var(--card-bg); opacity:0.85; }
.wq-timer-desc { margin-top:10px; }
.wq-timer-desc input { width:100%; border:1px solid var(--card-border); border-radius:8px; padding:7px 10px; font-family:inherit; font-size:0.78rem; color:var(--card-text); outline:none; transition:border-color 0.12s; background:var(--card-bg-hover); }
.wq-timer-desc input:focus { border-color:var(--brand-gold); }
.wq-timer-desc input::placeholder { color:var(--card-text-muted); }

/* GLOBAL OVERRIDE — all inputs/selects/textareas inside wq-card pick up card tokens.
   !important is required to beat inline style="..." attrs set by JS-rendered markup. */
.wq-card input, .wq-card select, .wq-card textarea {
    background: var(--card-bg-hover) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--card-text) !important;
}
.wq-card input::placeholder, .wq-card textarea::placeholder { color: var(--card-text-muted) !important; }
.wq-card input:focus, .wq-card select:focus, .wq-card textarea:focus { border-color: var(--brand-gold) !important; }
.wq-time-entry { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--card-border); font-size:0.75rem; }
.wq-time-entry:last-child { border-bottom:none; }
.wq-te-hrs { font-weight:700; color:var(--brand-gold); min-width:36px; }
.wq-te-desc { flex:1; color:var(--card-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wq-te-date { font-size:0.65rem; color:var(--card-text-muted); }

/* Negotiation Tracker sub-tabs — Session Tracker / Bracket Builder / Exposure Matrix */
.neg-subtab {
    background: transparent;
    border: 1px solid var(--card-border);
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--card-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.neg-subtab:hover {
    color: var(--card-text);
    background: var(--card-bg-hover);
}
.neg-subtab.active {
    color: var(--brand-gold);
    background: var(--card-bg);
    border-color: var(--card-border);
    border-bottom: 2px solid var(--brand-gold);
}

/* Table column headers (Firm Intel, Document Center, etc.) — consistent breathing room */
.vault-th {
    padding: 10px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--card-text-muted);
    text-align: left;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}
/* First header gets extra left padding to align with card edge; last gets extra right */
.vault-th:first-child { padding-left: 18px; }
.vault-th:last-child { padding-right: 18px; }

/* Notes */
.wq-note-item { padding:8px 0; border-bottom:1px solid var(--card-border); }
.wq-note-item:last-child { border-bottom:none; }
.wq-note-text { font-size:0.82rem; color:var(--card-text); line-height:1.5; }
.wq-note-meta { font-size:0.65rem; color:var(--card-text-muted); margin-top:2px; }
.wq-note-input-wrap { display:flex; gap:8px; padding-top:8px; border-top:1px solid var(--card-border); margin-top:4px; }
.wq-note-input { flex:1; border:1px solid var(--card-border); border-radius:8px; padding:7px 10px; font-family:inherit; font-size:0.78rem; color:var(--card-text); outline:none; resize:none; min-height:34px; background:var(--card-bg-hover); }
.wq-note-input:focus { border-color:var(--brand-gold); }

/* AI Chat Drawer */
.wq-chat-drawer { position:fixed; top:0; right:-380px; width:380px; height:100vh; background:var(--panel-bg); border-left:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,0.12); z-index:100; display:flex; flex-direction:column; transition:right 0.3s ease; }
.wq-chat-drawer.open { right:0; }
.wq-chat-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; background:linear-gradient(135deg, var(--accent-hover, #0F766E), var(--accent)); }
.wq-chat-head-title { font-size:0.85rem; font-weight:700; color:#fff; flex:1; }
.wq-chat-head-sub { font-size:0.7rem; color:rgba(255,255,255,0.7); }
.wq-chat-close { width:28px; height:28px; border-radius:6px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.1); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; transition:background 0.12s; }
.wq-chat-close:hover { background:rgba(255,255,255,0.2); }
.wq-chat-case-picker { padding:8px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.wq-chat-case-picker select { width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:var(--bg-input, var(--panel-bg)); color:var(--text-primary); font-size:0.78rem; font-family:inherit; outline:none; }
.wq-chat-case-picker select:focus { border-color:var(--accent); }
.wq-chat-messages { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.wq-chat-msg { max-width:88%; padding:10px 14px; border-radius:12px; font-size:0.82rem; line-height:1.5; }
.wq-chat-msg.assistant { background:var(--bg-hover); color:var(--text-primary); align-self:flex-start; border-bottom-left-radius:4px; }
.wq-chat-msg.user { background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.wq-chat-msg-label { font-size:0.55rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; opacity:0.6; }
.wq-chat-suggestions { display:flex; flex-wrap:wrap; gap:5px; padding:0 16px 10px; }
.wq-chat-sug { padding:4px 10px; border-radius:16px; border:1px solid var(--border); background:var(--panel-bg); font-family:inherit; font-size:0.7rem; color:var(--text-secondary); cursor:pointer; transition:all 0.12s; }
.wq-chat-sug:hover { border-color:var(--accent); color:var(--accent); background:var(--bg-hover); }
.wq-chat-input-wrap { padding:10px 16px; border-top:1px solid var(--border); display:flex; gap:8px; flex-shrink:0; background:var(--panel-bg); }
.wq-chat-input { flex:1; border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:0.82rem; color:var(--text-primary); outline:none; background:var(--panel-bg); resize:none; min-height:36px; max-height:100px; }
.wq-chat-input:focus { border-color:var(--accent); }
.wq-chat-input::placeholder { color:var(--text-muted); }
.wq-chat-mic { width:36px; height:36px; border-radius:8px; background:transparent; color:var(--text-muted); border:1px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.12s; }
.wq-chat-mic:hover { background:var(--bg-hover); color:var(--text-primary); border-color:var(--accent); }
.wq-chat-mic.recording { background:var(--danger); color:#fff; border-color:var(--danger); animation:wq-pulse 1s ease infinite; }
@keyframes wq-pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.wq-chat-send { width:36px; height:36px; border-radius:8px; background:var(--btn-primary-bg); color:var(--btn-primary-text); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; transition:opacity 0.12s; }
.wq-chat-send:hover { opacity:0.9; }
/* Lox writing/thinking indicator */
.wq-lox-writing { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:0.8rem; font-weight:500; }
.wq-pen-anim { color:var(--accent); animation:wq-pen-write 1.2s ease-in-out infinite; transform-origin:bottom left; }
@keyframes wq-pen-write {
    0% { transform:rotate(0deg) translateY(0); }
    20% { transform:rotate(-8deg) translateY(-1px); }
    40% { transform:rotate(3deg) translateY(0); }
    60% { transform:rotate(-5deg) translateY(-1px); }
    80% { transform:rotate(2deg) translateY(0); }
    100% { transform:rotate(0deg) translateY(0); }
}
/* Markdown in chat messages */
.wq-chat-msg.assistant p { margin:0 0 8px; }
.wq-chat-msg.assistant p:last-child { margin-bottom:0; }
.wq-chat-msg.assistant ul, .wq-chat-msg.assistant ol { margin:4px 0 8px 16px; padding:0; }
.wq-chat-msg.assistant li { margin-bottom:2px; }
.wq-chat-msg.assistant strong { color:var(--text-primary); }

/* Responsive */
@media (max-width: 1000px) {
    .wq-summary { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 600px) {
    .wq-summary { grid-template-columns:repeat(2,1fr); }
    .wq-header { flex-direction:column; align-items:flex-start; }
}

/* --- Loxmetis v0.2.0 Global Layout System (Master Sweep) --- */

/* 1. Global Utilities & Spacing */
.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem;
    /* md:p-10 */
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    /* space-y-10 */
}

/* Calendar Page */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cal-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin: 0; }
.cal-month-nav { display: flex; align-items: center; gap: 12px; }
.cal-month-label { font-size: 16px; font-weight: 700; color: var(--text-primary); min-width: 160px; text-align: center; }
.cal-nav-btn { background: none; border: 1px solid var(--border); border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); font-size: 14px; transition: all 0.15s; }
.cal-nav-btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-elevated); }
.cal-dow { padding: 10px 8px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; text-align: center; border-bottom: 1px solid var(--border); background: var(--bg-hover); }
.cal-cell { min-height: 100px; padding: 6px 8px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell-day { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.cal-cell.today .cal-cell-day { background: var(--brand-navy); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
[data-theme="dark"] .cal-cell.today .cal-cell-day { background: var(--brand-teal); }
.cal-cell.empty { background: var(--bg-main); }
.cal-pill { display: block; padding: 2px 6px; margin-bottom: 2px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: opacity 0.12s; border-left: 3px solid transparent; }
.cal-pill:hover { opacity: 0.8; }
.cal-pill-case { background: var(--badge-green-bg); color: var(--color-green); border-left-color: var(--accent); }
.cal-pill-task { background: var(--badge-amber-bg); color: var(--color-amber); border-left-color: var(--color-amber); }
.cal-pill-overdue { background: var(--badge-red-bg); color: var(--color-red); border-left-color: var(--color-red); }
.cal-more { font-size: 10px; color: var(--text-muted); cursor: pointer; padding: 2px 6px; }
.cal-more:hover { color: var(--accent); }
.cal-upcoming { margin-top: 20px; }
.cal-upcoming-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.cal-upcoming-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; background: var(--bg-elevated); }
.cal-upcoming-row:hover { border-color: var(--accent); background: var(--bg-hover); }
.cal-upcoming-date { font-size: 12px; font-weight: 700; color: var(--accent); min-width: 50px; }
.cal-upcoming-info { flex: 1; }
.cal-upcoming-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cal-upcoming-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cal-upcoming-badge { padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 600; }

@media (max-width: 768px) {
    .page-container {
        padding: 1.5rem;
        gap: 1.5rem;
    }
}

/* 2. Wizard CTA Button (white standout, Case Wizard only) */
.btn-wizard {
    height: 48px;
    padding: 0 1.5rem;
    background-color: var(--text-primary);
    color: var(--bg-main);
    font-weight: 700;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    font-size: 0.875rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.btn-wizard:hover {
    background-color: var(--text-primary);
    transform: none;
}

.btn-wizard:active {
    transform: scale(0.95);
}

/* 3. Red Danger Button (.btn-danger) — inherits shared props from Premium Button System */
.btn-danger {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    text-transform: uppercase;
}

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

.btn-danger:active {
    transform: scale(0.95);
}

/* 4. Master Header / Top Bar */
.master-header {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-deepest);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 50;
    gap: 12px;
    transition: background-color 0.2s, border-color 0.2s;
}

.header-left {
    display: flex;
    align-items: center;
}

/* Logo SVG — no filters needed (inline SVG uses #2DD4BF directly) */

.header-breadcrumb {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-faint);
}

.header-breadcrumb span {
    cursor: default;
}

.header-breadcrumb .brand {
    color: var(--text-faint);
    transition: color 0.2s;
    cursor: pointer;
}

.header-breadcrumb .brand:hover {
    color: var(--text-secondary);
}

.header-breadcrumb .sep {
    margin: 0 8px;
    color: var(--text-on-navy-muted);
    opacity: 0.6;
}

.header-breadcrumb .active {
    color: var(--text-on-navy);
    font-weight: 600;
}

/* Case name chip in header — pill shape */
.header-case-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(45, 212, 191, 0.12);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: var(--border-width) solid rgba(45, 212, 191, 0.25);
    user-select: none;
    -webkit-user-select: none;
}

.header-case-chip .case-name-text {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.header-center {
    display: none;
}

@media (min-width: 768px) {
    .header-center {
        display: flex;
        align-items: center;
    }
}

.status-pulse {
    width: 6px;
    height: 6px;
    background-color: var(--success);
    border-radius: 50%;
    margin-right: 6px;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

.context-badge-text {
    font-size: 12px;
    font-family: monospace;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.15s ease;
}

.context-badge-text:hover {
    color: var(--text-main);
}

.context-badge-text .case-name-input {
    text-transform: none;
}

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

.header-link-btn {
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--border-highlight);
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-link-btn:hover {
    border-color: var(--border);
    color: var(--text-secondary);
}

/* Primary header action (Case Wizard) */
/* Case Wizard / hero CTA — gold→teal gradient signature button.
   This is THE standout button on every page. Reuse this treatment sparingly
   on hero/primary calls-to-action (Case Wizard, New Case, future hero CTAs). */
.header-btn-primary {
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: none;
    border-radius: var(--radius-btn);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 12px rgba(183, 151, 96, 0.35);
    transition: all 0.2s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.header-btn-primary:hover {
    box-shadow: 0 4px 20px rgba(183, 151, 96, 0.45);
    transform: translateY(-1px);
    filter: brightness(1.05);
}


/* --- Core Layout Colors --- */

/* Main content area: flex child of app-container */
.main-content {
    background-color: var(--bg-main) !important;
    background-image: none !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: background-color 0.2s;
    /* Square corner — no rounded top-left to prevent background bleed
       behind full-width banners (MFA banner, system notices). */
}

/* Watermark removed (UI cleanup) */

.view-container {
    background-color: transparent !important;
    z-index: 1;
}

/* Workspace (chat) view: flex layout, no own scroll - children scroll */
#workspace-view {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Document Viewer: fit viewport, only cases grid scrolls */
#drive-view {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Firm Library — v3 semantic tokens */
#library-view { overflow-y: auto; }

/* Library table rows */
.lib-row { cursor: pointer; transition: all 0.2s ease; }
.lib-row:hover { background: var(--card-bg-hover); box-shadow: inset 3px 0 0 var(--brand-gold); }
.lib-row td { border-bottom: 1px solid var(--card-border); padding: 12px 14px; color: var(--card-text); }

/* Mini lifecycle bar (compact 7-step) */
.lib-lc { display: flex; align-items: center; gap: 0; min-width: 100px; }
.lib-lc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--card-border); flex-shrink: 0;
    transition: all 0.2s ease;
}
.lib-lc-dot.done { background: var(--progress-fill); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.lib-lc-dot.current { background: var(--progress-leading); box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px var(--progress-leading), 0 0 8px rgba(183,151,96,0.3); }
.lib-lc-line {
    width: 8px; height: 2px; background: var(--card-border); flex-shrink: 0;
    transition: background 0.2s ease;
}
.lib-lc-line.done { background: var(--progress-fill); }

/* Sortable column headers */
.lib-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.lib-th-sort:hover { color: var(--card-text); }
.lib-sort-icon { margin-left: 4px; opacity: 0.35; font-size: 9px; vertical-align: middle; }
.lib-sort-icon.active { opacity: 1; color: var(--brand-gold); }

/* Selected row highlight */
.lib-row-selected { background: rgba(183,151,96,0.10) !important; }
.lib-row-selected td { border-bottom-color: rgba(183,151,96,0.25); }

/* Cases-table delete button — replaced inline onmouseover/onmouseout
   styles after CSP enforcement (#2147). Visual is identical. */
.lib-action-delete:hover {
    color: var(--color-red) !important;
    border-color: var(--color-red) !important;
    background: rgba(220, 38, 38, 0.08) !important;
}

/* Sidebar "Create Your First Case" CTA — was inline gradient + hover
   onmouseover/onmouseout pair. Pulled into a class so CSP can stay strict. */
.sidebar-create-first-case {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    width: 100%;
    box-shadow: 0 2px 12px rgba(183, 151, 96, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}
.sidebar-create-first-case:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(183, 151, 96, 0.45);
}

/* Sidebar recent-case row hover (#2147 CSP cleanup). */
.recent-case-item:hover {
    background: var(--border-subtle);
    color: var(--text-primary);
}

/* "View all N cases" sidebar link hover. */
.sidebar-view-all-cases:hover {
    opacity: 1;
}

/* Library search-result card hover — accent border. */
.library-search-result:hover {
    border-color: var(--accent) !important;
}

/* Settings → Team → Account: readonly "fake input" tiles (Subscription Tier,
   Account Since). Was using var(--bg-deepest) which is re-pointed at brand
   navy in light mode (for the sidebar) — text became dark-on-dark. Use
   --input-bg which is correctly themed for both modes. */
.stg-readonly-field {
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--card-text);
    background: var(--input-bg, var(--bg-elevated));
    opacity: 0.75;
}

/* IA Redesign v1 Phase 2.4 — when a Command Center KPI card drills into
   Firm Intel, the target section briefly highlights so the user sees where
   the navigation landed. Pure visual cue, no behavior change. */
@keyframes firmIntelPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-gold) 45%, transparent); }
    60%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-gold) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-gold) 0%, transparent); }
}
.firm-intel-pulse {
    animation: firmIntelPulse 1.6s ease-out;
    border-color: var(--brand-gold) !important;
}

/* IA Redesign v1 Phase 2.2 — Cases page lifecycle filter pills. */
.lib-phase-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: var(--card-bg-hover);
    color: var(--card-text);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
}
.lib-phase-pill:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.lib-phase-pill.active {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: #fff;
}
.lib-phase-pill.active .lib-phase-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.lib-phase-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-hover);
    color: var(--card-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

/* Checkbox column */
.lib-cb-cell { width: 40px; padding: 0 8px 0 14px !important; }
.lib-cb-cell input[type="checkbox"] { cursor: pointer; accent-color: var(--brand-gold); width: 14px; height: 14px; }

/* Bulk action bar */
.lib-bulk-bar {
    align-items: center; gap: 10px;
    padding: 9px 16px; background: var(--card-bg-hover);
    border-bottom: 1px solid var(--card-border); font-size: 13px;
}
.lib-bulk-bar-count { font-weight: 600; color: var(--card-text); flex: 1; }
.lib-bulk-btn { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-family: inherit; cursor: pointer; border: 1px solid var(--btn-primary-bg); background: var(--btn-primary-bg); color: var(--btn-primary-text); font-weight: 600; transition: opacity 0.15s; }
.lib-bulk-btn:hover { opacity: 0.9; }
.lib-bulk-btn-danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.lib-bulk-btn-danger:hover { background: rgba(239,68,68,0.08); opacity: 1; }
.lib-bulk-btn-clear { color: var(--card-text-muted); border-color: transparent; background: transparent; }
.lib-bulk-btn-clear:hover { color: var(--card-text); background: var(--card-bg-hover); opacity: 1; }

/* Library status badges (reuse vault dots) */
.list-badge { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 600; }
.list-badge--success { background: rgba(16,185,129,0.15); color: var(--success); }
.list-badge--warning { background: rgba(245,158,11,0.15); color: var(--warning); }
.list-badge--muted { background: var(--card-bg-hover); color: var(--card-text-muted); }

/* Ensure Scrollbars apply to scrolling containers */
.main-content,
.chat-container,
.dash-panel,
.view-container {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

.main-content::-webkit-scrollbar,
.chat-container::-webkit-scrollbar,
.dash-panel::-webkit-scrollbar,
.view-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.main-content::-webkit-scrollbar-thumb,
.chat-container::-webkit-scrollbar-thumb,
.dash-panel::-webkit-scrollbar-thumb,
.view-container::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
}

.main-content::-webkit-scrollbar-track,
.chat-container::-webkit-scrollbar-track,
.dash-panel::-webkit-scrollbar-track,
.view-container::-webkit-scrollbar-track {
    background: transparent;
}

/* Chat messages scrollbar — hover-reveal, 12px, cross-platform */
.chat-messages {
    scrollbar-width: auto;
    scrollbar-color: transparent var(--chat-scrollbar-track, rgba(100,100,100,0.1));
    padding-right: 4px;
}

.chat-messages:hover {
    scrollbar-color: var(--chat-scrollbar-thumb, rgba(100,100,100,0.5)) var(--chat-scrollbar-track, rgba(100,100,100,0.1));
}

.chat-messages::-webkit-scrollbar {
    width: 12px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 6px;
}

.chat-messages:hover::-webkit-scrollbar-track {
    background: var(--chat-scrollbar-track, rgba(100,100,100,0.1));
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}

.chat-messages:hover::-webkit-scrollbar-thumb {
    background-color: var(--chat-scrollbar-thumb, rgba(100,100,100,0.5));
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background-color: var(--chat-scrollbar-thumb-hover, rgba(100,100,100,0.7));
}


/* 3. Touch Targets (Enforce 48px) */
.btn-primary,
.btn-danger,
.btn-secondary,
.btn-wizard {
    min-height: 48px;
}

/* --- General Lobby mode --- */
.lobby-mode .master-header {
    border-bottom: 1px solid rgba(45, 212, 191, 0.2);
}

.lobby-mode .header-breadcrumb .brand {
    color: var(--primary);
}

/* Active Case Block (v3 sidebar) */
.acb-wrap {
    margin: 0 10px 10px;
    background: linear-gradient(135deg, rgba(45,212,191,0.12), rgba(13,79,74,0.25));
    border: 1px solid rgba(45,212,191,0.2);
    border-radius: 10px;
    overflow: hidden;
}
.acb-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; cursor: pointer;
}
.acb-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success); flex-shrink: 0;
}
.acb-info { flex: 1; min-width: 0; }
.acb-number {
    font-size: 10px; font-weight: 700; color: var(--primary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.acb-name {
    font-size: 12px; font-weight: 600; color: var(--text-on-navy);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acb-chevron {
    font-size: 8px; color: var(--text-on-navy-muted); transition: transform 0.2s;
    flex-shrink: 0;
}
.acb-chevron.open { transform: rotate(180deg); }
.acb-actions {
    display: flex; gap: 4px; padding: 0 8px 8px;
}
.acb-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 5px 0; border-radius: 6px; font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-on-navy-muted); cursor: pointer; transition: all 0.15s;
}
.acb-btn:hover { background: rgba(255,255,255,0.14); color: var(--text-on-navy); }
.acb-btn span { font-size: 12px; }
.acb-btn-primary {
    background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg);
}
.acb-btn-primary:hover { background: var(--accent-hover); }
.acb-dropdown {
    border-top: 1px solid rgba(45,212,191,0.15);
    padding: 6px 8px 8px;
}
.acb-case-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px; cursor: pointer;
    transition: background 0.12s; font-size: 12px; color: var(--text-on-navy-muted);
}
.acb-case-item:hover { background: rgba(255,255,255,0.06); color: var(--text-on-navy); }
.acb-case-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.acb-case-num {
    font-size: 10px; color: var(--text-on-navy-muted); font-weight: 600;
    min-width: 60px;
}
.acb-case-name {
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500;
}
/* + New Case — gold→teal gradient hero CTA (matches Case Wizard treatment) */
.acb-new-case {
    display: block; width: 100%; margin-top: 6px;
    padding: 8px 0; text-align: center; border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: none;
    color: #ffffff; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
    box-shadow: 0 2px 10px rgba(183, 151, 96, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.acb-new-case:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(183, 151, 96, 0.45);
    filter: brightness(1.05);
}

/* Active Case Block is INSIDE the navy sidebar in both modes — no light overrides.
   Sidebar is identical in light and dark mode per v3.1 brand spec. */

/* Sidebar search bar */
.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: var(--border-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text-faint);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    margin-bottom: 6px;
    transition: border-color 0.15s;
}

.search-bar:hover {
    border-color: var(--border);
}

.search-bar kbd {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-disabled);
    background: var(--bg-sidebar);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--kbd-border);
    font-family: inherit;
}

/* Toolbox accordion sub-items */
.toolbox-sub-items {
    padding-left: 12px;
}

.toolbox-sub-items button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all 0.15s;
}

.toolbox-sub-items button:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.toolbox-sub-items button.active {
    background: rgba(45, 212, 191, 0.1);
    color: var(--primary-active);
}

.toolbox-group-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 8px 10px 2px;
    margin-top: 4px;
}

.toolbox-group-label:first-child {
    margin-top: 0;
    padding-top: 4px;
}

/* Toolbox full-page view — uses semantic card tokens so light = beige family, dark = navy family */
.toolbox-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    color: var(--card-text);
    margin-bottom: 20px;
    overflow: hidden;
}

.toolbox-section-header {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--card-text);
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border);
    border-left: 3px solid var(--brand-gold);
    display: flex;
    align-items: center;
}

.toolbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    padding: 20px;
}

.toolbox-card {
    background: var(--card-bg-hover);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    border: 1px solid var(--card-border);
    color: var(--card-text);
    transition: all 0.2s ease;
    box-shadow: var(--card-shadow);
}

.toolbox-card:hover {
    border-color: var(--brand-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.toolbox-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(183, 151, 96, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--brand-gold);
}

.toolbox-card-title {
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 6px;
    color: var(--card-text);
}

.toolbox-card-desc {
    font-size: 0.75rem;
    color: var(--card-text-muted);
    line-height: 1.5;
}

/* Toolbox Favorites Bar — gold pills on a subtle divider */
#toolbox-favorites {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--card-border);
    flex-wrap: wrap;
}
.tbx-fav-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--card-text-muted);
    margin-right: 4px;
}
.tbx-fav-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--btn-primary-bg);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.tbx-fav-pill:hover {
    opacity: 0.9;
}

/* Pin button on toolbox cards */
.toolbox-card {
    position: relative;
}
.tbx-pin-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-secondary);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
    border-radius: 6px;
    padding: 0;
}
.toolbox-card:hover .tbx-pin-btn {
    opacity: 0.5;
}
.tbx-pin-btn:hover {
    opacity: 1 !important;
    color: var(--primary);
    background: rgba(45, 212, 191, 0.1);
}
.tbx-pin-btn.pinned {
    opacity: 1;
    color: var(--primary);
}
.tbx-pin-btn.pinned svg {
    fill: var(--primary);
}

/* ─── Toolbox Archived section — collapsed + de-emphasized ─── */
.toolbox-archived {
    margin-top: 8px;
    margin-bottom: 20px;
    border: 1px dashed var(--card-border);
    border-radius: 10px;
    background: transparent;
    opacity: 0.85;
}
.toolbox-archived-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    list-style: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 700;
}
/* Remove the default disclosure marker (we render our own chevron) */
.toolbox-archived-summary::-webkit-details-marker { display: none; }
.toolbox-archived-summary::marker { content: ""; }
.toolbox-archived-summary:hover { color: var(--card-text); }
.toolbox-archived-title {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}
.toolbox-archived-chevron {
    display: inline-flex;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.toolbox-archived[open] .toolbox-archived-chevron {
    transform: rotate(180deg);
}
.toolbox-archived-sub {
    padding: 0 20px;
    margin: 0 0 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}
/* Archived tiles read as parked — muted until hovered */
.toolbox-archived .toolbox-card {
    opacity: 0.72;
    transition: opacity 0.15s ease, all 0.2s ease;
}
.toolbox-archived .toolbox-card:hover {
    opacity: 1;
}

/* ─── Case Notes Component ─── */
.cn-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 4px;
}
.cn-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}
.cn-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--text-primary);
}
.cn-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted, var(--text-secondary));
    margin: 0;
}
.cn-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.cn-stat-total::before { background: var(--text-primary); }
.cn-stat-pinned::before { background: var(--accent, var(--primary)); }
.cn-stat-week::before { background: var(--color-blue, #0EA5E9); }
.cn-stat-threads::before { background: #7c3aed; }
.cn-textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input, var(--surface));
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s;
}
.cn-textarea:focus {
    outline: none;
    border-color: var(--primary);
}
.cn-type-select {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-input, var(--surface));
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
}
.cn-note {
    background: var(--panel-bg, var(--surface));
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: background 0.15s;
}
.cn-note.cn-pinned {
    background: rgba(45, 212, 191, 0.04);
    border-color: rgba(45, 212, 191, 0.2);
}
.cn-note.cn-reply {
    margin-left: 24px;
    border-left: 3px solid var(--border);
    font-size: 0.92em;
}
.cn-note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.cn-note-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cn-author {
    font-size: 0.8rem;
    color: var(--text-primary);
}
.cn-badge {
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
}
.cn-pin-icon {
    flex-shrink: 0;
}
.cn-time {
    font-size: 0.7rem;
    color: var(--text-muted, var(--text-secondary));
    white-space: nowrap;
}
.cn-content {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    line-height: 1.5;
    margin-bottom: 8px;
    word-break: break-word;
}
.cn-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}
.cn-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
}
.cn-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.cn-action-danger:hover {
    color: var(--danger, #ef4444);
    background: rgba(239, 68, 68, 0.08);
}
.cn-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted, var(--text-secondary));
    font-size: 0.85rem;
}
@media (max-width: 600px) {
    .cn-stats { grid-template-columns: repeat(2, 1fr); }
    .cn-note.cn-reply { margin-left: 12px; }
}

/* Lobby Chats sidebar items */
.lobby-chats-items {
    padding-left: 12px;
    max-height: 260px;
    overflow-y: auto;
}

.lobby-chats-items .sidebar-conv-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all 0.15s;
}

.lobby-chats-items .sidebar-conv-item:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.lobby-chats-items .sidebar-conv-item.active {
    background: rgba(45, 212, 191, 0.1);
    color: var(--primary-active);
}

.lobby-chats-items .sidebar-conv-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lobby-chats-items .sidebar-conv-delete {
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    transition: opacity 0.15s;
}

.lobby-chats-items .sidebar-conv-item:hover .sidebar-conv-delete {
    opacity: 1;
}

.lobby-chats-items .sidebar-conv-delete:hover {
    color: var(--danger);
}

/* Command Palette Overlay */
.cmd-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(20vh, 140px);
    z-index: 1000;
    backdrop-filter: blur(6px);
}
.cmd-palette {
    width: 560px;
    max-height: 480px;
    background: var(--panel-bg, var(--bg-card));
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cmd-palette-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cmd-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    font-weight: 500;
}
.cmd-input::placeholder { color: var(--text-muted); font-weight: 400; }
.cmd-kbd {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-hover);
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid var(--border);
    font-family: inherit;
    font-weight: 600;
    line-height: 1.4;
}
.cmd-results {
    overflow-y: auto;
    padding: 6px 8px;
    flex: 1;
}
.cmd-palette-category {
    font-size: 0.65rem;
    color: var(--text-muted);
    padding: 10px 10px 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cmd-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    text-align: left;
    transition: background 0.1s;
}
.cmd-palette-item:hover, .cmd-palette-item.active {
    background: rgba(45, 212, 191, 0.08);
}
.cmd-palette-item.active {
    outline: 1px solid rgba(45, 212, 191, 0.3);
}
.cmd-item-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.cmd-item-label { flex: 1; font-weight: 500; }
.cmd-item-arrow {
    opacity: 0;
    color: var(--text-muted);
    transition: opacity 0.1s;
    flex-shrink: 0;
}
.cmd-palette-item:hover .cmd-item-arrow,
.cmd-palette-item.active .cmd-item-arrow { opacity: 0.5; }
.cmd-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 20px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}
.cmd-footer span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cmd-kbd-sm {
    font-size: 0.65rem;
    background: var(--bg-hover);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
    font-family: inherit;
    font-weight: 600;
}
@media (max-width: 600px) {
    .cmd-palette { width: 95vw; }
}


/* --- Phase 2: Adventure Router --- */
.upload-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    background: var(--border-subtle);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 1rem;
}

.upload-drop-zone:hover,
.upload-drop-zone.dragover {
    background: var(--bg-hover);
    border-color: var(--primary);
}

.progress-bar-track {
    background: var(--bg-input);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.progress-bar-fill {
    background: var(--success);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}

/* .input-dark defined above in Polished Inputs block */

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.router-tab.active {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* .upload-drop-zone defined above in Phase 2 block */

.upload-drop-zone.drag-over {
    border-color: var(--primary);
    background: var(--bg-hover);
    transform: scale(1.01);
}

/* 
   MOBILE GATE: Responsive CSS for iPad Pro (1024px) & iPhone (375px)
   Phase 2.1 Requirement - Feb 2026
    */

/* --- TABLET: iPad Pro & Similar (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .sidebar-content {
        padding: 0 0.75rem 0.75rem 0.75rem;
        gap: 1rem;
    }

    /* Docket Grid - 2 columns on tablet */
    #docketGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .docket-card {
        padding: 1.25rem !important;
    }

    /* Ensure min touch targets (44px) */
    .nav-btn,
    .btn-primary,
    .btn-secondary,
    .btn-wizard,
    .case-item,
    .docket-card,
    .tool-item {
        min-height: 44px;
    }

    /* Chat area full width */
    .chat-area {
        max-width: 100%;
        padding: 0 0.5rem;
    }

    /* Drawer narrower */
    .drawer {
        width: 380px;
    }
}

/* --- MOBILE: iPhone 12 & Similar (max-width: 768px) --- */
@media (max-width: 768px) {

    /* Hide desktop sidebar, show mobile header */
    .sidebar {
        display: none !important;
    }

    .mobile-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: var(--bg-sidebar);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .mobile-menu-btn,
    .mobile-chat-btn {
        background: transparent;
        border: none;
        color: var(--text-main);
        padding: 0.5rem;
        border-radius: 8px;
        cursor: pointer;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .mobile-menu-btn:hover,
    .mobile-chat-btn:hover {
        background: var(--bg-hover);
    }

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

    /* Mobile Menu Overlay */
    .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 200;
    }

    .mobile-menu.open {
        display: block;
    }

    .mobile-menu-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
    }

    .mobile-menu-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 280px;
        max-width: 85%;
        height: 100%;
        background: var(--bg-sidebar);
        padding: 1rem;
        overflow-y: auto;
        z-index: 210;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.5);
        animation: slideInLeft 0.25s ease-out;
    }

    @keyframes slideInLeft {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translateX(0);
        }
    }

    /* App container stacks vertically */
    .app-container {
        flex-direction: column;
    }

    /* CRITICAL: Main pane takes full width when sidebar hidden */
    .main-pane {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* View containers full width */
    .view-container {
        width: 100% !important;
        left: 0 !important;
        position: relative !important;
    }

    /* Workspace view full width */
    #workspace-view {
        width: 100% !important;
    }

    /* Docket Grid - 1 column on mobile */
    #docketGrid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Docket header stacks */
    #docket-view>div>header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    #docket-view>div>header button {
        width: 100%;
    }

    /* Processing view padding */
    #processing-view>div {
        padding: 1.5rem !important;
    }

    /* Chat full width - no overlap */
    .chat-area {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0;
    }

    .chat-input-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 0.75rem;
        padding-bottom: 1rem;
    }

    .message {
        max-width: 100% !important;
    }

    /* Drawer full width on mobile */
    .drawer {
        width: 100% !important;
    }

    /* Larger touch targets for mobile */
    .nav-btn,
    .btn-primary,
    .btn-secondary,
    .btn-wizard,
    .docket-card,
    .case-item {
        min-height: 48px;
        padding: 0.875rem 1rem;
    }

    /* Cards need more padding */
    .docket-card {
        padding: 1.25rem !important;
    }

    /* Login split layout — collapse on mobile */
    .login-page { flex-direction: column; }
    .login-brand { display: none; }
    .login-form-panel { flex: 1; padding: 1rem; }
    .login-card {
        padding: 1.5rem;
        margin: 0;
        max-width: calc(100% - 2rem);
    }

    /* Toolbar buttons wrap on mobile - Fix courtroom/upload overflow */
    .toolbar,
    .chat-toolbar,
    .workspace-toolbar,
    [class*="toolbar"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        overflow-x: hidden !important;
    }

    .toolbar button,
    .chat-toolbar button,
    [class*="toolbar"] button {
        flex-shrink: 0;
        min-height: 40px;
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    /* Tool icons row - horizontal scroll if needed */
    .tool-icons,
    .courtroom-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }

    /* Ensure icon buttons don't shrink too small */
    .tool-icons button,
    .courtroom-tools button {
        min-width: 40px;
        min-height: 40px;
        flex-shrink: 0;
    }
}

/* --- SMALL MOBILE: Compact (max-width: 375px) --- */
@media (max-width: 375px) {

    /* Even tighter spacing */
    .sidebar-content {
        padding: 0 0.5rem 0.5rem 0.5rem;
    }

    /* Docket cards compact */
    .docket-card {
        padding: 1rem !important;
    }

    .docket-card h3 {
        font-size: 1rem !important;
    }

    /* Larger font for readability */
    body {
        font-size: 16px;
        /* Prevent zoom on iOS */
    }

    input,
    textarea,
    select {
        font-size: 16px;
        /* Prevent zoom on input focus */
    }

    /* Full-width buttons */
    .btn-primary,
    .btn-secondary,
    .btn-wizard {
        width: 100%;
        justify-content: center;
    }
}

/* --- Pulse Animation for Processing --- */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--warning);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

/* Bracket Builder Defendant Tabs */
.bb-tab {
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    position: relative;
}
.bb-tab:hover { border-color: var(--primary); color: white; }
.bb-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
.bb-tab .bb-tab-remove {
    display: none;
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--error);
    color: var(--text-primary);
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    border: none;
    padding: 0;
}
.bb-tab:hover .bb-tab-remove { display: block; }
.bb-plaintiff-tab.active { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); }

/* Document Center Cards */
.doc-card:hover {
    border-color: var(--primary) !important;
}

/* 
   TOOL SUGGESTION CARDS
    */

.tool-suggestion-card {
    animation: slideInUp 0.3s ease-out;
}

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

.suggestion-accept-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.suggestion-dismiss-btn:hover {
    border-color: var(--text-muted) !important;
    color: var(--text-secondary) !important;
}

/* === Option B: Orchestrated Multi-Persona Output === */

.orchestration-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* --- Lox-as-communicator host bubbles (A1) --- */
/* Lox brackets the independent perspectives in its own voice: an intro that
   orients the lawyer and an outro that weaves the panel into a bottom line +
   next move. Distinct from the accordion cards — a conversational host bubble. */
.lox-frame {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    margin: 0.45rem 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elevated);
    animation: slideInUp 0.3s ease-out;
}

.lox-frame--intro {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.lox-frame--outro {
    color: var(--text-primary);
    border-left: 3px solid var(--accent);
    background: var(--accent-glow);
}

.lox-frame__avatar {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.2;
    margin-top: 0.05rem;
}

.lox-frame__body {
    flex: 1;
    min-width: 0;
}

.lox-frame__body > *:first-child { margin-top: 0; }
.lox-frame__body > *:last-child { margin-bottom: 0; }

/* --- Persona section accordion --- */

.persona-section {
    animation: slideInUp 0.3s ease-out;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.persona-section + .persona-section {
    margin-top: 0.5rem;
}

/* Header acts as the toggle button */
.persona-section-header {
    /* Reset button defaults */
    all: unset;
    box-sizing: border-box;
    /* Layout */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    /* Visual */
    background: var(--bg-elevated);
    border-radius: 7px 7px 0 0;
    /* Interaction */
    user-select: none;
    transition: background 0.15s ease;
}

.persona-section--collapsed .persona-section-header {
    border-radius: 7px; /* full rounding when body is hidden */
}

.persona-section-header:hover {
    background: var(--bg-hover);
}

.persona-section-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.persona-section-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.persona-section-label {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chevron — rotates on expand/collapse */
.persona-section-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform 0.25s ease;
}

.persona-section-chevron::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg); /* pointing down = expanded */
    transition: transform 0.25s ease;
}

.persona-section--collapsed .persona-section-chevron::after {
    transform: rotate(-45deg); /* pointing right = collapsed */
}

/* Body — height transition for smooth open/close */
.persona-section-body {
    overflow: hidden;
    max-height: 2000px; /* large enough for any content */
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
    padding: 0.5rem 0.75rem 0.75rem;
    opacity: 1;
}

.persona-section--collapsed .persona-section-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none; /* prevent clicking hidden content */
}

/* Content typography */
.persona-section-content {
    line-height: 1.7;
    font-size: 14px;
    color: var(--text-secondary);
}

.persona-section-content p { margin-bottom: 0.75rem; }
.persona-section-content p:last-child { margin-bottom: 0; }
.persona-section-content h1,
.persona-section-content h2,
.persona-section-content h3 {
    color: var(--text-primary);
    margin: 1rem 0 0.5rem 0;
}
.persona-section-content h1 { font-size: 1.1rem; }
.persona-section-content h2 { font-size: 1rem; }
.persona-section-content h3 { font-size: 0.95rem; }

.persona-section-content ul,
.persona-section-content ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.persona-section-content strong {
    color: var(--text-primary);
}

/* === Accordion Panels — issue #1651 === */

.accordion-panel {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    background: var(--bg-elevated);
    animation: slideInUp 0.25s ease-out;
}

.accordion-panel:last-child {
    margin-bottom: 0;
}

/* Mediator synthesis panel gets a left accent border */
.accordion-panel--synthesis {
    border-left: 3px solid var(--primary, var(--accent));
}

.accordion-panel__header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: var(--bg-hover);
    user-select: none;
    transition: background 0.15s ease;
}

.accordion-panel__header:hover {
    background: var(--border-subtle, var(--bg-hover));
}

.accordion-panel__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.accordion-panel__chevron {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.accordion-panel__body {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.2s ease, opacity 0.2s ease;
}

/* Collapsed state */
.accordion-panel.collapsed .accordion-panel__body {
    display: none;
}

/* Prose formatting inside accordion body (mirrors .persona-section-content) */
.accordion-panel__body p { margin-bottom: 0.75rem; }
.accordion-panel__body p:last-child { margin-bottom: 0; }
.accordion-panel__body h1,
.accordion-panel__body h2,
.accordion-panel__body h3 {
    color: var(--text-primary);
    margin: 1rem 0 0.5rem 0;
}
.accordion-panel__body h1 { font-size: 1.1rem; }
.accordion-panel__body h2 { font-size: 1rem; }
.accordion-panel__body h3 { font-size: 0.95rem; }
.accordion-panel__body ul,
.accordion-panel__body ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}
.accordion-panel__body strong { color: var(--text-primary); }

/* === End Accordion Styles === */

/* === End Orchestration Styles === */

/* === Persona Debrief Card (#507) === */
.debrief-card {
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 0.5rem 0;
    background: var(--bg-elevated);
    position: relative;
}

.debrief-card::before {
    content: "Persona Debrief";
    position: absolute;
    top: -0.65rem;
    left: 1rem;
    background: var(--bg-elevated);
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.debrief-card h2,
.debrief-card h3 {
    color: var(--text-primary);
    margin: 1rem 0 0.5rem 0;
}

.debrief-card h2 { font-size: 1.1rem; }
.debrief-card h3 { font-size: 0.95rem; }

.debrief-card h2:first-child {
    margin-top: 0;
}

.debrief-card p { margin-bottom: 0.75rem; }
.debrief-card p:last-child { margin-bottom: 0; }

.debrief-card ul,
.debrief-card ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.debrief-card strong {
    color: var(--text-primary);
}

.debrief-card hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}
/* === End Debrief Card Styles === */

.spinner-mini {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spinMini 0.6s linear infinite;
}

@keyframes spinMini {
    to { transform: rotate(360deg); }
}

/* Inline thinking status — replaces ThinkingElephant in chat thread */
.thinking-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    animation: thinkingStatusFadeIn 0.3s ease;
}
.thinking-dots {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.thinking-dots::after {
    content: '';
    display: inline;
    animation: ellipsis 1.5s steps(4) infinite;
}
@keyframes ellipsis {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}
@keyframes thinkingStatusFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.thinking-stop-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 2px 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.thinking-stop-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
}
.thinking-stop-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* 
   TOAST NOTIFICATIONS
    */

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Ensure toasts are clickable while container passes through pointer events */
#globalToast > * {
    pointer-events: auto;
}


/* ===== CLOUD FILE BROWSER ===== */

.cloud-browser-modal {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    width: 95%;
    max-width: 720px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.cloud-browser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.cloud-search-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.cloud-search-bar input {
    flex: 1;
    padding: 0.45rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
}

.cloud-search-bar input:focus {
    border-color: var(--accent);
}

.cloud-search-bar input::placeholder {
    color: var(--text-muted);
}

.cloud-search-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
}

.cloud-search-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.cloud-breadcrumb {
    padding: 0.5rem 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.cloud-breadcrumb-item {
    cursor: pointer;
    color: var(--accent-text);
    transition: color 0.15s;
}

.cloud-breadcrumb-item:hover {
    color: var(--accent);
    text-decoration: underline;
}

.cloud-file-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.cloud-file-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.12s;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border-subtle);
}

.cloud-file-row:hover {
    background: var(--bg-hover);
}

.cloud-file-row.cloud-file-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cloud-file-row.cloud-file-disabled:hover {
    background: transparent;
}

.cloud-file-check {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.cloud-file-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.cloud-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.cloud-file-size {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 60px;
    text-align: right;
}

.cloud-browser-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.cloud-import-progress {
    position: relative;
    height: 1.5rem;
    background: var(--bg-elevated);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.cloud-import-progress-bar {
    height: 100%;
    background: var(--progress-fill);
    border-radius: 6px;
    transition: width 0.3s ease;
}

/* 
   FEEDBACK BUTTONS (Phase 21)
    */

.message-feedback {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.feedback-btn svg, .copy-msg-btn svg {
    color: var(--text-secondary);
}

.message:hover .message-feedback,
.message-feedback:has(.feedback-btn.active) {
    opacity: 1;
}

.feedback-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.feedback-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}

.feedback-btn.active.thumbs-up {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
}

.feedback-btn.active.thumbs-down {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
}

.feedback-correction {
    margin-top: 6px;
    padding: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    animation: fadeIn 0.2s ease;
}

.feedback-correction textarea {
    width: 100%;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    font-size: 0.85rem;
    resize: vertical;
    font-family: inherit;
}

.feedback-correction-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    justify-content: flex-end;
}

.feedback-correction-actions button {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.feedback-correction-actions .feedback-submit {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

/* =========================================================================
   FLAG-RESPONSE BUTTON + POPOVER (#3327 D2)
   -------------------------------------------------------------------------
   Follows the copy-msg-btn hover pattern: subtle in the message-feedback row,
   full opacity on message hover. Popover uses existing modal tokens.
   Uses CSS variables only per CLAUDE.md rule #6 — no hardcoded hex colors.
   ========================================================================= */
.flag-msg-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--text-secondary);
    opacity: 0.4;
    transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease;
}
.message:hover .flag-msg-btn { opacity: 1; }
.flag-msg-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--color-amber);
}
.flag-msg-btn:focus-visible {
    outline: 2px solid var(--color-amber);
    outline-offset: 1px;
}

.flag-popover-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 10000;
    /* Backdrop is invisible but click-catching, so the popover dismisses on
       any outside click without dimming the app behind it. */
}
.flag-popover {
    position: absolute;
    z-index: 10001;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: var(--bg-elevated, var(--bg-primary));
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: fadeIn 0.15s ease;
}
.flag-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flag-popover-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.flag-popover-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 4px;
    border-radius: 4px;
}
.flag-popover-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.flag-popover-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.flag-popover-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}
.flag-popover-note-label { margin-top: 6px; }
.flag-popover-select,
.flag-popover-note {
    width: 100%;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
}
.flag-popover-note {
    resize: vertical;
    min-height: 60px;
}
.flag-popover-counter {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}
.flag-popover-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
.flag-popover-actions button {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-secondary, var(--bg-primary));
    color: var(--text-primary);
}
.flag-popover-actions button:hover:not(:disabled) {
    background: var(--bg-hover);
}
.flag-popover-actions .flag-popover-submit {
    background: var(--color-amber);
    color: #fff;
    border-color: var(--color-amber);
}
.flag-popover-actions .flag-popover-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Flagged badge — small pill under the flagged message body. Uses --color-red
   (per plan) to signal confirmation that the flag was recorded. */
.message-flagged-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    background: var(--color-red);
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.message.is-flagged .message-content {
    /* Subtle left-border cue so the flagged state is legible without stealing
       focus from the message text. */
    border-left: 3px solid var(--color-red);
    padding-left: 10px;
}

/* Maintenance Mode — pulsing dot */
.maintenance-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning, #f59e0b);
    animation: maintenance-pulse 1.5s ease-in-out infinite;
}
@keyframes maintenance-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Maintenance Mode — overlay (blurred backdrop + centered card).
   Deliberately NOT the full login-overlay takeover: the user stays signed in,
   sees the app blurred behind, and the overlay clears itself on reconnect. */
.maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.25s ease;
}

.maintenance-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.maintenance-icon {
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

/* Connector line "travels" to evoke a reconnecting link. */
.maintenance-link-dash {
    animation: maintenance-dash 1.2s linear infinite;
}
@keyframes maintenance-dash {
    to { stroke-dashoffset: -14; }
}

.maintenance-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.maintenance-body {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

.maintenance-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.maintenance-retry-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.maintenance-retry-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* 
   SETTINGS PAGE — Tabbed Layout (v4)
    */
.settings-overlay {
    display: flex;
    height: 100%;
    background: var(--bg-main);
}
/* Settings sidebar — distinct card surface for visual depth */
.settings-sidebar {
    width: 220px;
    background: var(--card-bg);
    border-right: 1px solid var(--card-border);
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--card-shadow);
}
.settings-sidebar-header {
    padding: 0 24px 20px;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 8px;
}
.settings-sidebar-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--card-text);
    margin-bottom: 2px;
}
.settings-sidebar-subtitle {
    font-size: 0.7rem;
    color: var(--card-text-muted);
}
.settings-tab {
    padding: 10px 24px;
    cursor: pointer;
    color: var(--card-text-muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s;
    border-right: 3px solid transparent;
    font-weight: 500;
}
.settings-tab:hover {
    color: var(--card-text);
    background: var(--card-bg-hover);
}
.settings-tab.active {
    color: var(--brand-gold);
    background: rgba(183, 151, 96, 0.12);
    border-right: 3px solid var(--brand-gold);
    font-weight: 700;
}
.settings-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.settings-sidebar-footer {
    margin-top: auto;
    padding: 16px 24px 0;
    border-top: 1px solid var(--card-border);
}
.settings-sidebar-footer .settings-close-btn {
    width: 100%;
    padding: 8px 16px;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--card-text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.settings-sidebar-footer .settings-close-btn:hover {
    background: var(--card-bg);
    color: var(--brand-gold);
    border-color: var(--brand-gold);
}
.settings-content {
    flex: 1;
    padding: 32px 48px;
    overflow-y: auto;
    max-width: 640px;
}
/* Team panel needs the full content width to fit the admin dashboard table. */
.settings-content:has(.settings-tab-panel[data-settings-panel="team"].active) {
    max-width: none;
}
.settings-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--card-text);
}
.settings-section-desc {
    font-size: 0.82rem;
    color: var(--card-text-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}
/* Settings form fields wrapper — gives content area visual structure */
.settings-tab-panel.active {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: var(--card-shadow);
}

/* Team panel embeds AdminDashboard — neutralize its full-page padding/height
   and constrain content to the panel width (prevent horizontal overflow). */
.settings-tab-panel[data-settings-panel="team"].active {
    padding: 0;
    overflow: visible;
    max-width: 100%;
}
#settingsTeamMount {
    width: 100%;
    min-height: 200px;
    box-sizing: border-box;
}
#settingsTeamMount .admin-dashboard.page-body,
#settingsTeamMount .admin-dashboard {
    padding: 24px 28px !important;
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Tab bar fits the panel — allow horizontal scroll on overflow */
#settingsTeamMount .admin-tab-bar {
    flex-wrap: wrap;
    gap: 0 4px;
}
#settingsTeamMount .admin-tab {
    flex-shrink: 0;
    padding: 8px 14px !important;
    font-size: 12px !important;
}
#settingsTeamMount .tab-count {
    margin-left: 4px;
}

/* Team stats grid — fit panel width */
#settingsTeamMount .team-stats-bar {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

/* User rows — wrap actions on narrow screens */
#settingsTeamMount .user-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px !important;
}
#settingsTeamMount .user-actions {
    flex-wrap: wrap;
    gap: 6px;
}
#settingsTeamMount .user-info {
    flex: 1 1 200px;
    min-width: 0;
}

/* "+ Invite Member" button shouldn't push tab bar wide */
#settingsTeamMount .admin-tab-bar > div[style*="margin-left:auto"] {
    margin-left: auto !important;
    flex-wrap: wrap;
    gap: 6px;
}
.settings-field {
    margin-bottom: 18px;
}
.settings-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--card-label);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.settings-field input,
.settings-field select,
.settings-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--card-bg-hover);
    color: var(--card-text);
    font-family: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.settings-field input::placeholder,
.settings-field textarea::placeholder {
    color: var(--card-text-muted);
}
.settings-field input:focus,
.settings-field select:focus,
.settings-field textarea:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(183, 151, 96, 0.18);
}
.settings-field input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.settings-field textarea {
    min-height: 80px;
    resize: vertical;
}
.settings-field .settings-field-hint {
    font-size: 0.72rem;
    color: var(--card-text-muted);
    margin-top: 6px;
}
.settings-save-btn {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.88rem;
    font-family: inherit;
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(183, 151, 96, 0.25);
}
.settings-save-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(183, 151, 96, 0.35);
}
.settings-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.settings-save-status {
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 12px;
}
.settings-actions-row {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 12px;
}
/* Settings tab panel (content area per tab) */
.settings-tab-panel {
    display: none;
}
.settings-tab-panel.active {
    display: block;
}
/* Settings link rows (Account section) */
.settings-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.settings-link-row:hover {
    background: var(--bg-hover);
}
.settings-link-row svg {
    flex-shrink: 0;
}
.settings-link-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.settings-link-row.danger {
    color: var(--danger);
}
.settings-link-row.danger:hover {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}
/* Settings toggle rows */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.settings-toggle-row:hover {
    background: var(--bg-hover);
}
.settings-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.settings-toggle-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}
.settings-toggle-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
}
/* Billing card in settings */
.settings-plan-card {
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 16px;
}
.settings-plan-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 4px;
}
.settings-plan-detail {
    font-size: 0.82rem;
    color: var(--card-text-muted);
    margin-bottom: 2px;
}
/* Integrations placeholder */
.settings-integration-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}
.settings-integration-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.settings-integration-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}
.settings-integration-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.settings-coming-soon-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
}
/* Settings version footer */
.settings-version {
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-disabled, var(--text-muted));
    padding: 20px 0 4px;
}
/* Light mode overrides */
[data-theme="light"] .settings-field input,
[data-theme="light"] .settings-field select,
[data-theme="light"] .settings-field textarea {
    background: #fff;
}
/* Responsive: collapse sidebar on narrow screens */
@media (max-width: 768px) {
    .settings-sidebar {
        width: 180px;
    }
    .settings-content {
        padding: 24px 20px;
    }
}
@media (max-width: 500px) {
    .settings-overlay {
        flex-direction: column;
    }
    .settings-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .settings-sidebar-header {
        display: none;
    }
    .settings-sidebar-footer {
        display: none;
    }
    .settings-tab {
        white-space: nowrap;
        border-right: none;
        border-bottom: 2px solid transparent;
        padding: 10px 16px;
    }
    .settings-tab.active {
        border-right: none;
        border-bottom: 2px solid var(--accent);
    }
    .settings-content {
        padding: 20px 16px;
        max-width: 100%;
    }
}

/* 
   OVERVIEW: Upcoming Dates + AI Feed
    */
.ov-date-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.ov-date-item:last-child { border-bottom: none; }
.ov-date-badge {
    width: 48px;
    text-align: center;
    flex-shrink: 0;
}
.ov-date-day {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.1;
}
.ov-date-mon {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ov-date-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}
.ov-date-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.ov-ai-banner {
    background: color-mix(in srgb, #10B981 10%, var(--panel-bg));
    border: 1px solid color-mix(in srgb, #10B981 25%, var(--border));
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    color: var(--text-primary);
    font-size: 0.82rem;
}
.ov-ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .ov-ai-grid { grid-template-columns: 1fr; }
}

/* ====
   MOBILE FIX PATCH — Overview Layout + Sidebar + Header
   ==== */

/* FIX 1: Force sidebar hidden below 900px (not just 768px)
   Many Android phones report >768px CSS width.
   The sidebar should never show on anything phone-sized. */
@media (max-width: 900px) {
    .sidebar,
    .sidebar-toggle-btn {
        display: none !important;
    }

    .mobile-header {
        display: flex !important;
    }

    .main-pane {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .view-container {
        width: 100% !important;
        left: 0 !important;
        position: relative !important;
    }

    .app-container {
        flex-direction: column;
    }
}

/* FIX 2: Stat grid — 2 columns on phones, horizontal scroll prevented */
@media (max-width: 600px) {
    .ov-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Make the 5th card (Open Tasks) span full width when alone */
    .ov-stat-grid > .ov-stat-card:nth-child(5):last-child {
        grid-column: 1 / -1;
    }

    .ov-stat-card {
        padding: 10px 12px !important;
    }

    .ov-stat-val {
        font-size: 20px !important;
    }

    .ov-stat-label {
        font-size: 10px !important;
    }
}

/* FIX 3: Header case chip — truncate long case names */
.header-case-chip {
    max-width: 40vw;
    overflow: hidden;
}

.header-case-chip .case-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 900px) {
    .header-case-chip {
        max-width: 35vw;
    }

    /* Hide breadcrumb on mobile — case name is enough context */
    .header-breadcrumb {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .header-case-chip {
        max-width: 50vw;
        padding: 3px 8px !important;
    }

    .header-case-chip .case-name-text {
        font-size: 10px !important;
    }
}

/* FIX 4: Overview header — stack greeting and actions on mobile */
@media (max-width: 600px) {
    .ov-header {
        flex-direction: column !important;
        gap: 10px;
    }

    .ov-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .ov-actions .btn {
        flex: 1;
        justify-content: center;
        font-size: 12px;
        padding: 8px 12px;
    }

    .ov-greeting {
        font-size: 18px !important;
    }
}

/* FIX 5: Two-column and three-column layouts — single column on phones */
@media (max-width: 600px) {
    .ov-two-col {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ov-three-col {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Show calendar column on mobile (hidden at 1100px in .ov-three-col) */
    .ov-three-col > div:last-child {
        display: block !important;
    }

    .ov-card {
        padding: 12px !important;
    }
}

/* FIX 6: Master header — tighter on mobile */
@media (max-width: 600px) {
    .master-header {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    /* Shrink header action buttons */
    .master-header .btn,
    .master-header button {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* Admin usage dashboard */
.admin-usage-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.admin-usage-card { padding:16px; border-radius:10px; background:var(--bg-elevated); border:1px solid var(--border); }
.admin-usage-label { font-size:0.72rem; font-weight:600; text-transform:uppercase; color:var(--text-muted); }
.admin-usage-value { font-size:1.4rem; font-weight:700; color:var(--text-primary); margin:4px 0; }
.admin-usage-bar { height:6px; border-radius:3px; background:var(--bg-hover); overflow:hidden; }
.admin-usage-bar-fill { height:100%; border-radius:3px; transition:width 0.3s; }
.admin-usage-bar-fill.green { background:var(--success); }
.admin-usage-bar-fill.amber { background:var(--warning); }
.admin-usage-bar-fill.red { background:var(--danger); }
.admin-usage-chart-wrap { position:relative; height:300px; width:100%; }

/* Platform analytics */
.platform-revenue-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-bottom:20px; }
.platform-metric-card { padding:16px; border-radius:10px; background:var(--bg-elevated); border:1px solid var(--border); text-align:center; }
.platform-metric-value { font-size:1.6rem; font-weight:800; color:var(--text-primary); }
.platform-metric-label { font-size:0.7rem; font-weight:600; text-transform:uppercase; color:var(--text-muted); margin-top:4px; }
.platform-audit-row { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.82rem; }
.platform-audit-type { padding:2px 8px; border-radius:4px; font-size:0.7rem; font-weight:700; text-transform:uppercase; background:var(--bg-hover); color:var(--text-muted); }

/* 
   TTS READ-ALOUD (Issue #923)
    */

.tts-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.2s ease, background 0.15s ease;
}

.message:hover .tts-btn {
    opacity: 1;
}

.tts-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}

.tts-btn svg {
    color: var(--text-secondary);
}

.tts-btn.speaking svg {
    color: var(--accent-text);
}

.tts-btn.paused svg {
    color: var(--warning);
}

/* 
   DICTATION INTERIM STYLING (Issue #923)
    */

.dictation-interim {
    opacity: 0.6;
    animation: dictation-pulse 1.2s ease-in-out infinite;
}

@keyframes dictation-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1.0; }
}

/* 
   SHARED CONFIRM MODAL (Issue #1465)
   Used by window.showConfirmModal() in helpers.js.
   CSS variables only — works in dark and light mode.
    */

.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.confirm-modal-box {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.confirm-modal-x {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
}

.confirm-modal-x:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.confirm-modal-header {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: var(--text-primary);
}

.confirm-modal-message {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.confirm-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.confirm-modal-btn {
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
}

.confirm-modal-btn-cancel {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.confirm-modal-btn-cancel:hover {
    background: var(--bg-hover);
}

.confirm-modal-btn-danger {
    background: var(--danger);
    color: #fff;
    font-weight: 500;
}

.confirm-modal-btn-danger:hover {
    opacity: 0.9;
}

.confirm-modal-btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-weight: 500;
}

.confirm-modal-btn-primary:hover {
    opacity: 0.9;
}

/* 
   WIZARD DISMISSIBLE FIELDS (#1353 phase A)
    */

/* Smooth collapse animation when a field is dismissed */
.wizard-dismissible-field {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-bottom 0.25s ease;
    max-height: 200px;
    opacity: 1;
}

.wizard-dismissible-field.field-collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin-bottom: 0 !important;
    pointer-events: none;
}

/* Dismiss ×  button — subtle until hovered */
.wizard-dismiss-btn {
    opacity: 0.45;
    transition: opacity 0.15s, color 0.15s;
    font-size: 1.05rem !important;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.wizard-dismiss-btn:hover {
    opacity: 1;
    color: var(--color-red) !important;
    background: var(--bg-hover) !important;
}

/* Removed-fields chip row */
#wizardRemovedFields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wizard-restore-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wizard-restore-chip:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Custom type badge in dropdown */
option.custom-type-option::before {
    content: "Custom • ";
    color: var(--primary);
}

/* Custom type input reveal */
#wizardCustomTypeWrap {
    animation: fadeSlideIn 0.2s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Override the router modal header text color for "Upload to Case" mode */
#wizardHeaderBanner.upload-mode {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}
#wizardHeaderBanner.upload-mode h2,
#wizardHeaderBanner.upload-mode p {
    color: var(--text-primary);
}
#wizardHeaderBanner.upload-mode button {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ── Router modal sizing (fix/wizard-modal-width) ─────────────────────────
   max-width / max-height live in CSS — inline styles on #uploadRouterCard
   trump CSS regardless of selector specificity, so the previous attempt
   to set 1280px via CSS never actually fired (the 560px inline style won).
   The HTML keeps width:90% inline; caps come from these rules. */

/* case-wizard-uniform-width: both tabs (Existing Case + New Case) share
   the same 1280px / 85vh frame so toggling tabs no longer resizes the
   modal.  The data-wizard-mode attribute is still set by the JS for
   anything else that may want to branch on it, but width/height no
   longer depend on it.  Linear/Notion takeover-modal convention —
   dominates a laptop screen without being fullscreen, caps at 1280px so
   it doesn't sprawl on a 4K monitor. */
#uploadRouterCard {
    max-width: 1280px;
    max-height: 85vh;
}

/* case-wizard-cream-theme: cream "paper card" body. The card has
   data-theme="light" on the HTML element, which flips all token values
   to light mode for descendants (text colors, borders, input bg, etc.).
   We just need to paint the body with the cream tone so it visually
   matches the gold buttons + gold/teal header gradient. */
#uploadRouterCard[data-theme="light"] {
    background: var(--brand-gold-wash);
}
/* Scope the cream to the scroll body so the sticky footer + header stay
   on their own (slightly different) surfaces. */
#uploadRouterCard[data-theme="light"] #wizardScrollBody {
    background: var(--brand-gold-wash);
    color: var(--text-primary);  /* light-mode text-primary = dark text */
}
/* Sticky footer: subtle off-white so the action button row sits visually
   apart from the cream body but still feels like the same modal. */
#uploadRouterCard[data-theme="light"] #wizardFooter {
    background: #ffffff;
    border-top: 1px solid var(--border);
}

/* 2-column grid for the Setup body: metadata left, parties right.
   Collapses to a single column below 900px viewport so the modal stays
   usable on narrow laptops (raised from 760px so the cramped middle
   ground triggers the collapse sooner). */
.wizard-2col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .wizard-2col-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    /* Narrow screens: collapse to the compact 560px regardless of tab. */
    #uploadRouterCard {
        max-width: 560px;
    }
}


/* ── Persona Guide — "Meet the Panel" modal ─────────────────────────────── */

.persona-guide-trigger {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 4px;
    transition: color 0.15s, border-color 0.15s;
}

.persona-guide-trigger:hover {
    color: var(--text-secondary);
    border-color: var(--text-secondary);
}

.persona-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 1rem;
}

.persona-guide-overlay.persona-guide-visible {
    opacity: 1;
}

.persona-guide-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    transform: translateY(8px);
    transition: transform 0.2s ease;
}

.persona-guide-overlay.persona-guide-visible .persona-guide-modal {
    transform: translateY(0);
}

.persona-guide-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.persona-guide-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.persona-guide-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.persona-guide-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.persona-guide-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.persona-guide-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

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

.persona-guide-cards {
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.persona-guide-cards::-webkit-scrollbar {
    width: 4px;
}
.persona-guide-cards::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.persona-guide-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s;
}

.persona-guide-card:hover {
    border-color: var(--primary);
}

.persona-guide-card-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.persona-guide-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.persona-guide-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.persona-guide-card-mention {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    font-family: monospace;
}

.persona-guide-card-summary {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 2px;
}

.persona-guide-try-btn {
    margin-top: 8px;
    align-self: flex-start;
    font-size: 0.78rem;
    padding: 4px 10px;
}

.persona-guide-pdf-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    padding: 5px 10px;
    white-space: nowrap;
}

/*
   UPLOAD MANAGER — Per-file progress stages (#1468)
*/

/* Document list items */
.document-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
}
.document-item:last-child { border-bottom: none; }

.document-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

/* Upload summary banner: "3 of 5 ready" */
.upload-summary-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.upload-summary-banner .summary-ready {
    font-weight: 600;
    color: var(--color-green);
}
.upload-summary-banner .summary-pending {
    color: var(--color-amber);
}
.upload-summary-banner .summary-failed {
    color: var(--color-red);
}

/* Per-file stage section */
.upload-progress {
    margin-top: 0.35rem;
}

/* Stage pill — compact status badge */
.upload-stage-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    vertical-align: middle;
}
.upload-stage-pill .stage-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Stage variants */
.upload-stage-uploading {
    background: color-mix(in srgb, var(--color-blue) 12%, transparent);
    color: var(--color-blue);
    border: 1px solid color-mix(in srgb, var(--color-blue) 30%, transparent);
}
.upload-stage-uploading .stage-dot {
    background: var(--color-blue);
    animation: dot-pulse 1.4s ease-in-out infinite;
}

.upload-stage-processing {
    background: color-mix(in srgb, var(--color-amber) 12%, transparent);
    color: var(--color-amber);
    border: 1px solid color-mix(in srgb, var(--color-amber) 30%, transparent);
}
.upload-stage-processing .stage-dot {
    background: var(--color-amber);
    animation: dot-pulse 1.4s ease-in-out infinite;
}

.upload-stage-extracting {
    background: color-mix(in srgb, var(--color-blue) 10%, transparent);
    color: var(--color-blue);
    border: 1px solid color-mix(in srgb, var(--color-blue) 25%, transparent);
    opacity: 0.85;
}
.upload-stage-extracting .stage-dot {
    background: var(--color-blue);
    animation: dot-pulse 2s ease-in-out infinite;
}

.upload-stage-ready {
    background: color-mix(in srgb, var(--color-green) 12%, transparent);
    color: var(--color-green);
    border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
    animation: pulse-ready 0.25s ease-out 1;
}
.upload-stage-ready .stage-dot { background: var(--color-green); }

.upload-stage-error {
    background: color-mix(in srgb, var(--color-red) 10%, transparent);
    color: var(--color-red);
    border: 1px solid color-mix(in srgb, var(--color-red) 25%, transparent);
}
.upload-stage-error .stage-dot { background: var(--color-red); }

@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

@keyframes pulse-ready {
    0%   { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.7; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* Upload progress track (thin bar shown during file transfer) */
.upload-progress-track {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.35rem;
}
.upload-progress-bar {
    height: 100%;
    background: var(--color-blue);
    border-radius: 2px;
    transition: width 0.2s ease;
}

/* Upload status text — stage label */
.upload-status-text {
    font-size: 0.73rem;
    color: var(--text-muted);
}

/* Error detail + retry */
.upload-error-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}
.upload-error-reason {
    font-size: 0.72rem;
    color: var(--color-red);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-retry-btn {
    flex-shrink: 0;
    padding: 0.15rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--color-red);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.upload-retry-btn:hover { opacity: 0.85; }

/* Chat-ready and complete badges */
.upload-chat-ready-badge,
.upload-complete-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    margin-left: 0.4rem;
    vertical-align: middle;
}
.upload-chat-ready-badge {
    background: color-mix(in srgb, var(--color-amber) 15%, transparent);
    color: var(--color-amber);
    border: 1px solid color-mix(in srgb, var(--color-amber) 35%, transparent);
}
.upload-complete-badge {
    background: color-mix(in srgb, var(--color-green) 12%, transparent);
    color: var(--color-green);
    border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
}
.upload-pii-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 500;
    margin-left: 0.4rem;
    vertical-align: middle;
    background: color-mix(in srgb, var(--color-amber) 10%, transparent);
    color: var(--color-amber);
    border: 1px solid color-mix(in srgb, var(--color-amber) 25%, transparent);
    cursor: help;
}

/*
   Presence Indicators — who is viewing this case (#1353-C)
*/

.dkt-presence-bar {
    display: flex;
    align-items: center;
    margin-left: 4px;
}

.presence-avatars {
    display: flex;
    align-items: center;
}

.presence-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-elevated);
    margin-left: -6px;
    cursor: default;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.presence-avatar:first-child {
    margin-left: 0;
}

.presence-avatar:hover {
    transform: scale(1.15);
    z-index: 1;
}

.presence-overflow {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border);
    font-size: 10px;

}

/* Standalone CasePresence component (#1353-D) */
.case-presence-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.presence-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-right: 4px;
}

/* =============================================================================
 * Document Coverage UI (#1929)
 * Vault-page Coverage card + per-row category badge.
 * All colors via CSS variables — light/dark themes inherit automatically.
 * ============================================================================= */

.vault-coverage-mount {
    margin-bottom: 16px;
}

.coverage-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    color: var(--text-primary);
    font-size: 13px;
}

.coverage-card--condensed {
    padding: 10px 14px;
}

/* IA Redesign §3 retro completion (2.10.5) — inline-chips variant for the
   Documents tab. Single horizontal layout per loxmetis_docs_tab_mockup.html.
   Uses brand tokens; no hardcoded hex per known-bug-pattern #6. */
.coverage-card--inline-chips {
    background: var(--bg-card, var(--bg-elevated));
    border: 1px solid var(--border);
    padding: 16px 18px;
}
.ev-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}
.ev-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.ev-label svg { color: var(--accent, var(--primary)); }
.ev-score {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.ev-track {
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}
.ev-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent, var(--primary));
    transition: width 0.3s ease;
}
.ev-fill--low { background: var(--color-amber); }
.ev-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ev-cat {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}
.ev-cat svg { flex-shrink: 0; }
.ev-cat--found {
    background: var(--badge-green-bg, rgba(16,185,129,0.12));
    color: var(--color-green);
}
.ev-cat--missing {
    background: var(--badge-amber-bg, rgba(245,158,11,0.12));
    color: var(--color-amber);
    border: 1px dashed var(--color-amber);
}
.ev-cat--failed {
    background: var(--badge-red-bg, rgba(239,68,68,0.12));
    color: var(--color-red, var(--danger));
    border: 1px dashed var(--color-red, var(--danger));
}

/* IA Redesign §3.5 retro (2.10.5) — Needs Attention banner on Cases page.
   Amber-tinted card surfaces stalled / SOL / settlement-ready cases. The
   "Show only these" button toggles a client-side filter. */
.lib-attention-banner {
    background: var(--badge-amber-bg, rgba(245,158,11,0.10));
    border: 1px solid var(--color-amber);
    border-radius: 10px;
    padding: 12px 16px;
}
.lib-attention-banner__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lib-attention-banner__icon {
    color: var(--color-amber);
    flex-shrink: 0;
}
.lib-attention-banner__body {
    flex: 1;
    min-width: 0;
}
.lib-attention-banner__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.lib-attention-banner__reasons {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.lib-attention-banner--active {
    background: var(--badge-amber-bg, rgba(245,158,11,0.18));
    border-color: var(--color-amber);
    box-shadow: 0 0 0 1px var(--color-amber) inset;
}

/* Drop zone — full-width below the doc list per spec. Reuses CSS variables
   for theme switching; click target wraps the whole zone. */
.vault-dropzone {
    border: 1.5px dashed var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-top: 16px;
    transition: border-color 0.15s ease, background 0.15s ease;
    cursor: pointer;
    background: transparent;
}
.vault-dropzone:hover,
.vault-dropzone:focus {
    border-color: var(--accent, var(--primary));
    background: var(--bg-elevated);
    outline: none;
}
.vault-dropzone__inner {
    font-size: 13px;
    color: var(--text-muted);
}
.vault-dropzone__link {
    color: var(--accent, var(--primary));
    font-weight: 600;
    text-decoration: underline;
}

.coverage-card--error {
    color: var(--text-muted);
    border-style: dashed;
}

.coverage-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.coverage-card__readiness {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.coverage-card__readiness-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.coverage-card__readiness-meta {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.coverage-card__section {
    margin-top: 10px;
}

.coverage-card__section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.coverage-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.coverage-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
}

.coverage-row + .coverage-row {
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 2px;
}

.coverage-row__icon {
    flex: 0 0 auto;
    line-height: 1;
    margin-top: 2px;
}

.coverage-row__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.coverage-row__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.coverage-row__hint {
    font-size: 12px;
    color: var(--text-muted);
}

.coverage-row--missing .coverage-row__label {
    color: var(--text-muted);
    font-weight: 500;
}

.coverage-row--empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 8px 0;
}

.coverage-card__footnote {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-style: italic;
}

/* Per-row category badge in the Vault table TYPE column. Sits inline with the
 * existing PDF/IMG MIME badge using a thin separator dot.
 */
.vault-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, var(--text-muted));
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.vault-category-badge svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.vault-category-badge__label {
    color: var(--text-primary);
}

.vault-category-badge--unclassified { opacity: 0.55; }

/* Editable category badge — clickable button variant for manual override.
   Inherits the visual style from .vault-category-badge but is a real <button>
   with hover affordance and a chevron caret indicating it's clickable. */
button.vault-category-badge--editable {
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

button.vault-category-badge--editable:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}

button.vault-category-badge--editable:focus-visible {
    outline: 2px solid var(--border-info, var(--accent));
    outline-offset: 2px;
}

.vault-category-badge__caret {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 2px;
}

/* Category picker — popover dropdown anchored to the badge */
.vault-category-picker {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-card-hover, 0 4px 12px rgba(0, 0, 0, 0.15));
    min-width: 240px;
    padding: 6px;
    font-size: 12px;
}

.vault-category-picker__header {
    padding: 6px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.vault-category-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.vault-category-picker__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-primary);
}

.vault-category-picker__item:hover,
.vault-category-picker__item:focus-visible {
    background: var(--bg-hover);
    outline: none;
}

.vault-category-picker__item.is-selected {
    background: var(--bg-success-soft, var(--bg-hover));
    color: var(--text-primary);
}

.vault-category-picker__icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vault-category-picker__label {
    flex: 1 1 auto;
    min-width: 0;
}

.vault-category-picker__check {
    color: var(--text-success, var(--success));
    font-weight: 700;
}

.vault-category-picker__divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.vault-category-picker__item--clear {
    color: var(--text-secondary);
}

/* Coverage banner row (Task 3.1 — unified status surface) */
/* =============================================================================
 * Coverage banner row, chips, progress bar, and two-column panel grid
 * (Vault Coverage Redesign — course correction 2026-05-08)
 * ============================================================================= */

.coverage-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.coverage-banner__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.coverage-banner__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.coverage-banner__icon--success {
    background: var(--bg-success-soft);
    color: var(--text-success);
}

.coverage-banner__icon--warning {
    background: var(--bg-warning-soft);
    color: var(--text-warning);
}

.coverage-banner__icon--neutral {
    background: var(--border-subtle);
    color: var(--text-muted);
}

.coverage-banner__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.coverage-banner__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.coverage-banner__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.coverage-banner__subtitle {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
}

.coverage-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.coverage-chip {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.coverage-chip--success {
    background: var(--bg-success-soft);
    color: var(--text-success);
}

.coverage-chip--warning {
    background: var(--bg-warning-soft);
    color: var(--text-warning);
}

.coverage-chip--danger {
    background: var(--bg-danger-soft);
    color: var(--text-danger);
}

.coverage-chip--neutral {
    background: var(--border-subtle);
    color: var(--text-muted);
}

.coverage-banner__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.coverage-banner__action:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.coverage-banner__action:focus-visible {
    outline: 2px solid var(--border-info);
    outline-offset: 2px;
}

.coverage-banner__action-icon {
    flex: 0 0 auto;
}

/* Two-tone progress bar */
.coverage-progress {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    display: flex;
    overflow: hidden;
    margin-bottom: 12px;
}

.coverage-progress__ready {
    background: var(--success);
    height: 100%;
    transition: width 0.4s ease;
    flex-shrink: 0;
}

.coverage-progress__failed {
    background: var(--danger);
    height: 100%;
    transition: width 0.4s ease;
    flex-shrink: 0;
}

/* In-flight docs — animated stripe so the bar visibly moves while processing.
   Sits between the ready (green) and failed (red) segments. */
.coverage-progress__processing {
    background: repeating-linear-gradient(
        45deg,
        var(--accent) 0,
        var(--accent) 6px,
        color-mix(in srgb, var(--accent) 70%, transparent) 6px,
        color-mix(in srgb, var(--accent) 70%, transparent) 12px
    );
    background-size: 17px 100%;
    animation: coverage-progress-stripe 1.2s linear infinite;
    height: 100%;
    transition: width 0.4s ease;
    flex-shrink: 0;
}

@keyframes coverage-progress-stripe {
    from { background-position: 0 0; }
    to   { background-position: 17px 0; }
}

/* Per-doc stage detail in the Vault Status column. Sits under the status pill. */
.vault-status-stage {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    font-style: italic;
}

/* Two-column panel grid */
.coverage-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 768px) {
    .coverage-panels {
        grid-template-columns: 1fr;
    }
}

.coverage-panel {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-elevated);
}

/* sq-collapse-btn — neutral header that does not look like a form control */
.sq-collapse-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding: 8px 12px;
    background: var(--border-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

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

.sq-collapse-btn:focus-visible {
    outline: 2px solid var(--border-info);
    outline-offset: -2px;
    border-radius: 4px;
}

.sq-collapse-btn__left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.coverage-panel__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
}

.coverage-panel__count {
    font-size: 10px;
    padding: 1px 6px;
}

.coverage-panel__annotation {
    margin-left: auto;
    margin-right: 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.coverage-panel__chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.coverage-panel__chevron--collapsed {
    transform: rotate(-90deg);
}

.coverage-panel__body {
    padding: 6px 4px;
}

.coverage-panel__body[hidden] {
    display: none;
}

.coverage-panel__body .coverage-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.coverage-panel__body .coverage-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.3;
    border-radius: 4px;
    border: none;
    margin: 0;
}

.coverage-panel__body .coverage-row + .coverage-row {
    border-top: none;
    padding-top: 5px;
    margin-top: 0;
}

.coverage-panel__body .coverage-row .coverage-row__icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.coverage-panel__body .coverage-row .coverage-row__label {
    flex: 1 1 auto;
    color: var(--text-primary);
    min-width: 0;
}

.coverage-panel__body .coverage-row__count {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--border-subtle);
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

.coverage-panel__body .coverage-row--placeholder {
    opacity: 0.55;
}

.coverage-panel__body .coverage-row--placeholder .coverage-row__label,
.coverage-panel__body .coverage-row--placeholder .coverage-row__icon {
    color: var(--text-muted);
}

.coverage-panel__body .coverage-row__count--placeholder {
    background: transparent;
    color: var(--text-muted);
}

.coverage-panel__body .coverage-row--missing .coverage-row__icon {
    color: var(--text-muted);
}

.coverage-panel__body .coverage-row--empty {
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

/* =============================================================================
 * Vault + Coverage responsive — #1978
 * Three breakpoints: ≤768px (tablet), ≤480px (mobile), desktop untouched.
 * All colors via CSS variables — no new hex values.
 * ============================================================================= */

/* ── Tablet (≤768px) ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Allow horizontal scroll on the document table so narrow viewports
       don't overflow the page body. Override the desktop overflow:hidden. */
    .vault-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Keep border-radius clipping on the y axis */
        overflow-y: hidden;
    }

    /* coverage-panels grid-to-1-col is already in the base block above,
       but kept here for readability and in case the base rule is refactored. */
    .coverage-panels {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile (≤480px) ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Prevent the coverage card from exceeding viewport width */
    .coverage-card {
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
    }

    /* Prevent the banner itself from overflowing */
    .coverage-banner {
        box-sizing: border-box;
        max-width: 100%;
    }

    /* Chips row: already flex-wrap:wrap in base; ensure gap doesn't overflow */
    .coverage-chips {
        gap: 4px;
        row-gap: 4px;
    }

    /* CTA label text hidden at narrow widths — icon remains for recognisability */
    .coverage-banner__action span {
        display: none;
    }

    /* Remove the gap between icon and (now-hidden) label */
    .coverage-banner__action {
        gap: 0;
        padding: 0;
    }

    /* WCAG 2.1 AA — 44×44px minimum touch targets */
    .coverage-banner__action,
    .vault-act-btn,
    .vault-cb {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Checkboxes live inside table cells; reset min-width so columns don't blow out */
    .vault-cb {
        min-width: 44px;
        box-sizing: border-box;
    }

    /* Table scroll still applies at 480px */
    .vault-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overflow-y: hidden;
    }
}

/* =============================================================================
 * Structured Output Cards (#1934)
 * Cool-persona structured outputs (Mediator/Adjuster/Arbitrator/MedicalExpert).
 * All colors via CSS variables — light/dark themes inherit automatically.
 * Print-safe layout via page-break-inside: avoid.
 * ============================================================================= */

.accordion-panel__body--card {
    padding: 0;
}

.oc-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    page-break-inside: avoid;
}

.oc-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.oc-card__icon {
    color: var(--accent);
    line-height: 1;
}

.oc-card__title {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.oc-card__row {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.oc-card__col {
    flex: 1;
    min-width: 220px;
    margin-bottom: 14px;
}

.oc-card__subhead {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 6px;
}

.oc-card__col p {
    margin: 0 0 8px;
}

.oc-card__small {
    font-size: 12px;
    color: var(--text-muted);
}

.oc-card__muted {
    color: var(--text-muted);
    font-style: italic;
    font-size: 13px;
    margin: 0;
}

/* Verdict / exposure range strip */
.oc-range {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px;
    background: var(--bg-card, var(--bg-main));
    border-radius: 8px;
    border: 1px solid var(--border);
}

.oc-range__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 4px;
    border-radius: 6px;
}

.oc-range__col--highlight {
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
}

.oc-range__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.oc-range__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.oc-range__col--highlight .oc-range__value {
    color: var(--accent);
}

/* Lists inside cards */
.oc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oc-list li {
    position: relative;
    padding: 4px 0 4px 18px;
    font-size: 13px;
}

.oc-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.5;
}

/* Definition-list stats */
.oc-stats {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oc-stats__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.oc-stats__row:last-child {
    border-bottom: none;
}

.oc-stats__row dt {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.oc-stats__row dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.oc-stats__row--total {
    border-top: 2px solid var(--border);
    border-bottom: none;
    padding-top: 8px;
    margin-top: 4px;
}

.oc-stats__row--total dt {
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.oc-stats__row--total dd {
    font-size: 16px;
    color: var(--accent);
}

/* Risk / causation chip */
.oc-risk,
.oc-causation {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-card, var(--bg-main));
    color: var(--text-secondary, var(--text-muted));
    border: 1px solid var(--border);
}

.oc-risk--high,
.oc-causation--unrelated {
    color: var(--color-red, var(--text-primary));
    border-color: var(--color-red, var(--border));
}

.oc-risk--medium,
.oc-causation--disputed {
    color: var(--color-amber, var(--text-primary));
    border-color: var(--color-amber, var(--border));
}

.oc-risk--low,
.oc-causation--related {
    color: var(--color-green, var(--text-primary));
    border-color: var(--color-green, var(--border));
}

/* Mediator recommendation block */
.oc-card__recommendation {
    background: var(--bg-card, var(--bg-main));
    border-left: 3px solid var(--accent);
    padding: 12px 14px;
    border-radius: 6px;
    margin: 12px 0;
}

.oc-card__recommendation p {
    margin: 0;
    font-weight: 500;
}

/* Methodology disclosure (Mediator) */
.oc-card__methodology {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--bg-card, var(--bg-main));
    border-radius: 6px;
    border: 1px solid var(--border);
}

.oc-card__methodology summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.oc-card__methodology p {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-secondary, var(--text-muted));
}

/* Arbitrator final award block */
.oc-card__award {
    margin-top: 16px;
    padding: 14px 18px;
    background: var(--bg-card, var(--bg-main));
    border: 2px solid var(--accent);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    page-break-inside: avoid;
}

.oc-card__award-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.oc-card__award-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* Medical timeline */
.oc-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--border);
    margin-left: 6px;
}

.oc-timeline__item {
    position: relative;
    padding: 4px 0 4px 18px;
    font-size: 13px;
}

.oc-timeline__item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-elevated);
}

.oc-timeline__date {
    display: inline-block;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
}

.oc-timeline__event {
    color: var(--text-secondary, var(--text-muted));
}

/* Mobile collapse */
@media (max-width: 540px) {
    .oc-card__row {
        flex-direction: column;
        gap: 0;
    }
    .oc-range {
        grid-template-columns: 1fr;
    }
    .oc-range__col {
        flex-direction: row;
        justify-content: space-between;
    }
    .oc-range__label {
        margin-bottom: 0;
    }
    .oc-card__award {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Print */
@media print {
    .oc-card {
        break-inside: avoid;
    }
}

/* =============================================================================
   SHEPHERD.JS ONBOARDING THEME (#1356)
   ============================================================================= */

/* Tour container */
.shepherd-element.loxmetis-shepherd {
    max-width: 360px;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    border: 2px solid var(--primary);
    background: var(--bg-elevated);
}

/* Header bar */
.shepherd-element.loxmetis-shepherd .shepherd-header {
    background: var(--primary);
    border-radius: 9px 9px 0 0;
    padding: 14px 16px 12px;
}

.shepherd-element.loxmetis-shepherd .shepherd-title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Step counter badge — "1 / 4" shown in tour step titles */
.shepherd-element.loxmetis-shepherd .shepherd-step-badge {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.7;
    flex-shrink: 0;
    margin-left: 8px;
}

.shepherd-element.loxmetis-shepherd .shepherd-cancel-icon {
    color: rgba(255, 255, 255, 0.75);
}

.shepherd-element.loxmetis-shepherd .shepherd-cancel-icon:hover {
    color: #fff;
}

/* Body text */
.shepherd-element.loxmetis-shepherd .shepherd-text {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.55;
    padding: 14px 16px;
    background: var(--bg-elevated);
}

/* Footer / button row */
.shepherd-element.loxmetis-shepherd .shepherd-footer {
    padding: 0 16px 14px;
    background: var(--bg-elevated);
    border-radius: 0 0 9px 9px;
    gap: 8px;
}

/* Primary action button */
.shepherd-button.shepherd-button-primary {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.shepherd-button.shepherd-button-primary:hover {
    opacity: 0.88;
}

/* Secondary / skip button */
.shepherd-button.shepherd-button-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.shepherd-button.shepherd-button-secondary:hover {
    background: var(--bg-main);
}

/* Static highlight on tour target elements (no pulse) */
.shepherd-target.shepherd-enabled {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Contextual tip variant — smaller, no header */
.shepherd-element.loxmetis-contextual-tip {
    max-width: 300px;
    border: 2px solid var(--primary);
}

.shepherd-element.loxmetis-contextual-tip .shepherd-header {
    display: none;
}

.shepherd-element.loxmetis-contextual-tip .shepherd-text {
    padding: 12px 14px;
    font-size: 13px;
    border-radius: 9px 9px 0 0;
}

/* Confetti overlay (brief flash on tour completion) */
.shepherd-confetti-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(ellipse at center, rgba(99, 179, 237, 0.18) 0%, transparent 70%);
    animation: shepherd-confetti-fade 2s ease forwards;
}

@keyframes shepherd-confetti-fade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* =============================================================================
   FLOATING HELP BUTTON (#1356)
   ============================================================================= */

#help-float-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9000;
    font-size: 18px;
    font-weight: 700;
    font-family: serif;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s, opacity 0.15s;
    user-select: none;
}

#help-float-btn:hover {
    transform: scale(1.08);
    opacity: 0.9;
}

/* =========================================================
   Unified Calendar — milestone pill classes (#2059)
   All colors via CSS variables — no hardcoded hex.
   ========================================================= */

/* Mediation / arbitration — teal */
.cal-pill-milestone-mediation {
    background: var(--badge-blue-bg);
    color: var(--accent-text);
    border-left: 2px solid var(--accent);
}

/* Trial — red */
.cal-pill-milestone-trial {
    background: var(--badge-red-bg);
    color: var(--color-red);
    border-left: 2px solid var(--color-red);
}

/* Scheduled communications (phone, zoom, email, in_person) — blue */
.cal-pill-milestone-comm {
    background: var(--badge-blue-bg);
    color: var(--color-blue);
    border-left: 2px solid var(--color-blue);
}

/* Completed milestones — muted grey */
.cal-pill-milestone-completed {
    background: var(--border-subtle, rgba(255,255,255,0.05));
    color: var(--text-muted);
    border-left: 2px solid var(--border);
    opacity: 0.7;
}

/* Settled / closed milestones — green */
.cal-pill-milestone-done {
    background: var(--badge-green-bg);
    color: var(--color-green);
    border-left: 2px solid var(--color-green);
}

/* Overview: daily summary strip (#2059) */
.ov-daily-summary {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0 4px;
    display: none; /* shown by JS when data is available */
    font-style: italic;
}

/* Overview: today's milestone items (above tasks) */
.ov-milestone-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
    cursor: pointer;
    transition: background 0.12s;
}

.ov-milestone-item:hover {
    background: var(--bg-hover);
}

.ov-milestone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Verdict Form — non-economic evidence display */
.vf-evidence-box {
    margin-top: 0.35rem;
}

.vf-evidence-item {
    margin: 0.35rem 0 0;
    padding: 0.35rem 0.65rem;
    border-left: 3px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
}

.vf-evidence-item cite {
    display: block;
    font-style: normal;
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.vf-evidence-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    display: block;
    margin-top: 0.3rem;
}

/* ================================================================
   Trial banner (#2233) — fixed at top of viewport above the app
   ================================================================ */

.trial-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;                       /* above sidebar (10) + modals stay above via 2000+ */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.trial-banner--ending_soon {
    background: #fff3cd;                 /* warm warning */
    color: #5a4500;
    border-bottom: 1px solid #f0d674;
}

.trial-banner--expired {
    background: #fde2e2;                 /* hard-gate red */
    color: #7a1f1f;
    border-bottom: 1px solid #f4a8a8;
}

.trial-banner__message {
    flex: 0 1 auto;
}

.trial-banner__cta {
    flex: 0 0 auto;
    padding: 0.3rem 0.9rem;
    border-radius: 6px;
    background: var(--brand-primary, #0d7b66);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: background 120ms ease;
}

.trial-banner__cta:hover {
    background: var(--brand-primary-dark, #0a6253);
    text-decoration: none;
}

.trial-banner__dismiss {
    flex: 0 0 auto;
    padding: 0;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 120ms ease;
}

.trial-banner__dismiss:hover,
.trial-banner__dismiss:focus {
    background: rgba(0, 0, 0, 0.08);
    outline: none;
}

/* When the banner is on the page, push the app down so it isn't hidden
   under the fixed banner. 44px matches the banner's rendered height at
   default zoom (0.6rem pad + 0.9rem text + 1px border, with the gap).
   The class is toggled by TrialBanner.js on body. */
body.has-trial-banner {
    padding-top: 44px;
}

/* Stacked vertical layout on phones — the upgrade CTA gets its own line. */
@media (max-width: 600px) {
    .trial-banner {
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    body.has-trial-banner {
        padding-top: 76px;
    }
}

/* ================================================================
   Settings → Billing section (#2233 follow-up)
   Reuses .admin-usage-* classes for the usage bars — visual parity
   with the existing admin dashboard.
   ================================================================ */

.pref-billing-section { /* uses .pref-section base spacing */ }

.pref-billing-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    margin-bottom: 12px;
}

.pref-billing-plan-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.pref-billing-cta {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 6px;
    background: var(--brand-primary, #0d7b66);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 120ms ease;
}

.pref-billing-cta:hover {
    background: var(--brand-primary-dark, #0a6253);
    text-decoration: none;
}

.pref-billing-usage-grid {
    /* admin-usage-grid already provides the responsive layout. */
    margin-top: 6px;
}

.pref-trial-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.pref-trial-badge--active        { background: #e0f1ec; color: #0d7b66; }
.pref-trial-badge--ending_soon   { background: #fff3cd; color: #5a4500; }
.pref-trial-badge--expired       { background: #fde2e2; color: #7a1f1f; }

/* ================================================================
   Billing upgrade modal (#2231) — surfaced by core/client.js
   handleResponse() on 402 tier_limit_exceeded or 403
   subscription_inactive/past_due.
   ================================================================ */
.billing-upgrade-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2500;                       /* above trial-banner (1000) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: billingUpgradeFade 0.18s ease-out;
}
@keyframes billingUpgradeFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.billing-upgrade-modal__card {
    position: relative;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.25rem;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.billing-upgrade-modal__close {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
}
.billing-upgrade-modal__close:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.billing-upgrade-modal__title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    color: var(--text-primary);
}
.billing-upgrade-modal__message {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
}
.billing-upgrade-modal__meta {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: lowercase;
    font-variant: small-caps;
    letter-spacing: 0.03em;
}
.billing-upgrade-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.billing-upgrade-modal__btn-secondary,
.billing-upgrade-modal__btn-primary {
    display: inline-block;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.billing-upgrade-modal__btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
}
.billing-upgrade-modal__btn-secondary:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.billing-upgrade-modal__btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.billing-upgrade-modal__btn-primary:hover {
    filter: brightness(1.08);
}

/* Decision Context — confirm an AI-proposed determination (Appendix A, #3161).
   Deliberately quiet: it sits inline at the end of a 12px data row, so it must
   read as an affordance without competing with the value it belongs to. All
   colours are variables — a hardcoded hex here looks right in dark mode and
   breaks in light (see the CLAUDE.md bug pattern). */
.dc-confirm-btn {
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
    color: var(--color-amber);
    background: transparent;
    border: 1px solid var(--color-amber);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.dc-confirm-btn:hover:not(:disabled) {
    background: var(--color-amber);
    color: var(--bg-main);
}
.dc-confirm-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
.dc-confirm-btn:focus-visible {
    outline: 2px solid var(--color-amber);
    outline-offset: 2px;
}

/* =============================================================================
 * Negotiation Calculator (#neg-calc-view) — in-app port of the free-site tool.
 * Scoped `.negc-*` prefix; app CSS variables only (theme-aware, no hardcoded hex)
 * so it reads like every other Toolbox tool in both light and dark.
 * ========================================================================== */
.negc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.negc-span6 { grid-column: span 6; }
.negc-span12 { grid-column: span 12; }
.negc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 22px;
}
.negc-card h2 { margin: 0 0 14px; color: var(--text-primary); font-size: 1.15rem; font-weight: 700; }
.negc-sub { font-size: 0.88rem; color: var(--text-muted); line-height: 1.45; margin: -6px 0 14px; }
.negc-inputs { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.negc-inputs.negc-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.negc-inputs.negc-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.negc-inputs label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.negc-inputs input, .negc-inputs select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 1rem;
    background: var(--bg-input);
    color: var(--text-primary);
    box-sizing: border-box;
}
.negc-inputs input:focus, .negc-inputs select:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-color: var(--accent);
}
.negc-hero-result {
    margin-top: 16px; border-radius: 12px; padding: 16px;
    background: var(--bg-hover); border-left: 4px solid var(--accent);
}
.negc-hero-result strong, .negc-mini strong, .negc-relationship strong,
.negc-drift strong, .negc-corridor strong, .negc-efficiency strong {
    display: block; font-size: 0.74rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.negc-hero-result .negc-big { display: block; margin-top: 4px; font-size: 1.9rem; font-weight: 800; color: var(--text-primary); }
.negc-mini-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.negc-mini-row.negc-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.negc-mini { padding: 12px; background: var(--bg-main); border: 1px solid var(--border); border-radius: 9px; }
.negc-mini span { display: block; margin-top: 4px; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.negc-relationship {
    margin-top: 14px; border-radius: 12px; padding: 14px 16px;
    background: var(--bg-hover); border-left: 4px solid var(--accent);
}
.negc-relationship span { display: block; margin-top: 4px; font-size: 1rem; font-weight: 500; color: var(--text-primary); }
.negc-drift {
    margin-top: 12px; border-radius: 12px; padding: 14px 16px;
    background: color-mix(in srgb, var(--warning) 10%, transparent); border-left: 4px solid var(--warning);
}
.negc-drift .negc-drift-value { display: block; margin-top: 4px; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.negc-drift span:last-child { display: block; margin-top: 6px; font-size: 0.95rem; font-weight: 500; color: var(--text-primary); }
.negc-corridor {
    margin-top: 12px; border-radius: 12px; padding: 14px 16px;
    background: var(--bg-hover); border-left: 4px solid var(--accent);
}
.negc-corridor .negc-corridor-value { display: block; margin-top: 4px; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.negc-corridor span:last-child { display: block; margin-top: 6px; font-size: 0.95rem; font-weight: 500; color: var(--text-primary); }
.negc-efficiency {
    margin-top: 12px; border-radius: 12px; padding: 14px 16px;
    background: var(--bg-hover); border-left: 4px solid var(--accent);
}
.negc-efficiency .negc-efficiency-value { display: block; margin-top: 4px; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.negc-efficiency span:last-child { display: block; margin-top: 6px; font-size: 0.95rem; font-weight: 500; color: var(--text-primary); }
.negc-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.negc-btn { border: 1px solid transparent; border-radius: 9px; padding: 11px 16px; font-weight: 600; cursor: pointer; font-size: 0.92rem; }
.negc-btn.negc-primary { background: var(--accent); color: #fff; }
.negc-btn.negc-accent { background: var(--success); color: #fff; }
.negc-btn.negc-danger { background: var(--danger); color: #fff; }
.negc-btn.negc-secondary { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.negc-btn:hover { filter: brightness(1.08); }
.negc-status { margin-top: 12px; font-size: 0.9rem; color: var(--success); min-height: 1.1em; }
.negc-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 12px; }
.negc-table-wrap table { width: 100%; border-collapse: collapse; min-width: 900px; }
.negc-table-wrap th, .negc-table-wrap td {
    padding: 10px 11px; text-align: right; border-bottom: 1px solid var(--border);
    white-space: nowrap; font-size: 0.9rem; color: var(--text-primary);
}
.negc-table-wrap th {
    color: var(--text-secondary); font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.03em; background: var(--bg-main);
}
.negc-table-wrap th:first-child, .negc-table-wrap td:first-child { text-align: center; }
.negc-table-wrap td.negc-note, .negc-table-wrap th.negc-note { text-align: left; white-space: normal; }
.negc-table-wrap th.negc-pl, .negc-table-wrap td.negc-pl,
.negc-table-wrap th.negc-df, .negc-table-wrap td.negc-df { background: var(--bg-hover); }
.negc-table-wrap th.negc-mid, .negc-table-wrap td.negc-mid {
    background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 700;
}
.negc-table-wrap td.negc-positive { color: var(--success); }
.negc-table-wrap td.negc-negative { color: var(--danger); }
/* Negotiation Efficiency per-round labels: green = efficient, amber = low/reversed. */
.negc-table-wrap td.negc-eff-efficient { color: var(--color-green); font-weight: 700; }
.negc-table-wrap td.negc-eff-moderate { color: var(--text-secondary); }
.negc-table-wrap td.negc-eff-low,
.negc-table-wrap td.negc-eff-reversed { color: var(--color-amber); font-weight: 700; }
/* Detail columns (convergence + width change) — hidden until the toggle adds .negc-show-detail. */
.negc-table-wrap th.negc-detail, .negc-table-wrap td.negc-detail { display: none; }
.negc-table-wrap table.negc-show-detail th.negc-detail,
.negc-table-wrap table.negc-show-detail td.negc-detail { display: table-cell; }
.negc-privacy { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin: 20px 0 0; }
.negc-disclaimer { text-align: center; font-size: 0.78rem; color: var(--text-muted); max-width: 560px; margin: 14px auto 40px; }
.negc-empty { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
@media (max-width: 900px) {
    .negc-span6, .negc-span12 { grid-column: span 12; }
    .negc-inputs, .negc-inputs.negc-three, .negc-inputs.negc-four,
    .negc-mini-row, .negc-mini-row.negc-four { grid-template-columns: 1fr; }
}

/* ==========================================================================
 * Verdict Library (B5 #3278) — external verdict-reporter intake UI.
 * All rules scoped to #verdict-library-view. Colors via CSS vars only.
 * ========================================================================== */
#verdict-library-view .vl-view { padding: 24px 28px; max-width: 1200px; margin: 0 auto; }
#verdict-library-view .vl-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 20px;
}
#verdict-library-view .vl-title {
    font-size: 22px; font-weight: 800; margin: 0 0 4px; color: var(--text-primary);
}
#verdict-library-view .vl-subtitle {
    font-size: 13px; color: var(--text-muted); margin: 0; max-width: 640px; line-height: 1.5;
}
#verdict-library-view .vl-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

#verdict-library-view .vl-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; border: 1px solid var(--border);
    background: var(--bg-elevated); color: var(--text-primary);
    transition: opacity 0.12s, background 0.12s;
}
#verdict-library-view .vl-btn:hover:not(:disabled) { opacity: 0.9; }
#verdict-library-view .vl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#verdict-library-view .vl-btn-primary {
    background: var(--accent); border-color: var(--accent); color: var(--btn-primary-text, #fff);
}
#verdict-library-view .vl-btn-secondary {
    background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary);
}
#verdict-library-view .vl-btn-ghost {
    background: transparent; border-color: transparent; color: var(--text-secondary);
    padding: 4px 8px;
}
#verdict-library-view .vl-btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
#verdict-library-view .vl-btn-sm { padding: 4px 10px; font-size: 12px; }
#verdict-library-view .vl-btn-danger { color: var(--color-red); }
#verdict-library-view .vl-btn-danger:hover { background: var(--bg-danger-soft); color: var(--color-red); }

#verdict-library-view .vl-error {
    background: var(--bg-danger-soft); border: 1px solid var(--color-red);
    color: var(--text-danger, var(--color-red)); border-radius: 8px;
    padding: 10px 14px; margin-bottom: 16px; font-size: 13px;
}

#verdict-library-view .vl-flag-off {
    text-align: center; padding: 60px 24px; background: var(--bg-elevated);
    border: 1px dashed var(--border); border-radius: 12px; color: var(--text-secondary);
}
#verdict-library-view .vl-flag-off-emoji { font-size: 48px; margin-bottom: 12px; }
#verdict-library-view .vl-flag-off-title {
    font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--text-primary);
}
#verdict-library-view .vl-flag-off-msg {
    font-size: 14px; line-height: 1.6; max-width: 520px; margin: 0 auto;
}
#verdict-library-view .vl-flag-off-msg code {
    background: var(--bg-main); padding: 2px 6px; border-radius: 4px;
    font-family: 'SF Mono', Consolas, monospace; font-size: 12px; color: var(--accent-text);
}

#verdict-library-view .vl-form {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; margin-bottom: 20px;
}
#verdict-library-view .vl-form-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
#verdict-library-view .vl-form-title {
    font-size: 15px; font-weight: 700; margin: 0; color: var(--text-primary);
}
#verdict-library-view .vl-form-grid {
    padding: 16px 18px; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px;
}
#verdict-library-view .vl-section-header {
    grid-column: 1 / -1; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted);
    padding: 8px 0 2px; border-bottom: 1px solid var(--border-subtle, var(--border));
    margin-top: 4px;
}
#verdict-library-view .vl-section-header:first-child { margin-top: 0; }
#verdict-library-view .vl-field {
    display: flex; flex-direction: column; gap: 4px;
}
#verdict-library-view .vl-field-checkbox {
    flex-direction: row; align-items: center; gap: 8px;
}
#verdict-library-view .vl-field-label {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
#verdict-library-view .vl-field-input {
    padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--input-bg); color: var(--text-primary);
    font-family: inherit; font-size: 13px; outline: none;
    transition: border-color 0.12s;
}
#verdict-library-view .vl-field-input:focus { border-color: var(--accent); }
#verdict-library-view .vl-field-input::placeholder { color: var(--text-muted); }
#verdict-library-view .vl-form-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px; border-top: 1px solid var(--border);
    background: var(--bg-main);
}

#verdict-library-view .vl-list {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
}
#verdict-library-view .vl-list-head, #verdict-library-view .vl-row {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1fr 0.9fr 0.9fr 0.9fr;
    gap: 12px; align-items: center;
    padding: 10px 14px; font-size: 13px;
}
#verdict-library-view .vl-list-head {
    background: var(--bg-main); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
#verdict-library-view .vl-row {
    border-bottom: 1px solid var(--border-subtle, var(--border));
    color: var(--text-primary);
}
#verdict-library-view .vl-row:last-child { border-bottom: none; }
#verdict-library-view .vl-row:hover { background: var(--bg-hover); }
#verdict-library-view .vl-col-num { text-align: right; font-variant-numeric: tabular-nums; }
#verdict-library-view .vl-col-actions {
    text-align: right; display: flex; justify-content: flex-end; gap: 4px;
}
#verdict-library-view .vl-cell-ref {
    display: flex; align-items: center; gap: 8px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#verdict-library-view .vl-badge {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.4px;
}
#verdict-library-view .vl-badge-shared {
    background: var(--bg-success-soft, var(--accent-glow));
    color: var(--text-success, var(--accent-text));
}

#verdict-library-view .vl-empty {
    text-align: center; padding: 48px 24px;
    background: var(--bg-elevated); border: 1px dashed var(--border);
    border-radius: 12px; color: var(--text-muted);
}
#verdict-library-view .vl-empty-emoji { font-size: 36px; margin-bottom: 10px; opacity: 0.7; }
#verdict-library-view .vl-empty-msg { font-size: 14px; margin: 0; max-width: 480px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
    #verdict-library-view .vl-list-head { display: none; }
    #verdict-library-view .vl-row {
        grid-template-columns: 1fr; gap: 4px; padding: 12px 14px;
    }
    #verdict-library-view .vl-col-num, #verdict-library-view .vl-col-actions {
        text-align: left; justify-content: flex-start;
    }
}