@layer reset, tokens, base, layout, components, utilities, overrides;

/*
 * MODEL Design System — Functional Specification
 * ================================================================
 * Axioms: maximal information density, conventional affordance,
 * zero anachronism, no non-functional visual artifacts.
 */

/* ============================================================
   @property registrations — enable browser interpolation/animation
   of custom properties used for theming and layout transitions.
   ============================================================ */

/* @property registrations for animation/transition interpolation
   Note: initial-values omitted — :root tokens are source of truth */
@property --color-active {
  syntax: '<color>';
  inherits: true;
  initial-value: #2563eb; /* fallback only — overridden by :root */
}

@property --bg-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff; /* fallback only — overridden by :root */
}

@property --bg-secondary {
  syntax: '<color>';
  inherits: true;
  initial-value: #f8f9fa; /* fallback only — overridden by :root */
}

@property --text-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: #1a1a2e; /* fallback only — overridden by :root */
}

@property --sidebar-width {
  syntax: '<length>';
  inherits: false;
  initial-value: 320px;
}

@property --header-height {
  syntax: '<length>';
  inherits: false;
  initial-value: 56px;
}

/* ============ DESIGN TOKENS ============ */
/* Breakpoints (canonical — use these values in all @media queries):
   --bp-small:   480px   (compact phones, stacked controls)
   --bp-mobile:  640px   (mobile, single-column content)
   --bp-tablet:  768px   (tablet, off-screen sidebar, stacked columns)
   --bp-desktop: 1024px  (small desktop, narrower sidebar, hidden panels)
   --bp-wide:    1440px  (wide desktop, reserved for future use)
   Note: CSS cannot use custom properties in media queries;
         these values are documented here for consistency. */
:root {
    /* === Default: Dark mode colors (Bloomberg terminal aesthetic) === */
    --bg-primary:       #0d1117;
    --bg-chrome:        #161b22;
    --bg-field:         #1c2128;
    --bg-elevated:      #21262d;
    --text-primary:     #e6edf3;
    --text-secondary:   #8b949e;
    --text-muted:       #9aa0a6;  /* WCAG AA compliant: 4.6:1 on #0d1117 */
    --text-link:        #58a6ff;
    --text-link-hover:  #79c0ff;
    --color-error:      #f85149;
    --color-success:    #3fb950;
    --color-warning:    #f59e0b;  /* Amber for warning states */
    --color-active:     #539bf5;
    --color-accent-secondary: #7c3aed;  /* Purple accent for gradient endpoints */
    --color-active-glow: rgba(83, 155, 245, 0.15);
    --color-active-soft: rgba(83, 155, 245, 0.06);
    --color-text-on-accent: #ffffff;  /* Text on accent/gradient backgrounds */
    --border-color:     rgba(255, 255, 255, 0.15);
    --border-light:     rgba(255, 255, 255, 0.08);
    --border-heavy:     rgba(255, 255, 255, 0.20);
    --border-active:    rgba(83, 155, 245, 0.5);  /* Active/focused element border */
    --bg-hover:         rgba(240, 246, 252, 0.04); /* Hover state background */
    --bg-active:        rgba(83, 155, 245, 0.12);  /* Active/pressed state background */
    --shadow-sm:        0 1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:        0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:        0 4px 8px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.3), 0 24px 48px rgba(0,0,0,0.2);
    --shadow-glow:      0 0 0 1px rgba(83, 155, 245, 0.15), 0 2px 8px rgba(83, 155, 245, 0.1);
    --gradient-accent:  linear-gradient(135deg, var(--color-active) 0%, var(--color-accent-secondary) 100%);
    --gradient-accent-soft: linear-gradient(135deg, rgba(83,155,245,0.08) 0%, rgba(124,58,237,0.08) 100%);
    --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);
    --glass-bg:              rgba(22, 27, 34, 0.95);
    --glass-bg-heavy:        rgba(22, 27, 34, 0.98);
    --glass-bg-light:        rgba(22, 27, 34, 0.85);
    --glass-border:          rgba(255, 255, 255, 0.08);
    --glass-border-subtle:   rgba(255, 255, 255, 0.04);
    --glass-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.3);

    /* === Assemble auth palette (unified from assemble-auth.css) === */
    --assemble-void:        #0f0f12;
    --assemble-charcoal:    #1a1a1f;
    --assemble-slate:       #25252d;
    --assemble-mist:        #4a4a55;
    --assemble-white:       #e0e0d8;
    --assemble-dust-teal:   #6a8a8a;
    --assemble-dust-salmon: #a88b8b;
    --assemble-dust-gold:   #b0a880;
    --assemble-dust-cyan:   #7a9a9a;
    --assemble-dust-sand:   #9b8b7a;

    /* === Non-color design tokens (canonical — not duplicated in @supports) === */
    --font-ui:          "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono:        ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    --font-display:     "Outfit", "Inter", system-ui, sans-serif;

    /* Typography scale — Major Third (1.25) */
    --text-4xs:         8px;
    --text-3xs:         9px;
    --text-2xs:         10px;
    --text-micro:       11px;
    --text-xs-sm:       12px;  /* Common size (84 instances) */
    --text-xs:          13px;
    --text-sm:          14px;
    --text-base:        15px;
    --text-md:          16px;
    --text-lg:          20px;
    --text-xl:          24px;
    --text-2xl:         32px;
    --text-3xl:         36px;
    --text-4xl:         40px;
    --text-5xl:         48px;
    --text-6xl:         64px;
    --text-7xl:         72px;
    --text-hero:        80px;  /* For hero/headline text */
    --text-6xs:         5px;   /* Edge case — 1 instance */
    --text-5xs:         7px;   /* Edge case — 4 instances */

    --space-1:          4px;
    --space-2:          8px;
    --space-3:          12px;
    --space-4:          16px;
    --space-6:          24px;
    --space-8:          32px;
    --space-10:         40px;
    --space-12:         48px;

    --header-height:    48px;
    --status-height:    28px;
    --sidebar-width:    320px;

    /* Motion — Tiline easing system */
    --ease-out:         cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-acknowledge: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-reveal:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-enter:       cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-exit:        cubic-bezier(0.4, 0.0, 1, 1);
    --ease-stagger:     cubic-bezier(0.2, 0.0, 0.2, 1);
    --duration-fast:    150ms;
    --duration-base:    200ms;
    --duration-slow:    300ms;
    --duration-instant:   80ms;
    --duration-deliberate: 500ms;
    --duration-ambient:    2000ms;

    /* Stagger choreography delays */
    --stagger-1:        0ms;
    --stagger-2:        30ms;
    --stagger-3:        60ms;
    --stagger-4:        90ms;
    --stagger-5:        120ms;
    --stagger-6:        150ms;
    --stagger-7:        180ms;
    --stagger-8:        210ms;
    --stagger-9:        240ms;
    --stagger-10:       270ms;

    /* Radius */
    --radius-xs:        4px;
    --radius-sm:        6px;
    --radius-md:        10px;
    --radius-lg:        16px;
    --radius-xl:        24px;

    /* Z-Index Scale — documented layer hierarchy */
    --z-base:           1;      /* Base content layer */
    --z-elevated:       10;     /* Elevated elements (dropdowns, tooltips) */
    --z-modal:          100;    /* Modal overlay */
    --z-modal-content:  101;    /* Modal content */
    --z-dropdown:       1000;   /* Dropdown menus */
    --z-popover:        1005;   /* Popovers and tooltips */
    --z-notification:   1010;   /* Notifications and toasts */
    --z-toast:          1015;   /* Toast messages */
    --z-critical:       1020;   /* Critical overlays (alerts, dialogs) */
    --z-max:            10000;  /* Maximum z-index for special cases */
}

/* ============ DARK THEME ============ */
[data-theme="dark"] {
    color-scheme: dark;
    --bg-primary:       #0d1117;
    --bg-chrome:        #161b22;
    --bg-field:         #1c2128;
    --bg-elevated:      #21262d;

    --text-primary:     #e6edf3;
    --text-secondary:   #8b949e;
    --text-muted:       #9aa0a6;  /* WCAG AA compliant: 4.6:1 on #0d1117 */
    --text-link:        #58a6ff;
    --text-link-hover:  #79c0ff;

    --color-active:     #539bf5;
    --color-accent-secondary: #7c3aed;
    --color-active-glow: rgba(83, 155, 245, 0.15);
    --color-active-soft: rgba(83, 155, 245, 0.06);
    --color-text-on-accent: #ffffff;
    --color-warning:    #f59e0b;
    --color-error:      #f85149;
    --color-success:    #3fb950;

    --border-color:     rgba(255, 255, 255, 0.15);
    --border-light:     rgba(255, 255, 255, 0.12);
    --border-heavy:     rgba(255, 255, 255, 0.20);
    --border-active:    rgba(83, 155, 245, 0.5);
    --bg-hover:         rgba(240, 246, 252, 0.04);
    --bg-active:        rgba(83, 155, 245, 0.12);

    --shadow-sm:        0 1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:        0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:        0 4px 8px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.3), 0 24px 48px rgba(0,0,0,0.25);

    --gradient-accent:  linear-gradient(135deg, var(--color-active) 0%, var(--color-accent-secondary) 100%);
    --gradient-accent-soft: linear-gradient(135deg, rgba(83,155,245,0.08) 0%, rgba(124,58,237,0.08) 100%);

    --glass-bg:              rgba(22, 27, 34, 0.95);
    --glass-bg-heavy:        rgba(22, 27, 34, 0.98);
    --glass-bg-light:        rgba(22, 27, 34, 0.85);
    --glass-border:          rgba(255, 255, 255, 0.14);
    --glass-border-subtle:   rgba(255, 255, 255, 0.10);
    --glass-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.5);

    /* Assemble auth palette (dark mode values) */
    --assemble-void:        #0f0f12;
    --assemble-charcoal:    #1a1a1f;
    --assemble-slate:       #25252d;
    --assemble-mist:        #4a4a55;
    --assemble-white:       #e0e0d8;
    --assemble-dust-teal:   #6a8a8a;
    --assemble-dust-salmon: #a88b8b;
    --assemble-dust-gold:   #b0a880;
    --assemble-dust-cyan:   #7a9a9a;
    --assemble-dust-sand:   #9b8b7a;
}

/* ============ LIGHT THEME ============ */
[data-theme="light"] {
    color-scheme: light;

    /* Backgrounds — warm off-white palette */
    --bg-primary:       #faf9f6;
    --bg-chrome:        #f3f1ec;
    --bg-field:         #ffffff;
    --bg-elevated:      #ffffff;

    /* Text — dark charcoal for WCAG AA compliance */
    --text-primary:     #1a1a2e;   /* 13.8:1 on #faf9f6 */
    --text-secondary:   #4a4a68;   /* 6.2:1 on #faf9f6 */
    --text-muted:       #8e8ea0;   /* 3.6:1 on #faf9f6 — for decorative/muted only */
    --text-link:        #2563eb;   /* 4.8:1 on #faf9f6 */
    --text-link-hover:  #1d4ed8;   /* 6.1:1 on #faf9f6 */

    /* Semantic colors — darker shades for light backgrounds */
    --color-active:     #2563eb;   /* 4.8:1 on #faf9f6 */
    --color-accent-secondary: #7c3aed;  /* Purple accent for gradient endpoints */
    --color-active-glow: rgba(37, 99, 235, 0.15);
    --color-active-soft: rgba(37, 99, 235, 0.06);
    --color-text-on-accent: #ffffff;  /* White text on accent/gradient backgrounds */
    --color-warning:    #d97706;   /* 4.5:1 on #faf9f6 */
    --color-error:      #dc2626;   /* 5.0:1 on #faf9f6 */
    --color-success:    #16a34a;   /* 4.6:1 on #faf9f6 */

    /* Borders — subtle dark strokes */
    --border-color:     rgba(0, 0, 0, 0.10);
    --border-light:     rgba(0, 0, 0, 0.06);
    --border-heavy:     rgba(0, 0, 0, 0.15);
    --border-active:    rgba(37, 99, 235, 0.5);
    --bg-hover:         rgba(0, 0, 0, 0.04);
    --bg-active:        rgba(37, 99, 235, 0.08);

    /* Shadows — softer for light backgrounds */
    --shadow-sm:        0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:        0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:        0 4px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.04);
    --shadow-glow:      0 0 0 1px rgba(37, 99, 235, 0.1), 0 2px 8px rgba(37, 99, 235, 0.08);

    /* Gradients — darker accent for light mode */
    --gradient-accent:  linear-gradient(135deg, var(--color-active) 0%, var(--color-accent-secondary) 100%);
    --gradient-accent-soft: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(124,58,237,0.08) 100%);
    --gradient-surface: linear-gradient(180deg, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0) 100%);

    /* Glass — light mode frosted glass */
    --glass-bg:              rgba(255, 255, 255, 0.95);
    --glass-bg-heavy:        rgba(255, 255, 255, 0.98);
    --glass-bg-light:        rgba(255, 255, 255, 0.85);
    --glass-border:          rgba(0, 0, 0, 0.08);
    --glass-border-subtle:   rgba(0, 0, 0, 0.04);
    --glass-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.1);

    /* Assemble auth palette — light mode adjustments */
    --assemble-void:        #f8f7f4;
    --assemble-charcoal:    #eae8e3;
    --assemble-slate:       #d5d3ce;
    --assemble-mist:        #8a8a95;
    --assemble-white:       #1a1a1f;
    --assemble-dust-teal:   #4a7a7a;
    --assemble-dust-salmon: #8b6060;
    --assemble-dust-gold:   #8a8050;
    --assemble-dust-cyan:   #5a8a8a;
    --assemble-dust-sand:   #7a6b5a;
}

/* ── Dark-mode overrides for blue accent system ── */
[data-theme="dark"] .help-dropdown-menu {
    background: rgba(22, 27, 34, 0.95);
}

[data-theme="dark"] .help-dropdown-menu a:hover {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .comparison-col {
    border-color: rgba(59, 130, 246, 0.12);
}

[data-theme="dark"] .comparison-col:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .comparison-col-pipeline {
    border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .comparison-col-pipeline .comparison-col-header {
    color: var(--color-active);
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03));
}

[data-theme="dark"] .comparison-col-body code {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-active);
}

[data-theme="dark"] .admin-panel-container {
    background: var(--bg-elevated);
    border-color: rgba(59, 130, 246, 0.12);
}

[data-theme="dark"] .admin-panel-tab.active {
    color: var(--color-active);
    border-bottom-color: var(--color-active);
}

[data-theme="dark"] .theme-toggle:hover {
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--color-active);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid transparent;
    background-clip: content-box;
}

[data-theme="dark"] .message-content pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    background-clip: content-box;
}
[data-theme="dark"] .message-content pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.20);
    background-clip: content-box;
}
[data-theme="dark"] .message-content pre {
    scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-xs);
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover {
    color: var(--text-primary);
    border-color: var(--border-heavy);
}

/* ============ RESET ============ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
    background: var(--color-active-soft, rgba(37, 99, 235, 0.15));
    color: var(--text-primary);
}

::-moz-selection {
    background: var(--color-active-soft, rgba(37, 99, 235, 0.15));
    color: var(--text-primary);
}

html {
    scroll-behavior: smooth;
}

/* Overscroll containment for nested scroll areas */
.messages-container,
.sidebar .conversation-list {
    overscroll-behavior: contain;
    touch-action: pan-y; /* Improves scroll performance on mobile */
}

body {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-primary);
    background-attachment: fixed;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Safe area insets for notched phones */
    padding-block-start: env(safe-area-inset-top);
    padding-block-end: env(safe-area-inset-bottom);
    padding-inline-start: env(safe-area-inset-left);
    padding-inline-end: env(safe-area-inset-right);
}

:focus-visible {
    outline: 2px solid var(--color-active);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

::selection {
    background: var(--color-active-soft, rgba(37, 99, 235, 0.15));
    color: var(--text-primary);
}

::-moz-selection {
    background: var(--color-active-soft, rgba(37, 99, 235, 0.15));
    color: var(--text-primary);
}

/* Code blocks: slightly different selection */
.code-block ::selection,
pre ::selection,
code ::selection {
    background: rgba(37, 99, 235, 0.25);
}

.code-block ::-moz-selection,
pre ::-moz-selection,
code ::-moz-selection {
    background: rgba(37, 99, 235, 0.25);
}

/* ============ SKIP LINK ============ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--color-active);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============ GLOBAL PLACEHOLDER ============ */
::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
    font-style: italic;
}

[data-theme="dark"] ::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* ============ HIGH CONTRAST (forced-colors) ============ */
@media (forced-colors: active) {
    /* Borders: use system ButtonText for visibility */
    *,
    *::before,
    *::after {
        border-color: ButtonText !important;
    }

    /* Focus outlines: use system Highlight for clear indication */
    :focus,
    :focus-visible {
        outline: 2px solid Highlight !important;
        outline-offset: 2px !important;
    }

    /* Links: use system LinkText */
    a,
    a:visited {
        color: LinkText !important;
    }

    /* Buttons: system ButtonText on ButtonFace */
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"] {
        color: ButtonText !important;
        background-color: ButtonFace !important;
        border: 1px solid ButtonText !important;
    }

    /* Status indicators carry semantic meaning — preserve their colors */
    .header-status-dot,
    .mem-status-dot,
    .mem-status-dot.ok,
    .mem-status-dot.failed,
    .mem-status-dot.disabled {
        forced-color-adjust: none;
    }
}

/* ============ HIGH CONTRAST (prefers-contrast: more) ============ */
@media (prefers-contrast: more) {
    /* --- Design token overrides for maximum contrast --- */
    :root {
        --border-color:     rgba(0, 0, 0, 0.35);
        --border-light:     rgba(0, 0, 0, 0.25);
        --border-heavy:     rgba(0, 0, 0, 0.5);
        --glass-bg:         rgba(255, 255, 255, 1);
        --glass-bg-heavy:   rgba(255, 255, 255, 1);
        --glass-bg-light:   rgba(255, 255, 255, 1);
        --glass-border:     rgba(0, 0, 0, 0.3);
        --glass-border-subtle: rgba(0, 0, 0, 0.2);
        --text-secondary:   #2d2d4a;
        --text-muted:       #555566;
        --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.12);
        --shadow-md:        0 2px 6px rgba(0, 0, 0, 0.15);
        --shadow-lg:        0 4px 12px rgba(0, 0, 0, 0.18);
    }

    [data-theme="dark"] {
        --border-color:     rgba(255, 255, 255, 0.35);
        --border-light:     rgba(255, 255, 255, 0.25);
        --border-heavy:     rgba(255, 255, 255, 0.5);
        --glass-bg:         rgba(22, 27, 34, 1);
        --glass-bg-heavy:   rgba(22, 27, 34, 1);
        --glass-bg-light:   rgba(22, 27, 34, 1);
        --glass-border:     rgba(255, 255, 255, 0.3);
        --glass-border-subtle: rgba(255, 255, 255, 0.2);
        --text-secondary:   #c0c8d4;
        --text-muted:       #a0a8b8;
    }

    /* --- Borders: thicker and fully opaque --- */
    *,
    *::before,
    *::after {
        border-color: var(--border-color);
    }

    .header-bar,
    .sidebar,
    .input-area,
    .message,
    .modal-panel,
    .pipeline-panel,
    .admin-panel-container,
    .conversation-item,
    .depth-selector select,
    .form-group input,
    .api-key-input input,
    .message-search-bar,
    .comparison-col,
    .param-input {
        border-width: 2px;
    }

    /* --- Text: fully opaque, no alpha channels --- */
    ::placeholder {
        opacity: 1;
    }

    /* --- Remove subtle background gradients --- */
    .header-bar,
    .comparison-col-pipeline .comparison-col-header {
        background-image: none;
    }

    /* --- Focus indicators: thicker, higher contrast --- */
    :focus-visible {
        outline: 3px solid var(--color-active) !important;
        outline-offset: 2px !important;
    }

    .skip-link:focus {
        outline: 3px solid #fff !important;
        outline-offset: 3px !important;
    }

    /* --- Small text: increase font-weight for readability --- */
    .column-badge,
    .exposition-badge,
    .recap-badge,
    .reasoning-mode-badge,
    .provider-fallback-badge,
    .pipeline-progress-label,
    .psych-score-label,
    .psych-bar-label,
    .score-trendline-label,
    .comp-eval-row-label,
    .chc-ring-label,
    .chc-label,
    .toolbar-label,
    .status-bar,
    .conversation-date,
    .message-timestamp {
        font-weight: 600;
    }

    /* --- Remove backdrop-filter effects that reduce text clarity --- */
    .header-bar,
    .sidebar,
    .input-area,
    .modal-overlay,
    .message-search-bar,
    .context-menu,
    .help-dropdown-menu {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ============ LOW CONTRAST (prefers-contrast: less) ============ */
@media (prefers-contrast: less) {
    :root {
        --border-color:     rgba(0, 0, 0, 0.05);
        --border-light:     rgba(0, 0, 0, 0.03);
        --border-heavy:     rgba(0, 0, 0, 0.08);
        --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.02);
        --shadow-md:        0 2px 4px rgba(0, 0, 0, 0.03);
        --shadow-lg:        0 4px 8px rgba(0, 0, 0, 0.04);
        --text-secondary:   #6a6a82;
        --text-muted:       #a0a0b2;
    }

    [data-theme="dark"] {
        --border-color:     rgba(255, 255, 255, 0.06);
        --border-light:     rgba(255, 255, 255, 0.04);
        --border-heavy:     rgba(255, 255, 255, 0.1);
        --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.1);
        --shadow-md:        0 2px 4px rgba(0, 0, 0, 0.12);
        --shadow-lg:        0 4px 8px rgba(0, 0, 0, 0.15);
        --text-secondary:   #707a88;
        --text-muted:       #606872;
    }

    /* --- Softer borders --- */
    .header-bar,
    .sidebar,
    .message,
    .modal-panel,
    .conversation-item {
        border-width: 0.5px;
    }

    /* --- Softer transitions --- */
    * {
        transition-duration: var(--duration-slow);
    }
}

a {
    color: var(--text-link);
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.3);
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
    color: var(--text-link-hover);
    text-decoration-color: rgba(37, 99, 235, 0.6);
}

/* ============ MAIN CONTENT WRAPPER ============ */
#mainContent {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ============ TERMINAL CONTAINER ============ */
.terminal {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

/* ============ HEADER BAR ============ */
.header-bar {
    height: var(--header-height);
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--glass-border-subtle);
    padding: 0 var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 1px 3px rgba(0,0,0,0.08);
    position: relative;
    z-index: 10;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.header-logo {
    color: var(--text-primary);
    font-weight: 700;
    font-size: var(--text-base);
    letter-spacing: 0.08em;
    font-family: var(--font-display);
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-logo::before { content: none; }

.header-subtitle {
    font-size: var(--text-3xs);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-inline-start: 6px;
    font-style: italic;
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.header-tm-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px 12px;
    border-bottom: 1px dotted transparent;
    transition: color 0.2s, border-color 0.2s;
}

.header-tm-link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-muted);
}

/* ── Mentat Lite Explainer Modal ── */
.tm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tm-modal {
    background: rgba(13, 17, 23, 0.95);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(240, 246, 252, 0.04);
    border-radius: 20px;
    max-width: 640px;
    width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    padding: 40px 48px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06);
    font-family: var(--font-ui);
}

.tm-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: var(--text-xl);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.15s;
}

.tm-modal-close:hover {
    color: var(--text-primary);
}

.tm-modal-header {
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.tm-modal-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.tm-modal-meta {
    font-size: var(--text-2xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}

.tm-modal-body h3 {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 24px 0 8px 0;
}

.tm-modal-body p {
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 14px 0;
}

.tm-lead {
    font-size: var(--text-base) !important;
    line-height: 1.65 !important;
    color: var(--text-primary) !important;
    font-weight: 500;
}

.tm-quote {
    margin: 24px 0;
    padding: 16px 24px;
    border-left: 3px solid var(--text-muted);
    font-style: italic;
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--text-secondary);
    background: rgba(240, 246, 252, 0.03);
}

.tm-closing {
    font-style: italic;
}

.header-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    opacity: 0.5;
    margin: 0 var(--space-2);
}

.header-status {
    color: var(--text-muted);
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-status::before { content: none; }

.header-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
    display: inline-block;
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.5), 0 0 12px rgba(22, 163, 74, 0.2);
    animation: status-pulse 3000ms ease-in-out infinite;
}

/* Header URL display — conversation path with copy affordance */
.header-url {
    color: var(--text-link);
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--color-active-soft, rgba(37, 99, 235, 0.06));
    cursor: pointer;
    transition: background 180ms ease, transform 120ms ease;
}

.header-url:hover {
    background: var(--color-active-soft, rgba(37, 99, 235, 0.12));
    transform: translateY(-1px);
}

.header-url:active {
    transform: translateY(0);
}

.header-url-icon {
    font-size: var(--text-2xs);
    opacity: 0.7;
}

.header-url-text {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    opacity: 0.85;
}

@media (max-width: 768px) {
    .header-url { display: none; }
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.header-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.header-meta {
    gap: var(--space-3);
}

/* Header Dropdown for Export */
.header-dropdown {
    position: relative;
    display: inline-block;
}

/* Header action button — clean, no brackets */
.header-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.header-action-btn:hover {
    background: var(--gradient-accent-soft);
    color: var(--text-primary);
}

.header-action-btn:active {
    transform: scale(0.975);
    opacity: 0.85;
}

.header-action-btn--logout {
    color: var(--text-muted);
}

.header-action-btn--logout:hover {
    color: var(--color-error);
    background: rgba(211, 47, 47, 0.06);
    text-decoration: none;
}

/* Header user/clock — terminal info */
.header-user {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.header-clock {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* Backward-compatible alias */
.header-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    padding: 6px 10px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 500;
    border-radius: var(--radius-sm);
    outline: 3px solid transparent;
    outline-offset: 3px;
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                outline-color 100ms ease-out,
                box-shadow 100ms ease-out;
}

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

/* Workspace selector — dropdown for workspace switching */
.workspace-selector {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.workspace-selector-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 220px;
    max-width: 300px;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0;
    margin-top: 4px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
}

.workspace-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-chrome);
}

.workspace-selector-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-xs);
}

.workspace-selector-new {
    background: none;
    border: 1px solid var(--color-active);
    color: var(--color-active);
    font-size: var(--text-micro);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.workspace-selector-new:hover {
    background: var(--color-active);
    color: white;
}

.workspace-selector-list {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
}

.workspace-selector-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    transition: background var(--duration-fast) var(--ease-out);
}

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

.workspace-selector-item:hover {
    background: var(--gradient-accent-soft);
    color: var(--text-primary);
}

.workspace-selector-item[aria-checked="true"] {
    background: var(--color-active-soft);
    color: var(--color-active);
    font-weight: 600;
}

.workspace-selector-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-selector-check {
    color: var(--color-active);
    font-weight: 700;
    margin-left: 8px;
}

.workspace-selector-empty,
.workspace-selector-error {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.workspace-selector-error {
    color: var(--color-error);
}

.header-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    min-width: 160px;
    box-shadow: var(--glass-shadow-elevated);
    z-index: 1005;
    padding: var(--space-1) 0;
    margin-top: 4px;
    animation: dropdownReveal var(--duration-fast) var(--ease-out);
}

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

.header-dropdown-menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-xs);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    border-radius: var(--radius-sm);
    margin: 0 var(--space-1);
}

.header-dropdown-menu a:hover {
    background: var(--color-active-soft);
    color: var(--color-active);
    text-decoration: none;
}

.header-dropdown-menu.hidden {
    display: none;
}

/* ============ MAIN LAYOUT ============ */
.terminal-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;  /* Allow flex children to shrink below content size */
}

/* ============ SIDEBAR ============ */
.sidebar {
    width: var(--sidebar-width);
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-inline-end: 1px solid var(--glass-border-subtle);
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-shadow: 1px 0 0 0 var(--border-light), 4px 0 16px rgba(0,0,0,0.03);
    container-type: inline-size;
    container-name: sidebar;
    cursor: default;
}

.resize-handle {
    cursor: col-resize;
}

.sidebar-header {
    padding: var(--space-4) var(--space-3) var(--space-2);
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

/* Feature 28: Sidebar toolbar for bookmark filter */
.sidebar-toolbar {
    padding: var(--space-1) var(--space-3) var(--space-2);
    border-bottom: none;
    display: flex;
    gap: var(--space-1);
}

.sidebar-toolbar-btn {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.sidebar-toolbar-btn:hover {
    background: rgba(240, 246, 252, 0.04);
    color: var(--text-primary);
}

.sidebar-toolbar-btn:active {
    transform: scale(0.97);
    opacity: 0.8;
}

.sidebar-toolbar-btn.active {
    background: var(--gradient-accent);
    border-color: transparent;
    color: var(--color-text-on-accent);
    box-shadow: 0 2px 8px var(--color-active-glow);
}

/* Sidebar inline search */
.sidebar-search {
    padding: 0 var(--space-3) var(--space-2);
}

.sidebar-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-primary);
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.sidebar-search-input::placeholder {
    color: var(--text-muted);
    font-size: var(--text-xs-sm);
}

.sidebar-search-input:focus {
    border-color: var(--color-active);
    box-shadow: 0 0 0 3px var(--color-active-glow), 0 2px 8px var(--color-active-soft);
    outline: 2px solid transparent;
    background-color: var(--bg-elevated);
}

.sidebar-title {
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.sidebar-btn {
    background: var(--gradient-accent);
    border: none;
    color: var(--color-text-on-accent);
    padding: 7px var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    cursor: pointer;
    border-radius: var(--radius-md);
    font-weight: 600;
    box-shadow: 0 2px 8px var(--color-active-glow), 0 1px 2px rgba(0,0,0,0.1);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    letter-spacing: 0.01em;
}

.sidebar-btn:hover {
    box-shadow: 0 4px 16px var(--color-active-glow), 0 2px 4px rgba(0,0,0,0.15);
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.sidebar-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) var(--space-3);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.conversation-empty {
    padding: var(--space-12) var(--space-4);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.8;
}

.conversation-empty::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-3);
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.conversation-item {
    padding: 10px var(--space-3) 10px 14px;
    cursor: pointer;
    font-size: var(--text-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--text-secondary);
    border-inline-start: 3px solid transparent;
    position: relative;
    border-radius: var(--radius-md);
    margin: 2px 0;
    background: transparent;
    transition: transform var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94), color var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow var(--duration-base) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Conversation list navigation — theme adaptive with light-dark() */
.conversation-item:hover {
    background: light-dark(rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.08));
    box-shadow: 0 1px 4px light-dark(rgba(0,0,0,0.04), rgba(0,0,0,0.12)), 0 0 0 1px light-dark(rgba(37,99,235,0.06), rgba(37,99,235,0.15));
    color: var(--mn-text);
    transform: translateX(2px) scale(1.01);
    border-inline-start-color: light-dark(rgba(37, 99, 235, 0.2), rgba(96, 165, 250, 0.3));
}

/* Mobile touch swipe feedback — iOS-style swipe actions */
.conversation-item.swiping {
    transition: none; /* Disable transition during swipe for direct 1:1 tracking */
    user-select: none;
    -webkit-user-select: none;
}

/* Swipe action badges — revealed during swipe */
.mn-swipe-archive,
.mn-swipe-delete {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
    z-index: 1;
}

.mn-swipe-archive {
    left: 0;
    background: linear-gradient(90deg, rgba(34,197,94,0.2) 0%, transparent 100%);
    color: light-dark(#16a34a, #4ade80);
}

.mn-swipe-delete {
    right: 0;
    background: linear-gradient(-90deg, rgba(220,38,38,0.2) 0%, transparent 100%);
    color: light-dark(#dc2626, #f87171);
}

.conversation-item.swiping .mn-swipe-archive,
.conversation-item.swiping .mn-swipe-delete {
    opacity: 1;
}

/* Touch-friendly padding on mobile */
@media (pointer: coarse) {
    .conversation-item {
        padding: var(--space-3) var(--space-2);
        min-height: 48px; /* 44px minimum touch target + padding */
    }
}

.conversation-item.active {
    background: linear-gradient(135deg, light-dark(rgba(37,99,235,0.06), rgba(37,99,235,0.12)) 0%, light-dark(rgba(124,58,237,0.04), rgba(139,92,246,0.1)) 100%);
    border-inline-start-color: light-dark(#2563eb, #60a5fa);
    color: var(--mn-text);
    font-weight: 600;
    box-shadow: 0 2px 8px light-dark(rgba(37,99,235,0.08), rgba(37,99,235,0.2)), 0 0 0 1px light-dark(rgba(37,99,235,0.1), rgba(37,99,235,0.2));
}

.conversation-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversation-title.title-locked {
    color: var(--text-muted);
    font-style: italic;
    cursor: default;
    pointer-events: none;
}

.conversation-delete {
    opacity: 0;
    transition: opacity 80ms var(--ease-acknowledge);
    cursor: pointer;
    padding: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-md);
    margin-inline-start: var(--space-2);
}

.conversation-item:hover .conversation-delete {
    opacity: 1;
    color: light-dark(#dc2626, #f87171);
}

.conversation-item:focus-within .conversation-delete {
    opacity: 1;
}

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

/* ── Kebab menu button ── */
.conversation-kebab-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: var(--text-sm);
    line-height: 1;
    color: light-dark(#6b7280, #94a3b8);
    opacity: 0;
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.conversation-item:hover .conversation-kebab-btn,
.conversation-item:focus-within .conversation-kebab-btn {
    opacity: 1;
}

.conversation-kebab-btn:hover {
    color: var(--text-primary);
    background: rgba(240, 246, 252, 0.06);
}

/* ── Topic map under conversation title ── */
.topic-map {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
    padding-inline-end: var(--space-4);
}

.topic-tag {
    font-size: var(--text-2xs);
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(240, 246, 252, 0.05);
    border: none;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.conversation-item:hover .topic-tag {
    background: rgba(37, 99, 235, 0.06);
    color: var(--text-secondary);
}

.conversation-item.active .topic-tag {
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-active);
}

/* ============ CHAT AREA ============ */
@keyframes contentFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
    background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(37,99,235,0.01) 50%, var(--bg-primary) 100%);
    animation: contentFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Multi-pane layout: Model + comparison columns ── */
.chat-panes {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.chat-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.chat-pane-primary {
    flex: 1;
    position: relative;
    min-width: 0;
}

/* ── 3-Column Comparison Layout ── */
.chat-columns {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 1px;
    background: var(--border-light);
    min-height: 0;
}

.chat-column {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
    min-height: 0;
}

.chat-column--primary {
    flex: 1;
    min-width: 0;
    position: relative;
}

.chat-column--comparison {
    flex: 0 0 0;
    min-width: 0;
    transition: flex-basis var(--duration-slow) var(--ease-out),
                opacity var(--duration-slow) var(--ease-out);
    overflow: hidden;
    opacity: 0;
}

.chat-column--comparison.active {
    width: 300px;
    opacity: 1;
    transition: width var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}

.column-header {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--glass-border-subtle);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    flex-shrink: 0;
}

.column-model-name {
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.column-badge {
    font-size: var(--text-2xs);
    padding: 1px 6px;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-chrome);
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
}

.column-badge--primary {
    border-color: var(--color-active);
    color: var(--color-active);
}

/* ── Column collapse toggle ── */
.column-collapse-btn {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

.column-collapse-btn:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.chat-column--collapsed {
    flex: 0 0 36px !important;
    min-width: 36px;
    max-width: 36px;
}

.chat-column--collapsed .column-header {
    flex-direction: column;
    padding: var(--space-2) var(--space-1);
    gap: var(--space-1);
    align-items: center;
}

.chat-column--collapsed .column-model-name {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: var(--text-2xs);
    letter-spacing: 1px;
}

.chat-column--collapsed .column-badge {
    display: none;
}

.chat-column--collapsed .column-messages {
    display: none;
}

.chat-column--collapsed .column-collapse-btn svg {
    transform: rotate(180deg);
}

.column-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.column-messages .comp-response {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-primary);
}

.column-messages .comp-response p { margin-bottom: var(--space-2); }
.column-messages .comp-response p:last-child { margin-bottom: 0; }
.column-messages .comp-response h1,
.column-messages .comp-response h2,
.column-messages .comp-response h3 {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    margin: var(--space-3) 0 var(--space-1);
    color: var(--text-primary);
}
.column-messages .comp-response ul,
.column-messages .comp-response ol { margin: var(--space-1) 0; padding-inline-start: 16px; }
.column-messages .comp-response li { margin: 2px 0; }
.column-messages .comp-response code {
    font-family: var(--font-mono);
    font-size: var(--text-xs-sm);
    background: var(--bg-elevated);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
}
.column-messages .comp-response pre {
    background: var(--bg-chrome);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: var(--space-2) 0;
    font-size: var(--text-xs-sm);
}
.column-messages .comp-response pre code { background: none; padding: 0; }

.column-messages .comp-waiting {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    padding: var(--space-3) 0;
}

.column-messages .comp-waiting-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-active);
}


.column-messages .comp-error {
    color: var(--color-error);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    padding: var(--space-2);
    background: hsla(0, 70%, 50%, 0.05);
    border-radius: var(--radius-sm);
}

.column-messages .comp-meta {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light);
}

/* (768px chat-columns rules moved to consolidated 768px block) */

/* ── Inline Response Grid (Formal Exposition + Comparison Columns) ── */
.inline-response-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.inline-response-grid.has-comparisons {
    grid-template-columns: 1fr 340px;
    gap: var(--space-3);
}

.formal-exposition {
    border: 1px solid var(--glass-border-subtle);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    overflow: hidden;
}

.exposition-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: rgba(240, 246, 252, 0.03);
    border-bottom: 1px solid var(--glass-border-subtle);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.exposition-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.exposition-badge {
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-active);
    background: var(--color-active-soft);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.exposition-neologism {
    font-size: var(--text-micro);
    font-weight: 600;
    font-style: italic;
    color: hsl(225, 30%, 50%);
    padding: 2px 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

.exposition-meta {
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.exposition-body {
    padding: var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--text-primary);
}

.exposition-body p { margin-bottom: var(--space-3); }
.exposition-body p:last-child { margin-bottom: 0; }
.exposition-body h1,
.exposition-body h2,
.exposition-body h3 {
    font-family: var(--font-display);
    margin: var(--space-4) 0 var(--space-2);
    font-weight: 700;
}
.exposition-body h1 { font-size: var(--text-lg); letter-spacing: -0.02em; }
.exposition-body h2 { font-size: var(--text-md); letter-spacing: -0.01em; }
.exposition-body h3 { font-size: var(--text-base); font-weight: 600; }
.exposition-body ul,
.exposition-body ol { margin: var(--space-2) 0; padding-inline-start: 20px; }
.exposition-body li { margin: var(--space-1) 0; }
.exposition-body code {
    background: rgba(37, 99, 235, 0.06);
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: var(--text-xs-sm);
    border-radius: var(--radius-xs);
    color: var(--color-active);
}
.exposition-body pre {
    background: var(--bg-elevated);
    padding: var(--space-3);
    overflow-x: auto;
    margin: var(--space-3) 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}
.exposition-body pre code {
    background: none;
    padding: 0;
    color: var(--text-primary);
}
.exposition-body blockquote {
    border-inline-start: 3px solid var(--color-active);
    padding: var(--space-2) var(--space-3);
    margin: var(--space-3) 0;
    color: var(--text-secondary);
    background: var(--bg-chrome);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Inline Comparison Sidebar ── */
.inline-comp-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inline-comp-col {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    overflow: hidden;
}

.inline-comp-col-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-light);
}

.inline-comp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.inline-comp-title {
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    flex: 1;
}

.inline-comp-tokens {
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.inline-comp-col-body {
    padding: var(--space-3);
    font-size: var(--text-xs);
    line-height: 1.65;
    color: var(--text-primary);
    max-height: 400px;
    overflow-y: auto;
}

.inline-comp-col-body p { margin-bottom: var(--space-2); }
.inline-comp-col-body p:last-child { margin-bottom: 0; }
.inline-comp-col-body h1,
.inline-comp-col-body h2,
.inline-comp-col-body h3 {
    font-family: var(--font-display);
    margin: var(--space-2) 0 var(--space-1);
    font-weight: 700;
    font-size: var(--text-sm);
}
.inline-comp-col-body ul,
.inline-comp-col-body ol { margin: var(--space-1) 0; padding-inline-start: 16px; }
.inline-comp-col-body li { margin: 2px 0; }
.inline-comp-col-body code {
    background: rgba(37, 99, 235, 0.05);
    padding: 1px 3px;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    border-radius: var(--radius-xs);
}
.inline-comp-col-body pre {
    background: var(--bg-elevated);
    padding: var(--space-2);
    overflow-x: auto;
    margin: var(--space-2) 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: var(--text-micro);
}
.inline-comp-col-body pre code { background: none; padding: 0; }

.comp-col-error {
    color: hsl(0, 65%, 50%);
    font-size: var(--text-xs);
    padding: var(--space-2);
}

/* ── Psychometric Evaluation Panel ── */
.psychometric-panel {
    border: 1px solid var(--glass-border-subtle);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    margin-top: var(--space-3);
    overflow: hidden;
}

.psych-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(240, 246, 252, 0.03);
    border-bottom: 1px solid var(--glass-border-subtle);
}

.psych-header-title {
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: hsl(225, 30%, 45%);
    flex: 1;
}

.psych-copy-btn {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border-heavy);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.psych-copy-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.psych-toggle {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-out);
}

.psych-toggle:hover { color: var(--text-primary); }

.psychometric-panel.collapsed .psych-body { display: none; }

.psych-body {
    padding: var(--space-3) var(--space-4);
}

.psych-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

.psych-model-card {
    border: 1px solid var(--glass-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--glass-bg-light);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

.psych-model-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.psych-model-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.psych-model-name {
    font-size: var(--text-xs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.psych-score-hero {
    text-align: center;
    padding: var(--space-2) 0;
}

.psych-score-value {
    font-size: var(--text-3xl);
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-primary);
    line-height: 1;
}

.psych-score-label {
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-inline-start: 4px;
}

.psych-subscales {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.psych-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.psych-bar-label {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-secondary);
    width: 80px;
    text-align: end;
    flex-shrink: 0;
}

.psych-bar-track {
    flex: 1;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.psych-bar-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.psych-bar-val {
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
    width: 32px;
    text-align: end;
    flex-shrink: 0;
}

.psych-disclaimer {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}

/* ── Stats / Analytics Modal ──────────────────────────────────── */
.stats-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1010;
    display: flex; align-items: center; justify-content: center;
}
.stats-modal-overlay.hidden { display: none; }
.stats-modal {
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(37, 99, 235, 0.08);
    border-radius: 20px;
    width: 90%; max-width: 680px; max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(37, 99, 235, 0.06);
    animation: statsModalIn 200ms var(--ease-reveal) both;
}
@keyframes statsModalIn {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.stats-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
}
.stats-modal-title {
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
    color: var(--color-active);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.stats-modal-close {
    background: none; border: none; color: var(--text-muted);
    font-size: var(--text-lg); cursor: pointer; padding: 0 4px; line-height: 1;
    transition: color 80ms var(--ease-acknowledge);
}
.stats-modal-close:hover { color: var(--text-primary); }
.stats-modal-body {
    padding: 20px; overflow-y: auto; flex: 1;
}
.stats-empty {
    color: var(--text-muted); font-size: var(--text-xs-sm);
    text-align: center; padding: 40px 0;
}
.stats-section {
    margin-bottom: 24px;
    animation: statsReveal 250ms var(--ease-reveal) both;
}
.stats-section:nth-child(1) { animation-delay: 0.04s; }
.stats-section:nth-child(2) { animation-delay: 0.08s; }
.stats-section:nth-child(3) { animation-delay: 0.12s; }
.stats-section:nth-child(4) { animation-delay: 0.16s; }
@keyframes statsReveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stats-section-title {
    font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 10px;
}
.stats-table {
    width: 100%; border-collapse: collapse; font-size: var(--text-xs-sm);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.stats-table th {
    text-align: left; padding: 6px 10px;
    color: var(--text-muted); font-weight: 500;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em;
}
.stats-table td {
    padding: 6px 10px; color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
}
.stats-table--trend { font-size: var(--text-micro); }
.stats-table--trend td { color: var(--text-secondary); }
.stats-sparkline {
    font-size: var(--text-xl); letter-spacing: 2px; line-height: 1;
    color: var(--color-active); margin-bottom: 6px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.stats-spark-meta {
    font-size: var(--text-2xs); color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Responsive: stack comparison sidebar below on narrow screens */
@media (max-width: 1024px) {
    .inline-response-grid.has-comparisons {
        grid-template-columns: 1fr;
    }
    .inline-comp-sidebar {
        flex-direction: row;
    }
    .inline-comp-col {
        flex: 1;
        min-width: 0;
    }
}

/* (640px inline-comp-sidebar + psych-model-grid rules moved to consolidated 640px block) */

/* ── Fixed Conversation Title/Topic Bar ── */
.conv-title-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid var(--glass-border-subtle);
    flex-shrink: 0;
    min-height: 32px;
}

.conv-title-bar-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
    flex-shrink: 0;
}

.conv-title-bar-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    overflow: hidden;
}

.conv-title-bar-topics .topic-tag {
    font-size: var(--text-2xs);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    white-space: nowrap;
}

.conv-title-bar-recap {
    flex-shrink: 0;
    margin-left: auto;
    padding: 3px 10px;
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--color-active);
    background: transparent;
    border: 1px solid var(--color-active);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.conv-title-bar-recap:hover {
    background: var(--color-active);
    color: white;
}

.conv-title-bar-recap:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Recap highlight overlay on messages */
.message.recap-highlight {
    position: relative;
    outline: 2px solid hsl(225, 35%, 55%);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
    animation: recap-pulse 1.5s ease-in-out;
}

.recap-badge {
    position: absolute;
    top: -10px;
    left: 12px;
    background: hsl(225, 30%, 50%);
    color: white;
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--radius-xs);
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.recap-badge.importance-high { background: hsl(0, 65%, 50%); }
.recap-badge.importance-medium { background: hsl(217, 91%, 53%); }
.recap-badge.importance-low { background: hsl(225, 30%, 55%); }

.recap-summary {
    background: var(--bg-elevated);
    border-inline-start: 3px solid hsl(225, 35%, 55%);
    padding: var(--space-1) var(--space-2);
    margin-top: var(--space-1);
    font-size: var(--text-micro);
    color: var(--text-secondary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

@keyframes recap-pulse {
    0% { outline-color: transparent; }
    50% { outline-color: hsl(225, 35%, 55%); }
    100% { outline-color: hsl(225, 35%, 40%); }
}

/* ── Score Trendline ── */
.score-trendline {
    padding: var(--space-2) var(--space-4);
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid var(--glass-border-subtle);
    flex-shrink: 0;
}

.score-trendline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}

.score-trendline-label {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.score-trendline-legend {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-2xs);
    color: var(--text-secondary);
}

.score-trendline-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.score-trendline-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.score-trendline-svg {
    width: 100%;
    height: 48px;
    display: block;
}

/* ── Inline Evaluation in Comparison Panes ── */
.comp-pane-eval {
    border-top: 1px solid var(--border-color);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.comp-pane-eval-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

.comp-pane-eval-score {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.comp-pane-eval-score .score-label {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 2px;
}

.comp-pane-eval-subscales {
    display: none;
    flex-direction: column;
    gap: 3px;
    margin-top: var(--space-1);
}

.comp-pane-eval.expanded .comp-pane-eval-subscales {
    display: flex;
}

.comp-pane-eval-toggle {
    display: inline-block;
    font-size: var(--text-3xs);
    color: var(--text-muted);
    cursor: pointer;
    margin-left: auto;
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    transition: color var(--duration-fast) var(--ease-out);
}

.comp-pane-eval-toggle:hover {
    color: var(--text-primary);
}

.comp-eval-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-2xs);
}

.comp-eval-row-label {
    width: 60px;
    color: var(--text-muted);
    flex-shrink: 0;
    text-align: end;
}

.comp-eval-row-bar-bg {
    flex: 1;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.comp-eval-row-bar {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.6s var(--ease-out);
}

.comp-eval-row-val {
    width: 28px;
    text-align: end;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Conversation Lotus Icons ── */

/* Small lotus in sidebar conversation items */
.conv-lotus-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.conversation-item:hover .conv-lotus-icon {
    opacity: 1;
    transform: scale(1.08);
}

.conversation-item.active .conv-lotus-icon {
    opacity: 1;
}

/* Large lotus in chat area — upper right watermark */
.chat-lotus {
    position: absolute;
    top: var(--space-4);
    right: var(--space-6);
    z-index: 2;
    width: 220px;
    height: 220px;
    opacity: 0.18;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-out);
}

.chat-pane-primary:hover .chat-lotus,
.chat-column--primary:hover .chat-lotus {
    opacity: 0.28;
}

/* (640px chat-lotus rules moved to consolidated 640px block) */

/* ============ MESSAGES ============ */
.messages-container {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: var(--space-6) var(--space-6);
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    container-type: inline-size;
    container-name: messages;
}

.messages-container > .message {
    max-width: 860px;
    margin-inline: auto;
}

.message {
    margin-block-end: var(--space-4);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
    border-radius: 16px;
    border: 1px solid transparent;
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
    animation: msgFadeIn 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
}

@keyframes msgFadeIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

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

.message.user {
    background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(124,58,237,0.04) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(37,99,235,0.1);
    border-radius: 16px 16px 4px 16px;
}

.message.assistant {
    background: var(--gradient-surface);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-color: transparent;
    border-radius: 16px 16px 16px 4px;
}

.message:hover {
    border-color: rgba(37, 99, 235, 0.06);
}

.message.user:hover {
    border-color: rgba(37, 99, 235, 0.15);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.06);
}

.message.assistant:hover {
    border-color: rgba(37, 99, 235, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.message-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
}

.message-avatar {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    border-radius: 10px;
    transition: transform var(--duration-fast) var(--ease-out);
}

.message-avatar:hover {
    transform: scale(1.1);
}

.message.user .message-avatar {
    background: linear-gradient(135deg, rgba(37,99,235,0.15) 0%, rgba(124,58,237,0.1) 100%);
    box-shadow: 0 2px 8px rgba(37,99,235,0.12);
}

.message.assistant .message-avatar {
    background: linear-gradient(135deg, rgba(22,163,74,0.12) 0%, rgba(37,99,235,0.08) 100%);
    box-shadow: 0 2px 8px rgba(22,163,74,0.1);
}

.message-author {
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: -0.01em;
}

.message.user .message-author {
    color: var(--text-primary);
}

.message.assistant .message-author {
    color: var(--color-active);
}

.message-time {
    color: var(--text-muted);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: color 0.15s ease;
}

.message-time:hover {
    color: var(--color-active);
    text-decoration: underline;
}

.message-content {
    color: var(--text-primary);
    font-size: var(--text-base);
    padding-inline-start: 36px;
    line-height: 1.75;
    overflow-wrap: break-word;
    word-break: break-word;
}

.message-content p {
    margin-bottom: var(--space-3);
    max-width: 72ch;
}
.message-content p:last-child { margin-bottom: 0; }

.message-content h1,
.message-content h2,
.message-content h3 {
    font-family: var(--font-display);
    color: var(--text-primary);
    margin: var(--space-4) 0 var(--space-2);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.message-content h1 { font-size: var(--text-xl); line-height: 1.2; }
.message-content h2 { font-size: var(--text-lg); line-height: 1.25; }
.message-content h3 { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }

.message-content ul,
.message-content ol {
    margin: var(--space-2) 0;
    padding-inline-start: 20px;
}

.message-content li { margin: var(--space-1) 0; }

.message-content code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.08);
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
}

.message-content pre {
    margin: var(--space-3) 0;
    padding: var(--space-4);
    background: var(--bg-chrome);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
}

.message-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

/* Markdown table styling */
.message-content table {
    border-collapse: collapse;
    margin: var(--space-4) 0;
    font-size: var(--text-sm);
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

.message-content thead {
    background: var(--bg-chrome);
}

.message-content th,
.message-content td {
    border: 1px solid var(--border-color);
    padding: var(--space-2) var(--space-3);
    text-align: start;
}

.message-content th {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.message-content tr:nth-child(even) {
    background: rgba(240, 246, 252, 0.03);
}

/* (768px message-content table rules moved to consolidated 768px block) */
/* (480px message-content list rules moved to consolidated 480px block) */

/* Blockquote styling */
.message-content blockquote {
    border-inline-start: 3px solid var(--color-active);
    margin: var(--space-3) 0;
    padding: var(--space-2) var(--space-4);
    background: var(--color-active-soft);
    color: var(--text-secondary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.message-content blockquote p {
    margin-bottom: var(--space-1);
}

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

/* Horizontal rule */
.message-content hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: var(--space-4) 0;
}

/* Image */
.message-content img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: var(--space-3) 0;
}

/* Task list checkboxes */
.message-content input[type="checkbox"] {
    margin-inline-end: var(--space-2);
    accent-color: var(--color-active);
}

/* Numbered lists */
.message-content ol {
    margin: var(--space-2) 0;
    padding-inline-start: 24px;
    list-style-type: decimal;
}

/* Nested lists */
.message-content ul ul,
.message-content ol ol,
.message-content ul ol,
.message-content ol ul {
    margin: var(--space-1) 0;
}

/* Links in messages */
.message-content a {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.message-content a:hover {
    color: var(--text-link-hover);
}

/* Empty State — Hero Treatment */
.empty-state {
    text-align: center;
    padding: var(--space-10) var(--space-6) var(--space-8);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 60vh;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(37,99,235,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(124,58,237,0.04) 0%, transparent 50%);
}


.mentat-epigraph {
    margin-top: 32px;
    max-width: 460px;
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.7;
    color: var(--text-muted);
    opacity: 0.45;
}

/* Hero section */
.empty-state-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-8);
}

.empty-state-cloud {
    color: var(--color-active);
    opacity: 0.7;
    margin-bottom: var(--space-4);
}

.empty-state-heading {
    font-size: var(--text-display);
    margin: 0 0 var(--space-2) 0;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-active) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-state-tagline {
    margin: 0;
    font-size: var(--text-md);
    color: var(--text-secondary);
    max-width: 45ch;
    line-height: 1.5;
    font-weight: 400;
}

/* Card grid */
.empty-state-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    max-width: 780px;
    width: 100%;
    margin-bottom: var(--space-8);
}

.empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border-subtle);
    border-radius: 16px;
    padding: var(--space-4);
    cursor: pointer;
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
    font-family: var(--font-ui);
    min-height: 140px;
    outline: none;
}

.empty-state-card:hover {
    background: var(--glass-bg-heavy);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(37,99,235,0.08), 0 2px 8px rgba(0,0,0,0.06);
    border-color: rgba(37,99,235,0.12);
}

.empty-state-card:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(37,99,235,0.06);
}

.empty-state-card:focus-visible {
    outline: 2px solid var(--color-active);
    outline-offset: 2px;
}

.empty-state-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, light-dark(rgba(37,99,235,0.1), rgba(37,99,235,0.15)) 0%, light-dark(rgba(124,58,237,0.08), rgba(124,58,237,0.12)) 100%);
    border-radius: 10px;
    color: light-dark(#2563eb, #60a5fa);
    margin-bottom: var(--space-2);
    box-shadow: 0 2px 8px light-dark(rgba(37,99,235,0.08), rgba(37,99,235,0.15));
}

.empty-state-card-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.empty-state-card-prompt {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.55;
    flex: 1;
}

/* Features bar */
.empty-state-features {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.02em;
    flex-wrap: wrap;
    justify-content: center;
}

.empty-state-features-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.5;
    flex-shrink: 0;
}

/* Legacy selectors kept for compatibility */
.empty-state h1 { /* alias for heading */
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: var(--text-display);
    margin-bottom: var(--space-3);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.empty-state p {
    margin: var(--space-1) 0;
    font-size: var(--text-md);
    color: var(--text-secondary);
    max-width: 45ch;
    line-height: 1.5;
}

.empty-state p.text-muted {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-3);
}

/* (768px empty-state 2-col + 640px empty-state 1-col rules moved to consolidated blocks) */

/* ── CHC Cognitive Factor Comparison Chart ── */
.chc-chart {
    max-width: 480px;
    width: 100%;
    margin-top: var(--space-8);
}


/* ── IQ Ring summary row in CHC chart ── */
.chc-rings {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
}

.chc-ring-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.chc-ring-label {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.chc-legend {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
}

.chc-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-3xs);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.chc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chc-dot--mentat  { background: hsl(220, 65%, 50%); }
.chc-dot--gpt     { background: hsl(145, 55%, 44%); }
.chc-dot--claude  { background: hsl(262, 55%, 55%); }

.chc-factor {
    margin-bottom: 10px;
}

.chc-label {
    display: block;
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    margin-bottom: 5px;
    text-align: start;
}

.chc-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chc-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 5px;
}

.chc-bar {
    height: 4px;
    border-radius: var(--radius-xs);
    width: var(--bar-pct);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.chc-bar--mentat  { background: hsl(220, 65%, 50%); }
.chc-bar--gpt     { background: hsl(145, 55%, 44%); }
.chc-bar--claude  { background: hsl(262, 55%, 55%); }

.chc-score {
    font-size: var(--text-3xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
    min-width: 22px;
    text-align: right;
    line-height: 1;
}

/* (640px chc-chart + chc-legend rules moved to consolidated 640px block) */

.lotus-bloom-in svg,
.lotus-bloom-in img {
    transform-origin: center center;
}


/* ============ PIPELINE PROGRESS ============ */
.pipeline-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(13, 17, 23, 0.9);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-top: 1px solid rgba(37, 99, 235, 0.1);
    animation: pipelineBarReveal 200ms var(--ease-enter) both;
}

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

.pipeline-progress.hidden { display: none; }

.pipeline-ring {
    flex-shrink: 0;
}

.pipeline-ring-bg {
    stroke: rgba(37, 99, 235, 0.15);
}

.pipeline-ring-fill {
    stroke: var(--color-active);
    transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 0 3px var(--color-active-glow));
}

.pipeline-progress-label {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

.provider-fallback-badge {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(217, 91%, 40%);
    background: hsla(217, 91%, 53%, 0.12);
    border: 1px solid hsla(217, 91%, 53%, 0.3);
    padding: 2px 7px;
    border-radius: var(--radius-xs);
    margin-inline-start: auto;
}


/* ============ REASONING MODE & QUESTION CLASS BADGES ============ */
.reasoning-mode-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    margin-inline-start: 8px;
    border: 1px solid;
    text-transform: uppercase;
}
.reasoning-mode-badge[data-mode="conceptual_rigor"] {
    background: light-dark(#e8eaf6, #1e293b);
    color: light-dark(#1a237e, #818cf8);
    border-color: light-dark(#283593, #4f46e5);
}
.reasoning-mode-badge[data-mode="open_texture_deepening"] {
    background: light-dark(#fce4ec, #370e1e);
    color: light-dark(#880e4f, #f472b6);
    border-color: light-dark(#880e4f, #db2777);
}
.question-class-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    margin-inline-start: 4px;
    border: 1px solid light-dark(#999, #475569);
    color: light-dark(#666, #94a3b8);
    background: light-dark(#f5f5f5, #1e293b);
}
.question-class-badge[data-qclass="conceptual"] { background: light-dark(#e8eaf6, #1e293b); color: light-dark(#283593, #818cf8); border-color: light-dark(#7986cb, #6366f1); }
.question-class-badge[data-qclass="normative"] { background: light-dark(#fff3e0, #3a1f0f); color: light-dark(#ff8a65, #fca5a5); border-color: light-dark(#e65100, #ea580c); }
.question-class-badge[data-qclass="metaphysical"] { background: light-dark(#f3e5f5, #2e1a3e); color: light-dark(#4a148c, #c084fc); border-color: light-dark(#b39ddb, #a855f7); }
.question-class-badge[data-qclass="mixed"] { background: light-dark(#e0f2f1, #0f2f29); color: light-dark(#4db6ac, #2dd4bf); border-color: light-dark(#00695c, #14b8a6); }
.question-class-badge[data-qclass="empirical"] { background: light-dark(#e8f5e9, #142f1a); color: light-dark(#1b5e20, #4ade80); border-color: light-dark(#2e7d32, #22c55e); }
.reasoning-mode-badge.hidden,
.question-class-badge.hidden {
    display: none;
}

/* ============ MEMORY SYSTEM INDICATORS ============ */
.memory-indicator {
    display: inline-flex;
    gap: 3px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    margin-inline-start: 8px;
    vertical-align: middle;
}
.memory-indicator.hidden {
    display: none;
}
.memory-tier {
    padding: 1px 4px;
    border: 1px solid light-dark(#ccc, #475569);
    color: light-dark(#999, #94a3b8);
    letter-spacing: 0.03em;
    font-weight: 600;
}
.memory-tier.active {
    color: light-dark(#2e7d32, #4ade80);
    border-color: light-dark(#2e7d32, #22c55e);
    background: light-dark(#e8f5e9, #142f1a);
}

/* ============ GROQ SUGGESTION CHIPS ============ */
.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px;
    margin: 4px 0 12px 0;
    align-items: center;
    opacity: 0;
    animation: fadeSlideIn 0.3s ease forwards;
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.suggestion-label {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    margin-inline-end: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
}
/* ── Suggestion chip entrance — staggered slide-up (40ms per chip) ──────── */
@keyframes chip-enter {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.suggestion-chip {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 500;
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    letter-spacing: 0.02em;
    line-height: 1.4;
    max-width: 340px;
    text-align: start;
    animation: chip-enter 280ms var(--ease-enter, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
/* 8 chips × 40ms stagger */
.suggestion-chip:nth-child(1)  { animation-delay:  0ms; }
.suggestion-chip:nth-child(2)  { animation-delay: 40ms; }
.suggestion-chip:nth-child(3)  { animation-delay: 80ms; }
.suggestion-chip:nth-child(4)  { animation-delay: 120ms; }
.suggestion-chip:nth-child(5)  { animation-delay: 160ms; }
.suggestion-chip:nth-child(6)  { animation-delay: 200ms; }
.suggestion-chip:nth-child(7)  { animation-delay: 240ms; }
.suggestion-chip:nth-child(8)  { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
    .suggestion-chip { animation: none; }
}
.suggestion-chip:hover {
    border-color: var(--color-active);
    background: var(--color-active-soft);
    box-shadow: var(--shadow-glow);
}
.suggestion-chip:active {
    transform: scale(0.97);
}
.suggestion-chip.queued {
    border-color: hsl(145, 25%, 45%);
    color: hsl(145, 25%, 45%);
    cursor: default;
    font-size: var(--text-3xs);
    letter-spacing: 0.15em;
    font-weight: 700;
}
/* (640px suggestion-chips rules moved to consolidated 640px block) */

/* ============ QUALITY PROFILE WIDGET ============ */
.quality-profile-widget.collapsed { display: none; }

/* Quality Profile Widget — theme adaptive */
.quality-profile-widget {
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid light-dark(#ddd, #444);
    background: light-dark(#fafafa, #1a1a1a);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
}
.qp-title {
    font-weight: 700;
    font-size: var(--text-2xs);
    letter-spacing: 0.1em;
    color: light-dark(#666, #888);
    margin-bottom: 6px;
}
.qp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.qp-dim {
    width: 12px;
    font-weight: 700;
    color: light-dark(#333, #aaa);
}
.qp-bar-track {
    flex: 1;
    height: 6px;
    background: light-dark(#eee, #333);
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.qp-bar-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}
.qp-val {
    width: 32px;
    text-align: right;
    color: light-dark(#666, #888);
}

/* ============ DAG EXPLORER ============ */
/* ============ DAG EXPLORER — Ultra-Compact Inline Strip ============ */
.dag-container {
    position: relative;
    padding: 6px 8px;
}

.dag-connections {
    display: none;
}

.dag-nodes {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* ── Phase groups ── */
.dag-phase-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

/* Refined separator between phase groups */
.dag-phase-group + .dag-phase-group::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: hsla(225, 20%, 35%, 0.5);
    margin: 0 3px;
    flex-shrink: 0;
    animation: dotReveal 200ms var(--ease-reveal) both;
}

@keyframes dotReveal {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

/* Phase labels hidden — pills are self-explanatory */
.dag-phase-label {
    display: none;
}

.dag-phase-label::before {
    display: none;
}

.dag-phase-nodes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    padding-left: 0;
    border-left: none;
    margin-left: 0;
}

/* ── Individual DAG nodes — refined pills ── */
.dag-node {
    background: var(--bg-primary);
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: 10px;
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
    overflow: hidden;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.dag-node-header {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px 2px 2px;
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast) var(--ease-out);
}

.dag-node-header:hover {
    background: rgba(37, 99, 235, 0.06);
}

.dag-node-num {
    font-family: var(--font-mono);
    font-size: var(--text-4xs);
    font-weight: 700;
    background: linear-gradient(135deg, rgba(37,99,235,0.12) 0%, rgba(124,58,237,0.08) 100%);
    color: var(--color-active);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.dag-node-name {
    font-size: var(--text-4xs);
    color: var(--text-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 56px;
}

.dag-node-tokens {
    font-family: var(--font-mono);
    font-size: var(--text-5xs);
    color: var(--text-muted);
    opacity: 0.5;
}

.dag-node-status {
    font-size: var(--text-6xs);
    color: var(--text-muted);
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 100ms var(--ease-acknowledge),
                background 100ms var(--ease-acknowledge),
                transform 100ms var(--ease-acknowledge);
}

.dag-node-status.dag-status-complete {
    color: #fff;
    background: hsl(145, 55%, 44%);
    font-size: var(--text-5xs);
    font-weight: 700;
    animation: statusCheck 100ms var(--ease-acknowledge);
}

@keyframes statusCheck {
    from { transform: scale(0.5); opacity: 0.4; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── Running state — active accent pulse ── */
.dag-node-running {
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    animation: dagNodePulse 2s ease-in-out infinite;
}

@keyframes dagNodePulse {
    0%, 100% { box-shadow: 0 0 12px rgba(37, 99, 235, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); }
    50% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.2), 0 2px 8px rgba(0, 0, 0, 0.08); }
}


.dag-node-running .dag-node-num {
    background: var(--color-active);
    color: #fff;
    border-radius: 6px;
}

.dag-node-running .dag-node-name {
    color: var(--color-active);
    font-weight: 600;
}

.dag-node-running .dag-node-status {
    color: var(--color-active);
}


/* ── Complete state — settled green ── */
.dag-node-complete {
    border-color: rgba(22, 163, 74, 0.15);
    opacity: 0.85;
}

.dag-node-complete .dag-node-num {
    background: hsl(145, 50%, 44%);
    color: #fff;
    border-radius: 6px;
}

.dag-node-complete .dag-node-name {
    color: var(--text-secondary);
}

/* ── Expanded state — elevated card for content ── */
.dag-node-expanded {
    position: relative;
    border-color: hsla(225, 40%, 35%, 0.6);
    border-radius: 10px;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dag-node-expanded .dag-node-header {
    background: hsla(225, 20%, 12%, 0.8);
    border-radius: 10px 10px 0 0;
    padding: 3px 8px 3px 3px;
}

/* ── Collapsed content (accordion) ── */
.dag-node-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-slow) var(--ease-out);
}

.dag-node-expanded .dag-node-content {
    max-height: 200px;
    padding: 4px 8px;
    overflow-y: auto;
    border-top: 1px solid var(--border-light);
    background: var(--bg-primary);
    min-width: 280px;
    font-size: var(--text-xs-sm);
}

.dag-node-summary {
    font-size: var(--text-micro);
    color: var(--text-secondary);
    line-height: 1.45;
    padding: 2px 6px;
    background: var(--bg-chrome);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--border-heavy);
}

.dag-node-complete.dag-node-expanded .dag-node-summary {
    border-left-color: hsl(145, 40%, 70%);
}

.dag-show-full {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: 4px var(--space-3);
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--color-active);
    background: rgba(37, 99, 235, 0.06);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.dag-show-full:hover {
    background: rgba(37, 99, 235, 0.12);
    color: hsl(225, 80%, 40%);
}

.dag-show-full::after {
    content: '\2192';
    font-size: var(--text-xs);
    transition: transform var(--duration-fast) var(--ease-out);
}

.dag-show-full:hover::after {
    transform: translateX(2px);
}

/* ── Full content rendered ── */
.dag-node-full {
    max-height: none !important;
}

.dag-node-full p {
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--text-primary);
}

.dag-node-full h1,
.dag-node-full h2,
.dag-node-full h3 {
    font-family: var(--font-display);
    margin: var(--space-3) 0 var(--space-2);
    font-weight: 700;
    color: var(--text-primary);
}

.dag-node-full h1 { font-size: var(--text-md); letter-spacing: -0.01em; }
.dag-node-full h2 { font-size: var(--text-base); letter-spacing: -0.01em; }
.dag-node-full h3 { font-size: var(--text-sm); font-weight: 600; }

.dag-node-full ul,
.dag-node-full ol {
    margin: var(--space-2) 0;
    padding-left: 20px;
}

.dag-node-full li {
    margin: var(--space-1) 0;
    font-size: var(--text-sm);
    line-height: 1.6;
}

.dag-node-full code {
    background: rgba(37, 99, 235, 0.05);
    padding: 2px 5px;
    font-family: var(--font-mono);
    font-size: var(--text-xs-sm);
    border-radius: var(--radius-sm);
    color: var(--color-active);
}

.dag-node-full pre {
    background: var(--bg-chrome);
    padding: var(--space-3);
    overflow-x: auto;
    margin: var(--space-3) 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.dag-node-full pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-primary);
}

.dag-node-full blockquote {
    border-left: 3px solid var(--color-active);
    padding: var(--space-2) var(--space-3);
    margin: var(--space-2) 0;
    color: var(--text-secondary);
    background: rgba(37, 99, 235, 0.03);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ============ U7: COGNITIVE LOAD ADAPTATION ============ */

/* ── Progress dots strip ── */
.rc-progress-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0 4px;
    flex-shrink: 0;
}

.rc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    transition: background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.rc-dot--pending {
    background: var(--text-muted, #888);
    opacity: 0.3;
}

.rc-dot--running {
    background: hsl(220, 70%, 55%);
    opacity: 1;
    animation: dotPulse 1.2s ease-in-out infinite;
}

.rc-dot--pass {
    background: hsl(145, 55%, 44%);
    opacity: 1;
}

.rc-dot--repair {
    background: hsl(217, 91%, 53%);
    opacity: 1;
}

.rc-dot--fail {
    background: hsl(0, 65%, 50%);
    opacity: 1;
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.5; box-shadow: 0 0 0 0 hsla(220, 70%, 55%, 0); }
    50% { opacity: 1; box-shadow: 0 0 0 2px hsla(220, 70%, 55%, 0.3); }
}

/* ── Compact mode: single-line pill ── */
.dag-node-compact {
    max-height: 24px;
    overflow: hidden;
}

.dag-node-compact .dag-node-header {
    padding: 2px 6px 2px 2px;
}

.dag-node-compact .dag-node-content {
    display: none;
}

.dag-node-compact .dag-node-name {
    max-width: 40px;
    font-size: var(--text-5xs);
}

/* When user explicitly expands a compact node, override compact */
.dag-node-compact.dag-node-expanded {
    max-height: none;
    overflow: visible;
}

.dag-node-compact.dag-node-expanded .dag-node-content {
    display: block;
}

/* ── Cognitive load toggle (C | S | F) ── */
.cognitive-load-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0 4px;
    border: 1px solid hsla(225, 20%, 30%, 0.6);
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex-shrink: 0;
}

.cl-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    font-size: var(--text-4xs);
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 1px 5px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}

.cl-toggle-btn:hover {
    background: hsla(225, 20%, 20%, 0.5);
    color: var(--text-primary, #fff);
}

.cl-toggle-btn--active {
    background: hsla(225, 40%, 30%, 0.7);
    color: var(--color-active, #2563eb);
}

.cl-toggle-btn + .cl-toggle-btn {
    border-left: 1px solid hsla(225, 20%, 30%, 0.4);
}

/* ── U22: In-Chat Search & Stage Filtering ── */
.rc-search-bar {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: hsla(225, 15%, 8%, 0.9);
    border-bottom: 1px solid hsla(225, 15%, 25%, 0.5);
}

.rc-search-bar.visible {
    display: flex;
}

.rc-search-input {
    background: hsla(225, 20%, 12%, 0.8);
    border: 1px solid hsla(225, 20%, 30%, 0.6);
    border-radius: var(--radius-md, 10px);
    color: var(--text-primary, #e0e0e0);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    padding: 3px 6px;
    width: 140px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rc-search-input:focus {
    border-color: var(--color-active);
    box-shadow: 0 0 0 3px var(--color-active-glow);
}

.rc-search-input::placeholder {
    color: var(--text-muted, #888);
    font-size: var(--text-3xs);
}

.rc-search-count {
    font-family: var(--font-mono);
    font-size: var(--text-4xs);
    color: var(--text-muted, #888);
    white-space: nowrap;
    min-width: 50px;
}

.rc-search-nav {
    display: inline-flex;
    gap: 0;
}

.rc-search-nav-btn {
    background: transparent;
    border: 1px solid hsla(225, 20%, 30%, 0.6);
    color: var(--text-muted, #888);
    font-size: var(--text-3xs);
    font-family: var(--font-mono);
    padding: 1px 5px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}

.rc-search-nav-btn:hover {
    background: hsla(225, 20%, 20%, 0.5);
    color: var(--text-primary, #fff);
}

.rc-search-nav-btn + .rc-search-nav-btn {
    border-left: none;
}

.rc-search-nav-btn:first-child {
    border-radius: 3px 0 0 3px;
}

.rc-search-nav-btn:last-child {
    border-radius: 0 3px 3px 0;
}

.rc-filter-pills {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: 4px;
    border: 1px solid hsla(225, 20%, 30%, 0.6);
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex-shrink: 0;
}

.rc-filter-pill {
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    font-size: var(--text-4xs);
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 1px 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1.4;
    text-transform: uppercase;
}

.rc-filter-pill:hover {
    background: hsla(225, 20%, 20%, 0.5);
    color: var(--text-primary, #fff);
}

.rc-filter-pill--active {
    background: hsla(225, 40%, 30%, 0.7);
    color: var(--color-active, #2563eb);
}

.rc-filter-pill + .rc-filter-pill {
    border-left: 1px solid hsla(225, 20%, 30%, 0.4);
}

.dag-node-search-match {
    border-color: var(--color-active, #2563eb) !important;
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.3), inset 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.dag-node-search-current {
    border-color: #fff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.dag-node-filtered-out {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .dag-node-content {
        transition: none;
    }
    .dag-node-running,
    .dag-node-running .dag-node-status {
        animation: none;
    }
    .rc-dot--running {
        animation: none;
        opacity: 1;
    }
}

/* ============ DAG SVG VISUALIZATION (U7) ============ */
.dag-svg-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin: 6px 0;
    padding: 4px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-chrome);
}

.dag-svg-canvas {
    display: block;
    min-width: 100%;
}

/* ── SVG node rects ── */
.dag-svg-rect {
    stroke-width: 1.5;
    transition: fill 200ms var(--ease-out), stroke 200ms var(--ease-out);
}

.dag-svg-rect--pending {
    fill: var(--bg-field, #ffffff);
    stroke: var(--border-color, rgba(0,0,0,0.1));
}

.dag-svg-rect--running {
    fill: hsla(220, 40%, 96%, 1);
    stroke: hsl(220, 60%, 50%);
    stroke-width: 2;
    animation: dagPulseRect 1.5s ease-in-out infinite;
}

.dag-svg-rect--complete {
    fill: hsla(145, 30%, 95%, 1);
    stroke: hsl(145, 50%, 44%);
}

.dag-svg-rect--failed {
    fill: hsla(0, 40%, 96%, 1);
    stroke: hsl(0, 60%, 50%);
}

.dag-svg-rect--repair {
    fill: hsla(217, 91%, 96%, 1);
    stroke: hsl(217, 91%, 53%);
    stroke-dasharray: 4 2;
}

@keyframes dagPulseRect {
    0%, 100% { stroke-opacity: 1; }
    50%      { stroke-opacity: 0.4; }
}

/* ── SVG node text ── */
.dag-svg-label {
    font-family: var(--font-ui);
    font-size: var(--text-micro);
    font-weight: 600;
    fill: var(--text-primary, #1a1a2e);
    pointer-events: none;
}

.dag-svg-dur {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    fill: var(--text-muted, #8e8ea0);
    pointer-events: none;
}

/* ── SVG status badge ── */
.dag-svg-badge {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    pointer-events: none;
}

.dag-svg-badge--pending {
    fill: var(--text-muted, #8e8ea0);
}

.dag-svg-badge--running {
    fill: hsl(220, 60%, 50%);
}

.dag-svg-badge--complete {
    fill: hsl(145, 50%, 38%);
}

.dag-svg-badge--failed {
    fill: hsl(0, 60%, 50%);
}

.dag-svg-badge--repair {
    fill: hsl(217, 91%, 53%);
}

/* ── SVG edges ── */
.dag-svg-edge {
    fill: none;
    stroke-width: 1.5;
    transition: stroke 200ms var(--ease-out);
}

.dag-svg-edge--pending {
    stroke: var(--text-muted, #8e8ea0);
    stroke-dasharray: 4 3;
    opacity: 0.5;
}

.dag-svg-edge--running {
    stroke: hsl(220, 60%, 50%);
    stroke-dasharray: none;
    opacity: 0.8;
}

.dag-svg-edge--complete {
    stroke: hsl(145, 50%, 44%);
    stroke-dasharray: none;
    opacity: 1;
}

.dag-svg-edge--failed {
    stroke: hsl(0, 60%, 50%);
    stroke-dasharray: none;
    opacity: 0.8;
}

.dag-svg-edge--repair {
    stroke: hsl(217, 91%, 53%);
    stroke-dasharray: 3 2;
    opacity: 0.8;
}

/* ── SVG tooltip (absolute positioned inside wrapper) ── */
.dag-svg-tooltip {
    position: absolute;
    z-index: 100;
    background: rgba(13,17,23,0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(37,99,235,0.15);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(37,99,235,0.1);
    padding: 8px 12px;
    max-width: 280px;
    pointer-events: none;
}

.dag-tip-title {
    font-family: var(--font-ui);
    font-size: var(--text-xs-sm);
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(37,99,235,0.2);
    padding-bottom: 4px;
}

.dag-tip-row {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: #94a3b8;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.dag-tip-key {
    font-weight: 700;
    color: #93c5fd;
}

@media (prefers-reduced-motion: reduce) {
    .dag-svg-rect--running {
        animation: none;
    }
}

/* ============ INPUT AREA ============ */
.input-area {
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--glass-border);
    padding: var(--space-3) var(--space-6);
    padding-block-end: var(--space-4);
    position: relative;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.04), 0 -4px 16px rgba(0,0,0,0.06);
    transition: box-shadow var(--duration-base) var(--ease-out);
    container-type: inline-size;
    container-name: input-area;
}

/* ═══ PEDESTAL INPUT — Academic Precision Stage ═══ */
.input-pedestal {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
    padding: var(--space-3) var(--space-8) var(--space-4);
    transition: box-shadow 200ms var(--ease-acknowledge),
                background 200ms var(--ease-acknowledge);
}

.input-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.depth-selector {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.depth-selector select,
#depthSelect {
    padding: 6px 28px 6px 10px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23555555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.depth-selector select:hover,
#depthSelect:hover {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.depth-selector select:focus,
#depthSelect:focus {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
    outline: 2px solid transparent;
}

/* ── Comparison Model Selector ── */
.compare-selector {
    position: relative;
}

.compare-toggle-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(240, 246, 252, 0.08);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.compare-toggle-btn:hover {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    color: var(--text-primary);
}

.compare-count {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: #fff;
    background: var(--color-active);
    border-radius: 9999px;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.compare-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 320px;
    max-height: 360px;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow-elevated);
    z-index: 1005;
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

.compare-dropdown.hidden { display: none; }

.compare-dropdown:not(.hidden) {
    animation: compare-slide-up 180ms var(--ease-reveal) both;
}

@keyframes compare-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.compare-dropdown-header {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.compare-dropdown-header span {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.compare-search {
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs-sm);
    font-family: var(--font-ui);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.compare-search:focus {
    border-color: var(--color-active);
    outline: 2px solid transparent;
}

.compare-dropdown-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1) 0;
    max-height: 280px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-snap-type: y proximity;
}

.compare-dropdown-list .compare-model-item {
    scroll-snap-align: start;
}

.compare-model-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px var(--space-3);
    cursor: pointer;
    font-size: var(--text-xs-sm);
    color: var(--text-primary);
    transition: background var(--duration-fast) var(--ease-out);
}

.compare-model-item:hover {
    background: var(--bg-chrome);
}

.compare-model-item:active {
    transform: scale(0.98);
    opacity: 0.8;
}

.compare-model-item input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--color-active);
}

.compare-model-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-model-price {
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
    flex-shrink: 0;
}

.compare-loading {
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-xs-sm);
    color: var(--text-muted);
}

.api-key-input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    flex: 1;
    font-weight: 600;
    font-size: var(--text-xs);
}

.api-key-input input {
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    width: 240px;
    border-radius: var(--radius-xs);
}

.api-key-input input:focus {
    border-color: var(--color-active);
    outline: 2px solid transparent;
}

.api-key-input input::placeholder {
    color: var(--text-muted);
}

.input-row {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    position: relative;
}

#messageInput {
    flex: 1;
    padding: 14px 18px;
    border: none;
    border-radius: 14px;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: rgba(240, 246, 252, 0.04);
    border: 1px solid var(--glass-border-subtle);
    resize: none;
    line-height: 1.6;
    min-height: 52px;
    max-height: 400px;
    box-shadow:
        0 0 0 1px rgba(37, 99, 235, 0.05),
        0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform var(--duration-base) var(--ease-acknowledge), opacity var(--duration-base) var(--ease-acknowledge), background-color var(--duration-base) var(--ease-acknowledge), border-color var(--duration-base) var(--ease-acknowledge), color var(--duration-base) var(--ease-acknowledge), box-shadow var(--duration-base) var(--ease-acknowledge);
}

#messageInput::placeholder {
    color: var(--text-muted);
    transition: color var(--duration-base) var(--ease-out);
}

#messageInput:focus {
    outline: 2px solid transparent;
    box-shadow:
        0 0 0 2px rgba(37, 99, 235, 0.3),
        0 4px 16px rgba(37, 99, 235, 0.08),
        0 8px 32px rgba(37, 99, 235, 0.04);
    background: rgba(240, 246, 252, 0.06);
}

#messageInput.thinking {
    background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(37, 99, 235, 0.04) 100%);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), 0 4px 16px rgba(37, 99, 235, 0.06);
}

#messageInput.thinking::placeholder {
    color: var(--color-active);
}

/* ============ AUTO-GROWING TEXTAREA ============ */
@supports (field-sizing: content) {
  .message-input-area textarea,
  #messageInput {
    field-sizing: content;
    min-height: 44px;
    max-height: 200px;
  }
}

/* ============ BUTTONS ============ */
.send-button {
    padding: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--gradient-accent);
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

.send-button svg {
    width: 20px;
    height: 20px;
}

.send-button:hover:not(:disabled) {
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.send-button:active:not(:disabled) {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.send-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(0.5);
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.send-button.processing {
    background: hsl(225, 12%, 40%);
    cursor: wait;
}


/* Queue add button — appears during processing when user types */
.queue-add-btn {
    padding: 0;
    width: 52px;
    height: 52px;
    background: hsl(145, 40%, 48%);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.5) translateX(-8px);
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.15s ease;
    position: absolute;
    right: -60px;
    bottom: 0;
}

.queue-add-btn.visible {
    opacity: 1;
    transform: scale(1) translateX(0);
    pointer-events: auto;
    position: relative;
    right: auto;
}

.queue-add-btn:hover {
    background: hsl(145, 45%, 42%);
    box-shadow: 0 4px 16px rgba(46, 125, 50, 0.25);
    transform: scale(1) translateY(-1px);
}

.queue-add-btn:active {
    transform: scale(0.97) translateY(1px);
    box-shadow: none;
}

/* ── Message Queue Panel ── */
.message-queue-panel {
    background: hsla(225, 18%, 10%, 0.92);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid hsla(225, 15%, 25%, 0.6);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease,
                padding 0.3s ease;
}

.message-queue-panel.visible {
    max-height: 240px;
    overflow-y: auto;
    opacity: 1;
    padding: 8px 12px;
}

.queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 8px;
}

.queue-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.queue-header-left svg {
    opacity: 0.5;
}

.queue-count {
    background: var(--color-active);
    color: white;
    font-size: var(--text-2xs);
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.queue-clear-btn {
    background: none;
    border: none;
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.queue-clear-btn:hover {
    color: hsl(0, 60%, 50%);
    background: hsla(0, 60%, 50%, 0.06);
}

.queue-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: hsla(0, 0%, 8%, 0.7);
    border: 1px solid hsla(225, 15%, 25%, 0.5);
    border-radius: 10px;
    animation: queueItemIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.queue-item:hover {
    background: var(--bg-elevated);
    border-color: var(--border-heavy);
}

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

.queue-item-order {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: hsla(225, 25%, 50%, 0.08);
    color: var(--color-active);
    font-size: var(--text-micro);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.queue-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.queue-item-text {
    font-size: var(--text-xs);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.queue-item-depth {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: hsla(225, 15%, 50%, 0.06);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.queue-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.queue-item:hover .queue-item-remove {
    opacity: 1;
}

.queue-item-remove:hover {
    color: hsl(0, 60%, 50%);
    background: hsla(0, 60%, 50%, 0.08);
}

/* ── Queue Mode — instant visual switch when message is sent ── */
.input-area.queue-mode .input-toolbar {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.queue-mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    height: 28px;
    font-size: var(--text-2xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    color: hsl(145, 50%, 35%);
    background: hsla(145, 50%, 45%, 0.1);
    border: 1px solid hsla(145, 45%, 45%, 0.25);
    border-radius: 8px;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
    align-self: center;
}

.queue-mode-badge.visible {
    opacity: 1;
    transform: scale(1);
}


.btn {
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: var(--color-active);
    color: #ffffff;
    border-color: var(--color-active);
}

.btn-primary:hover {
    background: var(--text-link-hover);
    border-color: var(--text-link-hover);
    color: #ffffff;
    box-shadow: 0 0 16px var(--color-active-glow);
}

.btn-secondary {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
}

.btn-secondary:hover {
    border-color: var(--color-active);
    color: var(--text-primary);
    background: var(--glass-bg-light);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    box-shadow: var(--shadow-sm);
}

/* ============ STATUS BAR ============ */
.status-bar {
    height: var(--status-height);
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-top: 1px solid var(--glass-border-subtle);
    padding: 0 var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    bottom: 24px;
}

#tokenCount {
    color: var(--text-secondary);
    font-weight: 600;
}

/* ── U16: Run Analytics Badge ── */
.run-analytics-normal {
    font-size: var(--text-2xs);
    font-weight: 600;
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    margin-left: 4px;
    background: hsla(210, 30%, 50%, 0.15);
    color: var(--text-secondary);
}
.run-analytics-anomaly {
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    margin-left: 4px;
    background: hsla(217, 91%, 53%, 0.2);
    color: hsl(217, 91%, 53%);
}

/* ============ LOGIN & REGISTER ============ */
/* ============ LOGIN & REGISTER ============ */
.login-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(37,99,235,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(124,58,237,0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 80%, rgba(37,99,235,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 90%, rgba(124,58,237,0.04) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(37,99,235,0.03) 0%, transparent 70%);
    position: relative;
    overflow: hidden;
    animation: loginBgShift 20s ease-in-out infinite alternate;
}

@keyframes loginBgShift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* ── Split layout for login (desktop: 2 columns, mobile: stack) ── */
.login-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 980px;
    width: 100%;
    min-height: 580px;
    position: relative;
    z-index: 1;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.04),
        0 8px 24px rgba(37,99,235,0.06),
        0 24px 56px rgba(0,0,0,0.1),
        0 0 0 1px rgba(255,255,255,0.04);
    animation: loginPanelReveal 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes loginPanelReveal {
    from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ── Left branding panel ── */
.login-brand {
    background:
        linear-gradient(160deg, hsl(230, 25%, 6%) 0%, hsl(250, 30%, 8%) 40%, hsl(225, 28%, 10%) 100%);
    padding: clamp(32px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.login-brand::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 50%, rgba(37,99,235,0.12) 0%, transparent 60%);
    animation: brandGlow 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes brandGlow {
    0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    100% { transform: translate(5%, 5%) scale(1.1); opacity: 1; }
}


/* Hero lotus — dominant visual in branding panel */
.login-lotus-hero {
    position: relative;
    z-index: 1;
    width: clamp(280px, 70%, 420px);
    height: clamp(280px, 70%, 420px);
    margin: 0 auto;
    opacity: 0;
    transform: scale(0.3) rotate(-30deg);
    filter: drop-shadow(0 8px 32px hsla(225, 30%, 50%, 0.12));
}

.login-lotus-hero img {
    border-radius: 50%;
}


.login-brand-wordmark {
    font-family: var(--font-display);
    font-size: clamp(0.75rem, 0.6rem + 0.8vw, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--color-active) 0%, var(--color-accent-secondary) 50%, var(--color-active) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
    text-align: center;
    order: 1;
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.login-brand h1 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    position: relative;
    z-index: 1;
}

.login-brand-tagline {
    font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.0625rem);
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: var(--space-8);
    position: relative;
    z-index: 1;
}

/* Feature highlights in branding panel */
.login-brand-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.login-brand-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(37,99,235,0.04);
    border: 1px solid rgba(37,99,235,0.08);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(4px);
}

.login-brand-feature:hover {
    background: rgba(37,99,235,0.08);
    border-color: rgba(37,99,235,0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(37,99,235,0.1);
}

.login-brand-feature-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(37,99,235,0.15) 0%, rgba(124,58,237,0.1) 100%);
    border-radius: 10px;
    color: var(--color-active);
    box-shadow: 0 2px 8px var(--color-active-glow);
}

.login-brand-feature-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.login-brand-feature-text strong {
    font-size: var(--text-xs-sm);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.login-brand-feature-text span {
    font-size: var(--text-micro);
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Right form panel ── */
.login-form-side {
    background: var(--bg-chrome);
    padding: clamp(32px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.login-lotus-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}


.login-panel {
    background: var(--bg-elevated);
    width: 400px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 1px 3px hsla(225, 15%, 20%, 0.04),
        0 4px 12px hsla(225, 30%, 50%, 0.06),
        0 16px 40px hsla(225, 15%, 20%, 0.08),
        0 0 0 1px hsla(225, 25%, 30%, 0.15);
    position: relative;
    z-index: 1;
    border: 1px solid hsla(225, 15%, 25%, 0.6);
}

/* Glassmorphism variant for standalone panel (register) */
.login-panel.glass-panel {
    background: hsla(225, 15%, 8%, 0.85);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

.login-header {
    padding: var(--space-8) var(--space-8) var(--space-6);
    text-align: center;
    position: relative;
}

.login-header h2 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: var(--text-xl);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.login-header-sub {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

/* Lotus mark in panel header */
.login-panel-lotus {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-3);
    opacity: 0.6;
}

.login-body {
    padding: 0 var(--space-8) var(--space-8);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group:focus-within {
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.form-group label {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.form-group input {
    background: var(--bg-chrome);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    border-radius: 14px;
    transition: border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.form-group input:focus {
    border-color: var(--color-active);
    box-shadow:
        0 0 0 3px var(--color-active-glow),
        0 0 16px rgba(37,99,235,0.08);
    background: var(--bg-primary);
    outline: 2px solid transparent;
}

.form-group input::placeholder {
    color: hsl(225, 10%, 40%);
    font-family: var(--font-mono);
}

/* ============ FORM VALIDATION UX ============ */

/* Valid field — green border (only after user interaction) */
.form-group input:valid:not(:placeholder-shown),
.mn-form__group input:valid:not(:placeholder-shown),
.pedestal-input-group input:valid:not(:placeholder-shown) {
    border-color: var(--color-success, #22c55e);
}

/* Invalid field — red border (not while focused, not while empty) */
.form-group input:invalid:not(:placeholder-shown):not(:focus),
.mn-form__group input:invalid:not(:placeholder-shown):not(:focus),
.pedestal-input-group input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: var(--color-error, #ef4444);
}

/* Validation icons via sibling selector */
.validation-icon::after {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.form-group input:valid:not(:placeholder-shown) ~ .validation-icon::after,
.mn-form__group input:valid:not(:placeholder-shown) ~ .validation-icon::after,
.pedestal-input-group input:valid:not(:placeholder-shown) ~ .validation-icon::after {
    content: "\2713";
    color: var(--color-success, #22c55e);
    opacity: 1;
    animation: checkmark 0.3s ease forwards;
}
.form-group input:invalid:not(:placeholder-shown):not(:focus) ~ .validation-icon::after,
.mn-form__group input:invalid:not(:placeholder-shown):not(:focus) ~ .validation-icon::after,
.pedestal-input-group input:invalid:not(:placeholder-shown):not(:focus) ~ .validation-icon::after {
    content: "!";
    color: var(--color-error, #ef4444);
    opacity: 1;
}

/* Password strength indicator bar */
.password-strength {
    height: 3px;
    border-radius: 2px;
    margin-top: 4px;
    background: var(--border-color, rgba(255,255,255,0.1));
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.password-strength[data-strength="weak"] {
    background: var(--color-error, #ef4444);
    width: 33%;
}
.password-strength[data-strength="medium"] {
    background: light-dark(#f59e0b, #fbbf24);
    width: 66%;
}
.password-strength[data-strength="strong"] {
    background: var(--color-success, #22c55e);
    width: 100%;
}

/* Shake animation for invalid submit attempts */
@keyframes formShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
.form-shake {
    animation: formShake 0.4s ease;
}

/* Success checkmark pop-in */
@keyframes checkmark {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* Input with toggle button (password visibility) */
.input-with-toggle {
    position: relative;
}

.input-with-toggle input {
    width: 100%;
    padding-right: 44px;
}

.input-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

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

/* Primary login button — full width, prominent, theme adaptive */
.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    background: linear-gradient(135deg, light-dark(var(--color-active), #3b82f6) 0%, light-dark(var(--color-accent-secondary), #8b5cf6) 100%);
    color: light-dark(white, #e0e0e0);
    border: none;
    border-radius: 14px;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow:
        0 1px 3px rgba(37,99,235,0.2),
        0 4px 12px rgba(37,99,235,0.15);
}

.btn-login:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-active) 80%, black) 0%, color-mix(in srgb, var(--color-accent-secondary) 80%, black) 100%);
    box-shadow:
        0 4px 16px rgba(37,99,235,0.3),
        0 8px 32px rgba(124,58,237,0.15);
    transform: translateY(-2px);
}

.btn-login:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37,99,235,0.2);
}

.btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-login.copied {
    background: hsl(145, 55%, 44%);
}

.login-footer {
    padding: var(--space-4) var(--space-8);
    border-top: 1px solid var(--border-color);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    background: var(--bg-chrome);
}

.login-footer a {
    color: hsl(225, 30%, 50%);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* ============ LANDING PAGE ============ */
.landing-layout {
    display: flex;
    gap: 56px;
    align-items: center;
    max-width: 1040px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.landing-info {
    flex: 1;
    min-width: 0;
}

.landing-header {
    margin-bottom: 40px;
}

.landing-logo-mark {
    opacity: 0.5;
    margin-bottom: var(--space-3);
}

.landing-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-bottom: 8px;
    line-height: 1;
    color: var(--text-primary);
}

.landing-tagline {
    font-size: var(--text-base);
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.landing-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

/* Feature list — cleaner than step-by-step */
.landing-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.landing-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    transition: background var(--duration-base) var(--ease-out);
}

.landing-feature:hover {
    background: hsla(225, 15%, 15%, 0.6);
}

.feature-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: hsla(225, 30%, 50%, 0.08);
    border-radius: 10px;
    color: hsl(225, 30%, 50%);
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-text strong {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.feature-text span {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============ REGISTER PAGE ============ */
.register-layout {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
}

.register-panel {
    width: 440px;
}

/* Key reveal phase */
.key-reveal-header {
    background: linear-gradient(135deg, var(--bg-chrome), var(--bg-elevated));
    padding-bottom: var(--space-6);
}

.key-reveal-lotus {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-2);
}


.key-reveal-card {
    background: var(--bg-chrome);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.key-reveal-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.key-reveal-value {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    word-break: break-all;
    line-height: 1.5;
    user-select: all;
}

.key-reveal-warning {
    margin-top: 10px;
    font-size: var(--text-xs-sm);
    color: hsl(217, 91%, 40%);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.key-reveal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-secondary-link {
    display: block;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
    padding: 8px;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
}

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

.btn-secondary-link:active {
    transform: scale(0.97);
    opacity: 0.8;
}

/* ── Landing footer ── */
.landing-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    font-size: var(--text-micro);
    color: var(--text-muted, hsl(220, 10%, 40%));
    z-index: 1;
}

.landing-footer a {
    color: var(--text-secondary, hsl(220, 10%, 50%));
    text-decoration: none;
    transition: color 0.2s;
}

.landing-footer a:hover {
    color: var(--color-active);
    text-decoration: underline;
}

/* ── Responsive: login split → stacked on mobile ── */
@media (max-width: 768px) {
    .login-split {
        grid-template-columns: 1fr;
        max-width: 440px;
        min-height: auto;
    }

    .login-brand {
        padding: 28px 24px 24px;
    }

    .login-lotus-hero {
        width: clamp(180px, 60%, 260px);
        height: clamp(180px, 60%, 260px);
    }

    /* On mobile, form comes first (visual order) */
    .login-form-side {
        order: -1;
        padding: 28px 24px;
    }

    .landing-layout {
        flex-direction: column;
        gap: var(--space-8);
    }

    .login-panel {
        width: 100%;
        max-width: 400px;
    }

    .register-panel {
        width: 100%;
        max-width: 440px;
    }
}

/* Alert */
.alert {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.alert-warning {
    border-color: rgba(234, 179, 8, 0.3);
    border-left: 3px solid #eab308;
    color: #854d0e;
    background: rgba(234, 179, 8, 0.06);
}

.alert-success {
    border-color: rgba(34, 197, 94, 0.3);
    border-left: 3px solid #22c55e;
    color: var(--color-success);
    background: rgba(34, 197, 94, 0.06);
}

.alert-error {
    border-color: rgba(239, 68, 68, 0.3);
    border-left: 3px solid #ef4444;
    color: #dc2626;
    background: rgba(239, 68, 68, 0.06);
}

.alert-info {
    border-color: var(--border-active);
    border-left: 3px solid var(--color-active);
    color: var(--color-active);
    background: var(--color-active-soft);
}

.code-block {
    background: var(--bg-chrome);
    padding: var(--space-3);
    margin: var(--space-2) 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    word-break: break-all;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
}

/* ============ MODALS ============ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1010;
    animation: modalFadeIn var(--duration-base) var(--ease-out);
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* View Transition for modal open */
.modal-fade-in::view-transition(old) {
    opacity: 0;
}
.modal-fade-in::view-transition(new) {
    opacity: 1;
    animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-overlay.hidden { display: none; }

.modal-panel {
    background: var(--bg-primary);
    border: 1px solid rgba(37, 99, 235, 0.08);
    width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: var(--radius-xl, 20px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(37, 99, 235, 0.06);
    animation: modalSlideIn var(--duration-slow) var(--ease-out);
    will-change: transform, opacity;
}

.modal-header {
    background: var(--bg-chrome);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: var(--text-md);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.modal-close {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--text-md);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 6px);
    line-height: 1;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.modal-close:hover {
    color: var(--color-active);
    border-color: var(--border-active);
    background: var(--color-active-soft);
}

.modal-body {
    padding: var(--space-4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.modal-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* ============ TIERS MODAL ============ */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1010;
}

.modal.hidden { display: none; }

.window {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    max-width: 540px;
    width: 90%;
}

.title-bar {
    height: 36px;
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-3);
    border-radius: 4px 4px 0 0;
}

.title-bar-stripes { display: none; }

.title-text {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.close-box, .zoom-box {
    width: 20px;
    height: 20px;
    background: var(--bg-chrome);
    border: 1px solid var(--border-heavy);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs-sm);
    line-height: 1;
    color: var(--text-secondary);
}

.close-box::after { content: '\00D7'; }

.close-box:hover { background: var(--color-error); border-color: var(--color-error); color: #fff; }
.zoom-box:hover { background: var(--color-success); border-color: var(--color-success); color: #fff; }

.close-box:focus-visible, .zoom-box:focus-visible {
    outline: 3px solid var(--color-active);
    outline-offset: 2px;
}

.window-content {
    padding: var(--space-4);
    color: var(--text-primary);
}

.tiers-content { color: var(--text-primary); }

.tiers-header {
    text-align: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
}

.tiers-header h2 {
    color: var(--text-primary);
    font-size: var(--text-md);
    margin-bottom: var(--space-1);
}

.tiers-subtitle {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.tiers-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.tier-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md, 10px);
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tier-item:hover {
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.tier-highlight {
    border-color: var(--color-active);
    border-width: 2px;
}

.tier-badge {
    width: 24px;
    height: 24px;
    background: var(--bg-chrome);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
    border-radius: var(--radius-xs);
}

.tier-gold {
    background: var(--color-active);
    border-color: var(--color-active);
    color: #ffffff;
}

.tier-info h3 {
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
}

.tier-tag {
    font-size: var(--text-micro);
    padding: 1px 4px;
    background: var(--bg-chrome);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    font-weight: normal;
    border-radius: var(--radius-xs);
}

.tier-tag.tier-active {
    background: var(--color-active);
    border-color: var(--color-active);
    color: #ffffff;
    font-weight: 700;
}

.tier-info p {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-secondary);
}

.tiers-footer {
    display: flex;
    justify-content: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
}

.mac-button {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
}

.mac-button:hover {
    border-color: var(--text-secondary);
}

.mac-button:active {
    transform: scale(0.97);
    opacity: 0.8;
}

.mac-button.primary {
    background: var(--color-active);
    color: #ffffff;
    border-color: var(--color-active);
}

.mac-button.primary:hover {
    background: var(--text-link-hover);
}

/* ============ SETTINGS ============ */
.setting-row {
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.setting-row label {
    width: 120px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    flex-shrink: 0;
    font-weight: 600;
}

.setting-row span {
    color: var(--text-primary);
    font-size: var(--text-sm);
}

/* Accessibility Settings */
.accessibility-row {
    align-items: flex-start;
    padding: var(--space-3);
    background: var(--bg-chrome);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    margin-bottom: var(--space-3);
}

.accessibility-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.accessibility-title {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.accessibility-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.accessibility-shortcut {
    font-size: var(--text-micro);
    color: var(--text-muted);
    margin-top: 2px;
}

.accessibility-shortcut kbd {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
}

.font-size-display {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    min-width: 60px;
    text-align: center;
}

.accessibility-shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.accessibility-shortcut-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-light);
}

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

.shortcut-keys {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    min-width: 100px;
}

.shortcut-keys kbd {
    background: var(--bg-chrome);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--text-secondary);
}

.shortcut-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--color-active);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-switch:focus-within .toggle-slider {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.depth-selector-select {
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    border-radius: var(--radius-xs);
}

.tab-button {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
}

.tab-button.active {
    color: var(--color-active);
    border-bottom-color: var(--color-active);
}

.tab-button:hover:not(.active) {
    color: var(--text-primary);
}

.tab-button:active {
    transform: scale(0.97);
    opacity: 0.8;
}

/* ============ ADVANCED SETTINGS ============ */
.settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-chrome);
    padding: 0 var(--space-4);
}

.settings-section-header {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light);
}

.settings-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
    line-height: 1.4;
}

.param-input {
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    width: 120px;
    border-radius: var(--radius-sm, 6px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.param-input::placeholder {
    color: var(--text-muted);
    font-family: var(--font-ui);
}

.settings-actions {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: var(--space-3);
}

/* ============ REASONING CHAIN TOOLBAR (Feature 30) ============ */
.reasoning-chain-toolbar {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-color);
}

.reasoning-chain-toolbar.visible {
    display: flex;
}

.toolbar-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: 600;
    margin-inline-end: var(--space-2);
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.toolbar-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
    background: var(--bg-field);
}

.toolbar-btn:active {
    background: var(--border-light);
}

/* ============ REASONING CHAIN ============ */
.reasoning-chain {
    border: 1px solid hsla(225, 20%, 25%, 0.6);
    border-radius: 12px;
    margin-bottom: var(--space-3);
    background: hsla(225, 15%, 10%, 0.5);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.04);
    animation: chainFadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

.rc-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    background: linear-gradient(135deg, hsl(225, 18%, 8%) 0%, hsl(225, 15%, 12%) 100%);
    border-bottom: 1px solid hsla(225, 15%, 25%, 0.5);
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast) var(--ease-out);
}

.rc-header:hover {
    background: linear-gradient(135deg, hsl(225, 18%, 10%) 0%, hsl(225, 22%, 12%) 100%);
}

.rc-header-label {
    font-size: var(--text-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-active);
    display: flex;
    align-items: center;
    gap: 5px;
}

.rc-header-label::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: var(--radius-xs);
    background: var(--color-active);
    opacity: 0.4;
    transition: opacity var(--duration-base) var(--ease-out);
}

.live-chain .rc-header-label::before {
    animation: dagLabelPulse 1.5s ease-in-out infinite;
}

@keyframes dagLabelPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.rc-header-meta {
    font-size: var(--text-3xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}

.rc-header-toggle {
    margin-inline-start: auto;
    font-size: var(--text-3xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color var(--duration-fast) var(--ease-out);
}

.rc-header-toggle:hover {
    color: var(--color-active);
}

/* Copy button in reasoning chain header */
.rc-copy-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 3px 6px;
    margin-inline-start: auto;
    margin-inline-end: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.rc-copy-btn:hover {
    background: var(--bg-chrome);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.rc-export-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 3px 6px;
    margin-right: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.rc-export-btn:hover {
    background: var(--bg-chrome);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.live-chain .rc-copy-btn,
.live-chain .rc-export-btn {
    display: none;  /* Hide action buttons during streaming */
}

/* LIVE badge — pulsing indicator during streaming */
.dag-live-badge {
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    background: hsl(145, 55%, 44%);
    padding: 2px 8px;
    border-radius: 10px;
    animation: dagLivePulse 2s ease-in-out infinite;
}

@keyframes dagLivePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(46, 125, 50, 0.3); }
    50% { opacity: 0.8; box-shadow: 0 0 10px rgba(46, 125, 50, 0.5); }
}

.reasoning-chain.collapsed .rc-body {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: max-height 300ms var(--ease-reveal),
                opacity 200ms var(--ease-exit);
}
.reasoning-chain.collapsed .rc-header-toggle::after { content: ''; }

.rc-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
    transition: max-height 200ms var(--ease-out), opacity 150ms var(--ease-out);
}

/* Live DAG body — allow horizontal pill flow */
.rc-body.dag-container {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 2px 4px;
}

.rc-phase {
    border-bottom: 1px solid var(--border-light);
}

.rc-phase:last-child { border-bottom: none; }

.rc-phase-label {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-light);
}

.rc-stage {
    border-bottom: 1px solid var(--border-light);
}

.rc-stage:last-child { border-bottom: none; }

.rc-stage-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    user-select: none;
}

.rc-stage-header:hover {
    background: var(--bg-chrome);
}

.rc-stage-num {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 700;
    background: var(--color-success);
    color: #fff;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
}

.rc-stage-name {
    font-size: var(--text-xs);
    color: var(--text-primary);
    flex: 1;
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: var(--radius-xs);
    transition: background-color 0.15s, color 0.15s;
}

/* Feature 5: Jump-to-Stage Navigation - Hover effect on stage names */
.rc-stage-name:hover {
    background-color: var(--color-active);
    color: #ffffff;
}

.rc-stage-name:hover::after {
    content: ' ↓';
    font-size: var(--text-2xs);
    opacity: 0.8;
}

.rc-stage-tokens {
    font-size: var(--text-micro);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.rc-stage-toggle {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    width: 16px;
    text-align: center;
}

.rc-stage-body {
    display: none;
    padding: var(--space-2) var(--space-3) var(--space-3);
    padding-left: 38px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.6;
    border-top: 1px solid rgba(37,99,235,0.08);
    background: linear-gradient(135deg, rgba(37,99,235,0.02), rgba(124,58,237,0.01));
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.rc-stage.expanded .rc-stage-body { display: block; }
.rc-stage.expanded .rc-stage-toggle { transform: rotate(45deg); color: var(--color-active); }

.rc-stage-body p { margin-bottom: var(--space-1); }
.rc-stage-body p:last-child { margin-bottom: 0; }

.rc-stage-body code {
    background: rgba(37,99,235,0.06);
    padding: 1px 3px;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    border: 1px solid rgba(37,99,235,0.1);
    border-radius: var(--radius-sm, 4px);
}

.rc-stage-body pre {
    background: var(--bg-chrome);
    padding: var(--space-2);
    border: 1px solid rgba(37,99,235,0.1);
    overflow-x: auto;
    margin: var(--space-2) 0;
    border-radius: var(--radius-sm, 8px);
}

.rc-stage-body pre code {
    background: none;
    border: none;
    padding: 0;
}

/* ── Live reasoning chain (streaming mode) ── */
.live-chain {
    border-color: var(--color-active);
}

.live-chain .rc-header {
    border-bottom-color: var(--color-active);
}

.live-rc-toggle {
    color: var(--color-active) !important;
    font-weight: 700;
    animation: live-blink 1.5s ease-in-out infinite;
}

@keyframes live-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Pulsing dot on active stage */
.rc-pulse {
    color: var(--color-active);
    font-size: var(--text-sm);
    animation: rc-pulse-anim 1s ease-in-out infinite;
}

@keyframes rc-pulse-anim {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
}

/* Active stage number badge */
.rc-num-active {
    background: var(--color-active) !important;
    animation: rc-num-pulse 1.2s ease-in-out infinite;
}

@keyframes rc-num-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0); }
}

/* Active stage row subtle highlight */
.rc-stage-active {
    background: #f0f6ff;
}

.rc-stage-active .rc-stage-name {
    color: var(--color-active);
    font-weight: 600;
}

/* ============ COMPARISON GRID ============ */
/* ══════════════════════════════════════════════════════════
   FORMAL EXPOSITION — Primary answer presentation
   ══════════════════════════════════════════════════════════ */

.formal-exposition {
    margin: var(--space-3) 0;
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.exposition-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(to right, var(--bg-chrome), var(--bg-elevated));
    border-bottom: 1px solid var(--border-color);
    gap: var(--space-3);
    flex-wrap: wrap;
}

.exposition-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.exposition-badge {
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-active);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.exposition-badge::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: var(--radius-xs);
    background: var(--color-active);
    opacity: 0.7;
}

.exposition-neologism {
    font-size: var(--text-xs);
    font-weight: 600;
    color: hsl(225, 30%, 45%);
    background: var(--bg-elevated);
    padding: 2px 10px;
    border-radius: 10px;
    font-style: italic;
}

.exposition-meta {
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.exposition-body {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--text-primary);
}

.exposition-body p {
    margin-bottom: var(--space-3);
}

.exposition-body p:last-child {
    margin-bottom: 0;
}

.exposition-body h1,
.exposition-body h2,
.exposition-body h3,
.exposition-body h4 {
    margin: var(--space-6) 0 var(--space-3);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.exposition-body h1 { font-size: var(--text-lg); letter-spacing: -0.02em; }
.exposition-body h2 { font-size: var(--text-md); letter-spacing: -0.01em; }
.exposition-body h3 { font-size: var(--text-base); font-weight: 600; }
.exposition-body h4 { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }

.exposition-body h1:first-child,
.exposition-body h2:first-child,
.exposition-body h3:first-child {
    margin-top: 0;
}

.exposition-body ul,
.exposition-body ol {
    margin: var(--space-3) 0;
    padding-left: 24px;
}

.exposition-body li {
    margin: var(--space-2) 0;
    line-height: 1.65;
}

.exposition-body blockquote {
    border-inline-start: 3px solid var(--color-active);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    background: rgba(37, 99, 235, 0.03);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-secondary);
    font-style: italic;
}

.exposition-body code {
    background: rgba(37, 99, 235, 0.06);
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    color: hsl(225, 70%, 42%);
}

.exposition-body pre {
    background: var(--bg-primary);
    padding: var(--space-4);
    overflow-x: auto;
    margin: var(--space-4) 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.exposition-body pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.exposition-body strong {
    font-weight: 600;
    color: var(--text-primary);
}

.exposition-body em {
    color: var(--text-secondary);
}

.exposition-body hr {
    border: none;
    height: 1px;
    background: var(--border-light);
    margin: var(--space-6) 0;
}

.exposition-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0;
    font-size: var(--text-sm);
}

.exposition-body th {
    background: var(--bg-chrome);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.exposition-body td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

/* (640px exposition rules moved to consolidated 640px block) */

/* ── Comparison Grid — elevated card columns ── */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.comparison-col {
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(37, 99, 235, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.comparison-col:hover {
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.12), 0 0 0 1px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
}

.comparison-col-header {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-chrome);
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.comparison-col-header::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

/* Primary column (Model pipeline) — accent treatment */
.comparison-col-pipeline {
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(37, 99, 235, 0.06);
}

.comparison-col-pipeline:hover {
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(37, 99, 235, 0.1);
}

.comparison-col-pipeline .comparison-col-header {
    color: var(--color-active);
    background: linear-gradient(to bottom, var(--color-active-soft), rgba(37, 99, 235, 0.02));
    border-bottom-color: var(--border-active);
}

.comparison-col-pipeline .comparison-col-header::before {
    background: var(--color-active);
    box-shadow: 0 0 6px var(--color-active-glow);
}

/* Non-pipeline column header dots use muted colors */
.comparison-col:not(.comparison-col-pipeline) .comparison-col-header::before {
    background: var(--border-color);
}

.comparison-col-body {
    padding: var(--space-3) var(--space-4);
    flex: 1;
    font-size: var(--text-sm);
    line-height: 1.7;
    overflow-y: auto;
    max-height: 520px;
}

.comparison-col-body p { margin-bottom: var(--space-2); }
.comparison-col-body p:last-child { margin-bottom: 0; }
.comparison-col-body h1,
.comparison-col-body h2,
.comparison-col-body h3 {
    margin: var(--space-4) 0 var(--space-2);
    font-weight: 700;
    color: var(--text-primary);
}
.comparison-col-body h1 { font-size: var(--text-md); letter-spacing: -0.01em; }
.comparison-col-body h2 { font-size: var(--text-base); letter-spacing: -0.01em; }
.comparison-col-body h3 { font-size: var(--text-sm); font-weight: 600; }

.comparison-col-body ul,
.comparison-col-body ol {
    margin: var(--space-2) 0;
    padding-left: 20px;
}
.comparison-col-body li {
    margin: var(--space-1) 0;
    line-height: 1.6;
}

.comparison-col-body code {
    background: var(--color-active-soft);
    padding: 2px 5px;
    font-family: var(--font-mono);
    font-size: var(--text-xs-sm);
    border-radius: var(--radius-sm);
    color: var(--color-active);
}

.comparison-col-body pre {
    background: var(--bg-chrome);
    padding: var(--space-3);
    overflow-x: auto;
    margin: var(--space-3) 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.comparison-col-body pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-primary);
}

.comparison-col-tokens {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-light);
    font-size: var(--text-micro);
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-align: right;
    background: var(--bg-chrome);
}

.comparison-loading {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-style: italic;
    padding: var(--space-4);
    text-align: center;
}

@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}

/* ══════════════════════════════════════════════════════════
   PSYCHOMETRIC EVALUATION — Card-based scoring display
   Evaluated by: openai/gpt-5.4-pro via OpenRouter
   ══════════════════════════════════════════════════════════ */

.evaluation-table {
    margin-top: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

/* ── Header banner ── */
.eval-header {
    background: linear-gradient(135deg, hsl(225, 80%, 50%), hsl(225, 70%, 42%));
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eval-header-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.eval-header-title span {
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}

.eval-header-icon {
    width: 18px;
    height: 18px;
    background: rgba(240, 246, 252, 0.03);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xs);
    color: #fff;
}

.eval-header-model {
    font-size: var(--text-2xs);
    color: rgba(240, 246, 252, 0.05);
    font-family: var(--font-mono);
    letter-spacing: 0.2px;
}

.eval-copy-btn {
    background: rgba(240, 246, 252, 0.02);
    border: 1px solid rgba(240, 246, 252, 0.03);
    color: rgba(240, 246, 252, 0.85);
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.eval-copy-btn:hover {
    background: rgba(240, 246, 252, 0.03);
    border-color: rgba(240, 246, 252, 0.04);
    color: #fff;
}

/* ── Disclaimer ── */
.eval-disclaimer {
    font-size: var(--text-micro);
    color: var(--text-muted);
    font-style: italic;
    padding: var(--space-2) var(--space-4);
    line-height: 1.5;
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-light);
}

/* ── Sub-scale cards grid ── */
.eval-scales {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-light);
}

.eval-scale-card {
    background: var(--bg-primary);
    padding: var(--space-3) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.eval-scale-label {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.eval-scale-label::before {
    content: '';
    width: 8px;
    height: 3px;
    border-radius: 1.5px;
    flex-shrink: 0;
}

.eval-scale-card[data-scale="depth"] .eval-scale-label::before {
    background: hsl(225, 60%, 42%);
}

.eval-scale-card[data-scale="capability"] .eval-scale-label::before {
    background: hsl(225, 30%, 50%);
}

.eval-scale-card[data-scale="understanding"] .eval-scale-label::before {
    background: hsl(165, 55%, 42%);
}

.eval-scale-chc {
    font-size: var(--text-3xs);
    color: var(--text-muted);
    font-style: italic;
    margin-top: -2px;
    opacity: 0.7;
}

.eval-scale-scores {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eval-scale-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.eval-scale-model {
    font-size: var(--text-micro);
    color: var(--text-secondary);
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eval-scale-value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 50px;
    text-align: right;
}

.eval-scale-value.eval-best {
    font-weight: 700;
}

.eval-scale-card[data-scale="depth"] .eval-scale-value.eval-best {
    color: hsl(225, 80%, 50%);
}

.eval-scale-card[data-scale="capability"] .eval-scale-value.eval-best {
    color: hsl(225, 30%, 45%);
}

.eval-scale-card[data-scale="understanding"] .eval-scale-value.eval-best {
    color: hsl(165, 55%, 38%);
}

/* ── Score bar visualization ── */
.eval-scale-bar-bg {
    flex: 1;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xs);
    overflow: hidden;
    min-width: 40px;
    max-width: 80px;
}

.eval-scale-bar {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.eval-scale-card[data-scale="depth"] .eval-scale-bar {
    background: hsl(225, 60%, 42%);
}

.eval-scale-card[data-scale="capability"] .eval-scale-bar {
    background: hsl(225, 30%, 50%);
}

.eval-scale-card[data-scale="understanding"] .eval-scale-bar {
    background: hsl(165, 55%, 42%);
}

/* ── IQ composite — hero section ── */
.eval-iq-section {
    background: linear-gradient(to bottom, var(--bg-chrome), var(--bg-primary));
    border-top: 2px solid hsl(225, 60%, 42%);
    padding: var(--space-4);
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.eval-iq-card {
    text-align: center;
    min-width: 100px;
    flex: 1;
    max-width: 180px;
}

.eval-iq-model {
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.eval-iq-value {
    font-family: var(--font-mono);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    transition: color var(--duration-base) var(--ease-out);
}

.eval-iq-value.eval-iq-best {
    color: hsl(225, 80%, 50%);
}

.eval-iq-delta {
    font-size: var(--text-micro);
    font-family: var(--font-mono);
    margin-top: var(--space-1);
    font-weight: 600;
}

.eval-iq-delta.positive {
    color: hsl(145, 55%, 40%);
}

.eval-iq-delta.negative {
    color: var(--text-muted);
}

.eval-iq-delta.baseline {
    color: var(--text-muted);
    font-weight: 400;
}

/* (640px eval-scales rules moved to consolidated 640px block) */

/* ============ UTILITY ============ */
.hidden { display: none !important; }
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.u-opacity-0 { opacity: 0; }
.u-opacity-1 { opacity: 1; }
.u-overflow-auto { overflow: auto; }
.u-overflow-hidden { overflow: hidden; }
.u-max-h-400 { max-height: 400px; }
.u-pos-relative { position: relative; }

/* Offscreen textarea for clipboard fallback */
.u-offscreen {
    position: fixed;
    left: -9999px;
    opacity: 0;
}

/* Chevron rotation for collapse/expand */
.u-chevron-collapsed { transform: rotate(-90deg); }

/* Flash highlight for newly created items */
.u-flash-highlight {
    transition: background 0.3s ease;
    background: rgba(21, 101, 192, 0.15);
}

/* Flash highlight for DAG node jump */
.u-flash-node {
    transition: background-color 0.3s;
    background-color: #e3f2fd;
}

/* Copy feedback outline flash */
.u-copy-flash {
    transition: outline 0.15s ease;
    outline: 2px solid rgba(201, 168, 76, 0.5);
}

/* Fade-out for undo button */
.u-fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.text-orange { color: #e65100; }
.text-green { color: var(--color-success); }
.text-muted { color: var(--text-muted); }
.text-amber { color: #8a6d00; }
.text-white { color: var(--text-primary); }

.loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-active);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.2));
}

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

/* ============ SCROLL-TO-BOTTOM BUTTON ============ */
/* Feature 7: Sticky Scroll-to-Bottom Button - Bloomberg terminal aesthetic */
.scroll-to-bottom-btn {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-size: var(--text-md);
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, border-color 0.15s, color 0.15s;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-to-bottom-btn.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-bottom-btn:hover {
    border-color: var(--color-active);
    color: var(--color-active);
    background: var(--bg-chrome);
}

.scroll-to-bottom-btn:active {
    background: var(--color-active);
    color: #ffffff;
    border-color: var(--color-active);
}

.scroll-to-bottom-btn::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 2px;
    background: var(--color-active);
    opacity: 0;
    transition: opacity 0.15s;
}

.scroll-to-bottom-btn:hover::before {
    opacity: 1;
}

/* ============ RESPONSIVE ============ */
.sidebar-toggle {
    display: none;
}

/* Sidebar backdrop: hidden on desktop, styled in 768px media query */
.sidebar-backdrop {
    display: none;
}

/* Mobile overflow menu: hidden on desktop, shown in 768px media query */
.mobile-overflow-menu {
    display: none;
    position: relative;
}

.mobile-overflow-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1005;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    padding: var(--space-2) 0;
    margin-top: var(--space-1);
}

.mobile-overflow-dropdown button[role="menuitem"] {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
}

.mobile-overflow-dropdown button[role="menuitem"]:hover,
.mobile-overflow-dropdown button[role="menuitem"]:active {
    background: var(--bg-field);
}

/* (640px input/button/login rules moved to consolidated 640px block) */

/* ============ MESSAGE ACTION BUTTONS (Features 8, 28) ============ */
.message-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    opacity: 1;
    position: sticky;
    top: 8px;
    z-index: 100;
    background: var(--bg-primary);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.message-actions:hover {
    border-color: var(--text-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.message-action-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 4px 6px;
    cursor: pointer;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 100ms var(--ease-acknowledge),
                background-color 100ms var(--ease-acknowledge),
                color 100ms var(--ease-acknowledge),
                transform 80ms var(--ease-acknowledge);
}

.message-action-btn:hover {
    background: var(--bg-chrome);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.message-action-btn:active {
    background: var(--border-light);
    transform: scale(0.975);
}

/* Feature 28: Bookmark button */
.message-bookmark-btn {
    color: var(--text-muted);
    transition: color 100ms var(--ease-acknowledge), border-color 100ms var(--ease-acknowledge), background 100ms var(--ease-acknowledge);
}

.message-bookmark-btn:hover {
    color: var(--color-active);
    border-color: var(--color-active);
}

.message-bookmark-btn.active {
    color: var(--color-active);
    border-color: var(--color-active);
    background: rgba(37, 99, 235, 0.1);
}

/* Feature 28: Bookmarked message styling */
.message.bookmarked {
    border-left: 3px solid var(--color-active);
    padding-left: calc(var(--space-4) - 3px);
    background: linear-gradient(to right, rgba(37, 99, 235, 0.03), transparent);
}

/* Legacy copy button support */
.message-copy-btn {
    visibility: visible;
}

/* Feature 26: Edit button */
.message-edit-btn:hover {
    background: #e3f2fd;
    border-color: var(--color-active);
    color: var(--color-active);
}

/* Feature 27: Regenerate button */
.message-regenerate-btn:hover {
    background: #f3e5f5;
    border-color: #7b1fa2;
    color: #7b1fa2;
}

/* Feature 25: Delete button */
.message-delete-btn:hover {
    background: #ffe8e8;
    border-color: var(--color-error);
    color: var(--color-error);
}

/* ── Feature: Retry button ── */
.message-retry-btn:hover {
    color: var(--color-active);
    border-color: var(--color-active);
    background: var(--bg-active);
}

/* ── Feature: Edit & Retry button ── */
.message-edit-btn:hover {
    color: var(--color-active);
    border-color: var(--color-active);
    background: var(--color-active-soft);
}

/* ── Feature: Reaction buttons (thumbs up/down) ── */
.message-react-btn {
    transition: color 80ms var(--ease-acknowledge), border-color 80ms var(--ease-acknowledge), background-color 80ms var(--ease-acknowledge), transform 80ms var(--ease-acknowledge);
}
.message-react-btn:hover {
    color: var(--color-active);
    border-color: var(--color-active);
    background: var(--color-active-soft);
}
.message-react-btn:active {
    transform: scale(1.15);
}
.message-react-btn.reaction-active {
    color: var(--color-active);
    border-color: var(--color-active);
    background: var(--bg-active);
}

/* ── Feature: Collapse/Expand Messages ── */
.message-collapse-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}
.message-collapse-preview {
    padding: 4px 0 4px 28px;
    color: var(--text-muted);
    font-size: var(--text-xs-sm);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.msg-collapsed .message-content {
    display: none;
}
.msg-collapsed .message-diff-toggle {
    display: none;
}

/* ── Feature: Read Time Estimate ── */
.message-read-time {
    color: var(--text-muted);
    font-size: var(--text-micro);
    margin-left: 8px;
    opacity: 0.7;
    font-family: var(--font-mono, monospace);
}

/* Feature 26: Edit mode styles */
.message-edit-container {
    padding-left: 28px;
    margin-top: var(--space-2);
}

.message-edit-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 300px;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    border-radius: var(--radius-xs);
    resize: vertical;
    line-height: 1.6;
}

.message-edit-textarea:focus {
    border-color: var(--color-active);
    outline: none;
}

.message-edit-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.message-edit-btn {
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-xs);
    border: 1px solid;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.message-edit-btn.save {
    background: var(--color-active);
    border-color: var(--color-active);
    color: #ffffff;
}

.message-edit-btn.save:hover {
    background: var(--text-link-hover);
    border-color: var(--text-link-hover);
}

.message-edit-btn.cancel {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.message-edit-btn.cancel:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.message-edit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Feature 27: Regenerating indicator */
.message.regenerating .message-content {
    position: relative;
    opacity: 0.7;
}

.message.regenerating .message-content::after {
    content: 'Regenerating...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border: 1px solid var(--color-active);
    color: var(--color-active);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: var(--text-xs);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Feature 24: Message compression */
.message-content.collapsed {
    max-height: 4.8em;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.show-more-btn {
    background: none;
    border: none;
    color: var(--color-active);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    padding: var(--space-1) 0;
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.show-more-btn:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

.show-more-btn::after {
    content: '▼';
    font-size: var(--text-4xs);
    transition: transform 0.2s ease;
}

.show-more-btn.expanded::after {
    transform: rotate(180deg);
}

/* Feature 25: Message removal animation */
@keyframes message-fade-out {
    from {
        opacity: 1;
        transform: translateX(0);
        max-height: 500px;
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-4);
    }
    to {
        opacity: 0;
        transform: translateX(-20px);
        max-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom-width: 0;
    }
}

.message.removing {
    animation: message-fade-out 0.3s ease forwards;
    overflow: hidden;
}

/* Stale message indicator */
.message.stale {
    opacity: 0.5;
}

.message.stale .message-content {
    color: var(--text-muted);
}

/* ============ CODE BLOCK COPY (Feature 9) ============ */
.code-block-wrapper {
    position: relative;
    margin: var(--space-3) 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: var(--bg-chrome);
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-xs);
}

.code-language {
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: lowercase;
}

.code-copy-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-chrome);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 8px;
    font-family: var(--font-ui);
    font-size: var(--text-micro);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.code-copy-btn:hover {
    background: var(--bg-primary);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.code-copy-btn:active {
    background: var(--border-light);
}

.code-block-wrapper pre {
    margin: 0;
    border: none;
    border-radius: 0;
    max-height: 400px;
    overflow-y: auto;
}

/* ============ TOAST NOTIFICATIONS ============ */
.toast-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text-primary);
    color: #fff;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: 600;
    z-index: 1020;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-error {
    background: var(--color-error);
}

/* ============ EXPORT DROPDOWN (Features 10 & 11) ============ */
.export-dropdown-container {
    position: relative;
    display: inline-block;
}

.export-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    cursor: pointer;
    border-radius: var(--radius-xs);
    font-weight: 600;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.export-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.export-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    z-index: 1005;
    display: none;
    overflow: hidden;
}

.export-dropdown.show {
    display: block;
}

.export-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.export-option:hover {
    background: var(--bg-chrome);
}

.export-option svg {
    flex-shrink: 0;
}

.export-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

/* ============================================================================
   PROMPT ENHANCEMENT & AUTOMATION (Features 38-43)
   ============================================================================ */

/* ============ FEATURE 38: SINGLE-PROMPT OPTIMIZATION ============ */
.prompt-enhance-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 5px 10px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

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

.prompt-enhance-btn:active {
    color: var(--text-primary);
    background: var(--bg-primary);
}

.prompt-enhance-btn.enhancing {
    opacity: 0.7;
    cursor: not-allowed;
    animation: enhance-pulse 1s ease-in-out infinite;
}

@keyframes enhance-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.4; }
}

/* Undo button that appears after enhancement */
.prompt-undo-btn {
    background: var(--bg-chrome);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 10px;
    font-family: var(--font-ui);
    font-size: var(--text-micro);
    cursor: pointer;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    animation: undo-slide-in 0.3s ease;
}

@keyframes undo-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.prompt-undo-btn:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: #ffebee;
}

/* ============ FEATURE 39: AUTO-ENHANCE TOGGLE & BADGE ============ */
/* Auto-enhance toggle switch styling */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #9c27b0;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* Auto-enhance label in settings */
.auto-enhance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--bg-chrome);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
}

.auto-enhance-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auto-enhance-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.auto-enhance-desc {
    font-size: var(--text-micro);
    color: var(--text-muted);
}

/* Enhanced badge on messages */
.enhanced-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-2xs);
    padding: 2px 6px;
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    border: 1px solid #9c27b0;
    color: #7b1fa2;
    border-radius: var(--radius-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: var(--space-2);
    animation: badge-pop 0.3s ease;
}

@keyframes badge-pop {
    0% { transform: scale(0); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ============ FEATURE 40: PROMPT TEMPLATES LIBRARY ============ */
.template-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 5px 10px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

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

/* Template dropdown/palette */
.template-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1005;
    margin-bottom: 8px;
    animation: template-slide-up 0.2s ease;
}

@keyframes template-slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.template-dropdown.hidden {
    display: none;
}

.template-dropdown-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-chrome);
}

.template-search {
    flex: 1;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 10px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    border-radius: var(--radius-xs);
}

.template-search:focus {
    border-color: var(--color-active);
    outline: none;
}

.template-dropdown-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-md);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.template-dropdown-close:hover {
    color: var(--text-primary);
}

.template-list {
    padding: var(--space-1) 0;
}

.template-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-light);
}

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

.template-item:hover,
.template-item.selected {
    background: var(--bg-chrome);
}

.template-item-icon {
    font-size: var(--text-md);
    flex-shrink: 0;
}

.template-item-content {
    flex: 1;
    min-width: 0;
}

.template-item-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.template-item-preview {
    font-size: var(--text-micro);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-item-shortcut {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    background: var(--bg-chrome);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.template-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.template-section {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-light);
}

/* ============ FEATURE 41: SAVE TEMPLATE CONTEXT MENU ============ */
/* Context menu for input area */
.input-context-menu {
    position: fixed;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1015;
    min-width: 160px;
    padding: var(--space-1) 0;
}

.input-context-menu.hidden {
    display: none;
}

.input-context-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--text-primary);
    transition: background 0.15s;
}

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

.input-context-icon {
    font-size: var(--text-sm);
    width: 20px;
    text-align: center;
}

/* Save template modal */
.save-template-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1010;
}

.save-template-modal.hidden {
    display: none;
}

.save-template-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.save-template-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.save-template-header h3 {
    margin: 0;
    font-size: var(--text-md);
    color: var(--text-primary);
}

.save-template-body {
    padding: var(--space-4);
}

.save-template-input {
    width: 100%;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    border-radius: var(--radius-xs);
    margin-bottom: var(--space-2);
}

.save-template-input:focus {
    border-color: var(--color-active);
    outline: none;
}

.save-template-preview {
    padding: var(--space-2);
    background: var(--bg-chrome);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    font-size: var(--text-micro);
    color: var(--text-muted);
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.save-template-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-light);
}

/* ============ FEATURE 42: PROMPT HISTORY RECALL ============ */
/* No special styles needed - uses existing input styles */
.history-indicator {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    background: var(--bg-chrome);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.history-indicator.visible {
    opacity: 1;
}

/* ============ FEATURE 43: CHARACTER/TOKEN COUNTER ============ */
.char-counter {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-micro);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.char-counter.visible {
    opacity: 1;
}

.char-counter-value {
    transition: color 0.3s ease;
}

.char-counter-value.normal {
    color: var(--text-muted);
}

.char-counter-value.warning {
    color: #f9a825;
    font-weight: 600;
}

.char-counter-value.danger {
    color: var(--color-error);
    font-weight: 700;
}

.char-counter-tokens {
    color: var(--text-muted);
}

.char-counter-tokens::before {
    content: '|';
    margin-right: var(--space-2);
    opacity: 0.5;
}

/* Counter bar that appears below input */
.input-counter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) 0 0;
    margin-top: var(--space-1);
    border-top: 1px solid var(--border-light);
}

.input-helpers {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.helper-badge {
    font-size: var(--text-2xs);
    padding: 2px 6px;
    background: var(--bg-chrome);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
}

.helper-badge.active {
    background: #e3f2fd;
    border-color: var(--color-active);
    color: var(--color-active);
}

/* Progress bar for character limit */
.char-progress-bar {
    width: 100px;
    height: 4px;
    background: var(--border-light);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.char-progress-fill {
    height: 100%;
    background: var(--color-success);
    border-radius: var(--radius-xs);
    transition: width 0.3s ease, background 0.3s ease;
}

.char-progress-fill.warning {
    background: #f9a825;
}

.char-progress-fill.danger {
    background: var(--color-error);
}

/* (640px copy-btn, template-dropdown, char-counter rules moved to consolidated 640px block) */

/* ============ HEADER DROPDOWN & EXPORT MENU ============ */
.header-dropdown {
    position: relative;
    display: inline-block;
}

/* .header-btn alias — see main HEADER BAR section for .header-action-btn */
.header-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    cursor: pointer;
    padding: 6px 10px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

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

.header-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    z-index: 1005;
    overflow: hidden;
}

.header-dropdown-menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-xs);
    text-decoration: none;
    transition: background 0.15s ease;
}

.header-dropdown-menu a:hover {
    background: var(--bg-chrome);
}


/* ============ ADDITIONAL TOAST STYLES (Features 12-15) ============ */
.toast-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: var(--text-sm);
    font-weight: 600;
    z-index: 1020;
    animation: toast-in 0.3s ease;
    cursor: pointer;
    max-width: 400px;
    text-align: center;
}

.toast-success {
    border-color: rgba(34, 197, 94, 0.3);
    border-left: 3px solid #22c55e;
    color: var(--color-success);
}

.toast-error {
    border-color: rgba(239, 68, 68, 0.3);
    border-left: 3px solid #ef4444;
    color: var(--color-error);
}

.toast-warning {
    border-color: rgba(234, 179, 8, 0.3);
    border-left: 3px solid #eab308;
    color: #854d0e;
}

.toast-info {
    border-color: var(--border-active);
    border-left: 3px solid var(--color-active);
    color: var(--color-active);
}

.toast-fade-out {
    animation: toast-out 0.3s ease forwards;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

/* ============ DIFF VIEW (Feature 31) ============ */
.message-diff-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-left: 28px;
}

.diff-toggle-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-link);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.diff-toggle-btn:hover {
    background: var(--bg-chrome);
    border-color: var(--text-secondary);
}

.diff-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

.diff-view {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.diff-line {
    padding: 2px var(--space-3);
    white-space: pre-wrap;
    word-break: break-word;
}

.diff-same {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.diff-removed {
    background: #ffe8e8;
    color: #d32f2f;
    border-left: 3px solid #d32f2f;
}

.diff-removed::before {
    content: '-';
    margin-right: var(--space-2);
    color: #d32f2f;
    font-weight: 700;
}

.diff-added {
    background: #e8f5e9;
    color: #2e7d32;
    border-left: 3px solid #2e7d32;
}

.diff-added::before {
    content: '+';
    margin-right: var(--space-2);
    color: #2e7d32;
    font-weight: 700;
}

/* ============ COPY & EXPORT BUTTONS (Features 13-14, U21) ============ */
.rc-copy-btn,
.rc-export-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 3px 6px;
    margin-right: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.rc-copy-btn { margin-inline-start: auto; }

.rc-copy-btn:hover,
.rc-export-btn:hover {
    background: var(--bg-chrome);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.live-chain .rc-copy-btn,
.live-chain .rc-export-btn {
    display: none;
}

/* (640px header-dropdown, toast rules moved to consolidated 640px block) */

/* ============ CONVERSATION MANAGEMENT FEATURES ============ */

/* Feature 20: Pin Conversation to Top */
.conversation-section {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    background: transparent;
    border-bottom: none;
    margin-top: var(--space-2);
}

.conversation-section:first-child {
    margin-top: 0;
}

.conversation-item.pinned {
    background: var(--color-active-soft);
    border-left-color: var(--color-active);
    box-shadow: var(--shadow-sm);
}

.conversation-item-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--space-1);
}

.pin-indicator {
    font-size: var(--text-xs-sm);
    margin-inline-start: 2px;
}

.conversation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
    width: 100%;
}

.conversation-tag-pill {
    font-size: var(--text-3xs);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    border: 1px solid;
    white-space: nowrap;
    font-weight: 600;
}

.conversation-tag-trigger {
    background: none;
    border: none;
    font-size: var(--text-xs-sm);
    cursor: pointer;
    padding: 2px;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.conversation-item:hover .conversation-tag-trigger {
    opacity: 1;
}

/* Sidebar Controls (Feature 23) */
.sidebar-search-btn {
    background: none;
    border: none;
    font-size: var(--text-sm);
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.sidebar-search-btn:hover {
    opacity: 1;
}

.sidebar-sort-dropdown {
    margin-inline-start: auto;
    margin-inline-end: var(--space-2);
}

.sort-select {
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 2px 6px;
    font-size: var(--text-micro);
    border-radius: var(--radius-xs);
    cursor: pointer;
}

.sort-select:focus {
    border-color: var(--color-active);
    outline: none;
}

/* Context Menu (Feature 20) */
.context-menu {
    position: fixed;
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
    box-shadow: var(--glass-shadow-elevated);
    z-index: 1015;
    min-width: 160px;
    padding: var(--space-1) 0;
}

.context-menu.hidden {
    display: none;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--text-primary);
    transition: background 0.15s;
}

.context-menu-item:hover {
    background: var(--bg-chrome);
}

.context-menu-icon {
    font-size: var(--text-sm);
    width: 20px;
    text-align: center;
}

.context-menu-label {
    flex: 1;
}

.context-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-1) 0;
}

.context-menu-danger {
    color: var(--color-error);
}

.context-menu-danger:hover {
    background: #ffebee;
}

/* Inline Rename Input */
.conversation-rename-input {
    flex: 1;
    background: var(--bg-field);
    border: 1px solid var(--color-active);
    color: var(--text-primary);
    padding: 2px 6px;
    font-size: var(--text-sm);
    font-family: var(--font-ui);
    border-radius: var(--radius-xs);
    margin-right: var(--space-2);
}

.conversation-rename-input:focus {
    outline: none;
}

/* Tag Popover (Feature 21) */
.tag-popover {
    position: fixed;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1015;
    width: 200px;
}

.tag-popover.hidden {
    display: none;
}

.tag-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
}

.tag-popover-close {
    background: none;
    border: none;
    font-size: var(--text-md);
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tag-popover-close:hover {
    color: var(--text-primary);
}

.tag-popover-body {
    padding: var(--space-2);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--space-2);
    max-height: 150px;
    overflow-y: auto;
}

.tag-option {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    border: 1px solid;
    font-size: var(--text-micro);
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s, background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.tag-option:hover {
    opacity: 0.8;
}

.tag-option.selected {
    font-weight: 600;
}

.tag-check {
    width: 12px;
    font-size: var(--text-2xs);
}

.tag-create {
    display: flex;
    gap: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light);
}

.tag-create input {
    flex: 1;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    font-size: var(--text-micro);
    border-radius: var(--radius-xs);
}

.tag-create input:focus {
    border-color: var(--color-active);
    outline: none;
}

.tag-create button {
    background: var(--color-active);
    border: none;
    color: white;
    padding: 4px 10px;
    font-size: var(--text-micro);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-weight: 600;
}

.tag-create button:hover {
    background: var(--text-link-hover);
}

/* Search Modal (Feature 22) */
/* ============ SEARCH MODAL — Spotlight / Command Palette ============ */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1010;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(18vh, 160px);
    animation: searchModalIn 0.15s ease-out;
}

@keyframes searchModalIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.search-modal.hidden {
    display: none;
}

.search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/* Panel — the main card (used by JS as .search-modal-panel) */
.search-modal-panel,
.search-modal-content {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border-heavy);
    border-radius: var(--radius-lg);
    width: 92%;
    max-width: 520px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12),
                0 12px 48px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(37, 99, 235, 0.08);
    overflow: hidden;
    animation: searchPanelIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes searchPanelIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header — search input row */
.search-modal-header,
.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(to bottom, var(--bg-elevated), var(--bg-primary));
}

.search-icon {
    font-size: var(--text-md);
    opacity: 0.45;
    flex-shrink: 0;
    line-height: 1;
}

.search-modal-input,
.search-input-wrapper input {
    flex: 1;
    border: none;
    background: none;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    font-family: var(--font-ui);
    letter-spacing: -0.01em;
}

.search-modal-input::placeholder,
.search-input-wrapper input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.search-shortcut-hint,
.search-shortcut {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    background: var(--bg-field);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-weight: 600;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Results container */
.search-modal-results,
.search-results {
    max-height: min(50vh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Hint text (empty state) */
.search-modal-hint {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.6;
}

.search-modal-hint::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    border-radius: 8px;
    background: var(--bg-field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Empty results */
.search-modal-empty,
.search-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* Section group labels */
.search-group {
    padding: 6px 16px;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-color);
}

/* Result items */
.search-result-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.1s ease;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--bg-field);
}

.search-result-item.selected {
    box-shadow: inset 3px 0 0 var(--color-active);
}

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

.search-result-title {
    font-size: var(--text-xs);
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
}

.search-result-title mark {
    background: hsl(225, 40%, 20%);
    color: hsl(225, 80%, 30%);
    font-weight: 600;
    border-radius: var(--radius-xs);
    padding: 0 2px;
}

.search-result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--text-micro);
    color: var(--text-muted);
}

.search-result-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.search-result-topic {
    font-size: var(--text-2xs);
    padding: 1px 6px;
    border-radius: 9999px;
    background: var(--bg-field);
    color: var(--text-secondary);
    font-weight: 500;
}

.search-tag {
    font-size: var(--text-3xs);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    border: 1px solid;
    font-weight: 600;
}

/* Footer with keyboard hints */
.search-modal-footer,
.search-footer {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-chrome);
    font-size: var(--text-micro);
    color: var(--text-muted);
}

.search-modal-footer kbd,
.search-footer kbd {
    background: var(--bg-primary);
    border: 1px solid var(--border-heavy);
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
}

/* (640px search-modal, context-menu, tag-popover rules moved to consolidated 640px block) */

/* ============ MESSAGE ACTION BAR (Features 25, 26, 27) ============ */
/* Hover action bar for messages */
.message-action-bar {
    visibility: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    opacity: 0;
    transition: opacity 150ms var(--ease-reveal), visibility 0s linear 150ms;
}

.message:hover .message-action-bar {
    visibility: visible;
    opacity: 1;
    transition: opacity 150ms var(--ease-reveal), visibility 0s linear 0s;
}

.message-action-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-xs);
    font-size: var(--text-xs-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: border-color 100ms var(--ease-acknowledge),
                background 100ms var(--ease-acknowledge),
                color 100ms var(--ease-acknowledge),
                transform 80ms var(--ease-acknowledge);
    min-width: 32px;
    height: 28px;
}

.message-action-btn:hover {
    background: var(--bg-chrome);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.message-action-btn.delete:hover {
    background: #ffe8e8;
    border-color: var(--color-error);
    color: var(--color-error);
}

.message-action-btn.edit:hover {
    background: #e3f2fd;
    border-color: var(--color-active);
    color: var(--color-active);
}

.message-action-btn.regenerate:hover {
    background: #f3e5f5;
    border-color: #7b1fa2;
    color: #7b1fa2;
}

/* (640px message-action-bar rules moved to consolidated 640px block) */

/* ============ MESSAGE COMPRESSION (Feature 24) ============ */
.message-content.collapsed {
    max-height: 4.8em; /* Approximately 3 lines */
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.message-content.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.6em;
    background: linear-gradient(to bottom, transparent, var(--bg-primary));
    pointer-events: none;
}

.show-more-btn {
    background: none;
    border: none;
    color: var(--color-active);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    padding: var(--space-1) 0;
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.show-more-btn:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

.show-more-btn::after {
    content: '▼';
    font-size: var(--text-4xs);
    transition: transform 0.2s ease;
}

.show-more-btn.expanded::after {
    transform: rotate(180deg);
}

/* Fade animation for message removal */
@keyframes message-fade-out {
    from {
        opacity: 1;
        transform: translateX(0);
        max-height: 500px;
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-4);
    }
    to {
        opacity: 0;
        transform: translateX(-20px);
        max-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom-width: 0;
    }
}

.message.removing {
    animation: message-fade-out 0.3s ease forwards;
    overflow: hidden;
}

/* ============ MESSAGE EDIT MODE (Feature 26) ============ */
.message-edit-container {
    padding-left: 28px;
    margin-top: var(--space-2);
}

.message-edit-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 300px;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    border-radius: var(--radius-xs);
    resize: vertical;
    line-height: 1.6;
}

.message-edit-textarea:focus {
    border-color: var(--color-active);
    outline: none;
}

.message-edit-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.message-edit-btn {
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-xs);
    border: 1px solid;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.message-edit-btn.save {
    background: var(--color-active);
    border-color: var(--color-active);
    color: #ffffff;
}

.message-edit-btn.save:hover {
    background: var(--text-link-hover);
    border-color: var(--text-link-hover);
}

.message-edit-btn.cancel {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.message-edit-btn.cancel:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.message-edit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Stale message indicator */
.message.stale {
    opacity: 0.6;
}

.message.stale .message-content {
    color: var(--text-muted);
}

/* Regenerating indicator */
.message.regenerating .message-content {
    position: relative;
}

.message.regenerating .message-content::after {
    content: 'Regenerating...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border: 1px solid var(--color-active);
    color: var(--color-active);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: var(--text-xs);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============ DELETE CONFIRMATION MODAL ============ */
.delete-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1010;
}

.delete-confirm-modal.hidden {
    display: none;
}

.delete-confirm-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.delete-confirm-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.delete-confirm-header h3 {
    margin: 0;
    font-size: var(--text-md);
    color: var(--text-primary);
}

.delete-confirm-body {
    padding: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.delete-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-light);
}

.delete-confirm-btn {
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-xs);
    border: 1px solid;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.delete-confirm-btn.cancel {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.delete-confirm-btn.cancel:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.delete-confirm-btn.confirm {
    background: var(--color-error);
    border-color: var(--color-error);
    color: #ffffff;
}

.delete-confirm-btn.confirm:hover {
    background: #b71c1c;
    border-color: #b71c1c;
}

/* ============================================================================
   VISUAL & ACCESSIBILITY AIDS (Features 44-49)
   ============================================================================ */

/* ============ FEATURE 44: SYNTAX HIGHLIGHTING ============ */
/* Custom highlight.js theme overrides for Bloomberg terminal aesthetic */
.hljs {
    background: var(--bg-chrome) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--text-xs) !important;
    line-height: 1.5 !important;
    padding: var(--space-3) !important;
    border-radius: 0 !important;
}

/* Syntax token colors matching Bloomberg terminal */
.hljs-keyword,
.hljs-selector-tag,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-name,
.hljs-strong {
    color: #1565c0;
    font-weight: 600;
}

.hljs-comment {
    color: #757575;
    font-style: italic;
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-built_in,
.hljs-literal {
    color: #2e7d32;
}

.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
    color: #e65100;
}

.hljs-function,
.hljs-class .hljs-title,
.hljs-title.class_ {
    color: #7b1fa2;
}

.hljs-params {
    color: var(--text-primary);
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
    color: #1565c0;
}

.hljs-bullet,
.hljs-code {
    color: var(--text-primary);
}

/* ============ FEATURE 45: PIPELINE PROCESSING SPINNER ============ */
.pipeline-spinner-container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-chrome);
    border-top: 1px solid var(--border-color);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.pipeline-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid var(--border-light);
    border-top-color: var(--color-active);
    border-radius: 50%;
    animation: pipeline-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes pipeline-spin {
    to { transform: rotate(360deg); }
}

.pipeline-spinner-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pipeline-spinner-phase {
    font-weight: 700;
    color: var(--color-active);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pipeline-spinner-stage {
    color: var(--text-muted);
}

.pipeline-spinner-progress {
    margin-left: auto;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* ============ FEATURE 46: ERROR TOAST NOTIFICATIONS ============ */
.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1020;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 400px;
    pointer-events: none;
}

.toast-item {
    background: var(--bg-primary);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 3px solid #ef4444;
    border-radius: var(--radius-md, 10px);
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 4px 16px rgba(211, 47, 47, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    animation: toast-slide-in 0.3s ease;
    position: relative;
    overflow: hidden;
}

.toast-item.toast-hiding {
    animation: toast-slide-out 0.3s ease forwards;
}

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.toast-item-icon {
    font-size: var(--text-md);
}

.toast-item-title {
    font-weight: 700;
    font-size: var(--text-xs);
    color: var(--color-error);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toast-item-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-md);
    line-height: 1;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    transition: transform 0.15s, opacity 0.15s, background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

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

.toast-item-message {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.5;
    padding-right: var(--space-2);
}

.toast-item-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--color-error);
    opacity: 0.3;
    transition: width 0.1s linear;
}

/* Warning toast variant */
.toast-item.toast-warning {
    border-color: #e0a000;
    box-shadow: 0 4px 16px rgba(224, 160, 0, 0.2);
}

.toast-item.toast-warning .toast-item-title {
    color: #8a6d00;
}

.toast-item.toast-warning .toast-item-progress {
    background: #e0a000;
}

/* Info toast variant */
.toast-item.toast-info-item {
    border-color: var(--color-active);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
}

.toast-item.toast-info-item .toast-item-title {
    color: var(--color-active);
}

.toast-item.toast-info-item .toast-item-progress {
    background: var(--color-active);
}

/* ============ FEATURE 47: FONT SIZE ADJUSTMENT ============ */
/* Font size controls indicator */
.font-size-indicator {
    position: fixed;
    bottom: var(--space-4);
    left: var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    z-index: 1020;
    opacity: 0;
    transform: translateY(10px);
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.font-size-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}

.font-size-indicator kbd {
    background: var(--bg-chrome);
    border: 1px solid var(--border-color);
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
}

/* Apply dynamic font size to message content only */
.messages-container {
    font-size: var(--dynamic-font-size, var(--text-base));
}

/* Dynamic font-size support (accessibility slider) */
.messages-container .message-content {
    font-size: var(--dynamic-font-size, var(--text-base));
}

.messages-container .message-content h1 {
    font-size: calc(var(--dynamic-font-size, var(--text-base)) * 1.6);
    letter-spacing: -0.02em;
}

.messages-container .message-content h2 {
    font-size: calc(var(--dynamic-font-size, var(--text-base)) * 1.35);
    letter-spacing: -0.02em;
}

.messages-container .message-content h3 {
    font-size: calc(var(--dynamic-font-size, var(--text-base)) * 1.15);
    letter-spacing: -0.01em;
}

.messages-container .message-content code {
    font-size: calc(var(--dynamic-font-size, var(--text-base)) * 0.88);
}

.messages-container .message-content pre code {
    font-size: var(--text-sm);
}

/* ============ FEATURE 48: HIGH-CONTRAST MODE ============ */
body.high-contrast {
    --bg-primary: #000000;
    --bg-chrome: #1a1a1a;
    --bg-field: #000000;
    
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --text-link: #66b3ff;
    --text-link-hover: #99ccff;
    
    --color-error: #ff6666;
    --color-success: #66ff66;
    --color-active: #66b3ff;
    
    --border-color: #666666;
    --border-light: #444444;
    --border-heavy: #ffffff;
}

/* High contrast specific overrides */
body.high-contrast .message {
    border-bottom-width: 2px;
}

body.high-contrast .message-content {
    line-height: 1.8;
}

body.high-contrast .conversation-item {
    border-left-width: 4px;
}

body.high-contrast .btn,
body.high-contrast .send-button,
body.high-contrast .message-action-btn {
    border-width: 2px;
}

body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
    border-width: 2px;
    background: #000000;
    color: #ffffff;
}

body.high-contrast .code-block-wrapper {
    border-width: 2px;
}

body.high-contrast .hljs {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* High contrast focus indicators */
body.high-contrast *:focus-visible {
    outline: 3px solid #ffff00;
    outline-offset: 3px;
}

/* High contrast toggle button in header */
.high-contrast-toggle {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 8px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: transform 0.15s, opacity 0.15s, background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.high-contrast-toggle:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.high-contrast-toggle.active {
    background: var(--color-active);
    border-color: var(--color-active);
    color: #ffffff;
}

body.high-contrast .high-contrast-toggle.active {
    background: #ffff00;
    border-color: #ffff00;
    color: #000000;
}

/* ============ FEATURE 49: FOCUS INDICATOR ENHANCEMENT ============ */
/* Enhanced focus rings for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--color-active);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Different focus styles for different element types */
button:focus-visible,
.header-btn:focus-visible,
.header-action-btn:focus-visible,
.send-button:focus-visible,
.message-action-btn:focus-visible {
    outline: 3px solid var(--color-active);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-active);
    outline-offset: 0;
    border-color: var(--color-active);
}

a:focus-visible {
    outline: 3px solid var(--color-active);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Conversation items focus */
.conversation-item:focus-visible {
    outline: 3px solid var(--color-active);
    outline-offset: -2px;
    background: var(--bg-chrome);
}

/* Sidebar buttons focus */
.sidebar-btn:focus-visible,
.sidebar-toolbar-btn:focus-visible {
    outline: 3px solid var(--color-active);
    outline-offset: 2px;
}

/* Toolbar and pipeline buttons focus */
.toolbar-btn:focus-visible,
.pipeline-stage:focus-visible,
.template-btn:focus-visible,
.prompt-enhance-btn:focus-visible,
.mac-button:focus-visible,
.tab-button:focus-visible {
    outline: 3px solid var(--color-active);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

/* Modal elements focus */
.modal-close:focus-visible,
.rc-copy-btn:focus-visible,
.rc-export-btn:focus-visible,
.code-copy-btn:focus-visible {
    outline: 3px solid var(--color-active);
    outline-offset: 2px;
}

/* Remove default focus outline when :focus-visible is supported */
:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-active);
    color: #ffffff;
    padding: 8px 16px;
    z-index: 10000;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Custom scrollbar styling */
/* Scoped scrollbar styles now handled by global ::-webkit-scrollbar rules */

.send-button.processing {
    background: hsl(225, 20%, 40%);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

.send-button.processing svg {
    animation: spin 0.8s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════════════
   SKELETON LOADERS — Professional loading states
   ═══════════════════════════════════════════════════════════════ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-field) 0%,
        var(--bg-chrome) 50%,
        var(--bg-field) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    pointer-events: none;
    user-select: none;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text--short { width: 40%; }
.skeleton-text--medium { width: 70%; }
.skeleton-text--long { width: 100%; }

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-card {
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--border-light);
}

.skeleton-card::after {
    content: '';
    display: block;
    clear: both;
}

.skeleton-conversation-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

.skeleton-conversation-item .skeleton-avatar {
    flex-shrink: 0;
}

.skeleton-conversation-item .skeleton-content {
    flex: 1;
    min-width: 0;
}

.skeleton-conversation-item .skeleton-title {
    height: 14px;
    width: 60%;
    margin-bottom: 8px;
}

.skeleton-conversation-item .skeleton-meta {
    height: 12px;
    width: 40%;
}

/* Loading state for conversation list */
.conversation-list.is-loading .conversation-empty {
    display: none;
}

.conversation-list.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-field);
    z-index: 1;
}

.conversation-list.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, var(--bg-field) 20%, var(--bg-field) 80%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .skeleton {
        animation: none;
        background: var(--bg-chrome);
    }

    .pipeline-spinner {
        animation: none;
        border-color: var(--color-active);
    }

    html {
        scroll-behavior: auto !important;
    }

    .skip-link {
        transition: none;
    }
}

/* ============================================================================
   U147: MOBILE POLISH — Touch targets, safe areas, responsive layouts
   ============================================================================ */

/* Touch-friendly tap targets (WCAG 2.1 AAA — 44px minimum) */
@media (pointer: coarse) {
    .header-action-btn,
    .header-btn,
    .sidebar-btn,
    .sidebar-toolbar-btn,
    .new-conversation-btn,
    .send-button,
    .message-action-btn,
    .conversation-item,
    .topic-tag,
    .conversation-tag-pill,
    .btn,
    .template-btn,
    .mac-button,
    .tab-button,
    .pipeline-stage-btn,
    .modal-close,
    .toast-item-close,
    .help-dropdown-toggle,
    .mobile-overflow-toggle,
    .theme-toggle,
    .high-contrast-toggle {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
    }

    /* Increase touch target for small icons */
    .conv-lotus-icon,
    .conv-select-checkbox,
    .topic-map {
        min-height: 44px;
        min-width: 44px;
    }

    /* Ensure clickable areas are large enough */
    .conversation-item-clickable {
        min-height: 44px;
    }
}

/* Safe-area insets for notched devices (iPhone X+) */
@supports (padding: max(0px, env(safe-area-inset-left))) {
    .terminal {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .header-bar {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .sidebar {
        padding-left: max(0px, env(safe-area-inset-left));
    }

    .message-input-area {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .toast-container {
        bottom: max(16px, env(safe-area-inset-bottom));
        right: max(16px, env(safe-area-inset-right));
        left: max(16px, env(safe-area-inset-left));
    }

    .pipeline-panel {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    /* Mobile overflow menu positioning */
    .mobile-overflow-dropdown {
        bottom: max(60px, calc(env(safe-area-inset-bottom) + 60px));
    }
}

/* Mobile-responsive improvements */
@media (max-width: 768px) {
    /* Ensure full-width touch targets */
    .header-group {
        gap: 0;
    }

    .header-action-btn {
        padding: 12px 10px;
    }

    /* Sidebar full-width on mobile */
    .sidebar {
        width: 100%;
        max-width: 320px;
    }

    /* Message input full-width */
    .message-input-wrapper {
        margin: 0 8px;
    }

    /* Increase line height for readability */
    .message-content {
        line-height: 1.7;
    }

    /* Larger tap targets for conversation items */
    .conversation-item {
        padding: 12px 8px;
    }

    /* Stack header controls on small screens */
    .header-right {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .header-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }
}

/* Extra-small phones (< 360px) */
@media (max-width: 360px) {
    .header-logo {
        font-size: var(--text-micro);
    }

    .header-status {
        font-size: var(--text-2xs);
    }

    .header-action-btn {
        font-size: var(--text-micro);
        padding: 10px 8px;
    }

    .conversation-item-title {
        font-size: var(--text-xs);
    }

    .message-input-area {
        padding: 8px;
    }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden;
    }

    .terminal-body {
        max-width: 100%;
    }

    .messages-container {
        overflow-x: hidden;
    }

    .code-block-wrapper {
        max-width: 100%;
    }
}

/* Pointer hover capability detection — hide hover effects on touch devices */
@media (hover: none) {
    .header-action-btn:hover,
    .btn:hover,
    .conversation-item:hover,
    .sidebar-btn:hover {
        background: transparent;
        transform: none;
    }

    /* Show active state instead */
    .header-action-btn:active,
    .btn:active,
    .conversation-item:active,
    .sidebar-btn:active {
        background: var(--color-active-soft);
        transform: scale(0.98);
    }
}

/* ============================================================================
   FEATURE 50: KEYBOARD SHORTCUTS REFERENCE OVERLAY
   ============================================================================ */

.shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shortcuts-modal.hidden {
    display: none;
}

.shortcuts-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    animation: shortcuts-fade-in 150ms var(--ease-enter);
}

@keyframes shortcuts-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.shortcuts-panel {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: shortcuts-slide-in 200ms var(--ease-reveal);
}

@keyframes shortcuts-slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.shortcuts-header h2 {
    margin: 0;
    font-size: var(--text-md);
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.shortcuts-close {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--text-lg);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.shortcuts-close:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
    background: var(--bg-chrome);
}

.shortcuts-search {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.shortcuts-search input {
    flex: 1;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    border-radius: var(--radius-xs);
    outline: none;
}

.shortcuts-search input:focus {
    border-color: var(--color-active);
}

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

.search-hint {
    font-size: var(--text-micro);
    color: var(--text-muted);
    font-style: italic;
}

.shortcuts-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
}

.shortcuts-category {
    margin-bottom: var(--space-4);
}

.shortcuts-category:last-child {
    margin-bottom: 0;
}

.shortcuts-category.hidden {
    display: none;
}

.category-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-light);
}

.category-icon {
    font-size: var(--text-sm);
}

/* SVG icons for categories — replaces emoji for cross-platform consistency */
.category-icon-svg {
    flex-shrink: 0;
    margin-right: 8px;
    color: var(--text-secondary);
    width: 20px;
    height: 20px;
}

.shortcuts-header .category-icon-svg {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    color: var(--color-active);
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-chrome);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.shortcut-item:hover {
    border-color: var(--border-color);
    background: var(--bg-field);
}

.shortcut-item.hidden {
    display: none;
}

.shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shortcut-desc {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.shortcuts-no-results {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-muted);
}

.shortcuts-no-results.hidden {
    display: none;
}

.no-results-icon {
    font-size: var(--text-2xl);
    display: block;
    margin-bottom: var(--space-2);
}

.shortcuts-no-results p {
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}

.shortcuts-footer {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-light);
    background: var(--bg-chrome);
    border-radius: 0 0 8px 8px;
}

.shortcuts-hint {
    font-size: var(--text-micro);
    color: var(--text-muted);
}

.shortcuts-hint kbd {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
}

/* Help dropdown menu styles */
.help-dropdown {
    position: relative;
    display: inline-block;
}

.help-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(37, 99, 235, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 140px;
    z-index: 1005;
    overflow: hidden;
}

.help-dropdown-menu.hidden {
    display: none;
}

.help-dropdown-menu:not(.hidden) {
    animation: help-drop-in 150ms var(--ease-reveal) both;
}

@keyframes help-drop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.help-dropdown-menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-size: var(--text-xs);
    text-decoration: none;
    transition: background 0.15s ease;
}

.help-dropdown-menu a:hover {
    background: rgba(37, 99, 235, 0.06);
}

/* Tools dropdown menu styles — consolidated secondary actions */
.tools-dropdown {
    position: relative;
    display: inline-block;
}

.tools-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(37, 99, 235, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 200px;
    z-index: 1005;
    overflow: hidden;
    padding: 6px 0;
}

.tools-dropdown-menu.hidden {
    display: none;
}

.tools-dropdown-menu:not(.hidden) {
    animation: tools-drop-in 150ms var(--ease-reveal) both;
}

@keyframes tools-drop-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tools-dropdown-menu button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: var(--text-xs);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tools-dropdown-menu button:hover {
    background: var(--bg-chrome);
}

.tools-dropdown-menu .tools-divider {
    height: 1px;
    background: var(--border-light);
    margin: 6px 0;
}

/* Dark mode overrides for tools dropdown */
[data-theme="dark"] .tools-dropdown-menu {
    background: rgba(22, 27, 34, 0.98);
}

[data-theme="dark"] .tools-dropdown-menu button:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   FEATURE 51: UNDO LAST DESTRUCTIVE ACTION
   ============================================================================ */

.undo-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    border: 2px solid var(--color-active);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(37,99,235,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    animation: undo-toast-in 0.3s ease;
    max-width: 400px;
}

.undo-toast.undo-toast-hiding {
    animation: undo-toast-out 0.3s ease forwards;
}

@keyframes undo-toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes undo-toast-out {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

.undo-toast-message {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 600;
}

.undo-toast-action {
    background: var(--gradient-accent);
    border: none;
    color: #ffffff;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.undo-toast-action:hover {
    background: linear-gradient(135deg, #1d4ed8, #6d28d9);
}

.undo-toast-countdown {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--color-active);
    opacity: 0.5;
    transition: width 0.1s linear;
}

/* Confirmation toast for completed undo */
.undo-confirmation-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-success);
    color: #ffffff;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    font-weight: 600;
    z-index: 1020;
    animation: undo-confirm-in 0.3s ease;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.undo-confirmation-toast.undo-confirmation-hiding {
    animation: undo-confirm-out 0.3s ease forwards;
}

@keyframes undo-confirm-in {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes undo-confirm-out {
    from {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) scale(0.9);
    }
}

/* (640px undo-toast, shortcuts rules moved to consolidated 640px block) */

/* ============================================================================
   TIER 1 & 2: MISSING FEATURE STYLES
   ============================================================================ */

/* ── Context Menu (Features 16/18/19/20) ── */

.conversation-context-menu {
    position: fixed;
    z-index: 1015;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    padding: 4px 0;
    font-size: var(--text-sm);
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.1s;
}

.context-menu-item:hover {
    background: var(--bg-chrome);
}

.context-menu-danger {
    color: var(--color-error);
}

.context-menu-danger:hover {
    background: #ffebee;
}

.context-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

.context-menu-icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Rename Input (Feature 16) ── */

.conversation-rename-input {
    width: 100%;
    padding: 2px 6px;
    font-size: var(--text-xs);
    font-family: var(--font-ui);
    border: 1px solid var(--color-active);
    border-radius: var(--radius-xs);
    background: var(--bg-field);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}

/* ── Tag Popover (Feature 21) ── */

.tag-popover {
    position: fixed;
    z-index: 1015;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    max-width: 250px;
    font-size: var(--text-sm);
}

.tag-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-popover-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-md);
    color: var(--text-muted);
    padding: 0 4px;
}

.tag-popover-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
    scroll-snap-type: y proximity;
}

.tag-popover-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.tag-popover-item:hover {
    background: var(--bg-chrome);
}

.tag-popover-item.active {
    background: #f0f7ff;
}

.tag-popover-check {
    width: 16px;
    font-size: var(--text-xs-sm);
    color: var(--color-success);
}

.tag-popover-name {
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: capitalize;
}

.tag-popover-footer {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid var(--border-light);
}

.tag-popover-input {
    flex: 1;
    padding: 4px 8px;
    font-size: var(--text-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--bg-field);
    font-family: var(--font-ui);
}

.tag-popover-add {
    padding: 4px 10px;
    background: var(--color-active);
    color: white;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-weight: 600;
}

.tag-popover-add:hover {
    opacity: 0.9;
}

/* Conversation tag pills in sidebar */
.conversation-tag-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    font-size: var(--text-xs-sm);
    opacity: 0;
    transition: opacity 0.15s;
}

.conversation-item:hover .conversation-tag-trigger {
    opacity: 0.7;
}

.conversation-tag-trigger:hover {
    opacity: 1 !important;
}

.conversation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.conversation-tag-pill {
    font-size: var(--text-2xs);
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid;
    line-height: 1.4;
}

/* ── Search Modal (Feature 22) ── */

.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1010;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}

.search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
}

.search-modal-panel {
    position: relative;
    width: 560px;
    max-width: 90vw;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
}

.search-modal-header {
    padding: 0;
    border-bottom: 1px solid var(--border-light);
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 10px;
}

.search-icon {
    font-size: var(--text-md);
    flex-shrink: 0;
}

.search-modal-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--text-md);
    font-family: var(--font-ui);
    background: transparent;
    color: var(--text-primary);
}

.search-shortcut-hint {
    font-size: var(--text-micro);
    padding: 2px 6px;
    background: var(--bg-chrome);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-modal-results {
    overflow-y: auto;
    flex: 1;
}

.search-modal-hint,
.search-modal-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.search-result-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.1s;
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--bg-chrome);
}

.search-result-title {
    font-weight: 500;
    margin-bottom: 2px;
}

.search-result-title mark {
    background: #fff3cd;
    padding: 0 2px;
    border-radius: var(--radius-xs);
}

.search-result-topics {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.search-result-topic {
    font-size: var(--text-2xs);
    padding: 1px 6px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 8px;
}

.search-result-meta {
    font-size: var(--text-micro);
    color: var(--text-muted);
    margin-top: 3px;
}

/* ── Sort Dropdown (Feature 23) ── */

.sort-dropdown-container {
    position: relative;
}

.sort-btn {
    font-size: var(--text-micro) !important;
    padding: 2px 6px !important;
}

.sort-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1005;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    padding: 4px 0;
    animation: dropdownReveal 150ms var(--ease-reveal);
}

.sort-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--text-xs);
    transition: background 0.1s;
}

.sort-option:hover {
    background: var(--bg-chrome);
}

.sort-option.active {
    color: var(--color-active);
    font-weight: 600;
}

.sort-check {
    color: var(--color-active);
    font-size: var(--text-xs-sm);
}

/* ── Undo Toast (Feature 51) ── */

.undo-toast {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1020;
    background: var(--text-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-lg, 16px);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(37,99,235,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: var(--text-sm);
    animation: slideUp 0.3s ease;
}

.undo-toast-btn {
    background: var(--gradient-accent);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    font-size: var(--text-xs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.undo-toast-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #6d28d9);
}

.undo-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--color-active);
    border-radius: 0 0 8px 8px;
    animation: undoProgress 10s linear forwards;
    transform-origin: left;
}

@keyframes undoProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@keyframes slideUp {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ── Message Focus Ring (Feature 3) ── */

.message-focused {
    outline: 2px solid var(--color-active);
    outline-offset: -2px;
    border-radius: var(--radius-xs);
}

/* ── Message Highlight (Feature 4 — anchor deep link) ── */

.message-highlight {
    animation: highlightPulse 2.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes highlightPulse {
    0%   { box-shadow: inset 0 0 0 0 rgba(187, 222, 251, 0); }
    15%  { box-shadow: inset 0 0 0 2px rgba(187, 222, 251, 0.6); }
    100% { box-shadow: inset 0 0 0 0 rgba(187, 222, 251, 0); }
}

/* ── Anchor link icon ── */

.message-anchor-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-xs-sm);
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0 4px;
    color: var(--text-muted);
}

.message:hover .message-anchor-btn {
    opacity: 0.5;
}

.message-anchor-btn:hover {
    opacity: 1 !important;
    color: var(--color-active);
}

/* ── Help Dropdown ── */

.help-dropdown {
    position: relative;
    display: inline-block;
}

.help-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1005;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    padding: 4px 0;
}

.help-dropdown-menu a {
    display: block;
    padding: 6px 14px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--text-xs);
    white-space: nowrap;
}

.help-dropdown-menu a:hover {
    background: var(--bg-chrome);
}

/* ── Conversation section headers ── */

.conversation-section {
    padding: 6px 12px 2px;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.conversation-item.pinned {
    border-left: 2px solid #f9a825;
}

.pin-indicator {
    font-size: var(--text-micro);
    margin-left: 4px;
}

.conversation-item-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============ BROWSER ACTION CARDS (PinchTab) ============ */

.browser-action-card {
    margin: 6px 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    background: var(--bg-chrome);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.bac-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-light);
}

.bac-header:last-child {
    border-bottom: none;
}

.bac-error {
    color: var(--color-error);
    background: #fff5f5;
}

.bac-icon {
    flex-shrink: 0;
    font-size: var(--text-xs-sm);
}

.bac-details {
    padding: 0;
}

.bac-details summary {
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-link);
    font-size: var(--text-xs);
    user-select: none;
}

.bac-details summary:hover {
    color: var(--text-link-hover);
}

.bac-pre {
    margin: 0;
    padding: 8px;
    max-height: 300px;
    overflow: auto;
    font-size: var(--text-xs-sm);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-field);
    border-top: 1px solid var(--border-light);
}

.bac-screenshot-img {
    display: block;
    max-width: 100%;
    max-height: 400px;
    padding: 4px;
    border-top: 1px solid var(--border-light);
}

/* ============================================================================
   PREMIUM POLISH — Modern Frontend Design System Refinements
   ============================================================================ */

/* Message reveal — triggered by IntersectionObserver */
.message {
    opacity: 0;
    transform: translateY(8px);
}

.message.revealed {
    animation: messageEnter var(--duration-slow, 0.3s) var(--ease-out, ease-out) both;
}

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

/* Toast notification upgrade */
.toast-notification {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    animation: toastSlideIn var(--duration-base) var(--ease-out) !important;
}

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

.toast-fade-out {
    animation: toastFadeOut var(--duration-slow) var(--ease-out) forwards !important;
}

@keyframes toastFadeOut {
    to { opacity: 0; transform: translateY(-8px); }
}

/* Template/enhance button hover polish */
.template-btn,
.prompt-enhance-btn {
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
    border-radius: var(--radius-sm);
}

/* Conversation section headers */
.conversation-section {
    letter-spacing: 0.03em;
    font-weight: 600;
}

/* ============ SCROLLBAR — Global ============ */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* Webkit/Blink (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid transparent;
    background-clip: content-box;
}

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

/* Dark theme scrollbar */
[data-theme="dark"] * {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Sidebar conversation list — thinner scrollbar */
.conversation-list::-webkit-scrollbar {
    width: 6px;
}
.conversation-list::-webkit-scrollbar-thumb {
    border-width: 1px;
}
.conversation-list {
    scrollbar-width: thin;
}

/* Messages container — auto-hide scrollbar */
.messages-container {
    overflow-y: overlay;
    overflow-y: auto; /* fallback for browsers without overlay */
}
@supports (overflow-y: overlay) {
    .messages-container {
        overflow-y: overlay;
    }
}

/* Code blocks — subtle scrollbar */
.message-content pre::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.message-content pre::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.10);
    border-radius: 3px;
    border: 1px solid transparent;
    background-clip: content-box;
}
.message-content pre::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.20);
    background-clip: content-box;
}
.message-content pre {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.10) transparent;
}

/* Premium micro-interactions — will-change only when animation is imminent */
.conversation-item:hover,
.conversation-item:active,
.conversation-item.dragging {
    will-change: transform;
}

.sidebar-toolbar-btn:active,
.header-action-btn:active {
    will-change: transform;
}

/* Smooth focus rings globally */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.5);
    outline-offset: 2px;
}

/* Code block wrapper premium treatment */
.code-block-wrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    margin: var(--space-4) 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow var(--duration-fast) var(--ease-out);
}

.code-block-wrapper:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.code-block-header {
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-light);
    padding: var(--space-1) var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
}

.code-block-wrapper pre {
    margin: 0;
    border: none;
    border-radius: 0;
}

.code-copy-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: var(--text-micro);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-ui);
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.code-copy-btn:hover {
    color: var(--color-active);
    border-color: var(--color-active);
    background: var(--color-active-soft);
}

/* Context menu premium treatment */
.context-menu {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    animation: dropdownReveal var(--duration-fast) var(--ease-out);
}

/* Pipeline panel — already styled above, no override needed */

/* Sort dropdown premium style */
.sort-dropdown {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    animation: dropdownReveal var(--duration-fast) var(--ease-out);
}

.sort-option {
    transition: background var(--duration-fast) var(--ease-out);
    border-radius: var(--radius-sm);
    margin: 0 var(--space-1);
}

.sort-option:hover {
    background: var(--color-active-soft);
}

/* Keyboard shortcut keys premium style */
kbd {
    background: var(--bg-chrome);
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--text-secondary);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* Reasoning chain — glass-card override (premium polish layer) */
.reasoning-chain {
    border-radius: 12px;
    border: 1px solid hsla(225, 20%, 25%, 0.6);
    overflow: hidden;
    background: hsla(225, 15%, 10%, 0.5);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.04);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.reasoning-chain:hover {
    border-color: hsla(225, 20%, 30%, 0.8);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.07);
}

/* Tag pills polish */
.conversation-tag-pill {
    border-radius: 9999px;
    font-size: var(--text-2xs);
    padding: 1px 8px;
    font-weight: 500;
    border-width: 1px;
    border-style: solid;
}

/* Settings tabs upgrade */
.tab-button {
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tab-button:hover:not(.active) {
    background: var(--color-active-soft);
}

/* T1: Input area subtle border acknowledgment when active */
.input-area:has(textarea:focus),
.input-area:focus-within {
    border-top-color: var(--color-active);
    box-shadow: 0 -1px 0 rgba(37, 99, 235, 0.1), 0 -4px 16px rgba(37, 99, 235, 0.04);
}

/* U10: Prompt metrics bar — draft persistence & cost preview */
#prompt-metrics {
    display: flex;
    gap: 12px;
    font-size: var(--text-micro);
    color: var(--text-tertiary, #888);
    padding: 4px 8px 0;
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    transition: opacity 0.2s;
    user-select: none;
}
#prompt-metrics:hover {
    opacity: 1;
}
#prompt-metrics span {
    white-space: nowrap;
}

/* ═══ PEDESTAL INPUT — Tiline Academic Design ═══ */

/* T1 Acknowledgment: pedestal lifts subtly when textarea focused */
.input-pedestal:has(textarea:focus) {
    background: var(--bg-field);
    box-shadow:
        0 -1px 0 0 var(--border-light),
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Pedestal textarea — scholarly surface, precision edges */
.input-pedestal #messageInput {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-field);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.03);
    padding: 16px 20px;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 400;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    letter-spacing: 0.005em;
    line-height: 1.65;
    color: var(--text-primary);
    transition: transform 200ms var(--ease-acknowledge), opacity 200ms var(--ease-acknowledge), background-color 200ms var(--ease-acknowledge), border-color 200ms var(--ease-acknowledge), color 200ms var(--ease-acknowledge), box-shadow 200ms var(--ease-acknowledge);
}

.input-pedestal #messageInput::placeholder {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.6;
    transition: opacity 200ms var(--ease-acknowledge),
                color 200ms var(--ease-acknowledge);
}

/* T1: hover acknowledgment — 80ms, border darkens */
.input-pedestal #messageInput:hover {
    border-color: var(--border-heavy);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.06);
}

/* T1: focus acknowledgment — sharp 100ms ring expansion */
.input-pedestal #messageInput:focus {
    outline: none;
    border-color: var(--color-active);
    background: var(--bg-field);
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12),
        inset 0 1px 2px rgba(0, 0, 0, 0.02),
        0 2px 12px rgba(37, 99, 235, 0.06);
}

.input-pedestal #messageInput:focus::placeholder {
    opacity: 0.35;
}

/* Thinking state — pedestal version: muted scholarly pulse */
.input-pedestal #messageInput.thinking {
    border-color: var(--color-active);
    box-shadow:
        0 0 0 2px var(--color-active-glow),
        inset 0 1px 2px rgba(0, 0, 0, 0.03);
    animation: tiline-thinking-pulse 2.5s ease-in-out infinite;
}

@keyframes tiline-thinking-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--color-active-glow), inset 0 1px 2px rgba(0,0,0,0.03); }
    50%      { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), inset 0 1px 2px rgba(0,0,0,0.03); }
}

/* Pedestal send button — precise academic mark */
.input-pedestal .send-button {
    border-radius: 12px;
    background: var(--gradient-accent);
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    box-shadow: 0 2px 8px var(--color-active-glow);
    transition: transform 150ms var(--ease-acknowledge), opacity 150ms var(--ease-acknowledge), background-color 150ms var(--ease-acknowledge), border-color 150ms var(--ease-acknowledge), color 150ms var(--ease-acknowledge), box-shadow 150ms var(--ease-acknowledge);
}

/* T1: hover — premium lift */
.input-pedestal .send-button:hover:not(:disabled) {
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
    filter: brightness(1.1);
}

/* T1: active press — tactile response */
.input-pedestal .send-button:active:not(:disabled) {
    transform: scale(0.96);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* Pedestal toolbar — T3 reveal: quiet presence, reveals on engagement */
.input-pedestal .input-toolbar {
    margin-bottom: var(--space-2);
    opacity: 0.45;
    transition: opacity 250ms var(--ease-reveal);
}

.input-pedestal:hover .input-toolbar,
.input-pedestal:focus-within .input-toolbar {
    opacity: 1;
}

/* Pedestal depth selector — scholarly controls */
.input-pedestal .depth-selector select,
.input-pedestal #depthSelect {
    border-radius: var(--radius-xs);
    box-shadow: none;
    border: 1px solid var(--border-color);
    background-color: var(--bg-field);
    transition: border-color 100ms var(--ease-acknowledge),
                background-color 100ms var(--ease-acknowledge);
}

.input-pedestal .depth-selector select:hover,
.input-pedestal #depthSelect:hover {
    background-color: var(--bg-field);
    border-color: var(--border-heavy);
}

.input-pedestal .compare-toggle-btn {
    border-radius: var(--radius-xs);
    box-shadow: none;
    border: 1px solid var(--border-color);
    background: var(--bg-field);
    transition: border-color 100ms var(--ease-acknowledge),
                background 100ms var(--ease-acknowledge),
                color 100ms var(--ease-acknowledge);
}

.input-pedestal .compare-toggle-btn:hover {
    background: var(--bg-field);
    border-color: var(--border-heavy);
}

.input-pedestal .template-btn {
    border-radius: var(--radius-xs);
    transition: color 100ms var(--ease-acknowledge),
                background 100ms var(--ease-acknowledge);
}

/* Pedestal queue mode badge */
.input-pedestal .queue-mode-badge {
    border-radius: var(--radius-xs);
    border: 1px solid hsla(145, 45%, 45%, 0.2);
}

/* Pedestal processing send button */
.input-pedestal .send-button.processing {
    background: transparent;
    border: 1px solid var(--charcoal-300, var(--text-muted));
    color: var(--charcoal-300, var(--text-muted));
    border-radius: var(--radius-xs);
}

/* Reduced motion — disable all tiline and premium animations */
@media (prefers-reduced-motion: reduce) {
    .message {
        opacity: 1 !important;
        transform: none !important;
    }
    .message.revealed {
        animation: none !important;
    }
    .message,
    .toast-notification,
    .modal-panel,
    .modal-overlay,
    .header-dropdown-menu,
    .sort-dropdown,
    .shortcuts-panel,
    .shortcuts-overlay {
        animation: none !important;
        will-change: auto !important;
    }

    .pipeline-stage.running {
        animation: none !important;
    }

    .input-pedestal #messageInput.thinking {
        animation: none !important;
    }

    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============ COMPACT REASONING DAG ============ */

.dag-container {
    position: relative;
    overflow: hidden;
}

.dag-connections {
    display: none;
}

.dag-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
}

/* Phase groups — separated by subtle dot divider */
.dag-phase-group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-right: var(--space-2);
    position: relative;
}

.dag-phase-group:not(:last-child)::after {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--border-color);
    margin-left: 4px;
    flex-shrink: 0;
}

.dag-phase-group:last-child {
    padding-right: 0;
}

.dag-phase-label {
    font-size: var(--text-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    writing-mode: vertical-lr;
    text-orientation: mixed;
    padding: var(--space-1) 0;
}

.dag-phase-nodes {
    display: flex;
    gap: var(--space-1);
}

/* Individual DAG node pill */
.dag-node {
    border-radius: 10px;
    border: 1px solid hsla(225, 15%, 25%, 0.7);
    background: var(--bg-primary);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    cursor: pointer;
    position: relative;
    animation: dagNodeReveal 200ms var(--ease-reveal) both;
}

@keyframes dagNodeReveal {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.dag-node:hover {
    border-color: var(--color-active);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.dag-node-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    font-size: var(--text-micro);
    border-radius: 10px;
    transition: background var(--duration-fast) var(--ease-out);
}

.dag-node:hover .dag-node-header {
    background: rgba(240, 246, 252, 0.04);
}

.dag-node-content {
    display: none;
}

/* Node number badge — rounded square */
.dag-node-num {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-3xs);
    font-weight: 700;
    background: var(--color-active);
    color: #ffffff;
    border-radius: 6px;
    flex-shrink: 0;
    line-height: 1;
    transition: background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.dag-node-name {
    font-size: var(--text-micro);
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dag-node-tokens {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.dag-node-status {
    font-size: var(--text-2xs);
}

/* Running state — soft accent pulse with layered shadows */
.dag-node-running {
    border-color: hsla(225, 40%, 35%, 0.6);
    background: hsla(225, 15%, 12%, 0.8);
}

.dag-node-running .dag-node-num {
    animation: dagNumPulse 1.5s ease-in-out infinite;
}

.dag-node-running .dag-node-status::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-active);
    animation: dag-pulse 1.2s ease-in-out infinite;
}

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

@keyframes dagNumPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0); }
}

/* Complete state — subtle green, semi-transparent */
.dag-node-complete {
    border-color: hsla(145, 40%, 30%, 0.5);
    background: hsla(145, 15%, 12%, 0.6);
}

.dag-node-complete .dag-node-num {
    background: hsl(145, 45%, 48%);
}

.dag-node-complete .dag-node-name {
    color: var(--text-primary);
}

/* Expanded state — elevated card */
.dag-node-expanded {
    border-radius: 10px;
    background: var(--bg-elevated);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08),
                0 1px 4px rgba(0, 0, 0, 0.04);
    z-index: 10;
    border-color: hsla(225, 20%, 30%, 0.8);
}

.dag-node-expanded .dag-node-content {
    display: block;
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    background: var(--bg-primary);
    border-top: 1px solid hsla(225, 15%, 20%, 0.8);
    border-radius: 0 0 10px 10px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.dag-node-expanded .dag-node-content p {
    margin-bottom: var(--space-1);
}

.dag-node-expanded .dag-node-content p:last-child {
    margin-bottom: 0;
}

/* Content summary */
.dag-node-summary {
    font-size: var(--text-xs-sm);
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Expand/show full button */
.dag-show-full {
    display: inline-block;
    font-size: var(--text-micro);
    color: var(--color-active);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1) 0;
    font-family: var(--font-ui);
    font-weight: 500;
    transition: color 100ms var(--ease-acknowledge);
}

.dag-show-full:hover {
    color: hsl(225, 40%, 50%);
    text-decoration: underline;
}

.dag-node-full .dag-node-content {
    max-height: none;
}

/* Status complete checkmark */
.dag-status-complete {
    color: hsl(145, 45%, 48%);
}

/* LIVE badge — refined indicator */
.dag-live-badge {
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    background: hsl(145, 50%, 46%);
    padding: 2px 8px;
    border-radius: 8px;
    animation: dagLivePulse 2s ease-in-out infinite;
}

/* ============ INLINE RESPONSE GRID ============ */

.inline-response-grid {
    display: block;
}

.inline-response-grid.has-comparisons {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 0;
}

.inline-comp-sidebar {
    border-left: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-light);
    max-height: 600px;
    overflow-y: auto;
}

.inline-comp-col {
    background: var(--bg-primary);
    padding: 0;
}

.inline-comp-col-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-chrome);
    font-size: var(--text-micro);
    font-weight: 600;
    border-bottom: 1px solid var(--border-light);
}

.inline-comp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.inline-comp-title {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.inline-comp-tokens {
    margin-left: auto;
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.inline-comp-col-body {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    line-height: 1.7;
    max-height: 400px;
    overflow-y: auto;
}

.comp-col-error {
    color: var(--color-error);
    font-style: italic;
    padding: var(--space-3);
}

@media (max-width: 768px) {
    .inline-response-grid.has-comparisons {
        display: block;
    }

    .inline-comp-sidebar {
        border-left: none;
        border-top: 1px solid var(--border-light);
    }
}

/* ============ PSYCHOMETRIC PANEL ============ */

.psychometric-panel {
    margin-top: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.psychometric-panel.collapsed .psych-body {
    display: none;
}

.psych-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-4);
    background: linear-gradient(135deg, var(--bg-chrome), var(--bg-chrome));
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.psych-header-title {
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: hsl(225, 30%, 45%);
}

.psych-copy-btn {
    font-size: var(--text-micro);
    padding: 2px var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-ui);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.psych-copy-btn:hover {
    color: var(--color-active);
    border-color: var(--color-active);
}

.psych-toggle {
    margin-left: auto;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-ui);
    background: none;
    border: none;
    letter-spacing: 0.5px;
}

.psych-body {
    padding: var(--space-4);
}

.psych-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.psych-model-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--bg-primary);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.psych-model-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.psych-model-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-2);
}

.psych-model-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.psych-model-name {
    font-size: var(--text-xs-sm);
    font-weight: 600;
}

.psych-score-hero {
    text-align: center;
    padding: var(--space-2) 0;
}

.psych-score-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1.1;
}

.psych-score-label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    display: block;
    margin-top: var(--space-1);
}

.psych-subscales {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-2);
}

.psych-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.psych-bar-label {
    font-size: var(--text-micro);
    color: var(--text-secondary);
    width: 85px;
    flex-shrink: 0;
}

.psych-bar-track {
    flex: 1;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.psych-bar-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.psych-bar-val {
    font-size: var(--text-micro);
    font-weight: 600;
    font-family: var(--font-mono);
    min-width: 28px;
    text-align: right;
}

.psych-disclaimer {
    font-size: var(--text-micro);
    color: var(--text-muted);
    font-style: italic;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
}

/* ============ USER MESSAGE COLLAPSE ============ */

.message.user .message-content {
    max-height: 3.2em;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: max-height var(--duration-slow) var(--ease-out);
}

.message.user .message-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.6em;
    background: linear-gradient(transparent, var(--bg-primary));
    pointer-events: none;
}

.message.user.user-expanded .message-content {
    max-height: none;
}

.message.user.user-expanded .message-content::after {
    display: none;
}

.user-expand-hint {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    text-align: right;
    cursor: pointer;
    padding-top: 2px;
    font-family: var(--font-ui);
}

.user-expand-hint:hover {
    color: var(--color-active);
}

/* ============ APP FOOTER ============ */

.app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    background: var(--bg-chrome);
    border-top: 1px solid var(--border-light);
    z-index: 100;
}

.app-footer a {
    color: var(--text-secondary);
    text-decoration: none;
}

.app-footer a:hover {
    text-decoration: underline;
}

/* ============ TOPIC TREE SIDEBAR ============ */

.topic-tree {
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--border-light);
    max-height: 200px;
    overflow-y: auto;
}

.topic-tree-title {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: var(--space-1) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topic-tree-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.topic-tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-micro);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-out);
}

.topic-tree-item:hover {
    background: var(--bg-chrome);
}

.topic-tree-item.active {
    background: var(--color-active-soft);
    color: var(--color-active);
}

.topic-tree-count {
    margin-left: auto;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.topic-tree-search {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-micro);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    margin-bottom: var(--space-1);
    font-family: var(--font-ui);
    color: var(--text-primary);
    background: var(--bg-field);
}

.topic-tree-search:focus {
    outline: none;
    border-color: var(--color-active);
}

/* ============ SEARCH RESULTS VIEW ============ */

.search-result-card {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.search-result-card:hover {
    background: var(--bg-chrome);
    border-left: 3px solid var(--color-active);
    padding-left: calc(var(--space-4) - 3px);
}

.search-result-card-title {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
    color: var(--text-primary);
}

.search-result-card-preview {
    font-size: var(--text-xs-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    max-height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-card-meta {
    display: flex;
    gap: var(--space-2);
    margin-top: 6px;
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.search-result-card-topics {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.search-result-card-topic {
    font-size: var(--text-3xs);
    padding: 1px 6px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: var(--radius-md);
}


/* ============================================================
   CHARCOAL BUTTON SYSTEM
   Graphite on heavy paper. Soft warmth, not cold precision.
   Strokes feel hand-drawn but deliberate — like a draftsman's
   notation rendered in vine charcoal and compressed graphite.
   ============================================================ */

/* ── Charcoal palette tokens ── */
:root {
    --charcoal-900:   #2c2c2c;   /* compressed graphite — darkest mark */
    --charcoal-700:   #4a4a4a;   /* vine charcoal — primary stroke */
    --charcoal-500:   #6b6b6b;   /* soft charcoal — secondary */
    --charcoal-300:   #9a9a9a;   /* smudge — muted elements */
    --charcoal-100:   #c8c5c0;   /* dust — faintest mark */
    --charcoal-paper: #f8f7f4;   /* warm cotton rag paper */
    --charcoal-wash:  rgba(44, 44, 44, 0.04);  /* lightest graphite wash */
}

/* ── Base reset: apply charcoal DNA with rounded corners ── */
.btn,
.btn-primary,
.btn-secondary,
.header-action-btn,
.header-btn,
.sidebar-btn,
.sidebar-toolbar-btn,
.sidebar-toolbar-btn.active,
.send-button,
.queue-add-btn,
.queue-add-btn.visible,
.queue-clear-btn,
.compare-toggle-btn,
.template-btn,
.psych-copy-btn,
.conversation-kebab-btn {
    border-radius: var(--radius-md, 10px);
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── .btn base — vine charcoal outline ── */
.btn {
    background: transparent;
    border: 1px solid var(--charcoal-300);
    color: var(--charcoal-700);
    padding: 8px 20px;
    font-size: var(--text-2xs);
    letter-spacing: 0.1em;
    box-shadow: none;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
    border-color: var(--charcoal-700);
    color: var(--charcoal-900);
    background: var(--charcoal-wash);
    box-shadow: none;
    transform: none;
}

.btn:active {
    transform: none;
    background: rgba(44, 44, 44, 0.08);
}

/* ── Primary — blue accent fill ── */
.btn-primary {
    background: var(--color-active);
    color: #ffffff;
    border: 1px solid var(--color-active);
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.25);
}

/* ── Secondary — faint outline, barely there ── */
.btn-secondary {
    background: transparent;
    border: 1px solid var(--charcoal-100);
    color: var(--charcoal-500);
}

.btn-secondary:hover {
    border-color: var(--charcoal-500);
    color: var(--charcoal-700);
    background: transparent;
    box-shadow: none;
}

/* ── Header buttons — ghost strokes, appear on hover ── */
.header-action-btn,
.header-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--charcoal-500);
    font-size: var(--text-2xs);
    padding: 5px 12px;
    letter-spacing: 0.08em;
}

.header-action-btn:hover,
.header-btn:hover {
    border-color: var(--charcoal-300);
    color: var(--charcoal-900);
    background: transparent;
}

.header-action-btn--logout:hover {
    border-color: hsl(0, 40%, 55%);
    color: hsl(0, 40%, 45%);
    background: transparent;
}

/* ── Sidebar new-conversation — soft graphite outline ── */
.sidebar-btn {
    background: transparent;
    border: 1px solid var(--charcoal-500);
    color: var(--charcoal-700);
    font-size: var(--text-2xs);
    padding: 6px 14px;
    letter-spacing: 0.1em;
    box-shadow: none;
}

.sidebar-btn:hover {
    background: var(--charcoal-700);
    color: var(--charcoal-paper);
    border-color: var(--charcoal-700);
    box-shadow: none;
    transform: none;
}

.sidebar-btn:active {
    transform: none;
    background: var(--charcoal-900);
}

/* ── Sidebar toolbar filters — almost invisible until active ── */
.sidebar-toolbar-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--charcoal-300);
    font-size: var(--text-2xs);
    padding: 4px 10px;
    letter-spacing: 0.08em;
}

.sidebar-toolbar-btn:hover {
    background: transparent;
    border-color: var(--charcoal-100);
    color: var(--charcoal-700);
}

.sidebar-toolbar-btn.active {
    background: transparent;
    border: 1px solid var(--charcoal-500);
    color: var(--charcoal-700);
    box-shadow: none;
}

/* ── Send button — the darkest mark on the page ── */
.send-button {
    background: var(--charcoal-700);
    color: var(--charcoal-paper);
    border: 1px solid var(--charcoal-700);
    border-radius: 0;
    width: 50px;
    height: 50px;
    transition: background 180ms ease, border-color 180ms ease;
}

.send-button:hover:not(:disabled) {
    background: var(--charcoal-900);
    color: var(--charcoal-paper);
    border-color: var(--charcoal-900);
    box-shadow: none;
    transform: none;
}

.send-button:active:not(:disabled) {
    transform: none;
    background: var(--text-primary);
}

.send-button:disabled {
    opacity: 0.3;
    background: var(--charcoal-300);
    border-color: var(--charcoal-300);
}

.send-button.processing {
    background: transparent;
    border: 1px solid var(--charcoal-300);
    color: var(--charcoal-300);
}


/* ── Queue add button — muted success stroke ── */
.queue-add-btn,
.queue-add-btn.visible {
    background: transparent;
    border: 1px solid hsl(145, 25%, 45%);
    color: hsl(145, 25%, 40%);
    border-radius: 0;
    width: 50px;
    height: 50px;
}

.queue-add-btn:hover {
    background: hsl(145, 25%, 45%);
    color: var(--charcoal-paper);
    box-shadow: none;
    transform: none;
}

.queue-add-btn:active {
    transform: none;
    background: hsl(145, 25%, 38%);
}

/* ── Queue clear — faintest stroke, danger on hover ── */
.queue-clear-btn {
    background: transparent;
    border: 1px solid var(--charcoal-100);
    color: var(--charcoal-300);
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
    border-radius: 0;
}

.queue-clear-btn:hover {
    border-color: hsl(0, 40%, 55%);
    color: hsl(0, 40%, 45%);
    background: transparent;
}

/* ── Compare toggle — delicate instrument ── */
.compare-toggle-btn {
    background: transparent;
    border: 1px solid var(--charcoal-100);
    color: var(--charcoal-500);
    border-radius: 0;
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
}

.compare-toggle-btn:hover {
    border-color: var(--charcoal-500);
    color: var(--charcoal-700);
    background: transparent;
}

/* ── Template button ── */
.template-btn {
    background: transparent;
    border: 1px solid var(--charcoal-100);
    color: var(--charcoal-500);
    border-radius: 0;
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
}

.template-btn:hover {
    border-color: var(--charcoal-500);
    color: var(--charcoal-700);
    background: transparent;
}

/* ── Psychometric copy button ── */
.psych-copy-btn {
    border-radius: 0;
    border: 1px solid var(--charcoal-100);
    background: transparent;
    color: var(--charcoal-500);
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
}

.psych-copy-btn:hover {
    border-color: var(--charcoal-500);
    color: var(--charcoal-700);
    background: transparent;
}

/* ── Kebab menu ── */
.conversation-kebab-btn {
    border-radius: 0;
}

/* ── Depth selector — charcoal dropdown ── */
.depth-selector select,
#depthSelect {
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--charcoal-100);
    color: var(--charcoal-500);
    background: transparent;
}

/* ── Pedestal overrides — charcoal consistency ── */
.input-pedestal .send-button {
    border-radius: 12px;
    background: var(--charcoal-700);
    border: 1px solid var(--charcoal-700);
}

.input-pedestal .send-button:hover:not(:disabled) {
    background: var(--charcoal-900);
    border-color: var(--charcoal-900);
    color: var(--charcoal-paper);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(44, 44, 44, 0.2);
}

.input-pedestal .send-button.processing {
    background: transparent;
    border-color: var(--charcoal-300);
    color: var(--charcoal-300);
    border-radius: 12px;
}

.input-pedestal .queue-add-btn {
    border-radius: 12px;
}

/* ── Mobile charcoal buttons ── */
@media (max-width: 768px) {
    .send-button,
    .queue-add-btn,
    .queue-add-btn.visible {
        width: 100%;
        height: 44px;
        border-radius: 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   MULTI-SELECT MODE & ANALYSIS OVERLAY
   Sidebar multi-select for conversations + analysis results panel
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ MULTI-SELECT MODE ═══ */

/* Multi-select toggle active state */
.sidebar-toolbar-btn.active {
    background: var(--charcoal-700, #4a4a4a);
    color: var(--charcoal-paper, #f8f7f4);
    border-color: var(--charcoal-700, #4a4a4a);
}

/* Conversation item in multi-select mode */
.conversation-item.selected {
    background: var(--charcoal-wash);
    border-left: 2px solid var(--charcoal-700, #4a4a4a);
}

/* Checkbox styling — custom charcoal checkbox */
.conv-select-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    margin-right: 8px;
}

.conv-select-checkbox input[type="checkbox"] {
    display: none;
}

.conv-checkbox-mark {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--charcoal-300, #9a9a9a);
    border-radius: 0;
    background: transparent;
    transition: transform 150ms ease, opacity 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    position: relative;
}

.conv-select-checkbox input:checked + .conv-checkbox-mark {
    background: var(--charcoal-700, #4a4a4a);
    border-color: var(--charcoal-700, #4a4a4a);
}

/* Checkmark via pseudo-element */
.conv-select-checkbox input:checked + .conv-checkbox-mark::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: solid var(--charcoal-paper, #f8f7f4);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* ═══ MULTI-SELECT ACTION BAR ═══ */

.sidebar-multiselect-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--charcoal-wash);
    gap: 8px;
    max-height: 60px;
    overflow: hidden;
    transition: max-height 200ms var(--ease-reveal),
                opacity 150ms var(--ease-exit),
                padding 200ms var(--ease-reveal);
}

.sidebar-multiselect-bar.hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.multiselect-count {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    text-transform: uppercase;
    white-space: nowrap;
}

.multiselect-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.multiselect-btn {
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--charcoal-300, #9a9a9a);
    background: transparent;
    color: var(--charcoal-700, #4a4a4a);
    cursor: pointer;
    transition: transform 150ms ease, opacity 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    border-radius: 0;
}

.multiselect-btn:hover {
    background: var(--charcoal-700, #4a4a4a);
    border-color: var(--charcoal-700, #4a4a4a);
    color: var(--charcoal-paper, #f8f7f4);
}

.multiselect-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.multiselect-btn--analyze {
    border-color: var(--charcoal-500, #6b6b6b);
}

.multiselect-btn--merge {
    border-color: var(--charcoal-500, #6b6b6b);
}

.multiselect-btn--cancel {
    border: none;
    background: none;
    color: var(--text-muted);
    padding: 5px 6px;
    font-size: var(--text-xs-sm);
}

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

/* ═══ ANALYSIS OVERLAY ═══ */

.analysis-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1010;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: analysisOverlayIn 200ms ease;
}

@keyframes analysisOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.analysis-panel {
    width: 90%;
    max-width: 640px;
    max-height: 80vh;
    background: var(--bg-primary);
    border: 1px solid var(--charcoal-300, #9a9a9a);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: analysisPanelIn 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes analysisPanelIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

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

.analysis-title {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.analysis-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--charcoal-100, #c8c5c0);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: transform 150ms ease, opacity 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    border-radius: 0;
}

.analysis-close:hover {
    background: var(--charcoal-700, #4a4a4a);
    border-color: var(--charcoal-700, #4a4a4a);
    color: var(--charcoal-paper, #f8f7f4);
}

.analysis-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.analysis-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analysis-section-label {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.analysis-summary {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--text-primary);
}

.analysis-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.analysis-theme-tag {
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 400;
    letter-spacing: 0.06em;
    background: var(--charcoal-wash);
    border: 1px solid var(--charcoal-100, #c8c5c0);
    color: var(--charcoal-700, #4a4a4a);
}

.analysis-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analysis-list li {
    font-family: var(--font-ui);
    font-size: var(--text-xs-sm);
    line-height: 1.6;
    color: var(--text-secondary);
    padding-left: 16px;
    position: relative;
}

.analysis-list li::before {
    content: '\2014';
    position: absolute;
    left: 0;
    color: var(--charcoal-300, #9a9a9a);
}

/* ── Toggle Buttons (Settings Auto Pipeline) ── */
.toggle-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-field);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.toggle-btn.active {
    background: var(--color-active);
    color: #fff;
    border-color: var(--color-active);
}
.toggle-btn:hover {
    border-color: var(--color-active);
}

/* ── Mobile adjustments for multi-select & analysis ── */
@media (max-width: 768px) {
    .analysis-panel {
        width: 95%;
        max-height: 90vh;
    }

    .sidebar-multiselect-bar {
        flex-direction: column;
        gap: 6px;
        padding: 6px 10px;
    }

    .multiselect-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ══════════════════════════════════════════════════════════════
   Background Pipeline — P3.1 / P3.2
   ══════════════════════════════════════════════════════════════ */

/* ── Header activity indicator ── */
.bg-activity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-micro);
    color: var(--text-secondary);
}
.bg-activity.hidden { display: none; }

.bg-activity-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-active);
}

.bg-activity-text {
    white-space: nowrap;
}


/* ── BG Runs button badge ── */
.bg-run-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--color-active);
    border-radius: var(--radius-sm);
}
.bg-run-count.hidden { display: none; }

/* ── Results panel (right slide-out) ── */
.bg-results-panel {
    position: fixed;
    top: 40px;   /* below header bar */
    right: 0;
    bottom: 0;
    width: 360px;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    z-index: 200;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    font-family: var(--font-ui);
}
.bg-results-panel.hidden { display: none; }

.bg-results-panel:not(.hidden) {
    animation: panel-slide-in 250ms var(--ease-reveal) both;
}

@keyframes panel-slide-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.bg-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-chrome);
    position: sticky;
    top: 0;
}
.bg-results-header h3 {
    margin: 0;
    font-size: var(--text-xs-sm);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.bg-results-close {
    background: none;
    border: 1px solid var(--border-color);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: background 80ms ease-out, color 80ms ease-out;
}
.bg-results-close:hover {
    background: var(--bg-chrome);
    color: var(--text-primary);
}

.bg-results-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
}

.bg-results-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-xs-sm);
}

/* ── Individual run item ── */
.bg-run-item {
    position: relative;
    margin-bottom: var(--space-2);
    padding: var(--space-3);
    padding-top: calc(var(--space-3) + 2px); /* room for progress bar */
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.bg-run-item:hover {
    border-color: var(--color-active);
}

/* 2px progress bar at top of card */
.bg-run-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    transition: width 0.4s ease;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.bg-run-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}

/* Status badge */
.bg-run-status {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
}
.bg-run-status--queued {
    background: var(--bg-chrome);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
.bg-run-status--running {
    background: #e8eaf6;
    color: var(--color-active);
    border: 1px solid var(--color-active);
}
.bg-run-status--completed {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.bg-run-status--failed {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.bg-run-time {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.bg-run-query {
    font-size: var(--text-xs-sm);
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: var(--space-1);
    word-break: break-word;
}

.bg-run-summary {
    font-size: var(--text-micro);
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: var(--space-2);
    max-height: 60px;
    overflow: hidden;
}
.bg-run-summary--error {
    color: #c62828;
}

.bg-run-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.bg-run-action {
    font-family: var(--font-ui);
    font-size: var(--text-micro);
    font-weight: 600;
    padding: 2px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
}
.bg-run-action:hover {
    background: var(--bg-chrome);
    color: var(--text-primary);
    border-color: var(--color-active);
}
.bg-run-action--delete:hover {
    color: #c62828;
    border-color: #ef9a9a;
}

.bg-run-stage-text {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

/* ── Result modal ── */
.bg-result-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-result-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

.bg-result-panel {
    position: relative;
    width: 680px;
    max-width: 90vw;
    max-height: 80vh;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}

.bg-result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-chrome);
}
.bg-result-header h3 {
    margin: 0;
    font-size: var(--text-xs-sm);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}
.bg-result-meta {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.bg-result-close {
    background: none;
    border: 1px solid var(--border-color);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}
.bg-result-close:hover {
    background: var(--bg-chrome);
    color: var(--text-primary);
}

.bg-result-query {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-micro);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-mono);
}

.bg-result-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text-primary);
}

.bg-result-pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-mono);
    font-size: var(--text-xs-sm);
    margin: 0;
}

.bg-result-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border-color);
}

/* ── Toast fallback (if showToast is unavailable) ── */
.bg-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 8px 20px;
    font-family: var(--font-ui);
    font-size: var(--text-xs-sm);
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 400;
    pointer-events: none;
}
.bg-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
    .bg-results-panel {
        width: 100%;
        border-left: none;
    }
    .bg-result-panel {
        width: 95vw;
    }
    .bg-activity-text {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════
   Sidebar Upgrades (12 feature blocks)
   ══════════════════════════════════════════════════════════ */

/* ── Sidebar Upgrade: Drag & Drop ── */
.conversation-item[draggable="true"] {
    cursor: grab;
    touch-action: none;
}

.conversation-item.dragging {
    opacity: 0.4;
    transform: scale(0.98);
    z-index: 100;
    transition: opacity 100ms var(--ease-acknowledge),
                transform 100ms var(--ease-acknowledge);
    cursor: grabbing;
}

.drag-placeholder {
    background: var(--color-active, #2962ff);
    opacity: 0.15;
    border-radius: var(--radius-sm, 6px);
    margin: 2px 0;
    transition: height 150ms ease;
    pointer-events: none;
}

/* Subtle lift effect while dragging */
.drag-active .conversation-item:not(.dragging) {
    transition: transform 200ms ease;
}

.conversation-item.drag-over-above {
    box-shadow: 0 -2px 0 0 var(--text-primary);
}

.conversation-item.drag-over-below {
    box-shadow: 0 2px 0 0 var(--text-primary);
}

/* ── Sidebar Upgrade: Shift-Select Highlight ── */
.conversation-item.selected {
    background: rgba(21, 101, 192, 0.08);
    border-left: 2px solid #1565c0;
}

.conversation-item.selected .conversation-title {
    font-weight: 600;
}

/* ── Sidebar Upgrade: Multi-Select Toolbar ── */
.multi-select-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    z-index: 10;
    animation: fadeSlideIn 0.15s ease;
}

.msb-count {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 4px;
    white-space: nowrap;
}

.msb-btn {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    white-space: nowrap;
}

.msb-btn:hover {
    border-color: var(--text-primary);
    background: rgba(240, 246, 252, 0.04);
}

.msb-danger {
    color: #c62828;
    border-color: #ef9a9a;
}

.msb-danger:hover {
    background: rgba(198, 40, 40, 0.06);
    border-color: #c62828;
}

.msb-cancel {
    color: var(--text-muted);
}

/* ── Sidebar Upgrade: Search Highlight ── */
mark.search-highlight {
    background: rgba(255, 235, 59, 0.4);
    color: inherit;
    padding: 0 1px;
    border-radius: 1px;
}

/* ── Sidebar Upgrade: Message Count Badge ── */
.conv-msg-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(240, 246, 252, 0.06);
    color: var(--text-muted);
    margin-left: 6px;
    flex-shrink: 0;
}

/* ── Sidebar Upgrade: Conversation Meta (timestamp) ── */
.conversation-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 4px;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    color: var(--text-muted);
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

.conv-time {
    opacity: 0.7;
}

/* ── Sidebar Upgrade: Empty State ── */
.conversation-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    gap: 12px;
}

.empty-state-icon {
    font-size: var(--text-2xl);
    opacity: 0.4;
}

.empty-state-text {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.empty-state-cta {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 500;
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    letter-spacing: 0.04em;
    margin-top: 8px;
}

.empty-state-cta:hover {
    border-color: var(--text-primary);
    background: rgba(240, 246, 252, 0.04);
}

/* ── Sidebar Upgrade: Context Menu Enhancements ── */
.context-menu-item .context-menu-shortcut {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    color: var(--text-muted);
    margin-left: auto;
    padding-left: 12px;
    letter-spacing: 0.05em;
}

/* ── Sidebar Upgrade: Duplicate animation ── */
@keyframes duplicateFlash {
    0% { background: rgba(21, 101, 192, 0.15); }
    100% { background: transparent; }
}

.conversation-item.just-duplicated {
    animation: duplicateFlash 0.8s ease;
}

/* ── Sidebar Upgrade: Conversation item refinements ── */
.conversation-item {
    transition: background 0.12s ease, border-color 0.12s ease, opacity 0.15s ease, transform 0.12s ease;
    position: relative;
}

.conversation-item:active {
    transform: scale(0.99);
}

/* Hover preview tooltip */
.conversation-item[data-preview]:hover::after {
    content: attr(data-preview);
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    width: 240px;
    max-height: 120px;
    overflow: hidden;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 100;
    pointer-events: none;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Hide preview tooltip on mobile */
@media (max-width: 768px) {
    .conversation-item[data-preview]:hover::after {
        display: none;
    }

    .multi-select-bar {
        flex-wrap: wrap;
    }
}

/* ── Memory Explorer Panel ── */
.memory-explorer-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 4px 8px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    width: calc(100% - 16px);
    text-align: left;
}

.memory-explorer-link:hover {
    color: var(--text-primary);
    border-color: var(--border-color);
    background: rgba(240, 246, 252, 0.03);
}

.memory-explorer-link .mem-icon {
    font-size: var(--text-xs);
    flex-shrink: 0;
}

.memory-explorer-link .mem-badge {
    margin-left: auto;
    font-size: var(--text-3xs);
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(240, 246, 252, 0.06);
    color: var(--text-muted);
}

.memory-explorer-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 480px;
    height: 100vh;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.06);
}

.memory-explorer-panel.open {
    transform: translateX(0);
}

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

.memory-explorer-title {
    font-family: var(--font-mono);
    font-size: var(--text-xs-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.memory-explorer-close {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.memory-explorer-close:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.memory-explorer-status {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.mem-status-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mem-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #aaa;
    flex-shrink: 0;
}

.mem-status-dot.ok { background: #2e7d32; }
.mem-status-dot.failed { background: #c62828; }
.mem-status-dot.disabled { background: #f57f17; }

.memory-explorer-filters {
    display: flex;
    gap: 4px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-color);
}

.mem-filter-btn {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.mem-filter-btn:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.mem-filter-btn.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.memory-explorer-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.mem-fact-card {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(240, 246, 252, 0.06);
    transition: background 0.1s ease;
    cursor: default;
}

.mem-fact-card:hover {
    background: rgba(240, 246, 252, 0.03);
}

.mem-fact-claim {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.mem-fact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    color: var(--text-muted);
}

.mem-fact-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border: 1px solid;
    border-radius: var(--radius-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mem-fact-badge.pending {
    border-color: #f9a825;
    color: #f57f17;
}

.mem-fact-badge.verified {
    border-color: #2e7d32;
    color: #2e7d32;
}

.mem-fact-badge.disputed {
    border-color: #c62828;
    color: #c62828;
}

.mem-fact-badge.retracted {
    border-color: #888;
    color: #888;
    text-decoration: line-through;
}

.mem-fact-confidence {
    font-weight: 700;
}

.mem-fact-type {
    font-style: italic;
}

.mem-fact-corr {
    color: #2e7d32;
}

.mem-fact-contr {
    color: #c62828;
}

.memory-explorer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    gap: 8px;
}

.memory-explorer-empty-icon {
    font-size: var(--text-3xl);
    opacity: 0.3;
}

.memory-explorer-empty-text {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.memory-explorer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

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

@media (max-width: 768px) {
    .memory-explorer-panel {
        width: 100%;
    }
}

/* ── Epistemic Watermarks ── */
.epistemic-watermark {
    display: inline;
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    color: var(--color-active);
    opacity: 0.65;
    letter-spacing: 0.3px;
    vertical-align: super;
    margin-left: 2px;
    cursor: help;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.epistemic-watermark:hover {
    opacity: 1;
}
.epistemic-watermark[data-source="epistemic_audit"] { color: #e65100; }
.epistemic-watermark[data-source="domain1"] { color: #1565c0; }
.epistemic-watermark[data-source="domain2"] { color: #2e7d32; }
.epistemic-watermark[data-source="domain3"] { color: #b39ddb; }
.epistemic-watermark[data-source="adjudication"] { color: #c62828; }

/* ── Mentat Lite System ── */

/* Description header for Mentat Lite conversation */
.mm-description {
    padding: var(--space-6) var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-4);
}
.mm-description-title {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.mm-description-body {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 520px;
}

/* Mentat Lite Word Cloud — Academic Weighted Index */
.thought-word-cloud {
    margin-top: var(--space-4);
    padding: var(--space-3) 0;
    line-height: 1.9;
    text-align: left;
    max-width: 640px;
    min-height: 48px;
    transition: opacity 0.4s ease;
    border-top: 1px solid var(--border-light);
}
.thought-word-cloud:empty {
    display: none;
}
.cloud-word {
    display: inline;
    font-family: var(--font-mono);
    font-size: var(--text-xs-sm);
    letter-spacing: 0.01em;
    padding: 0;
    margin-right: 2px;
    cursor: default;
    transition: opacity 0.15s ease;
    user-select: none;
}
.cloud-word::after {
    content: ' · ';
    font-weight: 300;
    opacity: 0.25;
    color: var(--text-muted);
}
.cloud-word:last-child::after {
    content: '';
}
.cloud-word:hover {
    opacity: 1 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cloud-freq {
    font-size: var(--text-3xs);
    font-weight: 400;
    opacity: 0.5;
    margin-left: 1px;
    vertical-align: super;
}

/* Base thought container — ambient intelligence strip */
.minimind-thought {
    position: relative;
    padding: var(--space-3) var(--space-4);
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--border-light);
    background: var(--glass-bg-light);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid var(--glass-border-subtle);
    border-left: 2px solid var(--border-light);
    animation: mmThoughtIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* Type badge — monospace pill before content */
.minimind-thought .mm-type-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: var(--radius-xs);
    margin-bottom: var(--space-2);
    line-height: 1.6;
}

/* Author line */
.minimind-thought .message-author {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Content area — tighter line-height for ambient feel */
.minimind-thought .message-content {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
    padding-left: 0;
    border-left: none;
}

/* Hover lift — subtle attention signal */
.minimind-thought:hover {
    background: hsla(225, 15%, 12%, 0.8);
    border-left-color: var(--color-active);
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

/* ── Per-type color treatments ── */

/* PATTERN — warm amber: recurring structures */
.minimind-thought.mm-pattern {
    border-left-color: #e65100;
}
.minimind-thought.mm-pattern .mm-type-badge {
    color: #e65100;
    background: rgba(230, 81, 0, 0.08);
}
.minimind-thought.mm-pattern .message-author { color: #ff8a65; }

/* CONNECTION — teal: bridging ideas */
.minimind-thought.mm-connection {
    border-left-color: #00796b;
}
.minimind-thought.mm-connection .mm-type-badge {
    color: #00796b;
    background: rgba(0, 121, 107, 0.08);
}
.minimind-thought.mm-connection .message-author { color: #4db6ac; }

/* QUESTION — indigo: epistemic probing */
.minimind-thought.mm-question {
    border-left-color: var(--color-active);
}
.minimind-thought.mm-question .mm-type-badge {
    color: var(--color-active);
    background: var(--color-active-soft);
}
.minimind-thought.mm-question .message-author { color: #7986cb; }

/* CORRECTION — steel blue: factual refinement */
.minimind-thought.mm-correction {
    border-left-color: #1565c0;
}
.minimind-thought.mm-correction .mm-type-badge {
    color: #1565c0;
    background: rgba(21, 101, 192, 0.08);
}
.minimind-thought.mm-correction .message-author { color: #64b5f6; }

/* SYNTHESIS — deep purple: convergent insight */
.minimind-thought.mm-synthesis {
    border-left-color: #b39ddb;
}
.minimind-thought.mm-synthesis .mm-type-badge {
    color: #b39ddb;
    background: rgba(179, 157, 219, 0.08);
}
.minimind-thought.mm-synthesis .message-author { color: #4a148c; }

/* DISSENT — red: active challenge */
.minimind-thought.mm-dissent {
    border-left-color: #c62828;
    background: rgba(198, 40, 40, 0.03);
}
.minimind-thought.mm-dissent .mm-type-badge {
    color: #c62828;
    background: rgba(198, 40, 40, 0.08);
}
.minimind-thought.mm-dissent .message-author { color: #b71c1c; }

/* Compaction summary — dashed border to distinguish from organic thoughts */
.minimind-thought.mm-compaction {
    border-left-style: dashed;
    opacity: 0.85;
}
.minimind-thought.mm-compaction .mm-type-badge::after {
    content: " (rolled up)";
    font-size: 0.75em;
    opacity: 0.6;
}

/* ── Thought Collapse/Expand (pedestal stack) ── */

/* Collapsed thought — single compact log line */
.minimind-thought.thought-collapsed {
    padding: var(--space-1) var(--space-3);
    padding-left: var(--space-4);
    margin-bottom: 2px;
    cursor: pointer;
    overflow: hidden;
    border-left-width: 1px;
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out),
                padding 250ms var(--ease-out),
                margin 250ms var(--ease-out),
                background 250ms var(--ease-out);
}
.minimind-thought.thought-collapsed:hover {
    opacity: 1;
    background: hsla(225, 15%, 12%, 0.9);
}
/* Hide full content, header, actions in collapsed state */
.minimind-thought.thought-collapsed .message-content,
.minimind-thought.thought-collapsed .message-header,
.minimind-thought.thought-collapsed .message-actions {
    display: none;
}
/* Hide badge in collapsed — replaced by inline summary */
.minimind-thought.thought-collapsed .mm-type-badge {
    display: none;
}
/* Collapsed summary row */
.thought-collapsed-summary {
    display: none;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    color: var(--text-muted);
}
.minimind-thought.thought-collapsed .thought-collapsed-summary {
    display: flex;
}
.thought-collapsed-summary .tc-badge {
    flex-shrink: 0;
    font-weight: 700;
    font-size: var(--text-3xs);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 0 5px;
    border-radius: var(--radius-xs);
    line-height: 18px;
}
.thought-collapsed-summary .tc-preview {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
    opacity: 0.7;
}
.thought-collapsed-summary .tc-time {
    flex-shrink: 0;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    opacity: 0.6;
}
.thought-collapsed-summary .tc-chevron {
    flex-shrink: 0;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    opacity: 0.5;
    transition: transform 200ms var(--ease-out);
}

/* Expanded thought — full display (default) */
.minimind-thought.thought-expanded {
    transition: padding 250ms var(--ease-out),
                margin 250ms var(--ease-out),
                opacity 250ms var(--ease-out);
}
.minimind-thought.thought-expanded .thought-collapsed-summary {
    display: none;
}
/* Chevron rotates when expanded */
.minimind-thought.thought-expanded .tc-chevron {
    transform: rotate(90deg);
}

/* Legacy class compat */
.minimind-dissent {
    border-left: 3px solid #c62828;
    background: rgba(198, 40, 40, 0.04);
}

/* ── Thought Annotation (inline in target conversations) ── */
/* Thought Annotation — Professional sticky note treatment */
.thought-annotation {
    position: relative;
    padding: var(--space-4) var(--space-4) var(--space-3);
    margin: var(--space-4) var(--space-2);
    border-radius: 2px 2px var(--radius-sm) var(--radius-sm);
    border: 1px solid rgba(179, 157, 219, 0.15);
    border-top: 3px solid #b39ddb;
    background: linear-gradient(168deg, hsla(270, 15%, 10%, 0.95) 0%, hsla(270, 10%, 12%, 0.9) 100%);
    font-size: var(--text-sm);
    animation: stickyNoteIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    box-shadow: 0 2px 8px rgba(179, 157, 219, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
    max-width: 520px;
}
.thought-annotation::before {
    content: '📌';
    position: absolute;
    top: -2px;
    right: var(--space-3);
    font-size: var(--text-xs-sm);
    opacity: 0.5;
    transform: rotate(15deg);
}
.thought-annotation:hover {
    box-shadow: 0 4px 14px rgba(106, 27, 154, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
@keyframes stickyNoteIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.thought-annotation .annotation-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.thought-annotation .annotation-label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #b39ddb;
    opacity: 0.7;
}
.thought-annotation .mm-type-badge {
    font-size: var(--text-2xs);
    padding: 1px 7px;
    margin-bottom: 0;
    border-radius: var(--radius-xs);
    font-weight: 600;
}
.thought-annotation .annotation-content {
    color: var(--text-primary);
    line-height: 1.55;
    font-size: var(--text-sm);
}
.thought-annotation .annotation-content p { margin: 0; }
.thought-annotation .annotation-time {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(179, 157, 219, 0.08);
}

/* Per-type top border colors */
.thought-annotation.mm-pattern { border-top-color: #b8860b; }
.thought-annotation.mm-pattern::before { content: '💡'; }
.thought-annotation.mm-connection { border-top-color: #00897b; }
.thought-annotation.mm-connection::before { content: '🔗'; }
.thought-annotation.mm-question { border-top-color: #7986cb; }
.thought-annotation.mm-question::before { content: '❓'; }
.thought-annotation.mm-correction { border-top-color: #1565c0; }
.thought-annotation.mm-correction::before { content: '🔧'; }
.thought-annotation.mm-synthesis { border-top-color: #b39ddb; }
.thought-annotation.mm-synthesis::before { content: '🧩'; }
.thought-annotation.mm-dissent { border-top-color: #c62828; }
.thought-annotation.mm-dissent::before { content: '⚡'; }

/* ── Annotation Collapse/Expand ── */

/* Collapsed annotation — compact single line */
.thought-annotation.annotation-collapsed {
    padding: 6px 12px;
    margin: 2px var(--space-2);
    cursor: pointer;
    overflow: hidden;
    border-top-width: 2px;
    opacity: 0.65;
    max-width: none;
    box-shadow: none;
    transition: opacity var(--duration-fast) var(--ease-out),
                padding 250ms var(--ease-out),
                margin 250ms var(--ease-out);
}
.thought-annotation.annotation-collapsed:hover {
    opacity: 0.9;
}
.thought-annotation.annotation-collapsed::before {
    display: none;
}
/* Hide full content in collapsed annotations */
.thought-annotation.annotation-collapsed .annotation-header,
.thought-annotation.annotation-collapsed .annotation-content,
.thought-annotation.annotation-collapsed .annotation-time {
    display: none;
}
/* Show compact summary row */
.thought-annotation.annotation-collapsed .annotation-collapsed-summary {
    display: flex;
}

/* Summary row — hidden by default */
.annotation-collapsed-summary {
    display: none;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    color: var(--text-muted);
}
.annotation-collapsed-summary .tc-badge {
    flex-shrink: 0;
    font-weight: 700;
    font-size: var(--text-3xs);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 0 5px;
    border-radius: var(--radius-xs);
    line-height: 18px;
}
.annotation-collapsed-summary .tc-preview {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
    opacity: 0.7;
}
.annotation-collapsed-summary .tc-time {
    flex-shrink: 0;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    opacity: 0.6;
}
.annotation-collapsed-summary .tc-chevron {
    flex-shrink: 0;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    opacity: 0.5;
    transition: transform 200ms var(--ease-out);
}

/* Expanded annotation — full display (default) */
.thought-annotation.annotation-expanded {
    cursor: pointer;
}
.thought-annotation.annotation-expanded .annotation-collapsed-summary {
    display: none;
}
.thought-annotation.annotation-expanded .tc-chevron {
    transform: rotate(90deg);
}

/* ── Red Dot Unread Badge ── */
.thought-unread-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #d32f2f;
    color: #ffffff;
    font-size: var(--text-2xs);
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1;
    margin-left: var(--space-1);
    animation: dotPulse 1.5s var(--ease-out) both;
}
@keyframes dotPulse {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── Infinite Scroll / Lazy Loading ── */
.load-more-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}
.load-more-sentinel.loading {
    opacity: 1;
}
.load-more-sentinel .sentinel-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-light);
    border-top-color: var(--color-active);
    border-radius: 50%;
}
.message.no-animate {
    animation: none !important;
}

/* -- Cognitive Load Barometer -- */
.cognitive-barometer {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background: var(--bg-field);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}
.cb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}
.cb-title {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}
.cb-score {
    font-size: var(--text-xl);
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1;
}
.cb-bar-track {
    height: 4px;
    background: hsl(220, 14%, 20%);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-bottom: var(--space-1);
}
.cb-bar-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-label {
    font-size: var(--text-micro);
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.cb-metrics {
    display: flex;
    gap: var(--space-3);
}
.cb-metric {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.cb-metric-label {
    font-size: var(--text-3xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.cb-metric-value {
    font-size: var(--text-xs);
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

/* ── Belief Graph ── */
.belief-graph-overlay {
    position: fixed;
    inset: 0;
    z-index: 1010;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.belief-graph-container {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-width: 850px;
    width: 90vw;
}
.belief-graph-header {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    gap: var(--space-3);
}
.belief-graph-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.belief-graph-stats {
    font-size: var(--text-micro);
    color: var(--text-muted);
    flex: 1;
}
.belief-graph-close {
    background: none;
    border: none;
    font-size: var(--text-lg);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
}
.belief-graph-close:hover {
    color: var(--text-primary);
}
.belief-graph-legend {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border-light);
    font-size: var(--text-micro);
    color: var(--text-secondary);
}
.bg-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.bg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* ── Dialectical Recursion ── */
.recursion-indicator {
    padding: var(--space-2) var(--space-3);
    margin: var(--space-2) 0;
    font-size: var(--text-xs-sm);
    color: var(--text-secondary);
    border-left: 3px solid var(--color-active);
    background: var(--color-active-soft);
}
.recursion-badge {
    display: inline-block;
    font-size: var(--text-3xs);
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-active);
    background: var(--color-active-glow);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    margin-right: var(--space-2);
}
.recursion-complete {
    border-left-color: var(--color-success);
    color: var(--color-success);
}

/* ============ EPISTEMIC SELF-MODEL ============ */
.stats-ep-tendencies {
    margin-top: var(--space-2);
}
.stats-ep-tendency {
    font-size: var(--text-micro);
    color: var(--text-secondary);
    padding: var(--space-1) 0;
    border-left: 2px solid var(--color-active);
    padding-left: var(--space-2);
    margin-bottom: var(--space-1);
}

/* ── API Documentation Modal ── */
.api-docs-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s var(--ease-out) both;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Stagger choreography — list items animate in sequence */
@keyframes staggerFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes staggerScaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Utility classes for stagger animation */
.stagger-list > * {
    opacity: 0;
    animation: staggerFadeIn var(--duration-base) var(--ease-stagger) both;
}

.stagger-list > *:nth-child(1) { animation-delay: var(--stagger-1); }
.stagger-list > *:nth-child(2) { animation-delay: var(--stagger-2); }
.stagger-list > *:nth-child(3) { animation-delay: var(--stagger-3); }
.stagger-list > *:nth-child(4) { animation-delay: var(--stagger-4); }
.stagger-list > *:nth-child(5) { animation-delay: var(--stagger-5); }
.stagger-list > *:nth-child(6) { animation-delay: var(--stagger-6); }
.stagger-list > *:nth-child(7) { animation-delay: var(--stagger-7); }
.stagger-list > *:nth-child(8) { animation-delay: var(--stagger-8); }
.stagger-list > *:nth-child(9) { animation-delay: var(--stagger-9); }
.stagger-list > *:nth-child(10) { animation-delay: var(--stagger-10); }

/* Variant: scale-in stagger */
.stagger-scale > * {
    opacity: 0;
    animation: staggerScaleIn var(--duration-base) var(--ease-stagger) both;
}

.stagger-scale > *:nth-child(1) { animation-delay: var(--stagger-1); }
.stagger-scale > *:nth-child(2) { animation-delay: var(--stagger-2); }
.stagger-scale > *:nth-child(3) { animation-delay: var(--stagger-3); }
.stagger-scale > *:nth-child(4) { animation-delay: var(--stagger-4); }
.stagger-scale > *:nth-child(5) { animation-delay: var(--stagger-5); }
.stagger-scale > *:nth-child(6) { animation-delay: var(--stagger-6); }
.stagger-scale > *:nth-child(7) { animation-delay: var(--stagger-7); }
.stagger-scale > *:nth-child(8) { animation-delay: var(--stagger-8); }
.stagger-scale > *:nth-child(9) { animation-delay: var(--stagger-9); }
.stagger-scale > *:nth-child(10) { animation-delay: var(--stagger-10); }

.api-docs-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    width: min(900px, 92vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.25s var(--ease-out) both;
}

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

.api-docs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.api-docs-title {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

.api-docs-close {
    background: none;
    border: none;
    font-size: var(--text-2xl);
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1);
    line-height: 1;
    transition: color var(--duration-fast) var(--ease-out);
}
.api-docs-close:hover { color: var(--text-primary); }

.api-docs-body {
    overflow-y: auto;
    padding: var(--space-6);
    flex: 1;
}

.api-section {
    margin-bottom: var(--space-8);
}
.api-section:last-child { margin-bottom: 0; }

.api-section-title {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light);
}

.api-endpoint {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.api-endpoint:hover { border-color: var(--color-active); }

.api-method-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.api-method {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    color: #fff;
    min-width: 44px;
    text-align: center;
}
.api-method-get { background: #2e7d32; }
.api-method-post { background: #1565c0; }
.api-method-put { background: #e65100; }
.api-method-delete { background: #c62828; }
.api-method-ws { background: #6a1b9a; }

.api-path {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.api-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
}

.api-details {
    margin-top: var(--space-2);
}
.api-details h4 {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: var(--space-2) 0 var(--space-1) 0;
}

.api-code-block {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs-sm);
    line-height: 1.5;
    background: var(--bg-chrome);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
}

.api-auth-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: rgba(37, 99, 235, 0.08);
    color: var(--color-active);
    margin-left: var(--space-2);
}

/* ── API Docs: Dark code blocks ── */

.api-dark-code {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs-sm);
    line-height: 1.6;
    background: var(--bg-field);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    white-space: pre;
    overflow-x: auto;
    margin: var(--space-2) 0;
}

.api-syntax-cmd  { color: #0550ae; font-weight: 600; }
.api-syntax-str  { color: #0a3069; }
.api-syntax-kw   { color: #cf222e; }
.api-syntax-num  { color: #6639ba; }
.api-syntax-comment { color: #6e7781; font-style: italic; }

.api-inline-code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-chrome);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xs);
    padding: 1px 5px;
    color: var(--text-primary);
}

.api-desc--note {
    font-size: var(--text-xs-sm);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* ── API Docs: Model table ── */

.api-model-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--text-xs-sm);
    margin: var(--space-2) 0;
}

.api-model-table th {
    text-align: left;
    font-weight: 700;
    font-size: var(--text-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    border-bottom: 2px solid var(--border-color);
}

.api-model-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.api-model-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.04);
}

/* ============ MENTAT LITE BANNER ============ */
/* Premium status strip — always-visible at sidebar top */

.private-thoughts-banner {
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(180deg, rgba(106, 27, 154, 0.03) 0%, rgba(106, 27, 154, 0.01) 100%);
    border-bottom: 1px solid rgba(179, 157, 219, 0.15);
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-out);
    border-left: 3px solid transparent;
    position: relative;
    flex-shrink: 0;
}

.private-thoughts-banner:hover {
    background: linear-gradient(180deg, rgba(106, 27, 154, 0.06) 0%, rgba(106, 27, 154, 0.02) 100%);
}

.private-thoughts-banner.active {
    border-left-color: #b39ddb;
    background: linear-gradient(180deg, rgba(179, 157, 219, 0.08) 0%, rgba(106, 27, 154, 0.03) 100%);
}

.private-thoughts-banner-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.private-thoughts-banner-title {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-style: italic;
}

.private-thoughts-banner.active .private-thoughts-banner-title {
    color: var(--text-secondary);
}

.private-thoughts-banner-count {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: rgba(179, 157, 219, 0.12);
    color: #b39ddb;
    margin-left: auto;
}

.private-thoughts-banner-wordcloud {
    max-height: 80px;
    overflow: hidden;
    margin-top: var(--space-2);
}

/* ── Persistent Mentat Lite Column (right side) ── */
.thoughts-column {
    flex: 0 0 340px;
    width: 340px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--glass-border-subtle);
    background: var(--glass-bg-light);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    min-height: 0;
    overflow: hidden;
}

.thoughts-column-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--glass-border-subtle);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(240, 246, 252, 0.03);
    flex-shrink: 0;
}

.thoughts-column-title {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.thoughts-column-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: var(--radius-xs);
    background: rgba(179, 157, 219, 0.12);
    color: #b39ddb;
}

/* ── Noun frequency table ── */
.thoughts-noun-table {
    flex-shrink: 0;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: 1px solid var(--border-light);
    scrollbar-width: thin;
}

.thoughts-noun-table:empty {
    display: none;
}

.thoughts-noun-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: 1.45;
}

.thoughts-noun-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-chrome);
    padding: 4px 10px;
    text-align: left;
    font-weight: 600;
    font-size: var(--text-2xs);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}

.thoughts-noun-table thead th:last-child {
    text-align: right;
    width: 40px;
}

.thoughts-noun-table tbody tr:nth-child(even) {
    background: rgba(240, 246, 252, 0.03);
}

.thoughts-noun-table tbody td {
    padding: 3px 10px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.thoughts-noun-table tbody td:last-child {
    text-align: right;
    color: #b39ddb;
    font-weight: 600;
}

.thoughts-noun-table .noun-empty {
    padding: 10px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    opacity: 0.5;
}

/* ── Latest thought area ── */
.thoughts-latest-thought {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.thoughts-column-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px;
    min-height: 0;
    scrollbar-width: thin;
}

.thoughts-column-messages .minimind-thought {
    margin-bottom: 0;
    font-size: var(--text-xs);
}

.thoughts-column-messages .minimind-thought .message-content {
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.thoughts-column-messages .minimind-thought.thought-expanded .message-content {
    max-height: none !important;
    overflow: visible;
    -webkit-line-clamp: unset;
    display: block;
}

.thoughts-column-messages .minimind-thought .message-header {
    font-size: var(--text-2xs);
}

.thoughts-column-messages .minimind-thought .mm-type-badge {
    font-size: var(--text-3xs);
}

.thoughts-column-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 8px;
}

.thoughts-column-empty-text {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
    opacity: 0.5;
}

/* Mobile toggle button */
.thoughts-column-toggle {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-chrome);
    color: #b39ddb;
    cursor: pointer;
    z-index: 998;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: background var(--duration-fast) var(--ease-out);
}

.thoughts-column-toggle:hover {
    background: var(--bg-surface);
}

/* (Thoughts column 768px rules removed — already covered by 1024px consolidated block) */

/* ============ ADMIN PANEL ============ */

.admin-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-panel-overlay.hidden { display: none; }

.admin-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.admin-panel-container {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl, 20px);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.admin-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-chrome);
    border-radius: 20px 20px 0 0;
}

.admin-panel-title {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--text-primary);
}

.admin-panel-close {
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    transition: color var(--duration-fast) var(--ease-out);
}
.admin-panel-close:hover { color: var(--color-active); }

/* Tabs */
.admin-panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-chrome);
}

.admin-panel-tab {
    flex: 1;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.admin-panel-tab:hover { color: var(--color-active); }
.admin-panel-tab.active {
    color: var(--color-active);
    border-bottom-color: var(--color-active);
}

/* Body */
.admin-panel-body {
    padding: 20px;
}
.admin-panel-body.hidden { display: none; }

.admin-panel-desc {
    font-family: var(--font-ui);
    font-size: var(--text-xs-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Fields */
.admin-panel-field {
    margin-bottom: 12px;
}

.admin-panel-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-4xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.admin-panel-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--bg-field);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-primary);
    transition: border-color 0.15s;
}
.admin-panel-input:focus {
    outline: none;
    border-color: var(--text-primary);
}
.admin-panel-input::placeholder {
    color: var(--text-muted);
    font-size: var(--text-micro);
}

/* Error */
.admin-panel-error {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    color: var(--color-error);
    margin-bottom: 8px;
}
.admin-panel-error.hidden { display: none; }

/* Submit */
.admin-panel-submit {
    width: 100%;
    padding: 11px 24px;
    background: var(--text-primary);
    color: #fff;
    border: none;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-top: 4px;
}
.admin-panel-submit:hover { opacity: 0.8; }
.admin-panel-submit:active { opacity: 0.65; }

/* Result */
.admin-panel-result {
    margin-top: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-chrome);
    padding: 12px 16px;
}
.admin-panel-result.hidden { display: none; }

.admin-panel-result-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}
.admin-panel-result-row:last-child { border-bottom: none; }

.admin-panel-result-label {
    font-family: var(--font-mono);
    font-size: var(--text-4xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 90px;
}

.admin-panel-result-value {
    font-family: var(--font-ui);
    font-size: var(--text-xs-sm);
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-panel-result-value--mono {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
}
.admin-panel-result-value--url {
    font-size: var(--text-2xs);
    color: var(--text-link);
}

.admin-panel-copy-btn {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-4xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 3px 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.admin-panel-copy-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

/* Section: Existing Codes */
.admin-panel-section {
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
}

.admin-panel-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.admin-panel-section-title {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}

.admin-panel-refresh-btn {
    font-family: var(--font-mono);
    font-size: var(--text-4xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.admin-panel-refresh-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

/* Codes List */
.admin-panel-codes-list {
    max-height: 260px;
    overflow-y: auto;
}

.admin-panel-codes-empty {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
}

/* Code Card */
.admin-panel-code-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-light);
    margin-bottom: 6px;
    background: var(--bg-field);
    transition: border-color 0.15s;
}
.admin-panel-code-card:hover { border-color: var(--border-color); }

.admin-panel-code-value {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.admin-panel-code-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-panel-code-meta-row {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    color: var(--text-muted);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badges */
.admin-panel-badge {
    font-family: var(--font-mono);
    font-size: var(--text-4xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 1px;
    flex-shrink: 0;
}
.admin-panel-badge--active {
    background: hsla(145, 50%, 45%, 0.12);
    color: hsl(145, 50%, 35%);
    border: 1px solid hsla(145, 50%, 45%, 0.25);
}
.admin-panel-badge--redeemed {
    background: hsla(220, 50%, 50%, 0.10);
    color: hsl(220, 50%, 45%);
    border: 1px solid hsla(220, 50%, 50%, 0.20);
}
.admin-panel-badge--expired {
    background: hsla(217, 91%, 53%, 0.10);
    color: hsl(217, 91%, 40%);
    border: 1px solid hsla(217, 91%, 53%, 0.20);
}
.admin-panel-badge--revoked {
    background: hsla(0, 50%, 50%, 0.10);
    color: hsl(0, 50%, 42%);
    border: 1px solid hsla(0, 50%, 50%, 0.20);
}

.admin-panel-code-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.admin-panel-action-btn {
    font-family: var(--font-mono);
    font-size: var(--text-4xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-light);
    padding: 3px 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.admin-panel-action-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-color);
}
.admin-panel-action-btn--revoke:hover {
    color: var(--color-error);
    border-color: var(--color-error);
}

/* Admin button in header */
.header-action-btn--admin {
    color: var(--color-active);
    font-weight: 600;
}
.header-action-btn--admin.hidden { display: none; }

/* (480px admin-panel rules moved to consolidated 480px block) */

/* ================================================================
   MOBILE RESPONSIVENESS — Consolidated Breakpoints
   ================================================================
   Desktop: max-width: 1024px  — sidebar narrower, TM column hidden
   Tablet:  max-width: 768px   — single column, off-screen panels
   Mobile:  max-width: 640px   — compact content, stacked inputs
   Small:   max-width: 480px   — compact spacing, stacked controls
   ================================================================ */

/* ── Mobile: 640px ── */
@media (max-width: 640px) {
    /* --- Inline comparison sidebar: stack columns --- */
    .inline-comp-sidebar {
        flex-direction: column;
    }
    .psych-model-grid {
        grid-template-columns: 1fr;
    }

    /* --- Chat lotus: smaller on mobile --- */
    .chat-lotus {
        width: 128px;
        height: 128px;
        top: var(--space-2);
        right: var(--space-3);
    }

    /* --- Empty state: single column --- */
    .empty-state-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .empty-state {
        min-height: 40vh;
        padding: var(--space-6) var(--space-4) var(--space-4);
    }
    .empty-state-heading {
        font-size: var(--text-2xl);
    }
    .empty-state-card {
        min-height: auto;
        padding: var(--space-3);
    }

    /* --- CHC chart: full width, wrap legend --- */
    .chc-chart {
        max-width: 100%;
    }
    .chc-legend {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* --- Suggestion chips: compact --- */
    .suggestion-chips { padding: 6px 8px; gap: 4px; }
    .suggestion-chip { font-size: var(--text-2xs); padding: 4px 8px; max-width: 100%; }

    /* --- Exposition: mobile spacing --- */
    .exposition-body {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
    .exposition-header {
        padding: var(--space-2) var(--space-3);
    }

    /* --- Eval scales: single column --- */
    .eval-scales {
        grid-template-columns: 1fr;
    }
    .eval-iq-section {
        gap: var(--space-3);
    }
    .eval-iq-value {
        font-size: var(--text-3xl);
    }

    /* --- Input toolbar: stack vertically --- */
    .input-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    .api-key-input input { width: 100%; }
    .input-row {
        flex-direction: column;
        align-items: stretch;
    }
    .send-button { width: 100%; }
    .input-pedestal .send-button { width: 100%; border-radius: 12px; }
    .input-pedestal { padding: var(--space-4) var(--space-4); }
    .login-panel { width: 90vw; max-width: 380px; }
    .scroll-to-bottom-btn {
        bottom: var(--space-2);
        right: var(--space-2);
        width: 36px;
        height: 36px;
        font-size: var(--text-md);
    }

    /* --- Copy button: always visible on touch --- */
    .message-copy-btn {
        visibility: visible;
        opacity: 0.6;
    }
    .message-copy-btn:active {
        opacity: 1;
    }

    /* --- Template dropdown: centered modal on mobile --- */
    .template-dropdown {
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 10px;
        right: 10px;
        max-height: 50vh;
        animation: template-fade-in-mobile 0.2s ease;
    }
    @keyframes template-fade-in-mobile {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(-50%); }
    }
    .char-counter {
        font-size: var(--text-2xs);
    }
    .char-progress-bar {
        width: 60px;
    }

    /* --- Header dropdown & toasts: full-width on mobile --- */
    .header-dropdown-menu {
        right: -20px;
    }
    .toast-notification {
        left: var(--space-4);
        right: var(--space-4);
        transform: none;
        max-width: none;
    }
    @keyframes toast-in {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes toast-out {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(20px); }
    }

    /* --- Search modal, context menu, tag popover --- */
    .search-modal-content {
        width: 95%;
        max-height: 80vh;
    }
    .context-menu {
        max-width: calc(100vw - 40px);
    }
    .tag-popover {
        position: fixed;
        left: 10px !important;
        right: 10px !important;
        width: auto;
    }

    /* --- Message action bar: always visible on touch --- */
    .message-action-bar {
        visibility: visible;
        opacity: 0.7;
    }
    .message-action-btn {
        padding: 6px 8px;
    }

    /* --- Undo toast: full-width on mobile --- */
    .undo-toast,
    .undo-confirmation-toast {
        left: var(--space-4);
        right: var(--space-4);
        transform: none;
        max-width: none;
    }
    @keyframes undo-toast-in {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes undo-toast-out {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(20px); }
    }
    @keyframes undo-confirm-in {
        from { opacity: 0; transform: scale(0.9); }
        to { opacity: 1; transform: scale(1); }
    }
    @keyframes undo-confirm-out {
        from { opacity: 1; transform: scale(1); }
        to { opacity: 0; transform: scale(0.9); }
    }
    .shortcuts-panel {
        width: 95%;
        max-height: 90vh;
    }
    .shortcuts-footer {
        flex-direction: column;
        gap: var(--space-1);
        text-align: center;
    }
}

/* ── Desktop: 1024px ── */
@media (max-width: 1024px) {
    /* Narrow sidebar on tablet */
    :root {
        --sidebar-width: 260px;
    }

    /* Hide thoughts column on tablet — toggle button appears */
    .thoughts-column {
        position: fixed;
        top: 0;
        right: -360px;
        width: 340px;
        max-width: 85vw;
        height: 100vh;
        z-index: 999;
        transition: right var(--duration-slow) var(--ease-out);
        box-shadow: -4px 0 16px rgba(0,0,0,0.15);
    }

    .thoughts-column.open {
        right: 0;
    }

    .thoughts-column-toggle {
        display: flex;
    }

    /* Stack comparison grid on tablet */
    .inline-response-grid.has-comparisons {
        grid-template-columns: 1fr;
    }

    .inline-comp-sidebar {
        border-left: none;
        border-top: 1px solid var(--border-light);
    }

    /* Header: hide less important items on tablet */
    .header-center {
        display: none;
    }
}

/* ── Tablet: 768px ── */
@media (max-width: 768px) {
    /* --- Body & Typography --- */
    body {
        font-size: var(--text-sm);
        overflow-x: hidden;
        height: 100dvh;
    }

    /* --- Message content tables: compact on mobile --- */
    .message-content table { font-size: var(--text-xs-sm); }
    .message-content th { white-space: normal; }
    .message-content td,
    .message-content th { padding: 4px 6px; }

    /* --- Empty state cards: 2-column on tablet --- */
    .empty-state-cards {
        grid-template-columns: repeat(2, 1fr);
        max-width: 520px;
    }

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

    /* --- Sidebar: off-screen glassmorphism drawer --- */
    .sidebar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        width: min(var(--sidebar-width), 85vw);
        max-width: 320px;
        z-index: 999;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        background: var(--glass-bg-heavy);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        box-shadow: none;
        border-inline-end: 1px solid var(--glass-border-subtle);
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
        will-change: transform;
    }

    /* Smooth scroll for conversation list on iOS */
    .conversation-list {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Sidebar backdrop overlay — toggled via JS .visible class */
    .sidebar-backdrop {
        display: block; /* Override desktop display:none */
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.3);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s var(--ease-out), visibility 0.3s;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-backdrop.visible {
        opacity: 1;
        visibility: visible;
    }

    /* Show hamburger toggle */
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        background: none;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        cursor: pointer;
        color: var(--text-primary);
        margin-inline-end: var(--space-2);
        -webkit-tap-highlight-color: transparent;
    }

    /* --- Header --- */
    .header-bar {
        height: auto;
        min-height: var(--header-height);
        padding: var(--space-2) var(--space-3);
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .header-left {
        flex: 1;
        min-width: 0;
    }

    .header-subtitle {
        display: none;
    }

    .header-center {
        display: none;
    }

    .header-right {
        flex-wrap: nowrap;
        gap: var(--space-1);
        align-items: center;
    }

    /* Hide all header action buttons on mobile — moved to overflow menu */
    .header-right .header-group:first-child {
        display: none;
    }

    /* Show mobile overflow menu */
    .mobile-overflow-menu {
        display: block;
    }

    .mobile-overflow-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-clock {
        display: none;
    }

    .header-divider {
        display: none;
    }

    .header-status {
        display: none;
    }

    .bg-activity-text {
        display: none;
    }

    /* --- Chat area: full width, no horizontal overflow --- */
    .chat-area {
        width: 100%;
        overflow-x: hidden;
    }

    .terminal-body {
        flex-direction: column;
    }

    /* --- Chat columns: stack vertically --- */
    .chat-columns {
        flex-direction: column;
    }

    .chat-column--comparison.active {
        width: 300px;
        max-height: 40vh;
        overflow-y: auto;
        transition: width var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
    }

    .chat-column--comparison .column-header {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    /* --- Input area: mobile optimized with safe area for notched phones --- */
    .input-area {
        padding: var(--space-3) var(--space-3);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    }

    .input-pedestal {
        padding: var(--space-3) var(--space-3);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    }

    .input-toolbar {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .input-row {
        flex-direction: row;
        align-items: flex-end;
        gap: var(--space-2);
    }

    /* --- Messages: mobile-friendly spacing --- */
    .messages-container {
        padding: var(--space-4) var(--space-3);
    }

    .message {
        padding: var(--space-3);
        border-radius: 12px;
    }

    .message-content {
        padding-inline-start: var(--space-4);
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Constrain code blocks & tables inside messages */
    .message-content pre,
    .message-content table {
        max-width: calc(100vw - 48px);
    }

    /* Ensure #messageInput gets 16px to prevent iOS zoom */
    #messageInput {
        font-size: var(--text-md);
        min-height: 52px;
    }

    /* --- Compare dropdown: constrain width on mobile --- */
    .compare-dropdown {
        width: min(320px, calc(100vw - 32px));
    }

    /* --- Dropdown / popup menus: prevent offscreen overflow --- */
    .help-dropdown-menu,
    .header-dropdown-menu,
    .mobile-overflow-dropdown,
    .export-dropdown,
    .sort-dropdown,
    .template-dropdown {
        max-width: calc(100vw - 16px);
        overscroll-behavior: contain;
    }

    .help-dropdown-menu,
    .header-dropdown-menu,
    .mobile-overflow-dropdown,
    .export-dropdown {
        right: 0;
        left: auto;
    }

    .input-context-menu,
    .context-menu,
    .conversation-context-menu {
        max-width: calc(100vw - 16px);
        overscroll-behavior: contain;
    }

    /* --- Touch targets: minimum 44px --- */
    .header-action-btn,
    .header-btn,
    .sidebar-btn,
    .sidebar-toolbar-btn,
    .send-button,
    .queue-add-btn,
    .depth-selector select,
    #depthSelect,
    .compare-toggle-btn,
    .message-action-btn,
    .psych-copy-btn,
    .psych-toggle,
    .conversation-kebab-btn,
    .toggle-btn,
    .thoughts-column-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    .send-button,
    .queue-add-btn,
    .queue-add-btn.visible {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        flex-shrink: 0;
    }

    .depth-selector select,
    #depthSelect {
        padding: 10px 28px 10px 12px;
        font-size: var(--text-sm);
    }

    /* --- Input fields: full width, touch-friendly --- */
    .api-key-input input {
        width: 100%;
        padding: 12px 14px;
        font-size: var(--text-md); /* Prevents iOS zoom on focus */
    }

    .sidebar-search-input {
        width: 100%;
        padding: 12px 14px 12px 36px; /* Preserve left padding for search icon */
        font-size: var(--text-md); /* Prevents iOS zoom on focus */
    }

    textarea,
    .input-pedestal textarea {
        font-size: var(--text-md); /* Prevents iOS zoom on focus */
    }

    /* --- Psychometric panel: stack models vertically --- */
    .psych-model-grid {
        grid-template-columns: 1fr;
    }

    .psychometric-panel {
        margin-top: var(--space-2);
    }

    .psych-body {
        padding: var(--space-2) var(--space-3);
    }

    /* --- Conversation item: taller touch target --- */
    .conversation-item {
        padding: var(--space-3) var(--space-3);
        min-height: 44px;
    }

    /* Always show kebab on mobile (no hover) */
    .conversation-kebab-btn {
        opacity: 1;
    }

    /* Always show message actions on mobile */
    .message-actions {
        opacity: 1;
    }

    /* --- Scroll to bottom: larger touch target --- */
    .scroll-to-bottom-btn {
        width: 44px;
        height: 44px;
        bottom: var(--space-2);
        right: var(--space-2);
    }

    /* --- Modals: full-width on mobile --- */
    .tm-modal {
        width: 95vw;
        max-height: 90vh;
        padding: 24px 20px;
    }

    .settings-panel,
    .stats-modal,
    .shortcuts-modal {
        width: 95vw;
        max-width: none;
    }

    /* --- Pipeline DAG: horizontal scroll --- */
    .pipeline-dag,
    .dag-stages {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .dag-stages .dag-node {
        scroll-snap-align: start;
    }

    /* --- Empty state cards: compact on small screens --- */
    .empty-state-cards {
        padding: 0 var(--space-2);
    }

    .empty-state-card {
        font-size: var(--text-xs);
        padding: var(--space-3);
        min-height: 44px;
    }

    /* --- CHC chart: compact on mobile --- */
    .chc-rings {
        gap: var(--space-3);
        flex-wrap: wrap;
        justify-content: center;
    }

    .chc-chart {
        padding: var(--space-3);
    }

    /* --- Hover preview: disable on touch --- */
    .conversation-item[data-preview]:hover::after {
        display: none;
    }

    /* --- Login panel overlay --- */
    .login-panel {
        width: 92vw;
        max-width: 400px;
    }

    /* --- Memory explorer: full width --- */
    .memory-explorer-panel {
        width: 100%;
        max-width: none;
    }
}

/* ── Small screens: 480px ── */
@media (max-width: 480px) {
    /* --- Message content lists: tighter padding --- */
    .message-content ul,
    .message-content ol { padding-inline-start: 16px; }

    /* --- Admin panel: constrain width --- */
    .admin-panel-container {
        width: 95vw;
        max-height: 90vh;
    }
    .admin-panel-code-card {
        flex-wrap: wrap;
    }

    /* Tighter spacing */
    .header-bar {
        padding: var(--space-1) var(--space-2);
    }

    .header-logo {
        font-size: var(--text-xs);
        letter-spacing: 0.06em;
    }

    /* Hide user name on very small screens */
    .header-user {
        display: none;
    }

    /* Full-width sidebar on very small screens */
    .sidebar {
        width: 100vw;
        max-width: none;
    }

    /* Input: tighter */
    .input-area,
    .input-pedestal {
        padding: var(--space-2);
    }

    /* Conversation list: compact */
    .conversation-list {
        padding: var(--space-1) var(--space-2);
    }

    /* Larger touch targets at 480px */
    .conversation-item,
    .nav-btn,
    .sidebar-btn,
    .header-action-btn {
        min-height: 48px; /* Increased from 44px for better ergonomics */
    }

    /* Smaller empty state cards */
    .empty-state-cards {
        gap: var(--space-2);
    }

    .empty-state-card {
        font-size: var(--text-xs-sm);
        padding: var(--space-2) var(--space-3);
    }

    /* Messages: compact on small screens */
    .messages-container {
        padding: var(--space-3) var(--space-2);
    }

    .message {
        padding: var(--space-2);
    }

    .message-content {
        padding-left: var(--space-2);
    }

    .message-content pre,
    .message-content table {
        max-width: calc(100vw - 32px);
    }

    /* Psychometric bar labels: narrower */
    .psych-bar-label {
        width: 60px;
        font-size: var(--text-3xs);
    }

    .exposition-body {
        padding: var(--space-3);
    }

    .exposition-header {
        padding: var(--space-2) var(--space-3);
    }
}

/* ============================================================================
   MOBILE MODAL FIXES — scroll lock, sizing, close buttons, touch scrolling
   ============================================================================ */

/* Body scroll lock when any modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Touch-friendly scrolling for all modal scroll containers */
.tm-modal,
.modal-panel,
.modal-body,
.shortcuts-content,
.api-docs-body,
.stats-content,
.window-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ── Mobile-specific modal overrides ── */
@media (max-width: 768px) {
    /* All modal close buttons: minimum 44x44 touch target */
    .tm-modal-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-3xl);
        padding: 0;
        top: 8px;
        right: 8px;
    }

    .modal-close {
        width: 44px;
        height: 44px;
        font-size: var(--text-xl);
    }

    .shortcuts-close {
        width: 44px;
        height: 44px;
        font-size: var(--text-2xl);
    }

    .api-docs-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-3xl);
        padding: 0;
    }

    .close-box,
    .zoom-box {
        width: 44px;
        height: 44px;
        font-size: var(--text-md);
    }

    /* Modal body: constrain height on mobile to prevent viewport overflow */
    .modal-body {
        max-height: calc(100vh - 160px); /* fallback */
        max-height: calc(100dvh - 160px);
    }

    /* Settings modal: full mobile width */
    .modal-panel {
        width: calc(100vw - 24px);
        max-width: none;
        max-height: calc(100dvh - 24px);
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        margin: 12px;
    }

    /* API docs modal: full mobile width */
    .api-docs-container {
        width: calc(100vw - 24px);
        max-width: none;
        max-height: calc(100dvh - 24px);
        max-height: calc(100vh - 24px);
        margin: 12px;
    }

    .api-docs-header {
        padding: var(--space-3);
    }

    .api-docs-body {
        padding: var(--space-3);
    }

    .api-docs-title {
        font-size: var(--text-md);
    }

    /* Shortcuts modal: constrain to viewport */
    .shortcuts-panel {
        width: calc(100vw - 24px);
        max-width: none;
        max-height: calc(100dvh - 24px);
        max-height: calc(100vh - 24px);
        margin: 12px;
    }

    /* Stats modal window: constrain to viewport */
    .stats-window {
        width: calc(100vw - 24px);
        max-width: none;
        max-height: calc(100dvh - 24px);
        max-height: calc(100vh - 24px);
        margin: 12px;
    }

    .stats-content {
        max-height: calc(100dvh - 80px);
        max-height: calc(100vh - 80px);
    }

    /* TM modal: ensure padding from edges */
    .tm-modal {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        max-height: calc(100vh - 24px);
        padding: 20px 16px;
        margin: 12px;
    }

    /* Pre/code blocks in API docs: horizontal scroll on mobile */
    .api-dark-code {
        font-size: var(--text-xs-sm);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* API model table: responsive on mobile */
    .api-model-table {
        font-size: var(--text-xs-sm);
    }
}

/* ============ MOBILE TOUCH & READABILITY FIXES ============ */
@media (max-width: 768px) {

    /* ── 1. Touch target minimums (44x44px per WCAG 2.5.5) ── */

    .conversation-kebab-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 1; /* always visible on mobile — no hover */
    }

    .psych-toggle {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 12px;
        font-size: var(--text-xs-sm);
        display: inline-flex;
        align-items: center;
    }

    .sidebar-toolbar-btn {
        min-height: 44px;
        padding: 10px var(--space-2);
    }

    .message-time {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        padding: 10px 4px;
    }

    .message-action-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px;
    }

    .message-actions {
        opacity: 1; /* always visible on touch devices */
    }

    .psych-copy-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 12px;
    }

    .code-copy-btn,
    .rc-copy-btn,
    .rc-export-btn,
    .eval-copy-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px;
    }

    /* ── 2. Pipeline DAG readability ── */

    .dag-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .dag-container .dag-node {
        scroll-snap-align: start;
    }

    .dag-node-name {
        font-size: var(--text-2xs);
        max-width: 80px;
    }

    .dag-node-tokens {
        display: none;
    }

    /* ── 3. Sub-12px font size overrides ── */

    .mentat-epigraph {
        font-size: var(--text-xs-sm);
        opacity: 0.55;
    }

    .qp-title {
        font-size: var(--text-xs-sm);
    }

    .dag-node-status {
        font-size: var(--text-4xs);
    }

    .empty-state-card-prompt {
        font-size: var(--text-sm);
    }

    /* ── 5. Empty state card tap targets ── */

    .empty-state-card {
        min-height: 44px;
        padding: var(--space-3) var(--space-4);
    }

    /* ── 6. Reduce backdrop-filter on mobile for GPU performance ── */

    .comparison-col,
    .help-dropdown-menu,
    .undo-toast {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .dag-svg-tooltip {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ================================================================
   ENTERPRISE FEATURES (1-13)
   Retry, Edit, Reactions, Collapse, Read Time, Export, Branch,
   Message Search, Permalink, Keyboard Shortcuts, Print, Toasts
   ================================================================ */

/* ============ 1. RETRY & EDIT BUTTONS ============ */
/* Inherit from .message-action-btn; only hover colors needed */

.message-action-btn.retry-btn:hover {
    background: var(--color-active-glow);
    border-color: var(--color-active);
    color: var(--color-active);
}

.message-action-btn.edit-btn:hover {
    background: var(--color-active-glow);
    border-color: var(--color-active);
    color: var(--color-active);
}

/* ============ 2. EDIT MODE TEXTAREA ============ */

.message-edit-area {
    width: 100%;
    min-height: 80px;
    max-height: 300px;
    padding: var(--space-3);
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.message-edit-area:focus {
    outline: none;
    border-color: var(--color-active);
    box-shadow: 0 0 0 1px var(--color-active-glow);
}

.message-edit-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    justify-content: flex-end;
}

.message-edit-save,
.message-edit-cancel {
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    height: 28px;
    display: inline-flex;
    align-items: center;
}

.message-edit-save {
    background: var(--color-active);
    color: var(--bg-primary);
    border-color: var(--color-active);
}

.message-edit-save:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 8px var(--color-active-glow);
}

.message-edit-cancel {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.message-edit-cancel:hover {
    background: var(--bg-chrome);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* ============ 3. MESSAGE REACTIONS ============ */

.message-reactions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    flex-wrap: wrap;
}

.reaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-ui);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}

.reaction-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.reaction-btn:hover {
    background: var(--bg-chrome);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.reaction-btn.active {
    border-color: var(--color-active);
    background: var(--color-active-glow);
    color: var(--color-active);
}

.reaction-btn.active.thumbs-down {
    border-color: var(--color-error);
    background: rgba(248, 81, 73, 0.12);
    color: var(--color-error);
}

.reaction-btn .reaction-count {
    font-size: var(--text-micro);
    font-weight: 600;
    min-width: 12px;
    text-align: center;
}

/* ============ 4. COLLAPSE / EXPAND MESSAGES ============ */

.message-preview {
    display: none;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.4;
    padding: var(--space-1) 0;
}

.message.collapsed .message-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--duration-base) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
}

.message.collapsed .message-preview {
    display: block;
}

.message:not(.collapsed) .message-content {
    max-height: none;
    opacity: 1;
    transition: max-height var(--duration-base) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
}

.collapse-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    transform: rotate(90deg);
}

.message.collapsed .collapse-btn {
    transform: rotate(0deg);
}

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

.collapse-btn svg {
    width: 14px;
    height: 14px;
}

/* ============ 5. READ TIME ESTIMATE ============ */

.read-time {
    display: inline;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-ui);
    margin-left: var(--space-2);
    white-space: nowrap;
}

/* ============ 6. EXPORT / SHARE / PRINT CONTEXT MENU ICONS ============ */
/* Items inherit from .context-menu-item; only icon alignment needed */

.context-menu-item svg,
.context-menu-item .menu-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}

.context-menu-item:hover svg,
.context-menu-item:hover .menu-icon {
    opacity: 1;
}

/* ============ 7. BRANCH BUTTON ============ */

.message-action-btn.branch-btn:hover {
    background: rgba(63, 185, 80, 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}

/* ============ 8. IN-CONVERSATION MESSAGE SEARCH BAR ============ */

.message-search-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid var(--border-color);
    transition: opacity var(--duration-fast) var(--ease-out);
}

.message-search-bar input {
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    transition: border-color var(--duration-fast) var(--ease-out);
}

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

.message-search-bar input:focus {
    outline: none;
    border-color: var(--color-active);
    box-shadow: 0 0 0 1px var(--color-active-glow);
}

.search-count {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    white-space: nowrap;
    min-width: 48px;
    text-align: center;
}

.search-nav-btn,
.search-close-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.search-nav-btn:hover,
.search-close-btn:hover {
    background: var(--bg-chrome);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.search-nav-btn:active,
.search-close-btn:active {
    background: var(--bg-field);
}

.search-nav-btn svg,
.search-close-btn svg {
    width: 14px;
    height: 14px;
}

/* Search match highlighting on messages */
.message.search-match {
    border-left: 3px solid var(--color-active);
    background: var(--color-active-glow);
    transition: background var(--duration-fast) var(--ease-out);
}

.message.search-current {
    border-left: 3px solid var(--color-active);
    background: rgba(37, 99, 235, 0.2);
}

/* ============ 9. PERMALINK BUTTON ============ */

.message-action-btn.permalink-btn:hover {
    background: var(--color-active-glow);
    border-color: var(--color-active);
    color: var(--color-active);
}

/* ============ 10. KEYBOARD SHORTCUT HELP PANEL ============ */

.shortcut-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    animation: shortcut-overlay-in var(--duration-fast) var(--ease-out);
}

@keyframes shortcut-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.shortcut-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 520px;
    width: 90vw;
    box-shadow: var(--shadow-lg);
    animation: shortcut-panel-in var(--duration-base) var(--ease-out);
    max-height: 80vh;
    overflow-y: auto;
}

@keyframes shortcut-panel-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.shortcut-panel h2 {
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.shortcut-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
    align-items: center;
}

.shortcut-key {
    display: inline-block;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: nowrap;
    text-align: center;
    min-width: 24px;
}

.shortcut-desc {
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.shortcut-section-title {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-3);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-light);
}

.shortcut-section-title:first-child {
    margin-top: 0;
}

/* ============ LOADING SKELETONS (Premium Placeholders) ============ */

@keyframes skeleton-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* --- Base skeleton --- */
.skeleton {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--bg-chrome);
    border-radius: var(--radius-xs);
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

.skeleton * {
    visibility: hidden;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    will-change: transform;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 20%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 80%,
        transparent 100%
    );
    animation: skeleton-shimmer 1.5s var(--ease-out) infinite;
}

/* --- Text line variant --- */
.skeleton-text {
    height: 1em;
    width: 100%;
    margin-bottom: 0.5em;
    border-radius: var(--radius-xs);
}

.skeleton-text:last-child {
    width: 60%;
}

/* --- Circle avatar variant --- */
.skeleton-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- Chat message bubble variant --- */
.skeleton-message {
    height: 60px;
    width: 100%;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

/* --- Heading variant (wider, taller) --- */
.skeleton-heading {
    height: 1.4em;
    width: 45%;
    margin-bottom: 0.75em;
    border-radius: var(--radius-xs);
}

/* --- Thumbnail / card image variant --- */
.skeleton-thumbnail {
    width: 100%;
    height: 120px;
    border-radius: var(--radius-sm);
}

/* --- Dark theme --- */
[data-theme="dark"] .skeleton {
    background: var(--bg-field);
}

[data-theme="dark"] .skeleton::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.02) 20%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.02) 80%,
        transparent 100%
    );
}

/* --- Accessibility: disable animation for reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
    .skeleton::after {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED LOADING SKELETONS
   ═══════════════════════════════════════════════════════════════ */
.skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.skeleton-button {
  width: 100px;
  height: 36px;
}

/* Message skeleton (flex layout) */
.skeleton-message-row {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
}

.skeleton-message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Conversation list skeleton */
.skeleton-conversation {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  align-items: center;
}

.skeleton-conversation .skeleton-text {
  height: 10px;
}

/* Width variations for skeleton text lines */
.skeleton-text:first-child { width: 80%; }
.skeleton-text:nth-child(2) { width: 60%; }
.skeleton-text:nth-child(3) { width: 70%; }

/* ═══════════════════════════════════════════════════════════════
   CONTENT LOADING STATES
   ═══════════════════════════════════════════════════════════════ */
[aria-busy="true"] {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

[aria-busy="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(1px);
  z-index: 10;
}

/* Spinner size variants */
.loading-spinner.small { width: 14px; height: 14px; border-width: 1.5px; }
.loading-spinner.large { width: 32px; height: 32px; border-width: 3px; }

/* ============ 11. PRINT-FRIENDLY STYLES ============ */

@media print {
    /* --- 1. Global reset: black on white, no decorative effects --- */
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        border-color: #ccc !important;
        border-radius: 0 !important;
        transition: none !important;
        animation: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* --- 2. Typography: serif for print readability --- */
    body {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 12pt;
        line-height: 1.5;
        background: #fff !important;
        color: #000 !important;
        margin: 0;
        padding: 0;
    }

    /* --- 3. Hide non-essential UI elements --- */
    .sidebar,
    .header-bar,
    .input-area,
    .sidebar-toggle,
    .pipeline-panel,
    .admin-panel-container,
    .message-actions,
    .message-action-bar,
    .message-reactions,
    .message-search-bar,
    .collapse-btn,
    .toast,
    .shortcut-panel-overlay,
    .status-bar,
    .header-right,
    .context-menu,
    .help-dropdown-menu,
    .modal,
    .modal-overlay,
    .toolbar-btn,
    .toolbar-label,
    .depth-selector,
    .theme-toggle,
    .skip-link,
    .scroll-to-bottom,
    .read-time,
    .reasoning-mode-badge,
    .provider-fallback-badge,
    .toggle-switch,
    button,
    [role="button"] {
        display: none !important;
    }

    /* --- 4. Main content: full width, no constraints --- */
    #mainContent,
    .terminal,
    .chat-area {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .messages-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* --- 5. Message formatting --- */
    .message {
        break-inside: avoid;
        page-break-inside: avoid;
        page-break-before: auto;
        border: none !important;
        border-bottom: 1px solid #999 !important;
        padding: 8pt 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .message-content {
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
    }

    /* --- 6. Code blocks: light background with border --- */
    .message-content pre,
    .message-content code {
        background: #f5f5f5 !important;
        border: 1px solid #ccc !important;
        padding: 4pt !important;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: "Courier New", Courier, monospace;
        font-size: 10pt;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .message-content code {
        border: none !important;
        padding: 1pt 2pt !important;
    }

    /* --- 7. Tables: avoid page breaks inside --- */
    .message-content table {
        break-inside: avoid;
        page-break-inside: avoid;
        border-collapse: collapse;
        width: 100%;
    }

    .message-content th,
    .message-content td {
        border: 1px solid #999 !important;
        padding: 4pt 6pt;
    }

    .message-content th {
        font-weight: 700;
        background: #eee !important;
    }

    /* --- 8. Headings: page break control --- */
    h1, h2, h3, h4, h5, h6 {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* --- 9. Links: show URLs inline --- */
    a[href] {
        text-decoration: underline !important;
        color: #000 !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555 !important;
        font-style: italic;
    }

    /* Don't show URL for fragment-only or JS links */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    /* --- 10. Images: constrain to page width --- */
    img {
        max-width: 100% !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* --- 11. Page margins --- */
    @page {
        margin: 1.5cm 2cm;
    }
}

/* ============ 12-13. BRANCH TOAST & PERMALINK FEEDBACK ============ */
/* Covered by existing .toast styles — no additional CSS required */

/* ============ IN-CONVERSATION MESSAGE SEARCH BAR ============ */

.message-search-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(14, 17, 23, 0.95);
    backdrop-filter: blur(0px);
    border-bottom: 1px solid rgba(37, 99, 235, 0.3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.message-search-bar.hidden {
    display: none;
}

.message-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.message-search-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    padding: 6px 10px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.message-search-input:focus {
    border-color: var(--color-active);
    box-shadow: 0 0 0 3px var(--color-active-glow);
}

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

.message-search-count {
    color: var(--text-secondary);
    font-size: var(--text-micro);
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
}

.message-search-nav-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

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

.message-search-close-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.message-search-close-btn:hover {
    background: rgba(255, 60, 60, 0.15);
    border-color: #ff4444;
    color: #ff4444;
}

/* Search match highlight */
.message.search-match {
    border-left: 3px solid rgba(37, 99, 235, 0.5);
    background: rgba(37, 99, 235, 0.04);
}

.message.search-match-current {
    border-left: 3px solid var(--color-active);
    background: var(--bg-active);
    box-shadow: inset 0 0 0 1px var(--border-active);
}

/* Message permalink button */
.message-permalink-btn {
    color: var(--text-muted);
}

.message-permalink-btn:hover {
    color: var(--color-active);
}

/* === Epistemic Watermarks & Confidence Bands (U8) === */

/* Confidence band — subtle background gradient */
.has-confidence-band {
    position: relative;
    overflow: hidden;
}

.has-confidence-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(var(--confidence, 0) * 100%);
    background: var(--confidence-color, transparent);
    pointer-events: none;
    z-index: 0;
    transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.has-confidence-band > * {
    position: relative;
    z-index: 1;
}

/* Epistemic status borders */
.epistemic-pre-evaluated {
    border-left: 2px solid hsla(220, 30%, 50%, 0.25);
}

.epistemic-evaluated {
    border-left: 2px solid hsla(145, 50%, 44%, 0.4);
}

.epistemic-repaired {
    border-left: 2px solid hsla(217, 91%, 53%, 0.4);
}

/* Memory tier badges */
.memory-tier-badge {
    display: inline-block;
    font-size: var(--text-3xs);
    font-family: var(--font-mono, monospace);
    background: hsla(225, 20%, 18%, 0.06);
    color: var(--text-secondary, #666);
    border-radius: var(--radius-xs);
    padding: 1px 5px;
    margin-left: var(--space-2, 8px);
    letter-spacing: 0.3px;
    vertical-align: middle;
}

/* Inline claim confidence markers */
.claim-confidence {
    border-bottom: 1.5px solid var(--claim-conf-color, hsla(220, 30%, 50%, 0.3));
    cursor: help;
    transition: border-color 150ms ease;
}

.claim-confidence:hover {
    border-bottom-width: 2.5px;
}

/* Epistemic status icon in message header */
.epistemic-evaluated .message-meta::after {
    content: '\2713';
    color: hsla(145, 50%, 44%, 0.6);
    font-size: var(--text-2xs);
    margin-left: 4px;
}

.epistemic-repaired .message-meta::after {
    content: '\21BB';
    color: hsla(217, 91%, 53%, 0.6);
    font-size: var(--text-2xs);
    margin-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .has-confidence-band::before {
        transition-duration: 0.01ms;
    }
}

/* === Dialectical Convergence Visualization (U7) === */
.dag-dialectical-triplet {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
    position: relative;
    margin: var(--space-2) 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-field);
}

.dag-triplet-thesis {
    grid-column: 1;
    grid-row: 1;
}

.dag-triplet-antithesis {
    grid-column: 3;
    grid-row: 1;
}

.dag-triplet-synthesis {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
}

.dag-triplet-tension-bar {
    grid-column: 2;
    grid-row: 1;
    width: 80px;
    height: 4px;
    background: var(--border-light);
    border-radius: var(--radius-xs);
    align-self: center;
    overflow: hidden;
}

.dag-tension-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-xs);
    transition: width 800ms var(--ease-reveal), background-color 800ms var(--ease-reveal);
}

.dag-convergence-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.dag-conv-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 600ms var(--ease-reveal);
}

.dag-conv-line--active {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dag-tension-fill,
    .dag-conv-line {
        transition-duration: 0.01ms;
    }
}

/* Mobile: stack dialectical triplet vertically */
@media (max-width: 768px) {
    .dag-dialectical-triplet {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .dag-triplet-thesis { grid-column: 1; grid-row: 1; }
    .dag-triplet-tension-bar { grid-column: 1; grid-row: 2; width: 100%; }
    .dag-triplet-antithesis { grid-column: 1; grid-row: 3; }
    .dag-triplet-synthesis { grid-column: 1; grid-row: 4; }
}

/* ============ ARGUMENT SCAFFOLDING ============ */
.arg-scaffold {
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
}
.arg-scaffold-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.arg-scaffold-title {
    font-weight: 700;
    font-size: var(--text-2xs);
    letter-spacing: 0.1em;
    color: #666;
    white-space: nowrap;
}
.arg-viability-bar {
    flex: 1;
    height: 4px;
    background: #eee;
    border-radius: var(--radius-xs);
    overflow: hidden;
    min-width: 60px;
    max-width: 180px;
}
.arg-viability-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}
.arg-viability-val {
    font-size: var(--text-2xs);
    color: #666;
    white-space: nowrap;
}
.arg-scaffold-lb-count {
    font-size: var(--text-2xs);
    color: #888;
    white-space: nowrap;
}
.arg-claim-tree {
    padding-left: 0;
}
.arg-claim-node {
    margin-bottom: 1px;
}
.arg-claim-node > summary {
    list-style: none;
    cursor: pointer;
}
.arg-claim-node > summary::-webkit-details-marker {
    display: none;
}
.arg-claim-node[open] > summary::before {
    content: "\25BE ";
    font-size: var(--text-3xs);
    color: #999;
}
.arg-claim-node:not([open]) > summary::before {
    content: "\25B8 ";
    font-size: var(--text-3xs);
    color: #999;
}
.arg-claim-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: var(--text-micro);
    line-height: 1.4;
}
.arg-claim-stars {
    color: #f9a825;
    font-size: var(--text-2xs);
    white-space: nowrap;
    letter-spacing: -1px;
}
.arg-claim-content {
    flex: 1;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arg-claim-lb {
    display: inline-block;
    padding: 0 3px;
    font-size: var(--text-3xs);
    font-weight: 700;
    background: #f9a825;
    color: #fff;
    border-radius: var(--radius-xs);
    line-height: 1.4;
    white-space: nowrap;
}
.arg-claim-critical {
    border-left: 2px solid #1565c0;
    padding-left: 4px;
}
.arg-claim-source {
    font-size: var(--text-3xs);
    color: #1565c0;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}
.arg-claim-source:hover {
    color: #0d47a1;
}
.arg-claim-children {
    padding-left: 14px;
}

/* ============ FAILURE-MODE DIAGNOSTICS PANEL (U6) ============ */
.diagnostics-panel {
    margin-top: 10px;
    border: 1px solid #ddd;
    background: #fafafa;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    overflow: hidden;
}
.diag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast) var(--ease-out);
}
.diag-header:hover { background: var(--color-active-soft); }
.diag-header-label {
    font-size: var(--text-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #555;
}
.diag-header-toggle {
    font-size: var(--text-4xs);
    color: #888;
    transition: transform 0.2s ease;
}
.diagnostics-panel.expanded .diag-header-toggle { transform: rotate(90deg); }
.diag-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.diagnostics-panel.expanded .diag-body {
    max-height: 800px;
}
.diag-section {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
}
.diag-section:last-child { border-bottom: none; }
.diag-section-title {
    font-size: var(--text-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
    margin-bottom: 4px;
}
/* Confidence row */
.diag-confidence-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.diag-confidence-val {
    font-size: var(--text-sm);
    font-weight: 700;
    color: #222;
}
.diag-confidence-ci {
    font-size: var(--text-3xs);
    color: #777;
}
/* Budget bars */
.diag-budget-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.diag-budget-label {
    width: 48px;
    font-weight: 700;
    font-size: var(--text-3xs);
    color: #555;
    text-transform: uppercase;
}
.diag-budget-bar {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.diag-budget-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}
.diag-budget-fill.diag-ok { background: #2e7d32; }
.diag-budget-fill.diag-warn { background: #f9a825; }
.diag-budget-fill.diag-critical { background: #c62828; }
.diag-budget-pct {
    width: 80px;
    font-size: var(--text-3xs);
    color: #555;
    text-align: right;
    white-space: nowrap;
}
/* Violation rows */
.diag-violation-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    font-size: var(--text-2xs);
    color: #333;
}
.diag-violation-stage {
    font-weight: 700;
    color: #c62828;
    white-space: nowrap;
}
.diag-violation-type {
    font-size: var(--text-4xs);
    text-transform: uppercase;
    color: #888;
    white-space: nowrap;
}
/* Repair rows */
.diag-repair-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: var(--text-2xs);
    color: #333;
}
.diag-repair-indicator {
    font-size: var(--text-2xs);
    font-weight: 700;
    width: 14px;
    text-align: center;
}
.diag-repair-indicator.success { color: #2e7d32; }
.diag-repair-indicator.fail { color: #c62828; }
.diag-repair-node {
    font-weight: 700;
    color: #555;
    white-space: nowrap;
}
.diag-repair-strategy {
    font-size: var(--text-3xs);
    color: #777;
    font-style: italic;
}
/* Quality trajectory */
.diag-trajectory-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.diag-trajectory-label {
    width: 80px;
    font-size: var(--text-3xs);
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.diag-trajectory-bar {
    flex: 1;
    height: 6px;
    background: #e0e0e0;
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.diag-trajectory-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    background: #1565c0;
}
.diag-trajectory-val {
    width: 28px;
    font-size: var(--text-3xs);
    color: #666;
    text-align: right;
}
/* Answer eval */
.diag-eval-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-2xs);
}
.diag-eval-pass { color: #2e7d32; font-weight: 700; }
.diag-eval-fail { color: #c62828; font-weight: 700; }

/* ============ REASONING PROVENANCE CHAIN (U13) ============ */
.provenance-panel {
    margin-top: 10px;
    border: 1px solid #ccd;
    background: #f8f8fc;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    overflow: hidden;
}
.prov-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background: var(--bg-chrome);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast) var(--ease-out);
}
.prov-header:hover { background: var(--color-active-soft); }
.prov-header-label {
    font-size: var(--text-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #445;
}
.prov-header-meta {
    font-size: var(--text-3xs);
    color: #888;
    margin-left: auto;
    margin-right: 8px;
}
.prov-header-toggle {
    font-size: var(--text-4xs);
    color: #888;
    transition: transform 0.2s ease;
}
.provenance-panel.expanded .prov-header-toggle { transform: rotate(90deg); }
.prov-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.provenance-panel.expanded .prov-body {
    max-height: 1200px;
    overflow-y: auto;
}
.prov-claim {
    padding: 6px 10px;
    border-bottom: 1px solid #e8e8ee;
}
.prov-claim:last-child { border-bottom: none; }
.prov-claim.prov-strongest {
    border-left: 3px solid #1565c0;
    background: #f0f4ff;
}
.prov-claim-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.prov-claim-text {
    font-size: var(--text-2xs);
    color: #222;
    flex: 1;
    line-height: 1.4;
}
.prov-claim-conf {
    font-size: var(--text-xs-sm);
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}
.prov-strongest-badge {
    font-size: var(--text-4xs);
    font-weight: 700;
    color: #1565c0;
    background: #e3eeff;
    padding: 1px 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.prov-evidence {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0 2px 16px;
    font-size: var(--text-3xs);
    color: #555;
}
.prov-ev-relation {
    font-weight: 600;
    width: 70px;
    flex-shrink: 0;
    text-transform: uppercase;
    font-size: var(--text-4xs);
    letter-spacing: 0.3px;
}
.prov-ev-positive .prov-ev-relation { color: #2e7d32; }
.prov-ev-negative .prov-ev-relation { color: #c62828; }
.prov-ev-source {
    color: #777;
    font-size: var(--text-4xs);
    width: 80px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prov-ev-weight {
    color: #999;
    font-size: var(--text-4xs);
    width: 30px;
    flex-shrink: 0;
}
.prov-ev-content {
    flex: 1;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prov-contradiction {
    padding: 2px 0 2px 16px;
    font-size: var(--text-3xs);
    color: #999;
}
.prov-contradiction del {
    color: #b71c1c;
    text-decoration: line-through;
}

/* ── Dialectical Tension Matrix (U15) ── */
.tension-matrix {
    margin: 8px 0;
    border: 1px solid #444;
    border-radius: var(--radius-xs);
    background: #1a1a1a;
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    cursor: pointer;
}
.tension-matrix-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #222;
    border-bottom: 1px solid #333;
}
.tension-matrix-label {
    font-weight: 600;
    color: #ccc;
    flex: 1;
}
.tension-matrix-avg {
    color: #8cf;
    font-size: 0.78rem;
}
.tension-matrix-toggle {
    color: #888;
    font-size: 0.7rem;
    transition: transform 0.15s;
}
.tension-matrix.expanded .tension-matrix-toggle { transform: rotate(90deg); }
.tension-matrix-body {
    display: none;
    padding: 6px 10px;
}
.tension-matrix.expanded .tension-matrix-body {
    display: block;
}
.tension-domain-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.tension-domain-row.tension-domain-max .tension-label {
    color: #fff;
    font-weight: 600;
}
.tension-label {
    width: 72px;
    color: #aaa;
    font-size: 0.78rem;
    text-align: right;
    flex-shrink: 0;
}
.tension-bar-track {
    flex: 1;
    height: 10px;
    background: #2a2a2a;
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.tension-domain-bar {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.3s ease;
}
.tension-domain-bar.tension-low {
    background: #2e7d32;
}
.tension-domain-bar.tension-mid {
    background: #f9a825;
}
.tension-domain-bar.tension-high {
    background: #c62828;
}
.tension-value {
    width: 36px;
    color: #999;
    font-size: 0.75rem;
    text-align: end;
    flex-shrink: 0;
}

/* ============ CONTAINER QUERIES ============ */
/* Responsive adjustments based on container width rather than viewport */

/* --- Sidebar container queries (< 300px) --- */
@container sidebar (max-width: 300px) {
    .conversation-item {
        padding: 8px var(--space-2) 8px 10px;
    }

    .conversation-title {
        font-size: 0.8rem;
    }

    .conversation-delete {
        display: none;
    }

    .topic-map {
        display: none;
    }

    .sidebar-toolbar-btn {
        font-size: var(--text-2xs);
        padding: var(--space-1);
    }

    .sidebar-search-input {
        font-size: var(--text-xs-sm);
        padding: 7px 10px 7px 30px;
    }

    .sidebar-btn {
        font-size: var(--text-micro);
        padding: 5px var(--space-2);
    }
}

/* --- Messages container queries (< 500px) --- */
@container messages (max-width: 500px) {
    .message {
        padding: var(--space-3);
        border-radius: 12px;
    }

    .message-content {
        padding-inline-start: 0;
        font-size: var(--text-sm);
    }

    .message-content h1 { font-size: var(--text-lg); }
    .message-content h2 { font-size: var(--text-md); }
    .message-content h3 { font-size: var(--text-base); }

    .message-content pre {
        padding: var(--space-3);
        border-radius: 8px;
        font-size: var(--text-xs-sm);
    }

    .message-content ul,
    .message-content ol {
        padding-inline-start: 16px;
    }

    .message-content blockquote {
        padding: var(--space-1) var(--space-3);
    }
}

@container messages (max-width: 360px) {
    .message-content table {
        font-size: var(--text-micro);
    }

    .message-content th,
    .message-content td {
        padding: 3px 5px;
    }
}

/* --- Input area container queries (< 500px) --- */
@container input-area (max-width: 500px) {
    .input-toolbar {
        flex-wrap: wrap;
        gap: var(--space-1);
    }

    .depth-selector {
        font-size: var(--text-micro);
    }
}

/* ============================================================================
   PREMIUM MICRO-INTERACTIONS — Subtle, tactile UI refinements
   Respects prefers-reduced-motion via the global rule at the top of this file
   (lines 308-315) which zeroes all animation/transition durations.
   ============================================================================ */

/* --- 3. Button Press Effect — satisfying tactile press on primary actions --- */
.btn-primary:active,
.send-button:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* --- 4. Input Focus Glow — subtle breathing pulse on focused inputs --- */
@keyframes focusPulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(37, 99, 235, 0.25),
            0 4px 16px rgba(37, 99, 235, 0.06);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(37, 99, 235, 0.18),
            0 4px 20px rgba(37, 99, 235, 0.10);
    }
}

.form-group input:focus,
#messageInput:focus {
    animation: focusPulse 2s ease-in-out infinite;
}

/* --- 5. Thinking Dots — staggered bounce for loading indicators --- */
@keyframes thinkingBounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.thinking-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.thinking-dots .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted, #94a3b8);
    animation: thinkingBounce 1.2s ease-in-out infinite;
}

.thinking-dots .dot:nth-child(2) {
    animation-delay: 0.15s;
}

.thinking-dots .dot:nth-child(3) {
    animation-delay: 0.3s;
}

/* --- 6. Card/Panel Hover Lift — elevated hover for interactive surfaces --- */
.tier-item {
    transition: transform var(--duration-base, 200ms) var(--ease-out, ease-out), opacity var(--duration-base, 200ms) var(--ease-out, ease-out), background-color var(--duration-base, 200ms) var(--ease-out, ease-out), border-color var(--duration-base, 200ms) var(--ease-out, ease-out), color var(--duration-base, 200ms) var(--ease-out, ease-out), box-shadow var(--duration-base, 200ms) var(--ease-out, ease-out);
}

.tier-item:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(37, 99, 235, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.04);
}

/* --- 7. Badge/Tag Smooth Appearance --- */
@keyframes badgeAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.reasoning-mode-badge,
.question-class-badge {
    animation: badgeAppear var(--duration-base, 200ms) var(--ease-out, ease-out) both;
}

/* ============ VIEW TRANSITIONS API ============ */
/* Cycle 194: Header element named transitions (Apple-style morphing) */
@supports (view-transition-name: none) {
    /* Assign transition names to key layout regions */
    .sidebar { view-transition-name: sidebar; }
    .messages-container { view-transition-name: messages; }
    .input-area { view-transition-name: input-area; }
    .header { view-transition-name: header; }
    .pipeline-panel { view-transition-name: pipeline; }

    /* Header shared elements — Apple-style morphing between views */
    .header-logo { view-transition-name: header-logo; }
    .header-status { view-transition-name: header-status; }
    .header-user { view-transition-name: header-user; }
    .header-clock { view-transition-name: header-clock; }
    .header-nav [data-nav-view="terminal"] { view-transition-name: header-nav-btn-terminal; }
    .header-nav [data-nav-view="dashboard"] { view-transition-name: header-nav-btn-dashboard; }
    .header-nav [data-nav-view="learning"] { view-transition-name: header-nav-btn-learning; }
    #workspaceSelectorBtn { view-transition-name: header-workspace-selector; }
    #toolsBtn { view-transition-name: header-tools-button; }
    .header-action-btn--logout { view-transition-name: header-logout-button; }

    /* Default transition animations */
    ::view-transition-old(*) {
        animation: var(--duration-base, 200ms) var(--ease-out, ease-out) both fade-out;
    }
    ::view-transition-new(*) {
        animation: var(--duration-base, 200ms) var(--ease-out, ease-out) both fade-in;
    }

    /* Slide transitions for sidebar */
    ::view-transition-old(sidebar) {
        animation: var(--duration-base, 200ms) var(--ease-out, ease-out) both slide-out-left;
    }
    ::view-transition-new(sidebar) {
        animation: var(--duration-base, 200ms) var(--ease-out, ease-out) both slide-in-left;
    }

    /* Crossfade for messages */
    ::view-transition-old(messages),
    ::view-transition-new(messages) {
        animation-duration: var(--duration-slow, 300ms);
        mix-blend-mode: normal;
    }

    @keyframes fade-out { to { opacity: 0; } }
    @keyframes fade-in { from { opacity: 0; } }
    @keyframes slide-out-left { to { transform: translateX(-100%); opacity: 0; } }
    @keyframes slide-in-left { from { transform: translateX(-100%); opacity: 0; } }
}

/* Respect reduced motion for view transitions */
@media (prefers-reduced-motion: reduce) {
    @supports (view-transition-name: none) {
        ::view-transition-old(*),
        ::view-transition-new(*) {
            animation-duration: 0.01ms !important;
        }
    }
}

/* ============ TOUCH ENHANCEMENTS ============ */
/* Prevent text selection during gestures */
.sidebar,
.messages-container {
    -webkit-user-select: none;
    user-select: none;
}

/* Allow text selection in message content */
.message-content,
.message-text,
.code-block {
    -webkit-user-select: text;
    user-select: text;
}

/* Larger touch targets on mobile */
@media (pointer: coarse) {
    .conversation-item {
        min-height: 48px;
        padding-block: 12px;
    }

    .header-action-btn,
    .sidebar-toolbar-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .depth-btn {
        min-height: 44px;
        padding-inline: 16px;
    }

    /* Increase spacing between tappable elements */
    .conversation-list .conversation-item + .conversation-item {
        margin-block-start: 2px;
    }

    /* Remove hover effects on touch devices */
    .conversation-item:hover {
        transform: none;
    }

    .tier-item:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Active states for touch feedback */
@media (pointer: coarse) {
    .conversation-item:active {
        background: color-mix(in srgb, var(--color-active) 12%, var(--bg-field));
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    .header-action-btn:active,
    .sidebar-toolbar-btn:active {
        transform: scale(0.92);
        transition: transform 0.1s ease;
    }
}

/* Smooth momentum scrolling */
.messages-container,
.sidebar,
.conversation-list {
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
 * MODERN CSS ENHANCEMENTS
 * :has() selector & color-mix() progressive enhancements
 * ============================================================ */

/* ── color-mix() Design Tokens ── */
@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --text-subtle:        color-mix(in srgb, var(--text-primary) 40%, transparent);
        --border-hover:       color-mix(in srgb, var(--color-active) 30%, var(--border-color));
        --bg-active-subtle:   color-mix(in srgb, var(--color-active) 6%, var(--bg-primary));
        --bg-danger-subtle:   color-mix(in srgb, var(--color-danger, #dc3545) 8%, var(--bg-primary));
        --bg-success-subtle:  color-mix(in srgb, var(--color-success, #16a34a) 8%, var(--bg-primary));
        --hover-active-bg:    color-mix(in srgb, var(--color-active) 10%, transparent);
    }

    [data-theme="dark"] {
        --text-subtle:        color-mix(in srgb, var(--text-primary) 40%, transparent);
        --border-hover:       color-mix(in srgb, var(--color-active) 30%, var(--border-color));
        --bg-active-subtle:   color-mix(in srgb, var(--color-active) 6%, var(--bg-primary));
        --bg-danger-subtle:   color-mix(in srgb, var(--color-danger, #dc3545) 8%, var(--bg-primary));
        --bg-success-subtle:  color-mix(in srgb, var(--color-success, #16a34a) 8%, var(--bg-primary));
        --hover-active-bg:    color-mix(in srgb, var(--color-active) 10%, transparent);
    }

    /* ── color-mix() Hover Backgrounds ──
     * Replace hardcoded rgba(37, 99, 235, 0.1) patterns with
     * token-driven color-mix() for automatic theme adaptation. */

    .conversation-item:hover {
        background: var(--hover-active-bg);
    }

    .tab-button:hover:not(.active) {
        background: var(--hover-active-bg);
    }
}

/* ── :has() Selector Enhancements ── */
@supports selector(:has(*)) {

    /* 1. Sidebar with active conversation — subtle accent bar on the
     *    conversation list section when an item is selected. */
    .sidebar:has(.conversation-item.active) .conversation-list {
        border-left: 2px solid var(--color-active-soft, rgba(37, 99, 235, 0.06));
    }

    /* 2. Form group with invalid input — red left border signals error
     *    only after the user has typed (not on empty placeholder). */
    .form-group:has(input:invalid:not(:placeholder-shown)) {
        border-left: 3px solid var(--color-error, #dc2626);
        padding-left: 12px;
    }

    /* 3. Form group with valid input — green left border confirms
     *    field validity after user interaction. */
    .form-group:has(input:valid:not(:placeholder-shown)) {
        border-left: 3px solid var(--color-success, #16a34a);
        padding-left: 12px;
    }

    /* 4. Messages container with empty state — centered flex layout
     *    so the empty-state prompt sits in the visual center. */
    .messages-container:has(.empty-state) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
    }

    /* 5. Header with search active — search field expands and the
     *    header gets a subtle bottom glow to draw focus. */
    .app-header:has(.search-input:focus) {
        box-shadow: 0 1px 0 0 var(--color-active-soft, rgba(37, 99, 235, 0.06)),
                    0 2px 8px rgba(37, 99, 235, 0.06);
    }

    .app-header:has(.search-input:focus) .search-input {
        min-width: 280px;
    }

    /* 6. Conversation item with unread badge — bolder weight makes
     *    unread conversations stand out in the sidebar list. */
    .conversation-item:has(.unread-badge) {
        font-weight: 600;
    }

    .conversation-item:has(.unread-badge) .conversation-title {
        font-weight: 600;
        color: var(--text-primary);
    }
}

/* ============ KEYBOARD SHORTCUT HINTS ============ */
kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    padding: 2px 6px;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
    background: var(--bg-chrome);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    box-shadow: 0 1px 0 var(--border-color), inset 0 0 0 1px rgba(255,255,255,0.1);
    white-space: nowrap;
    vertical-align: middle;
}

/* Shortcut hint bar (shown at bottom of sidebar or on ? press) */
.shortcut-hints {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border-block-start: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-muted);
    animation: fadeIn var(--duration-base, 200ms) var(--ease-out, ease-out);
}

.shortcut-hints.visible {
    display: flex;
}

.shortcut-hint-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.shortcut-hint-row span {
    flex: 1;
}

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

/* Tooltip-style shortcut hints on buttons */
[data-shortcut]::after {
    content: attr(data-shortcut);
    position: absolute;
    inset-block-end: -24px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    padding: 2px 6px;
    font-family: var(--font-mono, monospace);
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base, 200ms) var(--ease-out, ease-out);
    z-index: 1000;
}

[data-shortcut]:hover::after {
    opacity: 1;
}

/* Hide on touch devices */
@media (pointer: coarse) {
    [data-shortcut]::after {
        display: none;
    }
}

/* ============ ERROR STATES ============ */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 24px;
    text-align: center;
    color: var(--text-secondary);
    animation: fadeIn var(--duration-base, 200ms) var(--ease-out, ease-out);
}

.error-state-icon {
    font-size: 2.5rem;
    line-height: 1;
    opacity: 0.5;
}

.error-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.error-state-message {
    font-size: 0.875rem;
    color: var(--text-muted);
    max-width: 320px;
    line-height: 1.5;
    margin: 0;
}

.error-state-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-active);
    background: var(--color-active-soft);
    border: 1px solid var(--color-active);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: transform var(--duration-base, 200ms) var(--ease-out, ease-out), opacity var(--duration-base, 200ms) var(--ease-out, ease-out), background-color var(--duration-base, 200ms) var(--ease-out, ease-out), border-color var(--duration-base, 200ms) var(--ease-out, ease-out), color var(--duration-base, 200ms) var(--ease-out, ease-out), box-shadow var(--duration-base, 200ms) var(--ease-out, ease-out);
}

.error-state-retry:hover {
    background: var(--color-active);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.error-state-retry:active {
    transform: scale(0.97);
}

/* Connection status indicator */
.connection-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: var(--radius-sm, 4px);
    transition: transform var(--duration-base, 200ms) var(--ease-out, ease-out), opacity var(--duration-base, 200ms) var(--ease-out, ease-out), background-color var(--duration-base, 200ms) var(--ease-out, ease-out), border-color var(--duration-base, 200ms) var(--ease-out, ease-out), color var(--duration-base, 200ms) var(--ease-out, ease-out), box-shadow var(--duration-base, 200ms) var(--ease-out, ease-out);
}

.connection-status.connected {
    color: var(--color-success, #16a34a);
}

.connection-status.disconnected {
    color: var(--color-error, #dc3545);
    background: rgba(220, 53, 69, 0.08);
}

.connection-status.reconnecting {
    color: var(--color-warning, #f59e0b);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Inline error toast */
.error-toast {
    position: fixed;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--color-error, #dc3545);
    border-inline-start: 4px solid var(--color-error, #dc3545);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg);
    font-size: 0.85rem;
    color: var(--text-primary);
    z-index: 10000;
    animation: slideInRight var(--duration-base, 200ms) var(--ease-out, ease-out);
    max-width: 400px;
}

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

.error-toast-close {
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    transition: color var(--duration-base, 200ms);
}

.error-toast-close:hover {
    color: var(--text-primary);
}

/* Toast Manager container */
.toast-manager-container {
    position: fixed;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10001;
    pointer-events: none;
}

.toast-manager-container > * {
    pointer-events: auto;
    position: relative;
}

/* Toast type variants */
.toast-info {
    border-inline-start-color: var(--color-active, #2563eb);
}

.toast-success {
    border-inline-start-color: var(--color-success, #16a34a);
}

.toast-warning {
    border-inline-start-color: var(--color-warning, #f59e0b);
}

.toast-icon {
    font-size: 1.1rem;
    font-weight: 600;
    flex-shrink: 0;
}

.toast-info .toast-icon { color: var(--color-active, #2563eb); }
.toast-success .toast-icon { color: var(--color-success, #16a34a); }
.toast-warning .toast-icon { color: var(--color-warning, #f59e0b); }
.toast-error .toast-icon { color: var(--color-error, #dc3545); }

.toast-action {
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-active);
    background: none;
    border: 1px solid var(--color-active);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: transform var(--duration-base, 200ms), opacity var(--duration-base, 200ms), background-color var(--duration-base, 200ms), border-color var(--duration-base, 200ms), color var(--duration-base, 200ms), box-shadow var(--duration-base, 200ms);
    white-space: nowrap;
}

.toast-action:hover {
    background: var(--color-active);
    color: white;
}

/* ============ EMPTY STATES ============ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
    animation: fadeIn var(--duration-slow, 300ms) var(--ease-out, ease-out);
}

.empty-state-illustration {
    font-size: 3rem;
    line-height: 1;
    opacity: 0.3;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .empty-state-illustration {
        animation: none;
    }
}

.empty-state-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.empty-state-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    max-width: 280px;
    line-height: 1.5;
    margin: 0;
}

.empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background: var(--color-active);
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: transform var(--duration-base, 200ms) var(--ease-out, ease-out), opacity var(--duration-base, 200ms) var(--ease-out, ease-out), background-color var(--duration-base, 200ms) var(--ease-out, ease-out), border-color var(--duration-base, 200ms) var(--ease-out, ease-out), color var(--duration-base, 200ms) var(--ease-out, ease-out), box-shadow var(--duration-base, 200ms) var(--ease-out, ease-out);
}

.empty-state-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
}

.empty-state-action:active {
    transform: scale(0.97);
}

/* Sidebar-specific empty state */
.sidebar .empty-state {
    padding: 32px 16px;
}

.sidebar .empty-state-illustration {
    font-size: 2rem;
}

/* ============ ACCENT COLOR ============ */
:root {
    accent-color: var(--color-active, #2563eb);
}

/* Specific form control accents */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--color-active, #2563eb);
}

/* ============ CONTENT VISIBILITY ============ */
@supports (content-visibility: auto) {
    /* Off-screen conversation items */
    .conversation-item {
        content-visibility: auto;
        contain-intrinsic-size: auto 60px;
    }

    /* Off-screen messages */
    .message-bubble {
        content-visibility: auto;
        contain-intrinsic-size: auto 100px;
    }

    /* Pipeline panel when hidden */
    .pipeline-panel:not(.visible) {
        content-visibility: hidden;
    }
}

/* ============ CARET COLOR ============ */
input,
textarea,
[contenteditable] {
    caret-color: var(--color-active, #2563eb);
}

/* ============ CARET SHAPE ============ */
.message-input-area textarea,
#messageInput {
    caret-shape: bar;
}

/* ============ INTERPOLATE-SIZE ============ */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}

/* ============ SCOPED CONVERSATION STYLES ============ */
@supports (selector(:scope)) {
  @scope (.conversation-item) to (.conversation-item .nested-excluded) {
    .title { font-weight: 600; }
    .preview { opacity: 0.7; font-size: 0.85em; }
    .timestamp { font-size: 0.75em; opacity: 0.5; }
  }
}

/* ============ THEME TRANSITION ============ */
:root {
    transition: background-color var(--duration-slow, 300ms) ease,
                color var(--duration-slow, 300ms) ease;
}

/* Skip transition on initial load */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* ============ ENHANCED BACKDROP DEPTH ============ */
@supports (backdrop-filter: blur(1px)) {
    .input-pedestal {
        backdrop-filter: blur(8px) saturate(1.1);
        -webkit-backdrop-filter: blur(8px) saturate(1.1);
    }
}

/* ============ SCROLLBAR GUTTER ============ */
@supports (scrollbar-gutter: stable) {
    .messages-container,
    .conversation-list,
    .sidebar {
        scrollbar-gutter: stable;
    }
}

/* ============ TEXT WRAP BALANCE ============ */
@supports (text-wrap: balance) {
    h1, h2, h3, h4, h5, h6,
    .empty-state-title,
    .error-state-title,
    .modal-title {
        text-wrap: balance;
    }
}

@supports (text-wrap: pretty) {
    .message-text,
    .message-content p {
        text-wrap: pretty;
    }
}

/* ============ LINE CLAMP ============ */
.conversation-preview,
.conversation-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ SCROLL PROGRESS INDICATOR ============ */
.scroll-progress {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    height: 2px;
    background: var(--bg-chrome);
    overflow: hidden;
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--color-active, #2563eb);
    transition: width 100ms linear;
    will-change: width;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress-bar {
        transition: none;
    }
}

/* ============ UNREAD BADGE ============ */
.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: white;
    background: var(--color-active, #2563eb);
    border-radius: 999px;
    line-height: 1;
    animation: badgeAppear var(--duration-base, 200ms) var(--ease-out, ease-out) both;
    flex-shrink: 0;
}

/* Pulsing for new messages */
.unread-badge.new-message {
    animation: badgeAppear var(--duration-base, 200ms) var(--ease-out, ease-out) both,
               pulse 2s ease-in-out 3;
}

/* ============================================================
   CSS CONTAINMENT — rendering performance optimization
   ============================================================ */

/* Sidebar: layout + paint containment (fixed dimensions) */
.sidebar {
    contain: layout style paint;
}

/* Message list container: layout containment */
.messages-container {
    contain: layout style;
}

/* Individual conversation items: layout + paint (many repeated items) */
.conversation-item {
    contain: layout style paint;
    contain-intrinsic-size: auto 64px;
}

/* Message bubbles: layout + paint containment */
.message-bubble,
.message {
    contain: layout style paint;
    contain-intrinsic-size: auto 100px;
}

/* Header: strict containment (fixed size, isolated) */
.app-header,
header {
    contain: layout size style paint;
}

/* Pipeline panel: paint containment */
.pipeline-panel {
    contain: layout style paint;
}

/* Modal overlays: strict isolation */
.modal-overlay,
.modal-backdrop {
    contain: strict;
}

/* Input area: layout containment */
.input-area,
.input-pedestal {
    contain: layout style;
}

/* ============================================================
   HIGH CONTRAST MODE — accessibility enhancement
   ============================================================ */
@media (prefers-contrast: more) {
    :root {
        --border-primary: #000000;
        --border-secondary: #333333;
        --text-primary: #000000;
        --text-secondary: #1a1a1a;
        --bg-primary: #ffffff;
        --bg-secondary: #f0f0f0;
        --color-active: #0000cc;
    }

    .conversation-item,
    .message-bubble,
    .btn,
    button,
    input,
    textarea,
    select {
        border: 2px solid currentColor;
    }

    .sidebar {
        border-right: 3px solid var(--border-primary);
    }

    a, .link {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }

    ::placeholder {
        color: #555555;
        opacity: 1;
    }

    .pipeline-stage {
        border: 2px solid var(--border-primary);
    }
}

/* ============================================================
   FORCED COLORS MODE — Windows High Contrast support
   ============================================================ */
@media (forced-colors: active) {
    .btn,
    button {
        border: 1px solid ButtonText;
    }

    .conversation-item.active {
        border: 2px solid Highlight;
        background: Highlight;
        color: HighlightText;
    }

    .unread-badge {
        border: 1px solid ButtonText;
    }

    .pipeline-stage {
        border: 1px solid ButtonText;
    }

    svg, .icon {
        forced-color-adjust: auto;
    }
}

/* ============================================================
   PRINT STYLES — clean output for printing conversations
   ============================================================ */
@media print {
    .sidebar,
    .app-header,
    header,
    .input-area,
    .input-pedestal,
    .pipeline-panel,
    .toast-manager-container,
    .scroll-progress,
    .shortcut-hints,
    .btn,
    button:not(.print-visible) {
        display: none !important;
    }

    .messages-container,
    .messages {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .message-bubble {
        break-inside: avoid;
        border: 1px solid #ccc;
        margin-bottom: 8px;
        box-shadow: none !important;
    }

    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    .conversation-title::before {
        content: "Conversation: ";
        font-weight: normal;
    }

    @page {
        margin: 2cm;
        @bottom-center {
            content: "MODEL — Page " counter(page);
        }
    }
}

/* ============================================================
   REDUCED TRANSPARENCY — accessibility for transparency-sensitive users
   ============================================================ */
@media (prefers-reduced-transparency: reduce) {
    .input-pedestal,
    .modal-overlay,
    .modal-backdrop,
    .toast-manager-container .toast {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--bg-secondary) !important;
        opacity: 1 !important;
    }

    .sidebar {
        background: var(--bg-secondary) !important;
    }
}

/* ============================================================
   POPOVER API STYLES — native popover enhancement
   ============================================================ */
@supports (selector(:popover-open)) {
    [popover] {
        background: var(--bg-primary, #ffffff);
        color: var(--text-primary, #1a1a2e);
        border: 1px solid var(--border-primary, #e2e8f0);
        border-radius: var(--radius-lg, 12px);
        box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1));
        padding: var(--space-md, 16px);
        max-width: min(90vw, 480px);
        inset: unset;
        margin: 0;
    }

    [popover]:popover-open {
        animation: popoverIn var(--duration-base, 200ms) var(--ease-out, ease-out);
    }

    @keyframes popoverIn {
        from { opacity: 0; transform: scale(0.95) translateY(-4px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }

    [popover]::backdrop {
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}

/* ============================================================
   NATIVE DIALOG STYLES — progressive enhancement
   ============================================================ */
dialog {
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #1a1a2e);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1));
    padding: 0;
    max-width: min(90vw, 560px);
    width: 100%;
    overflow: hidden;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: dialogBackdropIn 200ms ease-out;
}

@keyframes dialogBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

dialog[open] {
    animation: dialogSlideIn var(--duration-base, 200ms) var(--ease-out, ease-out);
}

@keyframes dialogSlideIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

dialog .dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md, 16px) var(--space-lg, 24px);
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

dialog .dialog-body {
    padding: var(--space-lg, 24px);
}

dialog .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm, 8px);
    padding: var(--space-md, 16px) var(--space-lg, 24px);
    border-top: 1px solid var(--border-primary, #e2e8f0);
}

/* ============================================================
   SCROLL SNAP — momentum-based scroll anchoring
   ============================================================ */

/* Conversation list: snap to items for precise navigation */
.conversation-list,
.sidebar-conversations {
    scroll-snap-type: y proximity;
    scroll-padding-top: 8px;
}

.conversation-item {
    scroll-snap-align: start;
}

/* Messages: snap to bottom (latest message) */
.messages-container,
.messages {
    scroll-snap-type: y proximity;
}

.message:last-child {
    scroll-snap-align: end;
}

/* ============================================================
   @STARTING-STYLE — entry animations for dynamically added elements
   ============================================================ */
@supports (selector(@starting-style)) {
    /* Messages appearing in the chat */
    .message {
        transition: opacity var(--duration-base, 200ms) var(--ease-out, ease-out),
                    transform var(--duration-base, 200ms) var(--ease-out, ease-out);
    }

    @starting-style {
        .message {
            opacity: 0;
            transform: translateY(8px);
        }
    }

    /* Toast notifications */
    .error-toast,
    .toast-manager-container .error-toast {
        transition: opacity var(--duration-base, 200ms) var(--ease-out, ease-out),
                    transform var(--duration-base, 200ms) var(--ease-out, ease-out);
    }

    @starting-style {
        .error-toast,
        .toast-manager-container .error-toast {
            opacity: 0;
            transform: translateX(100%);
        }
    }

    /* Conversation items */
    .conversation-item {
        transition: opacity 150ms ease-out, transform 150ms ease-out;
    }

    @starting-style {
        .conversation-item {
            opacity: 0;
            transform: translateX(-12px);
        }
    }

    /* Modal overlays */
    .modal-overlay {
        transition: opacity 200ms ease-out;
    }

    @starting-style {
        .modal-overlay {
            opacity: 0;
        }
    }

    /* ── Cycle 107: Entry Animations for Regular Elements ── */

    /* Card/feed items: slide+fade entrance */
    .mn-card-enter {
        transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }
    @starting-style {
        .mn-card-enter {
            opacity: 0;
            transform: translateY(16px) scale(0.98);
        }
    }

    /* List items: slide-from-left entrance */
    .mn-list-item-enter {
        transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1),
                    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
    @starting-style {
        .mn-list-item-enter {
            opacity: 0;
            transform: translateX(-20px);
        }
    }

    /* Badges: scale+fade pop-in */
    .mn-badge-enter {
        transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1),
                    transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }
    @starting-style {
        .mn-badge-enter {
            opacity: 0;
            transform: scale(0.5);
        }
    }

    /* Toasts: slide-from-right (enhanced from base) */
    .mn-toast-enter {
        transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1),
                    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
    @starting-style {
        .mn-toast-enter {
            opacity: 0;
            transform: translateX(100%) scale(0.95);
        }
    }

    /* Chips: pop-in with spring physics */
    .mn-chip-enter {
        transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @starting-style {
        .mn-chip-enter {
            opacity: 0;
            transform: scale(0.3) translateY(10px);
        }
    }

    /* Dividers: expand-width entrance */
    .mn-divider-enter {
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.3s ease-out;
        transform-origin: left center;
    }
    @starting-style {
        .mn-divider-enter {
            opacity: 0;
            transform: scaleX(0);
        }
    }
}

/* ── reduced-motion fallbacks for entry animations ── */
@media (prefers-reduced-motion: reduce) {
    .mn-card-enter,
    .mn-list-item-enter,
    .mn-badge-enter,
    .mn-toast-enter,
    .mn-chip-enter,
    .mn-divider-enter {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   DISCRETE PROPERTY TRANSITIONS — display/visibility animation
   ============================================================ */
@supports (transition-behavior: allow-discrete) {
    .modal-overlay,
    .toast-manager-container .error-toast,
    [popover] {
        transition-behavior: allow-discrete;
        transition-property: opacity, transform, display;
        transition-duration: var(--duration-base, 200ms);
        transition-timing-function: var(--ease-out, ease-out);
    }
}

/* ============================================================
   ANCHOR POSITIONING — future-ready tooltip/popover anchoring
   ============================================================ */
@supports (anchor-name: --tooltip) {
    [data-tooltip] {
        anchor-name: --tooltip-anchor;
    }

    .tooltip-popover {
        position-anchor: --tooltip-anchor;
        inset-area: top;
        margin-bottom: 8px;
        position: fixed;
    }
}

/* ============================================================
   LAZY IMAGE LOADING — progressive image presentation
   ============================================================ */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity var(--duration-base, 200ms) var(--ease-out, ease-out);
}

img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
    opacity: 1;
}

/* Aspect ratio hints for common image sizes */
img {
    max-width: 100%;
    height: auto;
}

.message img,
.message-content img {
    border-radius: var(--radius-md, 8px);
    margin: var(--space-xs, 4px) 0;
}

/* ============================================================
   LOGIN/REGISTER MICRO-INTERACTIONS — premium form polish
   ============================================================ */

/* Staggered form field entrance */
.pedestal-form .pedestal-input-group:nth-child(1) {
    animation: formFieldIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.pedestal-form .pedestal-input-group:nth-child(2) {
    animation: formFieldIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.pedestal-form .pedestal-input-group:nth-child(3) {
    animation: formFieldIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}
.pedestal-enter {
    animation: formFieldIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}

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

/* Input focus glow ripple effect */
.pedestal-form .pedestal-input-group input {
    position: relative;
}

.pedestal-form .pedestal-input-group input:focus {
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.15),
        0 0 20px rgba(37, 99, 235, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Label lift on focus-within */
.pedestal-input-group:focus-within .pedestal-label {
    color: rgba(37, 99, 235, 0.8);
    transition: color 0.2s ease;
}

/* Button shimmer on hover */
.pedestal-enter {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.pedestal-enter::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0.12) 55%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: -1;
}

.pedestal-enter:hover::after {
    transform: translateX(100%);
}

/* Cloud breathing pulse */
.pedestal-cloud {
    animation:
        mn-cloud-appear 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards,
        cloudBreathe 6s ease-in-out 2.3s infinite;
}

@keyframes cloudBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Key card reveal shimmer */
.pedestal-key-card {
    position: relative;
    overflow: hidden;
}

.pedestal-key-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(37, 99, 235, 0.03) 60deg,
        transparent 120deg
    );
    animation: keyCardRotate 8s linear infinite;
    z-index: 0;
}

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

.pedestal-key-card > * {
    position: relative;
    z-index: 1;
}

/* Copy button success pulse */
.pedestal-enter.copied {
    animation: copyPulse 0.3s ease-out;
}

@keyframes copyPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Footer link hover underline animation */
.pedestal-footer a {
    position: relative;
}

.pedestal-footer a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}

.pedestal-footer a:hover::after {
    width: 100%;
}

/* ============================================================
   MESSAGE BUBBLE PREMIUM POLISH — elevated chat experience
   ============================================================ */

/* Gradient border on assistant messages */
.message.assistant .message-bubble {
    border-image: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.15) 0%,
        rgba(124, 58, 237, 0.08) 50%,
        rgba(37, 99, 235, 0.05) 100%
    ) 1;
    border-width: 1px;
    border-style: solid;
}

/* Hover elevation on messages */
.message-bubble {
    transition:
        box-shadow var(--duration-base, 200ms) var(--ease-out, ease-out),
        transform var(--duration-base, 200ms) var(--ease-out, ease-out);
}

.message-bubble:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* User message alignment refinement */
.message.user .message-bubble {
    background: linear-gradient(135deg,
        var(--color-active, #2563eb) 0%,
        color-mix(in srgb, var(--color-active, #2563eb), var(--color-accent-secondary, #7c3aed) 25%) 100%
    );
}

/* Typing indicator dots */
.typing-indicator {
    display: inline-flex;
    gap: 4px;
    padding: 8px 16px;
    align-items: center;
}

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

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

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

@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* ============================================================
   SIDEBAR PREMIUM POLISH — refined navigation
   ============================================================ */

/* Conversation item hover micro-lift */
.conversation-item {
    transition:
        background var(--duration-fast, 150ms) ease,
        transform var(--duration-fast, 150ms) ease,
        box-shadow var(--duration-fast, 150ms) ease;
}

.conversation-item:hover {
    transform: translateX(2px);
}

.conversation-item.active {
    border-left: 3px solid var(--color-active, #2563eb);
    padding-left: calc(var(--space-sm, 8px) - 3px);
}

/* Sidebar search input polish */
.sidebar-search-input {
    transition:
        border-color var(--duration-fast, 150ms) ease,
        box-shadow var(--duration-fast, 150ms) ease,
        background var(--duration-fast, 150ms) ease;
}

.sidebar-search-input:focus {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
    border-color: var(--color-active, #2563eb);
}

/* ============================================================
   INPUT AREA PREMIUM POLISH — elevated compose experience
   ============================================================ */

/* Textarea glow on focus */
#messageInput:focus {
    box-shadow:
        0 0 0 2px rgba(37, 99, 235, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.04);
    border-color: var(--color-active, #2563eb);
}

/* Send button pulse when ready */
@keyframes sendReady {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
}

.send-btn:not(:disabled) {
    animation: sendReady 2s ease-in-out infinite;
}

.send-btn:not(:disabled):hover {
    animation: none;
    transform: scale(1.05);
    transition: transform 150ms ease;
}

/* ============================================================
   HEADER BAR PREMIUM POLISH — status bar refinement
   ============================================================ */

/* Header glassmorphism */
.header-bar {
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* Status dot animation */
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.header-status-dot {
    animation: statusPulse 2s ease-in-out infinite;
}

/* Header action button hover lift */
.header-action-btn {
    transition:
        background var(--duration-fast, 150ms) ease,
        color var(--duration-fast, 150ms) ease,
        transform var(--duration-fast, 150ms) ease;
}

.header-action-btn:hover {
    transform: translateY(-1px);
}

/* ============================================================
   PIPELINE PANEL PREMIUM POLISH — stage visualization
   ============================================================ */

/* Pipeline stage completion animation */
.pipeline-stage.complete {
    position: relative;
    overflow: hidden;
}

.pipeline-stage.complete::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-active, #2563eb),
        var(--color-accent-secondary, #7c3aed)
    );
    animation: stageComplete 0.3s ease-out;
}

@keyframes stageComplete {
    from { transform: scaleX(0); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}

/* ============================================================
   TAB VISIBILITY — pause animations when tab is hidden
   ============================================================ */
.tab-hidden * {
    animation-play-state: paused !important;
}

.tab-hidden .header-status-dot,
.tab-hidden .typing-indicator span {
    animation-play-state: paused !important;
}

/* ═══════════════════════════════════════════════════════════════
   VIEW TRANSITIONS
   ═══════════════════════════════════════════════════════════════ */
::view-transition-old(root) {
  animation: 150ms ease-out vt-fade-out;
}
::view-transition-new(root) {
  animation: 150ms ease-in vt-fade-in;
}
@keyframes vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Named view transition for messages area */
.messages-container {
  view-transition-name: messages;
}
::view-transition-old(messages) {
  animation: 200ms ease-out vt-slide-out-left;
}
::view-transition-new(messages) {
  animation: 200ms ease-in vt-slide-in-right;
}
@keyframes vt-slide-out-left {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-20px); opacity: 0; }
}
@keyframes vt-slide-in-right {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL-DRIVEN ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@supports (animation-timeline: scroll()) {
  /* Scroll progress indicator driven by scroll position */
  .scroll-progress-bar {
    animation: scroll-progress linear;
    animation-timeline: scroll(nearest block);
    transform-origin: left;
  }

  @keyframes scroll-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* Message reveal on scroll */
  .message-bubble {
    animation: message-scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  @keyframes message-scroll-reveal {
    from {
      opacity: 0.3;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Conversation item subtle scale on scroll */
  .conversation-item {
    animation: conversation-scroll-scale linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }

  @keyframes conversation-scroll-scale {
    from {
      opacity: 0.7;
      transform: scale(0.98);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Pipeline stages animate as they scroll into view */
  .pipeline-stage {
    animation: stage-scroll-entry linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }

  @keyframes stage-scroll-entry {
    from {
      opacity: 0;
      transform: translateX(-8px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED DATA MODE
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-data: reduce) {
  /* Disable non-essential background effects */
  .login-cloud,
  .register-cloud,
  .grain-overlay,
  .shimmer-effect {
    display: none !important;
  }

  /* Remove backdrop-filter (expensive on mobile data) */
  .header,
  .input-pedestal,
  .modal-overlay,
  .shortcuts-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Disable decorative animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  /* Remove box-shadows (save paint cycles) */
  .conversation-item,
  .message-bubble,
  .modal {
    box-shadow: none !important;
  }

  /* Simplify gradients */
  .message-bubble.assistant::before,
  .message-bubble.user::before {
    background: var(--border-color) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRECISE TYPOGRAPHY (text-box-trim)
   ═══════════════════════════════════════════════════════════════ */
@supports (text-box-trim: both) {
  h1, h2, h3, .modal-title, .sidebar-header h2 {
    text-box-trim: both;
    text-box-edge: cap alphabetic;
  }

  .conversation-item .title {
    text-box-trim: trim-end;
    text-box-edge: cap alphabetic;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AUTO DARK MODE DETECTION
   Users without an explicit theme toggle get system preference
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg-primary:       #0d1117;
    --bg-secondary:     #161b22;
    --bg-chrome:        #161b22;
    --bg-field:         #1c2128;
    --bg-elevated:      #21262d;
    --text-primary:     #e6edf3;
    --text-secondary:   #8b949e;
    --text-muted:       #9aa0a6;  /* WCAG AA compliant: 4.6:1 on #0d1117 */
    --text-link:        #58a6ff;
    --text-link-hover:  #79c0ff;
    --border-color:     rgba(255, 255, 255, 0.1);
    --border-light:     rgba(255, 255, 255, 0.06);
    --border-heavy:     rgba(255, 255, 255, 0.15);
  }
}

/* ═══════════════════════════════════════════════════════════════
   KEYBOARD SHORTCUTS OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: fade-in 150ms ease;
}

.shortcuts-card {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-primary, #e0e0e0);
  border-radius: var(--radius-lg, 12px);
  padding: 24px 32px;
  max-width: 420px;
  width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.shortcuts-card h3 {
  margin: 0 0 16px;
  font-size: 1.1em;
  font-weight: 600;
  border-bottom: 1px solid var(--border-primary, #e0e0e0);
  padding-bottom: 12px;
}

.shortcuts-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shortcuts-card li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.9em;
}

.shortcuts-card kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  background: var(--bg-secondary, #f5f5f5);
  border: 1px solid var(--border-primary, #e0e0e0);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.shortcuts-dismiss {
  margin: 16px 0 0;
  font-size: 0.8em;
  opacity: 0.5;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST QUEUE SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.toast-manager-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
  width: 100%;
}

.toast-manager-container > .error-toast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  animation: toast-enter 300ms ease forwards;
  transform-origin: top right;
}

.toast-manager-container > .error-toast.dismissing {
  animation: toast-exit 200ms ease forwards;
}

@keyframes toast-enter {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-exit {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(20px) scale(0.95); }
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-active, #2962ff);
  animation: toast-countdown linear forwards;
}

@keyframes toast-countdown {
  from { width: 100%; }
  to { width: 0%; }
}

.error-toast.toast-success { border-left: 3px solid #4caf50; }
.error-toast.toast-error { border-left: 3px solid #f44336; }
.error-toast.toast-warning { border-left: 3px solid #ff9800; }
.error-toast.toast-info { border-left: 3px solid var(--color-active, #2962ff); }

/* ═══════════════════════════════════════════════════════════════
   INPUT VALIDATION MICRO-ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.form-field.invalid input,
.form-field.invalid textarea,
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: #f44336;
  animation: input-shake 400ms ease;
}

@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

.form-field.valid input,
.form-field.valid textarea,
input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
  border-color: #4caf50;
}

/* Success checkmark animation for validated fields */
.form-field.valid::after {
  content: '\2713';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  color: #4caf50;
  font-size: 1.1em;
  animation: check-pop 300ms ease forwards;
}

@keyframes check-pop {
  0% { transform: translateY(-50%) scale(0); }
  60% { transform: translateY(-50%) scale(1.2); }
  100% { transform: translateY(-50%) scale(1); }
}

/* Password strength indicator bar (class-based variant) */
.password-strength.weak { width: 33%; background: #f44336; }
.password-strength.medium { width: 66%; background: #ff9800; }
.password-strength.strong { width: 100%; background: #4caf50; }

/* ═══════════════════════════════════════════════════════════════
   CSS SUBGRID — Progressive Enhancement
   Aligns child elements to parent grid tracks for tighter layouts.
   Wrapped in @supports so non-supporting browsers keep flexbox.
   ═══════════════════════════════════════════════════════════════ */
@supports (grid-template-rows: subgrid) {
  /* Conversation items inherit parent grid columns for alignment */
  .conversation-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .conversation-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 8px;
    align-items: baseline;
  }

  .conversation-item .avatar,
  .conversation-item .status-indicator {
    grid-row: 1 / -1;
  }

  .conversation-item .title {
    grid-column: 2;
    grid-row: 1;
  }

  .conversation-item .preview {
    grid-column: 2;
    grid-row: 2;
  }

  .conversation-item .timestamp {
    grid-column: 3;
    grid-row: 1;
  }

  /* Message layout with subgrid for avatar + content alignment */
  .message-bubble {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 12px;
    align-items: start;
  }

  /* Pipeline stages grid */
  .pipeline-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pipeline-stage {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0 8px;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM SCROLLBAR REFINEMENT
   Enhances existing scrollbar styles with hover-reveal behaviour
   on sidebar and message containers, plus an active state thumb.
   ═══════════════════════════════════════════════════════════════ */

/* Global hover feedback — slightly stronger thumb on hover */
*:hover {
  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
}

/* Active (drag) state for WebKit thumbs */
::-webkit-scrollbar-thumb:active {
  background: rgba(128, 128, 128, 0.8);
}

/* Dark theme — active state */
[data-theme="dark"] ::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.35);
}

/* Hide scrollbar until hover — sidebar conversation list */
.conversation-list::-webkit-scrollbar {
  width: 0;
}

.conversation-list:hover::-webkit-scrollbar {
  width: 6px;
}

.conversation-list {
  scrollbar-width: none;
}

.conversation-list:hover {
  scrollbar-width: thin;
}

/* Hide scrollbar until hover — messages container */
.messages-container::-webkit-scrollbar {
  width: 0;
}

.messages-container:hover::-webkit-scrollbar {
  width: 6px;
}

.messages-container {
  scrollbar-width: none;
}

.messages-container:hover {
  scrollbar-width: thin;
}

/* ═══════════════════════════════════════════════════════════════
   CSS light-dark() FUNCTION — Progressive Enhancement
   Provides simpler theming for components that support it.
   Falls back to existing var(--*) tokens in non-supporting browsers.
   ═══════════════════════════════════════════════════════════════ */
@supports (color: light-dark(white, black)) {
  :root {
    color-scheme: light dark;
  }

  .toast-item {
    background: light-dark(#fff, #1e1e1e);
    border-color: light-dark(#e0e0e0, #333);
  }

  .shortcuts-card {
    background: light-dark(#fff, #1e1e1e);
    border-color: light-dark(#e0e0e0, #333);
  }

  .drag-placeholder {
    background: light-dark(rgba(41, 98, 255, 0.15), rgba(100, 150, 255, 0.2));
  }
}

/* ═══════════════════════════════════════════════════════════════
   IDLE STATE
   ═══════════════════════════════════════════════════════════════ */
.idle .sidebar {
  opacity: 0.6;
  transition: opacity 2s ease;
}

.idle .header-bar {
  opacity: 0.7;
  transition: opacity 2s ease;
}

.idle .messages-container {
  filter: brightness(0.9);
  transition: filter 2s ease;
}

/* Subtle breathing glow on idle */
.idle .message-input-area {
  animation: idle-breathe 4s ease-in-out infinite;
}

@keyframes idle-breathe {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 20px rgba(41, 98, 255, 0.08); }
}

/* Instant recovery on activity */
.sidebar,
.header-bar,
.messages-container {
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM FOCUS RINGS
   ═══════════════════════════════════════════════════════════════ */

/* Enhanced focus for interactive elements — add box-shadow glow */
button:focus-visible,
.conversation-item:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-active, #2962ff);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(41, 98, 255, 0.15);
}

/* Input focus enhancement — inset outline with soft glow */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-active, #2962ff);
  outline-offset: -1px;
  box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.1);
}

/* ==========================================================================
   CSS CONTAINER QUERIES — Responsive component-level breakpoints
   ========================================================================== */

@supports (container-type: inline-size) {

  /* --- Container definitions --- */

  .sidebar {
    container-type: inline-size;
    container-name: sidebar;
  }

  .messages-container {
    container-type: inline-size;
    container-name: messages;
  }

  .pipeline-panel {
    container-type: inline-size;
    container-name: pipeline;
  }

  /* --- Sidebar: collapse at narrow widths --- */

  @container sidebar (max-width: 200px) {
    .conversation-item .conversation-preview,
    .conversation-item .conversation-snippet {
      display: none;
    }

    .conversation-item .conversation-title {
      font-size: 0.75rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-header {
      font-size: 0.7rem;
      padding: 4px 6px;
    }

    .conversation-item {
      padding: 4px 6px;
    }

    .conversation-list {
      font-size: 0.75rem;
    }
  }

  /* --- Messages: compact layout at narrow widths --- */

  @container messages (max-width: 500px) {
    .message {
      padding: 8px 10px;
    }

    .message-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }

    .message-meta,
    .message-timestamp {
      font-size: 0.7rem;
      margin-left: 0;
    }

    .message-content {
      padding: 6px 0;
      font-size: 0.85rem;
    }

    .message-actions {
      flex-wrap: wrap;
      gap: 4px;
    }
  }

  /* --- Pipeline: vertical stack at narrow widths --- */

  @container pipeline (max-width: 300px) {
    .pipeline-stages,
    .pipeline-stage-list {
      flex-direction: column;
      gap: 4px;
    }

    .pipeline-stage {
      flex-direction: column;
      align-items: flex-start;
      padding: 6px 8px;
      font-size: 0.75rem;
    }

    .pipeline-stage .stage-number,
    .pipeline-stage .stage-label {
      display: block;
      width: 100%;
    }

    .pipeline-header {
      font-size: 0.75rem;
      padding: 4px 8px;
    }

    .pipeline-progress {
      flex-direction: column;
      gap: 2px;
    }
  }

} /* end @supports container-type */


/* ==========================================================================
   NATIVE <dialog> ELEMENT — Glassmorphism premium styling
   ========================================================================== */

dialog {
  border: none;
  border-radius: 8px;
  max-width: 560px;
  width: 90%;
  padding: 0;
  color: var(--color-text, #1a1a2e);
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

@supports (backdrop-filter: blur(12px)) {
  dialog {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
  }
}

dialog::backdrop {
  background: rgba(10, 10, 20, 0.55);
}

@supports (backdrop-filter: blur(4px)) {
  dialog::backdrop {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* Open animation */
dialog[open] {
  animation: dialog-fade-in 0.2s ease-out forwards;
}

@keyframes dialog-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Structural children */
dialog .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--font-mono, 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

dialog .dialog-body {
  padding: 20px;
  font-size: 0.9rem;
  line-height: 1.6;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

dialog .dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Close button */
dialog .dialog-close {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: var(--color-text-secondary, #6b7280);
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

dialog .dialog-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text, #1a1a2e);
}

dialog .dialog-close:focus-visible {
  outline: 2px solid var(--color-active, #2962ff);
  outline-offset: 2px;
}


/* ==========================================================================
   OVERSCROLL-BEHAVIOR — Prevent scroll chaining to parent page
   ========================================================================== */

@supports (overscroll-behavior: contain) {
  .messages-container {
    overscroll-behavior: contain;
  }

  .conversation-list {
    overscroll-behavior: contain;
  }

  .pipeline-panel {
    overscroll-behavior: contain;
  }
}


/* ==========================================================================
   1. CSS @property TYPED CUSTOM PROPERTIES — Animated Design Tokens
   ========================================================================== */

@property --glow-color {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(41, 98, 255, 0.3);
}

@property --glow-spread {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --progress-value {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* ── Glow-spread button hover effect ── */
.header-btn,
.send-btn,
.suggestion-chip,
.compare-toggle-btn,
.dag-show-full {
  --glow-spread: 0px;
  --glow-color: rgba(37, 99, 235, 0.3);
  transition:
    --glow-spread var(--duration-base, 200ms) var(--ease-out, ease-out),
    --glow-color var(--duration-base, 200ms) var(--ease-out, ease-out),
    background var(--duration-fast, 150ms) var(--ease-out, ease-out),
    color var(--duration-fast, 150ms) var(--ease-out, ease-out),
    border-color var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

.header-btn:hover,
.send-btn:hover,
.suggestion-chip:hover,
.compare-toggle-btn:hover,
.dag-show-full:hover {
  --glow-spread: 8px;
  --glow-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 var(--glow-spread) var(--glow-color);
}

.header-btn:active,
.send-btn:active,
.suggestion-chip:active {
  --glow-spread: 3px;
  --glow-color: rgba(37, 99, 235, 0.6);
}

/* ── Pipeline progress bar using --progress-value ── */
.pipeline-progress-bar {
  --progress-value: 0%;
  position: relative;
  height: 3px;
  background: rgba(37, 99, 235, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.pipeline-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--progress-value);
  background: linear-gradient(90deg, var(--color-active), var(--color-accent-secondary));
  border-radius: 2px;
  transition: --progress-value 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pipeline-progress-bar[data-complete]::after {
  --progress-value: 100%;
}

/* ── Gradient angle rotation on active/running elements ── */
.dag-node-running,
.pipeline-progress.active {
  --gradient-angle: 0deg;
  background: linear-gradient(
    var(--gradient-angle),
    rgba(37, 99, 235, 0.04) 0%,
    rgba(124, 58, 237, 0.04) 50%,
    rgba(37, 99, 235, 0.04) 100%
  );
  animation: rotateGradient 4s linear infinite;
}

@keyframes rotateGradient {
  to { --gradient-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .dag-node-running,
  .pipeline-progress.active {
    animation: none;
  }

  .header-btn,
  .send-btn,
  .suggestion-chip,
  .compare-toggle-btn,
  .dag-show-full {
    transition: background var(--duration-fast, 150ms) ease,
                color var(--duration-fast, 150ms) ease;
  }
}


/* ==========================================================================
   2. CSS text-wrap: balance — Typographic Line Balance
   ========================================================================== */

@supports (text-wrap: balance) {
  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  .toast-message {
    text-wrap: balance;
  }

  .dialog-header h2 {
    text-wrap: balance;
  }

  .qp-title {
    text-wrap: balance;
  }

  .dag-tip-title {
    text-wrap: balance;
  }

  .pipeline-progress-label {
    text-wrap: balance;
  }
}

@supports (text-wrap: pretty) {
  .conversation-title {
    text-wrap: pretty;
  }

  .dag-node-summary {
    text-wrap: pretty;
  }

  .message-content p {
    text-wrap: pretty;
  }
}


/* ==========================================================================
   3. CSS color-mix() — Dynamic Color Blending
   ========================================================================== */

@supports (color: color-mix(in srgb, red, blue)) {

  /* ── Interactive hover states: base color mixed with transparency ── */
  .header-btn:hover {
    background: color-mix(in srgb, var(--color-active) 15%, transparent);
  }

  .sidebar-item:hover {
    background: color-mix(in srgb, var(--color-active) 8%, transparent);
  }

  .cl-toggle-btn:hover {
    background: color-mix(in srgb, var(--color-active) 12%, transparent);
  }

  .rc-filter-pill:hover {
    background: color-mix(in srgb, var(--color-active) 12%, transparent);
  }

  .rc-search-nav-btn:hover {
    background: color-mix(in srgb, var(--color-active) 12%, transparent);
  }

  /* ── Disabled states: desaturated via transparency mix ── */
  [disabled],
  [aria-disabled="true"],
  .btn:disabled,
  .header-btn:disabled,
  .send-btn:disabled {
    color: color-mix(in srgb, currentColor 40%, transparent);
    pointer-events: none;
  }

  .suggestion-chip:disabled {
    color: color-mix(in srgb, currentColor 40%, transparent);
    border-color: color-mix(in srgb, var(--border-color, #ccc) 50%, transparent);
    cursor: default;
  }

  /* ── Assistant message bubble: subtle brand tint ── */
  .message.assistant {
    background: color-mix(in srgb, var(--color-active) 3%, var(--bg-primary));
  }

  /* ── Pipeline stage badges: lighter tinted backgrounds ── */
  .reasoning-mode-badge[data-mode="conceptual_rigor"] {
    background: color-mix(in srgb, #283593 10%, var(--bg-primary));
    border-color: color-mix(in srgb, #283593 40%, transparent);
  }

  .reasoning-mode-badge[data-mode="open_texture_deepening"] {
    background: color-mix(in srgb, #880e4f 10%, var(--bg-primary));
    border-color: color-mix(in srgb, #880e4f 40%, transparent);
  }

  /* ── Toast type borders: lighter color-mix variants ── */
  .toast.toast-success {
    border-left-color: color-mix(in srgb, hsl(145, 55%, 44%) 70%, white);
    background: color-mix(in srgb, hsl(145, 55%, 44%) 5%, var(--bg-primary));
  }

  .toast.toast-error {
    border-left-color: color-mix(in srgb, hsl(0, 65%, 50%) 70%, white);
    background: color-mix(in srgb, hsl(0, 65%, 50%) 5%, var(--bg-primary));
  }

  .toast.toast-warning {
    border-left-color: color-mix(in srgb, hsl(40, 85%, 50%) 70%, white);
    background: color-mix(in srgb, hsl(40, 85%, 50%) 5%, var(--bg-primary));
  }

  .toast.toast-info {
    border-left-color: color-mix(in srgb, var(--color-active) 70%, white);
    background: color-mix(in srgb, var(--color-active) 5%, var(--bg-primary));
  }

  /* ── Memory tier active: brand-tinted green ── */
  .memory-tier.active {
    background: color-mix(in srgb, hsl(145, 50%, 44%) 8%, var(--bg-primary));
    border-color: color-mix(in srgb, hsl(145, 50%, 44%) 60%, transparent);
  }

  /* ── DAG node states: blended status colors ── */
  .dag-node-complete {
    border-color: color-mix(in srgb, hsl(145, 55%, 44%) 25%, transparent);
  }

  .dag-node-running {
    border-color: color-mix(in srgb, var(--color-active) 40%, transparent);
  }

  /* ── Quality profile bar fills: color-mix for intermediate hues ── */
  .qp-bar-fill {
    background: color-mix(in srgb, var(--color-active) 80%, hsl(145, 50%, 44%));
  }

  /* ── Focus ring: semi-transparent brand color ── */
  .rc-search-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-active) 15%, transparent);
  }

  #depthSelect:focus,
  .depth-selector select:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-active) 25%, transparent);
  }

  .compare-search:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-active) 20%, transparent);
  }
}

/* ==========================================================================
   SR-ONLY — Visually hidden but accessible to screen readers
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.mentat-skip-link {
  position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
  background: var(--accent, #f4a261); color: var(--bg-primary, #0a0a0a);
  padding: 0.6rem 1.2rem; font-size: 0.875rem; font-weight: 600;
  border-radius: 0 0 6px 6px; z-index: 100000; text-decoration: none;
  transition: top 0.15s ease;
}
.mentat-skip-link:focus { top: 0; outline: 2px solid var(--accent, #f4a261); outline-offset: 2px; }

/* ======== CSS NATIVE NESTING ======== */
@supports (selector(&)) {
  /* Tooltip component with nesting */
  .tooltip-trigger {
    position: relative;
    cursor: help;

    & .tooltip-content {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) scale(0.95);
      opacity: 0;
      visibility: hidden;
      background: var(--bg-secondary, #1a1a2e);
      color: var(--text-primary, #e0e0e0);
      font-size: var(--text-xs-sm);
      padding: 6px 10px;
      border-radius: 4px;
      white-space: nowrap;
      transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
      pointer-events: none;
      z-index: 1000;

      &::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: var(--bg-secondary, #1a1a2e);
      }
    }

    &:hover .tooltip-content,
    &:focus-within .tooltip-content {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) scale(1);
    }
  }

  /* Notification badge nesting */
  .notification-badge {
    position: relative;

    & .badge-count {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 16px;
      height: 16px;
      background: #e53935;
      color: #fff;
      font-size: var(--text-2xs);
      font-weight: 600;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;

      &:empty { display: none; }
      &[data-count="0"] { display: none; }
    }
  }

  /* Context menu nesting */
  .context-menu {
    position: fixed;
    z-index: 10000;
    min-width: 180px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 4px 0;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.12s, transform 0.12s;
    pointer-events: none;

    &.visible {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }

    & .context-menu-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      font-size: var(--text-xs);
      cursor: pointer;
      color: var(--text-primary);
      transition: background 0.1s;

      &:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); }
      &.danger { color: #e53935; }
      &.disabled { opacity: 0.4; pointer-events: none; }
    }

    & .context-menu-separator {
      height: 1px;
      background: var(--border-color, #e0e0e0);
      margin: 4px 0;
    }
  }
}

/* ======== COLLAPSIBLE SECTIONS (details/summary) ======== */
details {
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}
details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  background: var(--bg-secondary, #fafafa);
  transition: background 0.15s;
  user-select: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: '';
  width: 0; height: 0;
  border: 5px solid transparent;
  border-left: 6px solid currentColor;
  transition: transform 0.2s;
  flex-shrink: 0;
}
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); }
details > .details-content { padding: 12px 14px; }
details[open] > .details-content {
  animation: detailsReveal 0.2s ease-out;
}
@keyframes detailsReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ======== DARK MODE TRANSITION ======== */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
  transition-delay: 0s !important;
}

/* ======== CSS MATH FUNCTIONS ======== */
@supports (width: round(1px, 1px)) {
  /* Snap spacing to 4px grid */
  .message { padding: round(nearest, 1rem, 4px); }
  .conversation-item { padding: round(nearest, 0.75rem, 4px); }

  /* Consistent avatar sizes snapped to 8px grid */
  .avatar, .skeleton-avatar {
    width: round(nearest, 2.5rem, 8px);
    height: round(nearest, 2.5rem, 8px);
  }

  /* Pipeline progress width snapped to nearest percentage */
  .pipeline-progress-fill {
    width: round(nearest, var(--progress, 0%), 1%);
  }
}

/* ======== POINTER-ADAPTIVE DESIGN ======== */
@media (pointer: coarse) {
  /* Larger touch targets for mobile/tablet */
  .header-btn, .action-btn { min-height: 44px; min-width: 44px; }
  .conversation-item { padding: 14px 12px; }
  .context-menu-item { padding: 12px 16px; font-size: var(--text-base); }
  .send-btn { min-height: 44px; min-width: 44px; }
  input, textarea, select { font-size: var(--text-md); } /* Prevent iOS zoom */
  details > summary { padding: 14px 16px; }
}

@media (pointer: fine) {
  /* Precision pointer — tighter, denser layout */
  .conversation-item { padding: 8px 10px; }
  .context-menu-item { padding: 6px 10px; }
}

@media (hover: none) {
  /* No hover capability — make hover states visible by default or remove them */
  .tooltip-trigger .tooltip-content { /* touch: show on focus only */ }
  .scrollbar-reveal::-webkit-scrollbar-thumb { opacity: 1; }
}

@media (any-pointer: coarse) and (any-pointer: fine) {
  /* Hybrid device (e.g., Surface) — use intermediate sizes */
  .header-btn, .action-btn { min-height: 40px; min-width: 40px; }
}

/* ======== MESSAGE SCROLL SNAP ======== */
@supports (scroll-snap-type: y proximity) {
  .messages-container {
    scroll-snap-type: y proximity;
    scroll-padding-top: 16px;
    scroll-padding-bottom: 16px;
  }

  .message {
    scroll-snap-align: start;
    scroll-margin-top: 8px;
  }

  /* Smooth scroll to newest message */
  .messages-container[data-auto-scroll="true"] {
    scroll-behavior: smooth;
  }
}

/* ======== ACCENT COLOR — NATIVE FORM CONTROLS ======== */
:root {
  accent-color: var(--color-active, #2962ff);
}
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--color-active, #2962ff);
}
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"],
[data-theme="dark"] input[type="range"],
[data-theme="dark"] progress {
  accent-color: #5c8aff;
}

/* ======== PREMIUM TEXT SELECTION ======== */
::selection {
  background: rgba(41, 98, 255, 0.2);
  color: inherit;
}
::-moz-selection {
  background: rgba(41, 98, 255, 0.2);
  color: inherit;
}
/* Code block selection — more visible */
pre::selection, code::selection,
pre ::-moz-selection, code ::-moz-selection {
  background: rgba(41, 98, 255, 0.3);
}
/* Dark theme selection */
[data-theme="dark"] ::selection {
  background: rgba(92, 138, 255, 0.3);
}

/* ======== PREMIUM PLACEHOLDER STYLING ======== */
::placeholder {
  color: var(--text-tertiary, #999);
  font-style: italic;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
:focus::placeholder {
  opacity: 0.4;
  transform: translateX(4px);
}
/* Specific placeholder refinements */
#messageInput::placeholder {
  font-style: normal;
  letter-spacing: 0.01em;
}
.search-input::placeholder {
  font-size: var(--text-xs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-style: normal;
}

/* ======== LIST MARKER STYLING ======== */
::marker {
  color: var(--color-active, #2962ff);
  font-weight: 600;
}
.message-content ol ::marker {
  font-size: 0.9em;
  font-family: var(--font-mono, monospace);
}
.message-content ul ::marker {
  color: var(--text-secondary, #666);
}

/* ======== FONT-VARIANT-NUMERIC — CONTEXTUAL NUMBER RENDERING ======== */

/* Tabular nums: columns, stages, timestamps — numbers must align vertically */
.pipeline-stage,
.message-timestamp,
.conversation-count {
  font-variant-numeric: tabular-nums;
}

/* Pseudo-element counters also need tabular alignment */
.pipeline-stage::before,
.message-timestamp::before,
.conversation-count::before {
  font-variant-numeric: tabular-nums;
}

/* Countdown / progress indicators */
.pipeline-progress,
.toast-progress {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Prose body copy — proportional for natural reading rhythm */
.message-content {
  font-variant-numeric: proportional-nums;
}

/* Conversation title subtitle / caption text — oldstyle for editorial warmth */
.conversation-title {
  font-variant-numeric: oldstyle-nums proportional-nums;
}

/* Inline fractions rendered with diagonal slash */
.fraction {
  font-variant-numeric: diagonal-fractions;
}

/* ======== CONTENT-VISIBILITY — OFF-SCREEN RENDERING PERFORMANCE ======== */

@supports (content-visibility: auto) {
  /* Message bubbles: most numerous off-screen elements in a long conversation */
  .message-bubble {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
  }

  /* Sidebar conversation list items */
  .conversation-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 64px;
  }

  /* Pipeline stage cards can be tall; hint a generous intrinsic height */
  .pipeline-stage {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
  }
}

/* ======== @SCOPE — COMPONENT-SCOPED STYLE ISOLATION ======== */

@supports selector(:scope) {
  /* ---- Sidebar scope ---- */
  @scope (.sidebar) {
    /* Scoped heading sizes — smaller, uppercase terminal labels */
    :scope h2,
    :scope h3 {
      font-size: var(--text-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-tertiary, #999);
      margin-block: 8px 4px;
    }

    /* Scoped links — muted, no underline by default */
    :scope a {
      color: var(--text-secondary, #666);
      text-decoration: none;
    }

    :scope a:hover {
      color: var(--color-active, #2962ff);
      text-decoration: underline;
    }

    /* Scoped buttons — ghost style matching sidebar density */
    :scope button {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-secondary, #666);
      font-size: var(--text-micro);
      padding: 2px 6px;
      border-radius: 2px;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease;
    }

    :scope button:hover {
      border-color: var(--border-color, #e0e0e0);
      color: var(--text-primary, #333);
    }
  }

  /* ---- Messages container scope ---- */
  @scope (.messages-container) {
    /* Scoped base typography — comfortable reading measure */
    :scope p {
      line-height: 1.65;
      max-inline-size: 72ch;
      margin-block: 0.5em;
    }

    /* Scoped heading hierarchy inside assistant prose */
    :scope h1 { font-size: 1.25em; font-weight: 700; margin-block: 1em 0.4em; }
    :scope h2 { font-size: 1.1em;  font-weight: 600; margin-block: 0.9em 0.35em; }
    :scope h3 { font-size: 1em;    font-weight: 600; margin-block: 0.8em 0.3em; }

    /* Scoped link treatment — blue accent, understated */
    :scope a {
      color: var(--color-active, #2962ff);
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
    }

    :scope a:hover {
      text-decoration-thickness: 2px;
    }

    /* Scoped code inline — terminal mono, subtle background */
    :scope code:not(pre code) {
      font-family: var(--font-mono, monospace);
      font-size: 0.875em;
      background: var(--bg-secondary, #f5f5f5);
      padding: 0.1em 0.3em;
      border-radius: 3px;
      border: 1px solid var(--border-color, #e0e0e0);
    }

    /* Scoped message spacing — consistent vertical rhythm */
    :scope .message-bubble + .message-bubble {
      margin-block-start: 12px;
    }
  }

  /* ---- Pipeline panel scope ---- */
  @scope (.pipeline-panel) {
    /* Scoped headings — section labels within the panel */
    :scope h3,
    :scope h4 {
      font-size: var(--text-micro);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-tertiary, #999);
      margin-block: 10px 6px;
    }

    /* Scoped progress bar track */
    :scope .pipeline-progress {
      display: block;
      block-size: 3px;
      background: var(--bg-secondary, #f0f0f0);
      border-radius: 2px;
      overflow: hidden;
    }

    :scope .pipeline-progress::after {
      content: "";
      display: block;
      block-size: 100%;
      background: var(--color-active, #2962ff);
      border-radius: inherit;
      transition: inline-size 0.3s ease;
    }

    /* Scoped status badges — compact pill indicators */
    :scope .stage-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: var(--text-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      padding: 1px 6px;
      border-radius: 10px;
      font-variant-numeric: tabular-nums;
    }

    :scope .stage-status[data-status="running"] {
      background: rgba(41, 98, 255, 0.1);
      color: var(--color-active, #2962ff);
    }

    :scope .stage-status[data-status="complete"] {
      background: rgba(0, 150, 80, 0.1);
      color: #009650;
    }

    :scope .stage-status[data-status="error"] {
      background: rgba(211, 47, 47, 0.1);
      color: #d32f2f;
    }

    /* Scoped dividers between stages */
    :scope .pipeline-stage + .pipeline-stage {
      border-block-start: 1px solid var(--border-color, #e0e0e0);
      margin-block-start: 0;
      padding-block-start: 12px;
    }
  }
}

/* ============================================================
 * PRINT STYLESHEET
 * Optimised for clean, readable conversation transcripts.
 * ============================================================ */
@media print {
  @page {
    margin: 2cm;
    size: A4 portrait;
  }

  /* ── Body reset ── */
  body {
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  /* ── Hide chrome elements ── */
  .sidebar,
  .header,
  .pipeline-panel,
  .input-area,
  .context-menu,
  .toast-container,
  .modal-overlay,
  .shortcuts-modal,
  button,
  .notification-badge,
  .no-print {
    display: none !important;
  }

  /* ── Messages container: full-width, no background ── */
  .messages-container {
    display: block;
    width: 100%;
    max-width: 100%;
    background: none !important;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  /* ── Message bubbles: flat, print-friendly ── */
  .message-bubble {
    box-shadow: none !important;
    border: 1pt solid #ccc !important;
    border-radius: 0 !important;
    page-break-inside: avoid;
    margin-bottom: 12pt;
    padding: 8pt 10pt;
    background: #fff !important;
  }

  .message-bubble:first-child {
    page-break-before: auto;
  }

  /* ── Show full URLs after link text ── */
  .message-content a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }

  /* ── Code blocks: wrap for narrow print widths ── */
  pre,
  code,
  .message-content pre,
  .message-content code {
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 9pt;
    border: 1pt solid #ddd;
    background: #f8f8f8 !important;
  }

  /* ── Strip all animations and transitions ── */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Utility: suppress in print without altering screen layout ── */
@media print {
  .no-print {
    display: none !important;
  }
}

/* ============================================================
 * TOUCH GESTURE CSS SUPPORT
 * Swipeable conversation items with reveal actions.
 * ============================================================ */

/* Base swipeable element */
.swipeable {
  touch-action: pan-y;
  user-select: none;
  transition: transform 0.3s ease;
  position: relative;
}

/* Disable transition while actively swiping (driven by JS) */
.swipeable.swiping {
  transition: none;
}

/* End states */
.swipeable.swiped-left {
  transform: translateX(-80px);
}

.swipeable.swiped-right {
  transform: translateX(80px);
}

/* ── Swipe action buttons (hidden behind the item) ── */
.swipe-action {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: var(--text-xs-sm);
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Show action buttons when the item is in a swiped state */
.swipeable.swiped-left  .swipe-action-delete,
.swipeable.swiped-right .swipe-action-archive {
  opacity: 1;
  pointer-events: auto;
}

/* Delete action: red, revealed on swipe-left */
.swipe-action-delete {
  right: 0;
  background: #d32f2f;
}

/* Archive action: blue, revealed on swipe-right */
.swipe-action-archive {
  left: 0;
  background: #1565c0;
}

/* ── Conversation item as swipeable container ── */
.conversation-item {
  position: relative;
  overflow: hidden;
}

/* ── Suppress hover styles on touch-only devices ── */
@media (hover: none) {
  .conversation-item:hover {
    background: inherit;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY: hanging-punctuation
   Progressive enhancement — improves optical margin alignment for quotes
   and punctuation. Browsers without support fall through to the fallback.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fallback: indent blockquotes so leading quote hangs into the margin
   for browsers that do not support hanging-punctuation */
blockquote {
  text-indent: -0.5ch;
}

@supports (hanging-punctuation: first) {
  /* Remove fallback indent when native support is present */
  blockquote {
    text-indent: 0;
  }

  /* Hang both opening and closing punctuation outside the text block */
  .message-content {
    hanging-punctuation: first last;
  }

  /* Hang only the first (opening) punctuation for titles */
  .conversation-title {
    hanging-punctuation: first;
  }

  /* Hang first punctuation; allow a period/comma to hang at line-end */
  .pipeline-stage .stage-content {
    hanging-punctuation: first allow-end;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE: will-change + CSS containment
   Best practice: apply will-change only to elements that are *about to*
   animate (via a transitional class added by JS), and remove the class
   immediately after the transition ends. Permanent will-change on idle
   elements wastes GPU memory and defeats layer-promotion gains.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sidebar: promote layers only while the width/slide transition is active.
   JS should add .transitioning before the animation and remove it on
   transitionend. */
.sidebar.transitioning {
  will-change: transform, width;
}

/* Message bubbles: promote when an enter/exit animation is running */
.message-bubble.animating {
  will-change: transform, opacity;
}

/* Toast notifications: promote during their enter and exit phases */
.toast.entering,
.toast.exiting {
  will-change: transform, opacity;
}

/* Modal overlay: only opacity animates on open; drop will-change once open */
.modal-overlay.opening {
  will-change: opacity;
}

/* ── CSS Containment ────────────────────────────────────────────────────────
   `contain: layout style` tells the browser that layout and style changes
   inside these containers do not affect elements outside them, allowing the
   engine to skip cross-tree recalculation and repaint work.              */
.sidebar {
  contain: layout style;
}

.messages-container {
  contain: layout style;
}

.pipeline-panel {
  contain: layout style;
}

/* ── Scrollbar Gutter ───────────────────────────────────────────────────────
   Reserves space for the scrollbar track even when content does not overflow,
   preventing layout shift (CLS) when the scrollbar appears or disappears.
   `both-edges` on .pipeline-panel mirrors the reservation on the opposite
   side to maintain visual symmetry in the centred terminal layout.          */
@supports (scrollbar-gutter: stable) {
  .messages-container {
    scrollbar-gutter: stable;
  }

  .sidebar .conversation-list {
    scrollbar-gutter: stable;
  }

  .pipeline-panel {
    scrollbar-gutter: stable both-edges;
  }

  .modal-content {
    scrollbar-gutter: stable;
  }
}

/* ── View Transitions ───────────────────────────────────────────────────────
   Smooth crossfade when switching conversations (messages pane) and a
   slide animation for the active sidebar item.  Both are wrapped in
   @supports so non-supporting browsers receive instant transitions.
   Reduced-motion users get near-instant durations (0.01 ms) per WCAG 2.2. */
@supports (view-transition-name: foo) {
  /* Assign transition names to the participating elements */
  .messages-container {
    view-transition-name: messages;
  }

  .conversation-item.active {
    view-transition-name: sidebar-active;
  }

  .conversation-list {
    view-transition-name: conversation-list;
  }

  .pipeline-panel {
    view-transition-name: pipeline;
  }

  /* Messages pane: crossfade old ↔ new with Apple cubic-bezier */
  ::view-transition-old(messages) {
    animation: 320ms cubic-bezier(0.32, 0.72, 0, 1) both fade-out-scale;
  }

  ::view-transition-new(messages) {
    animation: 320ms cubic-bezier(0.32, 0.72, 0, 1) both fade-in-scale;
  }

  /* Sidebar active item: morph with smooth slide */
  ::view-transition-old(sidebar-active) {
    animation: 280ms cubic-bezier(0.32, 0.72, 0, 1) both morph-out;
  }

  ::view-transition-new(sidebar-active) {
    animation: 280ms cubic-bezier(0.32, 0.72, 0, 1) both morph-in;
  }

  /* Conversation list: crossfade */
  ::view-transition-old(conversation-list) {
    animation: 200ms ease both fade-out;
  }

  ::view-transition-new(conversation-list) {
    animation: 200ms ease both fade-in;
  }

  /* Pipeline panel: slide */
  ::view-transition-old(pipeline) {
    animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both slide-left;
  }

  ::view-transition-new(pipeline) {
    animation: 250ms cubic-bezier(0.32, 0.72, 0, 1) both slide-right;
  }

  @keyframes fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes fade-out-scale {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.98); }
  }

  @keyframes fade-in-scale {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes morph-out {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-20px); opacity: 0; }
  }

  @keyframes morph-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }

  @keyframes slide-left {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-30px); opacity: 0; }
  }

  @keyframes slide-right {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }

  /* Honour prefers-reduced-motion: collapse durations to effectively instant */
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(messages),
    ::view-transition-new(messages),
    ::view-transition-old(sidebar-active),
    ::view-transition-new(sidebar-active) {
      animation-duration: 0.01ms;
    }
  }
}

/* ══════════════════════════════════════════════════════════════════
   INITIAL-LETTER — Premium Drop Caps for Long Messages
   ══════════════════════════════════════════════════════════════════ */
@supports (initial-letter: 2) {
  .message-content.long-message::first-letter {
    initial-letter: 2;
    font-weight: 700;
    color: var(--accent, #2a6ef5);
    margin-right: 0.15em;
    font-family: var(--font-mono, 'SF Mono', monospace);
  }

  /* Dark mode variant */
  html[data-theme="dark"] .message-content.long-message::first-letter {
    color: var(--accent-light, #5a9eff);
  }
}

/* Fallback for browsers without initial-letter */
@supports not (initial-letter: 2) {
  .message-content.long-message::first-letter {
    float: left;
    font-size: 2.4em;
    line-height: 1;
    font-weight: 700;
    color: var(--accent, #2a6ef5);
    margin-right: 0.1em;
    margin-top: 0.05em;
    font-family: var(--font-mono, 'SF Mono', monospace);
  }

  html[data-theme="dark"] .message-content.long-message::first-letter {
    color: var(--accent-light, #5a9eff);
  }
}

/* ══════════════════════════════════════════════════════════════════
   TEXT DECORATION POLISH — Refined Link Underlines
   ══════════════════════════════════════════════════════════════════ */
.message-content a {
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease,
              text-underline-offset 0.15s ease;
}

.message-content a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* Sidebar links — subtle underline on hover only */
.sidebar a,
.conversation-item a {
  text-decoration: none;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.sidebar a:hover,
.conversation-item a:hover {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* Code links — no decorative underline */
.message-content pre a,
.message-content code a {
  text-decoration-thickness: 0;
  text-underline-offset: 0;
}

/* ══════════════════════════════════════════════════════════════════
   @CONTAINER STYLE QUERIES — State-Based Component Styling
   ══════════════════════════════════════════════════════════════════ */

/* Register containers */
.sidebar           { container-name: sidebar;  container-type: inline-size; }
.messages-container { container-name: messages; container-type: inline-size; }

/* Style queries for state-driven visuals (progressive enhancement) */
@supports (container-type: inline-size) {
  /* Compact sidebar when narrow */
  @container sidebar (max-width: 200px) {
    .conversation-item { padding: 6px 8px; font-size: var(--text-xs-sm); }
    .conversation-item .conv-meta { display: none; }
    .sidebar-header h2 { font-size: var(--text-xs); }
  }

  /* Wide messages area — increase max-width for readability */
  @container messages (min-width: 800px) {
    .message-bubble { max-width: 72%; }
    .message-content { font-size: var(--text-base); line-height: 1.7; }
  }

  /* Very wide — two-column layout hint */
  @container messages (min-width: 1200px) {
    .message-bubble { max-width: 60%; }
  }

  /* Narrow messages — full-width bubbles */
  @container messages (max-width: 480px) {
    .message-bubble { max-width: 98%; border-radius: 8px; }
    .message-content { font-size: var(--text-xs); }
  }
}

/* ══════════════════════════════════════════════════════════════════
   ANCHOR POSITIONING — CSS Anchor API for Tooltips & Popovers
   ══════════════════════════════════════════════════════════════════ */
@supports (anchor-name: --tooltip-anchor) {
  /* Tooltip anchors */
  [data-tooltip] {
    anchor-name: --tooltip-anchor;
    position: relative;
  }

  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: fixed;
    position-anchor: --tooltip-anchor;
    top: anchor(bottom);
    left: anchor(center);
    transform: translateX(-50%);
    background: var(--bg-tooltip, #1a1a1a);
    color: var(--text-tooltip, #fff);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: var(--text-xs-sm);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after {
    opacity: 1;
  }

  /* Position fallback */
  @position-try --tooltip-above {
    top: auto;
    bottom: anchor(top);
    left: anchor(center);
    transform: translateX(-50%);
  }

  /* Dark mode tooltip inversion */
  html[data-theme="dark"] [data-tooltip]::after {
    background: var(--bg-tooltip-dark, #f0f0f0);
    color: var(--text-tooltip-dark, #1a1a1a);
  }
}

/* Fallback tooltip for browsers without anchor positioning */
@supports not (anchor-name: --tooltip-anchor) {
  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    background: var(--bg-tooltip, #1a1a1a);
    color: var(--text-tooltip, #fff);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: var(--text-xs-sm);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after {
    opacity: 1;
  }

  html[data-theme="dark"] [data-tooltip]::after {
    background: var(--bg-tooltip-dark, #f0f0f0);
    color: var(--text-tooltip-dark, #1a1a1a);
  }
}

/* ══════════════════════════════════════════════════════════════════
   COLOR-MIX DYNAMIC PALETTE — Programmatic Color Harmony
   ══════════════════════════════════════════════════════════════════ */
@supports (color: color-mix(in oklch, red, blue)) {
  :root {
    /* Base accent for light mode */
    --palette-base: #2a6ef5;
    --palette-hover:   color-mix(in oklch, var(--palette-base) 85%, white);
    --palette-active:  color-mix(in oklch, var(--palette-base) 70%, black 30%);
    --palette-subtle:  color-mix(in oklch, var(--palette-base) 12%, white 88%);
    --palette-muted:   color-mix(in oklch, var(--palette-base) 25%, transparent);
    --palette-border:  color-mix(in oklch, var(--palette-base) 20%, #e0e0e0 80%);

    /* Success / Warning / Danger derived from base */
    --palette-success: color-mix(in oklch, #22c55e 80%, var(--palette-base) 20%);
    --palette-warning: color-mix(in oklch, #f59e0b 80%, var(--palette-base) 20%);
    --palette-danger:  color-mix(in oklch, #ef4444 80%, var(--palette-base) 20%);
  }

  html[data-theme="dark"] {
    --palette-base: #5a9eff;
    --palette-hover:   color-mix(in oklch, var(--palette-base) 80%, white 20%);
    --palette-active:  color-mix(in oklch, var(--palette-base) 90%, white 10%);
    --palette-subtle:  color-mix(in oklch, var(--palette-base) 15%, #1a1a1a 85%);
    --palette-muted:   color-mix(in oklch, var(--palette-base) 20%, transparent);
    --palette-border:  color-mix(in oklch, var(--palette-base) 25%, #333 75%);
  }

  /* Apply palette to key surfaces */
  .btn-primary,
  .send-btn,
  .header-btn.active {
    background: var(--palette-base);
  }

  .btn-primary:hover,
  .send-btn:hover {
    background: var(--palette-hover);
  }

  .btn-primary:active,
  .send-btn:active {
    background: var(--palette-active);
  }

  .message-bubble.user {
    border-left-color: var(--palette-base);
  }

  .pipeline-stage.active {
    border-color: var(--palette-base);
    background: var(--palette-subtle);
  }

  .toast.success { border-left-color: var(--palette-success); }
  .toast.warning { border-left-color: var(--palette-warning); }
  .toast.error   { border-left-color: var(--palette-danger); }
}

/* ══════════════════════════════════════════════════════════════════
   LOGIN PAGE GLASSMORPHISM — Premium Auth Card Design
   ══════════════════════════════════════════════════════════════════ */

/* Animated gradient background for auth pages */
.login-page,
.register-page {
  min-height: 100vh;
  background: linear-gradient(-45deg,
    #0a0a1a 0%,
    #1a1a3a 25%,
    #0d1b2a 50%,
    #1a0a2a 75%,
    #0a1a2a 100%);
  background-size: 400% 400%;
  animation: auth-gradient 15s ease infinite;
}

@keyframes auth-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glassmorphism card */
.auth-card,
.login-card,
.register-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: 420px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  animation: auth-card-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes auth-card-appear {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Subtle shimmer on card top */
.auth-card::before,
.login-card::before,
.register-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%);
  animation: shimmer-line 4s ease-in-out infinite;
}

@keyframes shimmer-line {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(50%); }
}

/* Auth form inputs — frosted style */
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"],
.login-card input[type="text"],
.login-card input[type="password"],
.register-card input[type="text"],
.register-card input[type="password"],
.register-card input[type="email"] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 14px 16px;
  color: #fff;
  font-size: var(--text-sm);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.auth-card input:focus,
.login-card input:focus,
.register-card input:focus {
  border-color: rgba(90, 158, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(90, 158, 255, 0.15);
}

.auth-card input::placeholder,
.login-card input::placeholder,
.register-card input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Auth submit button — gradient with glow */
.auth-card button[type="submit"],
.login-card button[type="submit"],
.register-card button[type="submit"] {
  background: linear-gradient(135deg, #2a6ef5 0%, #5a3eff 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 24px;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 15px rgba(42, 110, 245, 0.3);
}

.auth-card button[type="submit"]:hover,
.login-card button[type="submit"]:hover,
.register-card button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(42, 110, 245, 0.45);
}

.auth-card button[type="submit"]:active,
.login-card button[type="submit"]:active,
.register-card button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(42, 110, 245, 0.25);
}

/* Auth title */
.auth-card h1, .auth-card h2,
.login-card h1, .login-card h2,
.register-card h1, .register-card h2 {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.auth-card p,
.login-card p,
.register-card p {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-sm);
}

.auth-card a,
.login-card a,
.register-card a {
  color: #5a9eff;
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-card a:hover,
.login-card a:hover,
.register-card a:hover {
  color: #82b8ff;
}

/* Floating particles background (CSS-only via pseudo-elements) */
.login-page::before,
.register-page::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.15), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(90,158,255,0.1), transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.1), transparent),
    radial-gradient(1px 1px at 80% 60%, rgba(90,158,255,0.08), transparent),
    radial-gradient(2px 2px at 10% 80%, rgba(255,255,255,0.12), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(90,158,255,0.06), transparent),
    radial-gradient(2px 2px at 50% 90%, rgba(255,255,255,0.08), transparent);
  animation: particle-drift 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes particle-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-10%, -10%); }
}

.auth-card, .login-card, .register-card {
  position: relative;
  z-index: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .login-page, .register-page { animation: none; }
  .login-page::before, .register-page::before { animation: none; }
  .auth-card, .login-card, .register-card { animation: none; }
  .auth-card::before, .login-card::before, .register-card::before { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   REGISTER PAGE PREMIUM UX — Password Strength + Step Wizard
   ══════════════════════════════════════════════════════════════════ */

/* Password strength meter bar */
.password-strength-meter {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 8px;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.password-strength-meter .strength-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease;
  width: 0%;
}

.password-strength-meter .strength-fill[data-strength="weak"] {
  width: 25%;
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.password-strength-meter .strength-fill[data-strength="fair"] {
  width: 50%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.password-strength-meter .strength-fill[data-strength="good"] {
  width: 75%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.password-strength-meter .strength-fill[data-strength="strong"] {
  width: 100%;
  background: linear-gradient(90deg, #22c55e, #06b6d4);
}

.password-strength-label {
  font-size: var(--text-micro);
  margin-top: 4px;
  text-align: right;
  transition: color 0.2s ease;
}

.password-strength-label[data-strength="weak"]   { color: #f87171; }
.password-strength-label[data-strength="fair"]   { color: #fbbf24; }
.password-strength-label[data-strength="good"]   { color: #4ade80; }
.password-strength-label[data-strength="strong"] { color: #06b6d4; }

/* Form field groups with floating labels */
.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group label {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left top;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
  top: 4px;
  font-size: var(--text-2xs);
  color: rgba(90, 158, 255, 0.8);
  transform: translateY(0);
}

/* Step wizard indicators */
.step-wizard {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}

.step-indicator {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.3s ease, width 0.3s ease;
}

.step-indicator.active {
  background: linear-gradient(90deg, #2a6ef5, #5a9eff);
  width: 48px;
}

.step-indicator.completed {
  background: rgba(34, 197, 94, 0.6);
}

/* Password requirements checklist */
.password-requirements {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: var(--text-xs-sm);
}

.password-requirements li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease;
}

.password-requirements li.met {
  color: rgba(34, 197, 94, 0.8);
}

.password-requirements li::before {
  content: '○';
  font-size: var(--text-2xs);
  transition: content 0.2s ease;
}

.password-requirements li.met::before {
  content: '●';
  color: #22c55e;
}

/* Terms checkbox styling */
.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  margin: 16px 0;
}

.terms-check input[type="checkbox"] {
  accent-color: #2a6ef5;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Social login divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--text-xs-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* Input validation states */
.form-group input.valid {
  border-color: rgba(34, 197, 94, 0.5);
}

.form-group input.invalid {
  border-color: rgba(239, 68, 68, 0.5);
}

.form-group .validation-icon {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: var(--text-sm);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.form-group input.valid ~ .validation-icon { opacity: 1; color: #22c55e; }
.form-group input.invalid ~ .validation-icon { opacity: 1; color: #ef4444; }

/* Error message styling */
.form-error {
  font-size: var(--text-xs-sm);
  color: #f87171;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.form-error.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════
   FOCUS-VISIBLE — Keyboard-Only Focus Indicators
   ══════════════════════════════════════════════════════════════════ */

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Premium focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--palette-base, #2a6ef5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Specific overrides for key interactive elements */
.header-btn:focus-visible,
.send-btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--palette-base, #2a6ef5);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(42, 110, 245, 0.15);
}

.conversation-item:focus-visible {
  outline: 2px solid var(--palette-base, #2a6ef5);
  outline-offset: -2px;
  background: var(--hover-bg, #f0f4ff);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--palette-base, #2a6ef5);
  outline-offset: 0;
  border-color: var(--palette-base, #2a6ef5);
}

/* Dark mode focus adjustment */
html[data-theme="dark"] :focus-visible {
  outline-color: var(--palette-base, #5a9eff);
}

html[data-theme="dark"] .header-btn:focus-visible,
html[data-theme="dark"] .send-btn:focus-visible,
html[data-theme="dark"] button:focus-visible {
  box-shadow: 0 0 0 4px rgba(90, 158, 255, 0.2);
}

/* ══════════════════════════════════════════════════════════════════
   OVERSCROLL BEHAVIOR — Prevent Scroll Chaining
   ══════════════════════════════════════════════════════════════════ */

/* Prevent pull-to-refresh and scroll chaining on main containers */
body {
  overscroll-behavior: none;
}

.sidebar,
.sidebar .conversation-list {
  overscroll-behavior-y: contain;
}

.messages-container,
#messagesContainer {
  overscroll-behavior-y: contain;
}

.pipeline-panel {
  overscroll-behavior-y: contain;
}

.modal-body,
.command-palette-list {
  overscroll-behavior-y: contain;
}

/* Horizontal scroll containers */
.tab-bar,
.breadcrumb-nav {
  overscroll-behavior-x: contain;
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL BEHAVIOR — Smooth Scrolling with Motion Preference
   ══════════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Scroll padding for sticky headers */
.messages-container,
#messagesContainer {
  scroll-padding-bottom: 80px;
}

/* ══════════════════════════════════════════════════════════════════
   TEXT WRAP BALANCE — Visually Balanced Heading Line Breaks
   ══════════════════════════════════════════════════════════════════ */

@supports (text-wrap: balance) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  .sidebar-header h2,
  .pipeline-title,
  .modal-title,
  .command-palette-title {
    text-wrap: balance;
  }

  .conversation-title {
    text-wrap: balance;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LINE CLAMP — Truncated Text for Conversation Previews
   ══════════════════════════════════════════════════════════════════ */

.conversation-item .conversation-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.conversation-item .conversation-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.search-result-snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.notification-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   ASPECT RATIO — Consistent Media Container Sizing
   ══════════════════════════════════════════════════════════════════ */

.avatar,
.user-avatar {
  aspect-ratio: 1 / 1;
}

.media-embed,
.image-preview {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.thumbnail {
  aspect-ratio: 1 / 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   @LAYER CASCADE ORGANIZATION
   Layer order (lowest → highest priority):
     base → components → utilities
   New utility/override styles are placed in the `utilities` layer so they
   always win over component-level declarations without requiring !important.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer utilities;

@layer utilities {
  /* Screen-reader-only / visually hidden — removes element from visual flow
     while keeping it accessible to assistive technologies. */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Single-line text truncation with ellipsis. */
  .truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Prevent body scroll (e.g. when a modal is open). */
  .no-scroll {
    overflow: hidden;
  }

  /* Promote element to its own compositor layer for smooth animations. */
  .gpu-accelerated {
    will-change: transform;
    transform: translateZ(0);
  }

  /* Fade-in entrance animation. */
  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .fade-in {
    animation: fade-in 300ms ease both;
  }

  /* Slide-up entrance animation (pairs well with fade-in). */
  @keyframes slide-up {
    from { transform: translateY(8px); }
    to   { transform: translateY(0);   }
  }

  .slide-up {
    animation: slide-up 250ms ease-out both;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLOR-SCHEME — NATIVE DARK MODE INTEGRATION
   Setting `color-scheme` lets the browser apply its native dark/light
   handling to scrollbars, form controls, `<input>`, `<select>`, tooltips,
   and system colors (Canvas, ButtonFace, etc.) automatically.
   Per-theme overrides narrow the hint so OS-level widgets match the active
   theme even when the user's OS preference differs from the app's setting.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;
}

[data-theme="dark"] {
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIPELINE PANEL VISUAL REFINEMENTS — DeepInsight 15-stage premium polish
   Additive layer on top of existing pipeline CSS. Covers stage state borders,
   staggered slide-in entrance, header gradient rule, stage typography,
   top-of-panel progress bar, and compact information-density mode.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Stage state left-border indicators ───────────────────────────────── */

.pipeline-stage {
  border-left: 3px solid transparent;
  transition:
    border-color 200ms ease,
    background-color 200ms ease;
}

.pipeline-stage.pending {
  border-left-color: var(--border-primary, #333);
}

.pipeline-stage.running {
  border-left-color: var(--accent, #4488ff);
  animation: pipeline-stage-pulse 1.8s ease-in-out infinite;
}

.pipeline-stage.complete {
  border-left-color: var(--success, #00c853);
}

.pipeline-stage.error {
  border-left-color: var(--danger, #ff3d00);
}

@keyframes pipeline-stage-pulse {
  0%,
  100% { border-left-color: var(--accent, #4488ff); }
  50%  { border-left-color: color-mix(in srgb, var(--accent, #4488ff) 45%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-stage.running {
    animation: none;
  }
}

/* ── 2. Stage entrance — slide-in from right with nth-child stagger ──────── */

@keyframes pipeline-stage-enter {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.pipeline-stage {
  animation: pipeline-stage-enter 240ms var(--ease-enter, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

/* 15 stages × 50 ms stagger */
.pipeline-stage:nth-child(1)  { animation-delay:   0ms; }
.pipeline-stage:nth-child(2)  { animation-delay:  50ms; }
.pipeline-stage:nth-child(3)  { animation-delay: 100ms; }
.pipeline-stage:nth-child(4)  { animation-delay: 150ms; }
.pipeline-stage:nth-child(5)  { animation-delay: 200ms; }
.pipeline-stage:nth-child(6)  { animation-delay: 250ms; }
.pipeline-stage:nth-child(7)  { animation-delay: 300ms; }
.pipeline-stage:nth-child(8)  { animation-delay: 350ms; }
.pipeline-stage:nth-child(9)  { animation-delay: 400ms; }
.pipeline-stage:nth-child(10) { animation-delay: 450ms; }
.pipeline-stage:nth-child(11) { animation-delay: 500ms; }
.pipeline-stage:nth-child(12) { animation-delay: 550ms; }
.pipeline-stage:nth-child(13) { animation-delay: 600ms; }
.pipeline-stage:nth-child(14) { animation-delay: 650ms; }
.pipeline-stage:nth-child(15) { animation-delay: 700ms; }

@media (prefers-reduced-motion: reduce) {
  .pipeline-stage {
    animation: none;
  }
}

/* ── 3. Pipeline header gradient rule ────────────────────────────────────── */

.pipeline-header,
.pipeline-title {
  position: relative;
}

.pipeline-header::after,
.pipeline-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent, #4488ff) 40%,
    var(--accent, #4488ff) 60%,
    transparent 100%
  );
  opacity: 0.45;
  pointer-events: none;
}

/* ── 4. Stage content typography ─────────────────────────────────────────── */

.pipeline-stage-content,
.stage-output,
.stage-content {
  line-height: 1.6;
}

/* Code blocks rendered inside stage output */
.pipeline-stage-content pre,
.stage-output pre,
.stage-content pre {
  font-size: 0.8em;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--bg-secondary, rgba(0, 0, 0, 0.18));
  border: 1px solid var(--border-primary, #2a2a2a);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.pipeline-stage-content code:not(pre code),
.stage-output code:not(pre code),
.stage-content code:not(pre code) {
  font-size: 0.82em;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--bg-secondary, rgba(0, 0, 0, 0.15));
  border: 1px solid var(--border-primary, #2a2a2a);
}

/* ── 5. Top-of-panel progress bar ────────────────────────────────────────── */
/*
   Usage: set `--pipeline-progress: 60` (0–100) on .pipeline-panel or on
   .pipeline-progress-top directly to advance the fill.
   JavaScript: el.style.setProperty('--pipeline-progress', '42');
*/

.pipeline-progress-top {
  --pipeline-progress: 0;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  width: 100%;
  background: var(--border-primary, #222);
  overflow: hidden;
  z-index: 10;
  flex-shrink: 0;
}

.pipeline-progress-top::after {
  content: '';
  display: block;
  height: 100%;
  width: calc(var(--pipeline-progress) * 1%);
  background: linear-gradient(
    90deg,
    var(--accent, #4488ff) 0%,
    color-mix(in srgb, var(--accent, #4488ff) 60%, #a855f7) 100%
  );
  border-radius: 0 2px 2px 0;
  transition: width 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pulse glow on the leading edge when in progress */
.pipeline-progress-top.active::after {
  box-shadow: 2px 0 8px color-mix(in srgb, var(--accent, #4488ff) 80%, transparent);
}

/* Complete state: full fill, then fade out */
.pipeline-progress-top.complete::after {
  width: 100%;
  transition:
    width 200ms ease,
    opacity 600ms 400ms ease;
}

.pipeline-progress-top.hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-progress-top::after {
    transition: none;
  }
}

/* ── 6. Compact mode ─────────────────────────────────────────────────────── */

.pipeline-panel.compact .pipeline-stage {
  padding-block: 4px;
  padding-inline: 8px;
  font-size: 0.78rem;
  gap: 4px;
}

.pipeline-panel.compact .pipeline-stage .stage-label,
.pipeline-panel.compact .pipeline-stage .stage-name {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.pipeline-panel.compact .pipeline-stage .stage-number {
  font-size: 0.7rem;
  min-width: 16px;
}

.pipeline-panel.compact .pipeline-stage-content,
.pipeline-panel.compact .stage-output,
.pipeline-panel.compact .stage-content {
  font-size: 0.76rem;
  line-height: 1.45;
  max-height: 60px;
  overflow: hidden;
}

.pipeline-panel.compact .pipeline-header {
  padding-block: 6px;
  font-size: 0.8rem;
}

/* ── Dark mode compatibility notes ──────────────────────────────────────────
   All colors above rely on CSS custom properties that are already
   theme-switched by [data-theme="dark"] / [data-theme="light"] blocks
   earlier in this stylesheet. No additional @media overrides needed for
   the core palette. The color-mix() calls degrade gracefully in browsers
   that don't support it (Chrome 111+, Firefox 113+, Safari 16.2+) — they
   fall through to the solid accent color without the blend.
   ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED GLASSMORPHISM — Modals, Overlays & Menus
   Progressive enhancement via @supports (backdrop-filter).
   Builds on the login-page glass treatment and extends it to every
   modal/dialog/overlay surface in the application.
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (backdrop-filter: blur(1px)) {

  /* ── Overlay scrims ─────────────────────────────────────────────────────── */

  .modal-overlay,
  .dialog-overlay,
  .command-palette-overlay {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }

  /* ── Frosted-glass card surfaces ────────────────────────────────────────── */

  .modal-content,
  .dialog-content,
  .command-palette {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-radius: 10px;
  }

  /* ── Dropdown / context menus — lighter glass ───────────────────────────── */

  .dropdown-menu,
  .context-menu {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.10),
      0 1px 4px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border-radius: 8px;
  }

  /* ── Dark-mode overrides ────────────────────────────────────────────────── */

  [data-theme="dark"] .modal-overlay,
  [data-theme="dark"] .dialog-overlay,
  [data-theme="dark"] .command-palette-overlay {
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
  }

  [data-theme="dark"] .modal-content,
  [data-theme="dark"] .dialog-content,
  [data-theme="dark"] .command-palette {
    background: rgba(20, 20, 25, 0.90);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.40),
      0 2px 8px rgba(0, 0, 0, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  [data-theme="dark"] .dropdown-menu,
  [data-theme="dark"] .context-menu {
    background: rgba(22, 22, 28, 0.88);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.35),
      0 1px 4px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

} /* end @supports backdrop-filter */


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL-LINKED ANIMATIONS — animation-timeline: scroll() / view()
   Progressive enhancement: only applied when the browser supports the
   CSS scroll-driven animations spec (Chrome 115+, Safari 18+).
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: scroll()) {

  /* ── Messages container scroll-progress bar ─────────────────────────────
     A thin accent-colored bar pinned to the top of the scroll container
     that fills left-to-right as the user scrolls through messages.        */

  .messages-container {
    /* Establish a named scroll timeline on the container itself */
    scroll-timeline: --messages-scroll block;
    /* Needed for the pseudo-element to be positioned relative to container */
    position: relative;
  }

  .messages-container::before {
    content: "";
    position: sticky;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 3px;
    background: var(--accent-primary, #f59e0b);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 10;
    border-radius: 0 2px 2px 0;

    animation: messages-progress-fill linear both;
    animation-timeline: --messages-scroll;
    animation-range: 0% 100%;
  }

  @keyframes messages-progress-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* ── Pipeline stage viewport-entry animations ───────────────────────────
     Each .pipeline-stage fades in and scales up slightly as it scrolls
     into the viewport, giving a progressive reveal feel.                   */

  .pipeline-stage {
    animation: pipeline-stage-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  @keyframes pipeline-stage-enter {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* ── Reduced-motion: disable all scroll-driven animations ───────────────
     Respects the user's OS-level preference; all scroll animations are
     suppressed entirely, restoring the element to its natural painted state. */

  /* ── Sidebar gradient fade on scroll ─────────────────────────────────────
     The sidebar background subtly fades as the user scrolls, creating
     a depth cue that content is moving beneath.                           */
  .sidebar-content {
    animation: sidebar-scroll-fade linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 400px;
  }

  @keyframes sidebar-scroll-fade {
    from { opacity: 1; }
    to   { opacity: 0.85; }
  }

  /* ── Pipeline panel shadow intensification ──────────────────────────────
     The pipeline panel shadow deepens as the user scrolls, increasing
     perceived elevation and depth separation from content.                 */
  .pipeline-panel {
    animation: pipeline-shadow-deepen linear both;
    animation-timeline: scroll(nearest);
    animation-range: 0 200px;
  }

  @keyframes pipeline-shadow-deepen {
    from { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
    to   { box-shadow: 0 8px 32px rgba(0,0,0,0.24); }
  }

  /* ── Code block left-edge parallax ──────────────────────────────────────
     Code blocks shift slightly left as they scroll into view, creating
     a subtle parallax effect that adds depth to the reading experience.   */
  .mn-code-block {
    animation: code-block-parallax linear both;
    animation-timeline: scroll(nearest);
    animation-range: 0 100px;
  }

  @keyframes code-blockparallax {
    from { background-position-x: 0; }
    to   { background-position-x: -20px; }
  }

  /* ── Sticky header blur intensification ─────────────────────────────────
     The header backdrop blur intensifies as scroll increases, creating
     a glass-morphism effect that strengthens with content depth.          */
  .header {
    backdrop-filter: blur(calc(8px + scroll(y) * 0.05px));
  }

  /* ── Reduced-motion: disable all scroll-driven animations ───────────────
     Respects the user's OS-level preference; all scroll animations are
     suppressed entirely, restoring the element to its natural painted state. */

  @media (prefers-reduced-motion: reduce) {
    .messages-container::before {
      animation: none;
      transform: scaleX(1);   /* always show full bar, or set display:none */
      display: none;           /* hide progress bar to avoid static distraction */
    }

    .pipeline-stage {
      animation: none;
      opacity: 1;
      transform: none;
    }

    .sidebar-content,
    .pipeline-panel,
    .mn-code-block,
    .header {
      animation: none;
      backdrop-filter: blur(8px);
    }
  }

} /* end @supports animation-timeline: scroll() */


/* ═══════════════════════════════════════════════════════════════════════════
   CSS SUBGRID FORM LAYOUTS — grid-template-rows: subgrid
   Progressive enhancement: perfect label/input/error alignment across form
   groups. Requires CSS Subgrid (Chrome 117+, Firefox 71+, Safari 16+).
   Fallback: simple flex-column layout for all other browsers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Baseline fallback (all browsers) ──────────────────────────────────────
   Flex-column ensures forms are usable before subgrid is applied. */

.auth-form,
.form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form .form-group,
.form-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Subgrid enhancement ────────────────────────────────────────────────────
   When subgrid is supported, the parent form defines three repeating row
   tracks (label | input | error) and each .form-group spans exactly 3 rows,
   aligning identically across all groups regardless of content height.      */

@supports (grid-template-rows: subgrid) {

  .auth-form,
  .form-container {
    display: grid;
    grid-template-columns: 1fr;
    /* Three row tracks per form-group: label, input, error message.
       auto lets each track size naturally; the pattern repeats for every
       group by stacking groups with grid-row: span 3 below. */
    grid-auto-rows: auto;
    row-gap: 4px;
    column-gap: 0;
  }

  .auth-form .form-group,
  .form-container .form-group {
    /* Each group occupies exactly 3 row tracks (label, input, error) */
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    /* Inherit column structure from the parent grid */
    grid-column: 1 / -1;
    /* Vertical rhythm between groups */
    margin-bottom: 12px;
  }

  /* Within each subgrid group the three children map to the three tracks */
  .auth-form .form-group label,
  .form-container .form-group label {
    grid-row: 1;
    align-self: end;           /* pin label to bottom of its track */
    padding-bottom: 2px;
  }

  .auth-form .form-group .form-control,
  .auth-form .form-group input,
  .auth-form .form-group select,
  .auth-form .form-group textarea,
  .form-container .form-group .form-control,
  .form-container .form-group input,
  .form-container .form-group select,
  .form-container .form-group textarea {
    grid-row: 2;
    align-self: stretch;
  }

  /* Error / hint text always sits in the third track, keeping it aligned
     across all groups even when some groups have no error visible. */
  .auth-form .form-group .form-error,
  .auth-form .form-group .field-error,
  .auth-form .form-group .form-hint,
  .form-container .form-group .form-error,
  .form-container .form-group .field-error,
  .form-container .form-group .form-hint {
    grid-row: 3;
    align-self: start;
    min-height: 1.2em;         /* reserve space even when empty */
    font-size: 0.75rem;
    line-height: 1.2;
  }

  /* ── Two-column variant ───────────────────────────────────────────────────
     Use .auth-form.two-column for side-by-side field pairs (e.g., first
     name / last name). Each .form-group still uses subgrid row alignment
     independently within its own column.                                    */

  .auth-form.two-column {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  /* Full-width fields inside a two-column form (e.g., email, submit) */
  .auth-form.two-column .form-group.full-width {
    grid-column: 1 / -1;
  }

  /* ── Reduced-motion: no visual change needed for subgrid ─────────────── */

} /* end @supports grid-template-rows: subgrid */


/* ═══════════════════════════════════════════════════════════════════════════
   HOVER AND POINTER MEDIA QUERY REFINEMENTS
   Desktop precision hover effects are gated behind (hover: hover) and
   (pointer: fine) so they never fire on touch devices. Touch optimisations
   (larger tap targets, always-visible action buttons) are applied under
   (hover: none) and (pointer: coarse).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Desktop: hover: hover AND pointer: fine ────────────────────────────── */

@media (hover: hover) and (pointer: fine) {

  /* Conversation list items — subtle horizontal shift on hover */
  .conversation-item:hover {
    transform: translateX(2px);
    transition: transform 0.15s ease, background-color 0.15s ease;
    background-color: var(--bg-hover, rgba(255, 255, 255, 0.06));
  }

  /* Buttons — gentle lift scale */
  .btn:hover,
  button:hover {
    transform: scale(1.02);
    transition: transform 0.12s ease, background-color 0.15s ease,
                box-shadow 0.15s ease;
  }

  /* Prevent scale on icon-only or utility buttons that opt out */
  .btn-icon:hover,
  .btn-ghost:hover,
  .header-btn:hover {
    transform: none;
  }

  /* Message bubbles — reveal action toolbar (reply, copy, react) on hover.
     The toolbar is hidden by default via opacity + pointer-events: none;
     it becomes interactive only when the parent bubble is hovered.          */
  .message-bubble {
    position: relative;
  }

  .message-bubble .message-actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .message-bubble:hover .message-actions {
    opacity: 1;
    pointer-events: auto;
  }

  /* Sidebar navigation links — background highlight with transition */
  .sidebar-link:hover {
    background-color: var(--sidebar-hover-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #f1f1f1);
    transition: background-color 0.15s ease, color 0.15s ease,
                padding-left 0.15s ease;
    padding-left: calc(var(--sidebar-link-padding-left, 12px) + 4px);
    border-radius: 4px;
  }

} /* end @media (hover: hover) and (pointer: fine) */


/* ── Touch: hover: none AND pointer: coarse ─────────────────────────────── */

@media (hover: none) and (pointer: coarse) {

  /* Minimum 44 × 44 px tap targets (WCAG 2.5.5 AAA / Apple HIG) */
  .btn,
  button,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding-top: max(var(--btn-padding-y, 8px), 10px);
    padding-bottom: max(var(--btn-padding-y, 8px), 10px);
  }

  /* Navigation and anchor links — generous tap padding */
  a,
  .sidebar-link,
  .nav-link {
    padding-top: max(var(--link-padding-y, 4px), 10px);
    padding-bottom: max(var(--link-padding-y, 4px), 10px);
  }

  /* Conversation items — finger-friendly row height */
  .conversation-item {
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 48px;
  }

  /* Message action buttons are always visible on touch (no hover state) */
  .message-bubble .message-actions {
    opacity: 1;
    pointer-events: auto;
    /* Subtly de-emphasised so they don't dominate; user can tap them */
    opacity: 0.7;
  }

  /* Form controls — minimum 44 px height for comfortable touch input */
  .form-control,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    min-height: 44px;
    font-size: max(1rem, 16px); /* 16 px prevents iOS auto-zoom on focus */
    padding-top: max(var(--input-padding-y, 6px), 10px);
    padding-bottom: max(var(--input-padding-y, 6px), 10px);
  }

  /* Suppress transform hover effects that may linger on touch */
  .conversation-item:hover {
    transform: none;
  }

  .btn:hover,
  button:hover {
    transform: none;
  }

  .sidebar-link:hover {
    background-color: transparent;
    padding-left: var(--sidebar-link-padding-left, 12px);
  }

} /* end @media (hover: none) and (pointer: coarse) */

/* ============================================================
   ENHANCEMENT 1: @starting-style Entry Animations
   Progressive enhancement — smooth appear transitions for
   modals, toasts, dropdowns, sidebars, and message bubbles.
   Uses transition + @starting-style (no keyframes).
   Wrapped in @supports for graceful degradation.
   Respects prefers-reduced-motion at every layer.
   ============================================================ */

@supports (transition-behavior: allow-discrete) {

  /* --- Modal / Dialog ---------------------------------------- */
  .modal,
  .dialog,
  [role="dialog"],
  dialog {
    transition:
      opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
      overlay 240ms allow-discrete,
      display  240ms allow-discrete;
    transform-origin: center center;
  }

  /* Open state — what the element animates TO */
  .modal.is-open,
  .dialog.is-open,
  [role="dialog"].is-open,
  dialog[open] {
    opacity: 1;
    transform: scale(1);
  }

  /* Closed/default state — what the element normally sits at
     when NOT open (used as the "from" when @starting-style
     is not supported by the browser's @starting-style layer) */
  .modal:not(.is-open),
  .dialog:not(.is-open),
  [role="dialog"]:not(.is-open) {
    opacity: 0;
    transform: scale(0.95);
  }

  @starting-style {
    .modal.is-open,
    .dialog.is-open,
    [role="dialog"].is-open,
    dialog[open] {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  /* --- Toast / Notification ---------------------------------- */
  .toast,
  .notification,
  .alert-toast {
    transition:
      opacity  280ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      display  280ms allow-discrete;
  }

  .toast.is-visible,
  .notification.is-visible,
  .alert-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    .toast.is-visible,
    .notification.is-visible,
    .alert-toast.is-visible {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  /* --- Dropdown Menu ----------------------------------------- */
  .dropdown-menu,
  .context-menu,
  .popover-menu {
    transition:
      opacity  180ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
      display  180ms allow-discrete;
    transform-origin: top center;
  }

  .dropdown-menu.is-open,
  .context-menu.is-open,
  .popover-menu.is-open {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    .dropdown-menu.is-open,
    .context-menu.is-open,
    .popover-menu.is-open {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  /* --- Sidebar Panel ----------------------------------------- */
  .sidebar,
  .sidebar-panel,
  .nav-drawer {
    transition:
      opacity   300ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
      display   300ms allow-discrete;
    transform-origin: left center;
  }

  .sidebar.is-open,
  .sidebar-panel.is-open,
  .nav-drawer.is-open {
    opacity: 1;
    transform: translateX(0);
  }

  @starting-style {
    .sidebar.is-open,
    .sidebar-panel.is-open,
    .nav-drawer.is-open {
      opacity: 0;
      transform: translateX(-100%);
    }
  }

  /* --- Message Bubble ---------------------------------------- */
  .message,
  .chat-message,
  .message-bubble {
    transition:
      opacity   220ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  @starting-style {
    .message,
    .chat-message,
    .message-bubble {
      opacity: 0;
      transform: translateY(12px);
    }
  }

  /* --- prefers-reduced-motion override ----------------------- */
  @media (prefers-reduced-motion: reduce) {
    .modal,
    .dialog,
    [role="dialog"],
    dialog,
    .toast,
    .notification,
    .alert-toast,
    .dropdown-menu,
    .context-menu,
    .popover-menu,
    .sidebar,
    .sidebar-panel,
    .nav-drawer,
    .message,
    .chat-message,
    .message-bubble {
      transition: none;
    }

    @starting-style {
      .modal.is-open,
      .dialog.is-open,
      [role="dialog"].is-open,
      dialog[open],
      .toast.is-visible,
      .notification.is-visible,
      .alert-toast.is-visible,
      .dropdown-menu.is-open,
      .context-menu.is-open,
      .popover-menu.is-open,
      .sidebar.is-open,
      .sidebar-panel.is-open,
      .nav-drawer.is-open,
      .message,
      .chat-message,
      .message-bubble {
        opacity: 1;
        transform: none;
      }
    }
  }

} /* end @supports (transition-behavior: allow-discrete) */


/* ============================================================
   ENHANCEMENT 2: field-sizing: content — Auto-Growing Inputs
   Textareas and selects resize to fit their content naturally.
   Constrained with min/max-height and min/max-width.
   @supports guard ensures legacy browsers keep their
   existing fixed-height behaviour untouched.
   ============================================================ */

@supports (field-sizing: content) {

  /* --- Auto-growing chat textarea ---------------------------- */
  .chat-input textarea,
  textarea.auto-grow {
    field-sizing: content;
    min-height: 44px;   /* comfortable single-line minimum     */
    max-height: 260px;  /* cap at ~10 lines before scrolling   */
    resize: none;       /* native growth replaces manual resize */
    overflow-y: auto;   /* scroll within max-height cap        */
  }

  /* --- General textareas that opt in ------------------------- */
  textarea[data-auto-grow] {
    field-sizing: content;
    min-height: 80px;
    max-height: 480px;
    resize: none;
    overflow-y: auto;
  }

  /* --- Single-line inputs that should hug their content ------ */
  input.auto-size,
  input[data-auto-size] {
    field-sizing: content;
    min-width: 3ch;   /* never collapse to nothing             */
    max-width: 100%;  /* never overflow its container          */
  }

  /* --- Select elements — width tracks longest option --------- */
  select.auto-size,
  select[data-auto-size] {
    field-sizing: content;
    min-width: 6ch;
    max-width: 100%;
  }

  /* --- prefers-reduced-motion: field-sizing is non-animated,
         so no override needed here. Left as explicit note.     */

} /* end @supports (field-sizing: content) */

/* Fallback comment — browsers without field-sizing support
   continue to use whatever height/resize rules were already
   defined earlier in this stylesheet (no regressions).       */

/* ============================================================
 *  CSS interpolate-size: allow-keywords — smooth height transitions
 *  Enables animating between height: auto / max-content / fit-content
 * ============================================================ */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  /* Expandable sections (FAQ, collapsibles, details/summary) */
  .expandable-content,
  details[open] > *:not(summary),
  .collapsible-body {
    transition: height 0.3s ease, opacity 0.25s ease;
    overflow: hidden;
  }

  .expandable-content.is-collapsed,
  details:not([open]) > *:not(summary) {
    height: 0;
    opacity: 0;
  }

  .expandable-content.is-expanded,
  details[open] > *:not(summary) {
    height: auto;
    opacity: 1;
  }

  /* Sidebar expand/collapse */
  .sidebar-section-content {
    transition: height 0.25s ease;
    overflow: hidden;
  }

  .sidebar-section.is-collapsed .sidebar-section-content {
    height: 0;
  }

  .sidebar-section.is-expanded .sidebar-section-content {
    height: auto;
  }

  /* Pipeline stage detail expand */
  .pipeline-stage-detail {
    transition: height 0.2s ease;
    overflow: hidden;
  }

  .pipeline-stage.is-collapsed .pipeline-stage-detail {
    height: 0;
  }

  .pipeline-stage.is-expanded .pipeline-stage-detail {
    height: auto;
  }

  /* Reduced motion: instant transitions */
  @media (prefers-reduced-motion: reduce) {
    .expandable-content,
    .collapsible-body,
    .sidebar-section-content,
    .pipeline-stage-detail,
    details[open] > *:not(summary) {
      transition: none;
    }
  }
} /* end @supports (interpolate-size: allow-keywords) */

/* ============================================================
 *  Container Queries — component-level responsive layouts
 *  Allow sidebar, messages area, pipeline panel to adapt
 *  based on their own container width, not viewport
 * ============================================================ */
@supports (container-type: inline-size) {

  /* Establish containment contexts */
  .sidebar {
    container-name: sidebar;
    container-type: inline-size;
  }

  .messages-area,
  .chat-container {
    container-name: messages;
    container-type: inline-size;
  }

  .pipeline-panel {
    container-name: pipeline;
    container-type: inline-size;
  }

  .settings-panel,
  .modal-content {
    container-name: panel;
    container-type: inline-size;
  }

  /* Sidebar: narrow mode — hide labels, show only icons */
  @container sidebar (max-width: 180px) {
    .sidebar-link span,
    .sidebar-section-title {
      display: none;
    }

    .sidebar-link {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
    }

    .sidebar-header h2 {
      font-size: 0;
    }

    .sidebar-header h2::first-letter {
      font-size: var(--text-sm);
    }
  }

  /* Sidebar: very narrow — compact padding */
  @container sidebar (max-width: 100px) {
    .sidebar {
      padding: 4px;
    }

    .conversation-item {
      padding: 6px 4px;
    }
  }

  /* Messages area: wide mode — cap message width for readability */
  @container messages (min-width: 800px) {
    .message {
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* Messages area: narrow mode — full width messages */
  @container messages (max-width: 480px) {
    .message {
      max-width: 100%;
      border-radius: 0;
      margin-left: 0;
      margin-right: 0;
    }

    .message-actions {
      position: static;
      opacity: 1;
      margin-top: 8px;
    }
  }

  /* Pipeline panel: narrow mode — stack stage header vertically */
  @container pipeline (max-width: 280px) {
    .pipeline-stage-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .pipeline-stage-meta {
      font-size: var(--text-micro);
    }
  }

  /* Settings/modal panel: wide mode — two-column layout */
  @container panel (min-width: 600px) {
    .settings-grid,
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .settings-grid .full-width,
    .form-grid .full-width {
      grid-column: 1 / -1;
    }
  }

  /* Settings/modal panel: narrow mode — stack everything */
  @container panel (max-width: 400px) {
    .settings-grid,
    .form-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .modal-actions {
      flex-direction: column;
    }

    .modal-actions button {
      width: 100%;
    }
  }
} /* end @supports (container-type: inline-size) */

/* ============================================================
 *  accent-color — Native form control theming
 *  Tints checkboxes, radio buttons, range sliders, progress bars
 * ============================================================ */
:root {
  accent-color: var(--accent-color, #2563eb);
}

[data-theme="dark"] {
  accent-color: var(--accent-color-dark, #60a5fa);
}

/* Specific form elements for explicit accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent-color, #2563eb);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

input[type="range"] {
  accent-color: var(--accent-color, #2563eb);
  cursor: pointer;
}

progress {
  accent-color: var(--accent-color, #2563eb);
}

/* Focus ring for accented controls */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="range"]:focus-visible {
  outline: 2px solid var(--accent-color, #2563eb);
  outline-offset: 2px;
}

[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"],
[data-theme="dark"] input[type="range"],
[data-theme="dark"] progress {
  accent-color: var(--accent-color-dark, #60a5fa);
}

/* ============================================================
 *  scroll-snap — Smooth snap scrolling for horizontal carousels
 *  and conversation list scrolling
 * ============================================================ */

/* Horizontal card carousels / tile grids */
.snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  scroll-padding: 16px;
}

.snap-x > * {
  scroll-snap-align: start;
}

/* Optional proximity snapping (less aggressive) */
.snap-x-proximity {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  scroll-padding: 16px;
}

.snap-x-proximity > * {
  scroll-snap-align: start;
}

/* Vertical snapping for full-page sections */
.snap-y {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  scroll-padding-top: var(--header-height, 48px);
}

.snap-y > * {
  scroll-snap-align: start;
}

/* Conversation list: proximity snap for smooth browsing */
.conversation-list.snap-enabled {
  scroll-snap-type: y proximity;
}

.conversation-list.snap-enabled .conversation-item {
  scroll-snap-align: start;
}

/* Pipeline stages: snap to each stage on scroll */
.pipeline-stages.snap-enabled {
  scroll-snap-type: y proximity;
}

.pipeline-stages.snap-enabled .pipeline-stage {
  scroll-snap-align: start;
  scroll-margin-top: 8px;
}

/* Hide scrollbar for snap containers (optional opt-in) */
.snap-hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.snap-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Reduced motion: disable snap for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .snap-x,
  .snap-x-proximity,
  .snap-y,
  .conversation-list.snap-enabled,
  .pipeline-stages.snap-enabled {
    scroll-snap-type: none;
  }
}

/* ============================================================
 *  content-visibility — Rendering performance for long lists
 *  Skips rendering of off-screen elements until they scroll in
 * ============================================================ */
@supports (content-visibility: auto) {

  /* Conversation messages — each message can skip rendering when off-screen */
  .message,
  .chat-message {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px; /* estimated height hint */
  }

  /* Conversation list items */
  .conversation-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 56px;
  }

  /* Pipeline stages */
  .pipeline-stage {
    content-visibility: auto;
    contain-intrinsic-size: auto 80px;
  }

  /* Settings sections */
  .settings-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
  }

  /* Modals — always render when visible */
  .modal.is-open,
  dialog[open] {
    content-visibility: visible;
  }

} /* end @supports (content-visibility: auto) */

/* ============================================================
 *  text-decoration-skip-ink — Clean underlines on links
 *  Ensures underlines skip descenders (g, p, y, etc.)
 * ============================================================ */
a {
  text-decoration-skip-ink: auto;
}

/* Styled links with improved underline */
.message a,
.chat-message a {
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s ease;
}

.message a:hover,
.chat-message a:hover {
  text-decoration-color: rgba(37, 99, 235, 0.9);
  text-decoration-thickness: 2px;
}

[data-theme="dark"] .message a,
[data-theme="dark"] .chat-message a {
  text-decoration-color: rgba(96, 165, 250, 0.4);
}

[data-theme="dark"] .message a:hover,
[data-theme="dark"] .chat-message a:hover {
  text-decoration-color: rgba(96, 165, 250, 0.9);
}

/* Sidebar links — no underline, use background transition instead */
.sidebar a {
  text-decoration: none;
}

/* External link indicator */
.message a[target="_blank"]::after,
.chat-message a[target="_blank"]::after {
  content: "\2197"; /* ↗ */
  font-size: 0.75em;
  margin-left: 2px;
  opacity: 0.6;
  vertical-align: super;
}

/* ============================================================
 *  color-mix() — Semantic color variations without manual math
 *  Generate hover/active/disabled states from base palette
 * ============================================================ */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    /* Derived hover states — darken by mixing with black */
    --btn-primary-hover: color-mix(in srgb, var(--accent-color, #2563eb) 85%, black);
    --btn-primary-active: color-mix(in srgb, var(--accent-color, #2563eb) 70%, black);
    --btn-primary-disabled: color-mix(in srgb, var(--accent-color, #2563eb) 50%, #9ca3af);

    /* Lighter tints — mix with white */
    --accent-subtle: color-mix(in srgb, var(--accent-color, #2563eb) 12%, white);
    --accent-muted: color-mix(in srgb, var(--accent-color, #2563eb) 25%, white);

    /* Border emphasis levels */
    --border-subtle: color-mix(in srgb, var(--border-color, #e5e7eb) 60%, transparent);
    --border-emphasis: color-mix(in srgb, var(--border-color, #e5e7eb) 100%, var(--accent-color, #2563eb) 20%);

    /* Text opacity levels */
    --text-secondary: color-mix(in srgb, var(--text-primary, #111827) 65%, transparent);
    --text-tertiary: color-mix(in srgb, var(--text-primary, #111827) 40%, transparent);
  }

  [data-theme="dark"] {
    --btn-primary-hover: color-mix(in srgb, var(--accent-color-dark, #60a5fa) 85%, white);
    --btn-primary-active: color-mix(in srgb, var(--accent-color-dark, #60a5fa) 70%, white);
    --btn-primary-disabled: color-mix(in srgb, var(--accent-color-dark, #60a5fa) 50%, #6b7280);
    --accent-subtle: color-mix(in srgb, var(--accent-color-dark, #60a5fa) 15%, #1f2937);
    --accent-muted: color-mix(in srgb, var(--accent-color-dark, #60a5fa) 25%, #1f2937);
  }

  /* Apply derived colors to interactive elements */
  .btn-primary:hover,
  .send-btn:hover {
    background-color: var(--btn-primary-hover);
  }

  .btn-primary:active,
  .send-btn:active {
    background-color: var(--btn-primary-active);
  }

  .btn-primary:disabled,
  .send-btn:disabled {
    background-color: var(--btn-primary-disabled);
    cursor: not-allowed;
  }

  /* Subtle background for selected/active items */
  .conversation-item.active,
  .sidebar-link.active {
    background-color: var(--accent-subtle);
  }

  .conversation-item:hover {
    background-color: var(--accent-muted);
  }
} /* end @supports color-mix */

/* ============================================================
 *  CSS Nesting — Clean component scoping (progressive)
 *  Uses native CSS nesting for cleaner selector organization
 * ============================================================ */
@supports (selector(&)) {

  /* Notification toast nested styles */
  .notification-toast {
    & .notification-title {
      font-weight: 600;
      margin-bottom: 2px;
    }

    & .notification-body {
      opacity: 0.9;
    }

    &--success {
      border-left-color: #10b981;
    }

    &--error {
      border-left-color: #ef4444;
    }

    &--warning {
      border-left-color: #f59e0b;
    }

    &--info {
      border-left-color: #3b82f6;
    }
  }

  /* Wizard step nested styles */
  .wizard-step {
    &-active {
      display: block;
      animation: wizardFadeIn 0.2s ease;
    }

    &-complete {
      display: none;
    }

    &-upcoming {
      display: none;
    }

    &-error {
      & input,
      & select,
      & textarea {
        border-color: #ef4444;
      }
    }
  }

  /* Resize handle nested hover */
  .resize-handle {
    opacity: 0;
    transition: opacity 0.15s ease;

    &:hover,
    &:active {
      opacity: 1;
      background: var(--accent-color, #2563eb);
    }

    &--left,
    &--right {
      width: 4px;
    }

    &--top,
    &--bottom {
      height: 4px;
    }
  }

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

} /* end @supports native nesting */

/* ============================================================
   CSS @scope — Component-level style isolation
   ============================================================ */
@supports (selector(:scope)) {

  /* Command palette */
  @scope (.command-palette) {
    :scope {
      position: fixed;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      width: min(640px, 90vw);
      background: var(--bg-secondary, #0d0d0d);
      border: 1px solid var(--border-color, #333);
      border-radius: 4px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72);
      z-index: 9999;
    }

    input {
      width: 100%;
      padding: 12px 16px;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--border-color, #333);
      color: var(--text-primary, #e0e0e0);
      font-family: var(--font-mono, monospace);
      font-size: 0.9rem;
      outline: none;
    }

    input::placeholder {
      color: var(--text-muted, #555);
    }

    .command-palette-list {
      max-height: 320px;
      overflow-y: auto;
      padding: 4px 0;
    }

    .command-palette-item {
      padding: 8px 16px;
      cursor: pointer;
      color: var(--text-secondary, #aaa);
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background 0.1s;
    }

    .command-palette-item:hover,
    .command-palette-item:focus,
    .command-palette-item[aria-selected="true"] {
      background: var(--bg-hover, #1a1a1a);
      color: var(--text-primary, #e0e0e0);
      outline: none;
    }

    .command-palette-item.active {
      background: var(--accent-dim, #1c2a1c);
      color: var(--accent, #00ff41);
    }
  }

  /* Shortcut badges */
  @scope (.shortcut-badge) {
    :scope {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    kbd {
      font-family: var(--font-mono, monospace);
      font-size: 0.7rem;
      padding: 1px 5px;
      background: var(--bg-tertiary, #181818);
      border: 1px solid var(--border-subtle, #3a3a3a);
      border-radius: 3px;
      color: var(--text-muted, #777);
      line-height: 1.6;
      white-space: nowrap;
    }
  }

  /* Toast container */
  @scope (.toast-container) to (.toast) {
    :scope {
      position: fixed;
      bottom: 24px;
      right: 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 10000;
    }

    .toast {
      padding: 10px 16px;
      background: var(--bg-secondary, #111);
      border: 1px solid var(--border-color, #333);
      border-left: 3px solid var(--accent, #00ff41);
      border-radius: 3px;
      color: var(--text-primary, #e0e0e0);
      font-size: 0.82rem;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
      max-width: 360px;
    }

    .toast.toast-error   { border-left-color: var(--color-error,   #ff4444); }
    .toast.toast-warning { border-left-color: var(--color-warning, #ffaa00); }
    .toast.toast-info    { border-left-color: var(--color-info,    #4488ff); }
  }

} /* end @supports selector(:scope) */


/* ============================================================
   CSS @property — Typed custom properties
   ============================================================ */

@property --progress-value {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --glow-intensity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --slide-distance {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --fade-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --hue-rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* --- Utility classes using typed custom properties --- */

.animate-progress {
  --progress-value: 0%;
  width: var(--progress-value);
  transition: --progress-value 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .animate-progress {
    transition: none;
  }
}

.glow-pulse {
  --glow-intensity: 0;
  animation: glow-pulse-keyframes 2s ease-in-out infinite;
}

@keyframes glow-pulse-keyframes {
  0%, 100% { --glow-intensity: 0;   box-shadow: 0 0 0px          transparent; }
  50%       { --glow-intensity: 1;   box-shadow: 0 0 calc(8px * var(--glow-intensity, 1)) var(--accent, #00ff41); }
}

@media (prefers-reduced-motion: reduce) {
  .glow-pulse {
    animation: none;
    box-shadow: 0 0 4px var(--accent, #00ff41);
  }
}

.slide-enter {
  --slide-distance: 16px;
  animation: slide-enter-keyframes 0.25s ease forwards;
}

@keyframes slide-enter-keyframes {
  from {
    opacity: 0;
    transform: translateY(var(--slide-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide-enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* end CSS @property utilities */

/* ============================================================
   VIEW TRANSITION NAMES — page/state transition support
   ============================================================ */
@supports (view-transition-name: none) {
  .sidebar        { view-transition-name: sidebar; }
  .messages-area  { view-transition-name: messages; }
  .pipeline-panel { view-transition-name: pipeline; }
  .header         { view-transition-name: app-header; }
  .command-palette { view-transition-name: palette; }

  ::view-transition-old(sidebar),
  ::view-transition-old(messages),
  ::view-transition-old(pipeline),
  ::view-transition-old(app-header),
  ::view-transition-old(palette) {
    animation: 200ms ease-out both fade-slide-out;
  }

  ::view-transition-new(sidebar),
  ::view-transition-new(messages),
  ::view-transition-new(pipeline),
  ::view-transition-new(app-header),
  ::view-transition-new(palette) {
    animation: 200ms ease-in both fade-slide-in;
  }

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

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

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none;
    }
  }
}

/* ============================================================
   LIGHT-DARK() SEMANTIC COLOR TOKENS
   ============================================================ */
@supports (color: light-dark(white, black)) {
  :root {
    color-scheme: light dark;

    --surface-primary:   light-dark(#ffffff, #1a1a2e);
    --surface-secondary: light-dark(#f8f9fa, #16213e);
    --text-primary:      light-dark(#1a1a2e, #e8e8e8);
    --text-secondary:    light-dark(#6b7280, #9ca3af);
    --border-default:    light-dark(#e5e7eb, #2a2a4a);
    --accent-primary:    light-dark(#2563eb, #60a5fa);
    --status-success:    light-dark(#059669, #34d399);
    --status-error:      light-dark(#dc2626, #f87171);
    --status-warning:    light-dark(#d97706, #fbbf24);
  }

  .app-container {
    background-color: var(--surface-primary);
    color:            var(--text-primary);
    border-color:     var(--border-default);
  }
}

/* ============================================================
   CASCADE LAYERS
   Declare order first; unsupported browsers ignore the block.
   ============================================================ */
@layer reset, base, components, utilities, overrides;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
}

@layer base {
  body {
    font-family: var(--font-ui, system-ui, sans-serif);
    color: var(--text-primary, #e0e0e0);
    background: var(--bg-primary, #0a0a0a);
  }
  a { color: var(--accent-blue, #4a9eff); }
  a:hover { color: var(--accent-blue-light, #7ab8ff); }
}

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-default, #333);
    border-radius: 3px;
    background: var(--bg-secondary, #111);
    color: var(--text-primary, #e0e0e0);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .btn:hover { background: var(--bg-hover, #1a1a1a); border-color: var(--accent-blue, #4a9eff); }

  .card {
    background: var(--bg-secondary, #111);
    border: 1px solid var(--border-default, #333);
    border-radius: 4px;
    padding: 1rem;
  }

  .badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--accent-blue, #4a9eff);
    color: #000;
  }
}

@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .flex-center { display: flex; align-items: center; justify-content: center; }
  .gap-sm { gap: 0.375rem; }
  .gap-md { gap: 0.75rem; }
}

@layer overrides {
  [data-theme="terminal"] {
    --bg-primary:    #000;
    --bg-secondary:  #0d0d0d;
    --text-primary:  #00ff41;
    --accent-blue:   #00ff41;
    --border-default:#1a3a1a;
  }
}

/* ============================================================
   :has() PARENT-BASED CONDITIONAL STYLING
   Gated with @supports so non-supporting browsers skip cleanly.
   ============================================================ */
@supports selector(:has(*)) {
  /* Conversation item with unread badge — emphasise it */
  .conversation-item:has(.unread-badge) {
    font-weight: 600;
    border-left: 3px solid var(--accent-blue, #4a9eff);
    padding-left: calc(0.75rem - 3px);
  }

  /* Message containing a code block — wider + tinted bg */
  .message:has(.code-block) {
    max-width: 90%;
    background: color-mix(in srgb, var(--bg-secondary, #111) 85%, var(--accent-blue, #4a9eff) 15%);
  }

  /* Sidebar dims slightly when any conversation item is hovered */
  .sidebar:has(.conversation-item:hover) {
    filter: brightness(1.04);
  }

  /* Form group with invalid input — red border + indicator */
  .form-group:has(input:invalid) {
    border-color: var(--error-red, #e53e3e);
    box-shadow: 0 0 0 1px var(--error-red, #e53e3e);
  }

  /* Form group with focused input — blue highlight */
  .form-group:has(input:focus) {
    border-color: var(--accent-blue, #4a9eff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue, #4a9eff) 30%, transparent);
  }

  /* Pipeline panel with an active stage — subtle glow */
  .pipeline-panel:has(.stage-active) {
    border-color: var(--accent-blue, #4a9eff);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-blue, #4a9eff) 25%, transparent);
  }

  /* Blur body content behind open command palette */
  body:has(.command-palette-overlay[style*="flex"]) .app-container {
    filter: blur(2px);
    pointer-events: none;
  }
}

/* ── Container Style Queries ─────────────────────────────────────────────── */
@supports (container-type: inline-size) {
  .message[data-role="assistant"] { container-name: message-bubble; container-type: inline-size; }

  @container message-bubble style(--depth: deep) {
    .message-content {
      border-left: 3px solid;
      border-image: linear-gradient(180deg, var(--accent, #f90), var(--accent2, #0af)) 1;
      font-size: 0.95rem;
      padding: 0.75rem 1rem;
    }
  }

  @container message-bubble style(--depth: shallow) {
    .message-content {
      font-size: 0.82rem;
      padding: 0.35rem 0.6rem;
    }
  }

  .pipeline-stage { container-name: stage; container-type: inline-size; }

  @container stage style(--status: complete) {
    .stage-label::before { content: "✓ "; color: #0c0; }
    .pipeline-stage { border-left: 3px solid #0c0; }
  }

  @container stage style(--status: error) {
    .stage-label::before { content: "⚠ "; color: #f33; }
    .pipeline-stage { border-left: 3px solid #f33; }
  }

  @container stage style(--status: running) {
    .stage-label::before { content: "● "; color: #39f; animation: pulse 1s infinite; }
    .pipeline-stage { border-left: 3px solid #39f; }
  }

/* ── PWA Standalone Mode ───────────────────────────────────────────────────── */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .header {
    padding-top: env(safe-area-inset-top);
    -webkit-app-region: drag;
  }
  .header-btn, .header input, .header select {
    -webkit-app-region: no-drag;
  }
  .sidebar { border-radius: 0; }
  .app-container { border-radius: 0; min-height: 100dvh; }
}

/* ── Print Styles ──────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .pipeline-panel, .header, .command-palette-overlay,
  .toast-container, .skip-link { display: none !important; }
  .messages-area {
    height: auto !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
  .message { break-inside: avoid; page-break-inside: avoid; }
  body { background: white; color: black; }
}

/* ── High Contrast (Forced Colors) ────────────────────────────────────────── */
@media (forced-colors: active) {
  .btn, .badge, .conversation-item, .pipeline-stage {
    border: 1px solid ButtonText;
  }
  .message { border: 1px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight !important; }
}
}

/* ============================================================================
   @STARTING-STYLE ENTRY ANIMATIONS + TEXT-WRAP TYPOGRAPHY
   Cycle 85 — Pure CSS entry animations, balanced text wrapping
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. @starting-style Entry Animations
   Browser support: Chrome 117+, Edge 117+, Safari 17.5+, Firefox 129+
   Wrapped in @supports for graceful degradation.
   --------------------------------------------------------------------------- */

@supports (selector(:open)) {

  /* -- Shared transition curve (Apple-like spring easing) -- */

  .command-palette,
  .toast,
  .modal-overlay,
  .modal-content,
  [popover],
  .sidebar[data-transitioning] {
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.3s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.3s cubic-bezier(0.32, 0.72, 0, 1), color 0.3s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    transition-behavior: allow-discrete;
  }

  /* -- Command Palette: fade + scale -- */

  .command-palette {
    opacity: 1;
    transform: scale(1);
  }

  @starting-style {
    .command-palette {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  /* -- Toast: slide-in from bottom + fade -- */

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

  @starting-style {
    .toast {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  /* -- Modal Overlay: fade from transparent -- */

  .modal-overlay {
    opacity: 1;
    background-color: var(--modal-overlay-bg, rgba(0, 0, 0, 0.5));
  }

  @starting-style {
    .modal-overlay {
      opacity: 0;
      background-color: transparent;
    }
  }

  /* -- Modal Content: scale from 0.9 + fade -- */

  .modal-content {
    opacity: 1;
    transform: scale(1);
  }

  @starting-style {
    .modal-content {
      opacity: 0;
      transform: scale(0.9);
    }
  }

  /* -- Popover: fade + slide from top -- */

  [popover] {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    [popover] {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  /* -- Sidebar (transitioning state): slide from left -- */

  .sidebar[data-transitioning] {
    transform: translateX(0);
  }

  @starting-style {
    .sidebar[data-transitioning] {
      transform: translateX(-100%);
    }
  }

} /* end @supports (selector(:open)) */


/* ---------------------------------------------------------------------------
   2. Reduced Motion: disable @starting-style entry animations
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .command-palette,
  .toast,
  .modal-overlay,
  .modal-content,
  [popover],
  .sidebar[data-transitioning] {
    transition-duration: 0.01ms !important;
  }
}


/* ---------------------------------------------------------------------------
   3. text-wrap: balance & pretty — Modern typographic refinement
   Browser support: Chrome 114+, Edge 114+, Safari 17.5+, Firefox 121+
   --------------------------------------------------------------------------- */

@supports (text-wrap: balance) {

  h1,
  h2,
  h3,
  .modal-title,
  .panel-title {
    text-wrap: balance;
  }

  .toast-message {
    text-wrap: balance;
  }

  .stat-label,
  .badge {
    text-wrap: balance;
  }

}

@supports (text-wrap: pretty) {

  .message-content p,
  .pipeline-stage-content {
    text-wrap: pretty;
  }

}

/* ============================================================================
   FIELD-SIZING + INTERPOLATE-SIZE + ANCHOR POSITIONING
   Cycle 86 — Auto-sizing inputs, smooth height transitions, CSS anchoring
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Field-sizing: content — auto-sizing form controls
   -------------------------------------------------------------------------- */

@supports (field-sizing: content) {

  textarea.auto-resize,
  .message-input textarea {
    field-sizing: content;
    min-height: 2.5em;
    max-height: 40vh;
  }

  input[type="text"].auto-size,
  .search-input {
    field-sizing: content;
    min-width: 8ch;
    max-width: 100%;
  }

  select.auto-size {
    field-sizing: content;
  }

}

/* --------------------------------------------------------------------------
   2. Interpolate-size: allow-keywords — smooth transitions to/from auto
   -------------------------------------------------------------------------- */

@supports (interpolate-size: allow-keywords) {

  :root {
    interpolate-size: allow-keywords;
  }

  .collapsible-section {
    height: 0;
    overflow: clip;
    transition: height 0.35s ease;
  }

  .collapsible-section.is-open {
    height: auto;
  }

  .accordion-panel {
    height: 0;
    overflow: clip;
    transition: height 0.35s ease;
  }

  .accordion-panel.is-open {
    height: auto;
  }

  .expandable-message {
    max-height: 4lh;
    overflow: clip;
    transition: max-height 0.35s ease;
  }

  .expandable-message.is-expanded {
    max-height: auto;
  }

  .sidebar-group-content {
    height: 0;
    overflow: clip;
    transition: height 0.35s ease;
  }

  .sidebar-group-content.is-open {
    height: auto;
  }

}

/* --------------------------------------------------------------------------
   3. Anchor positioning — tooltips and dropdowns via CSS anchoring
   -------------------------------------------------------------------------- */

@supports (anchor-name: --a) {

  .tooltip-trigger {
    anchor-name: --tooltip-anchor;
  }

  .tooltip {
    position: fixed;
    position-anchor: --tooltip-anchor;
    inset-area: top;
    margin-bottom: 8px;
  }

  .dropdown-trigger {
    anchor-name: --dropdown-anchor;
  }

  .dropdown-menu {
    position: fixed;
    position-anchor: --dropdown-anchor;
    inset-area: bottom span-right;
  }

}

/* ============================================================================
   DISCRETE ANIMATIONS + COLOR-SCHEME + OVERSCROLL-BEHAVIOR
   Cycle 87 — Keyframe animations, per-component color schemes, scroll containment
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Discrete Property Animations with @keyframes
   -------------------------------------------------------------------------- */

/* Fade-in with display: none → block transition (discrete property) */
@keyframes fade-in-display {
  from {
    display: none;
    opacity: 0;
  }
  to {
    display: block;
    opacity: 1;
  }
}

.animate-fade-in-display {
  animation: fade-in-display 0.3s ease forwards;
  transition-behavior: allow-discrete;
}

/* Typewriter blinking cursor — steps(1) for hard on/off toggle */
@keyframes typewriter-cursor {
  0%, 100% {
    border-right-color: currentColor;
  }
  50% {
    border-right-color: transparent;
  }
}

.typewriter-cursor {
  border-right: 2px solid currentColor;
  animation: typewriter-cursor 1s steps(1) infinite;
}

/* Skeleton pulse — subtle opacity breathing for loading placeholders */
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.skeleton-line,
.skeleton-avatar,
.skeleton-block {
  animation: skeleton-pulse 1.8s ease-in-out infinite;
  background: var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
}

.skeleton-line {
  height: 12px;
  margin-bottom: 8px;
  width: 100%;
}

.skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.skeleton-block {
  height: 80px;
  width: 100%;
}

/* Shimmer — background-position sweep with linear-gradient overlay */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-loading {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
}

/* Slide-in from bottom — translateY + opacity entrance */
@keyframes slide-in-from-bottom {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slide-in-from-bottom 0.35s ease-out forwards;
}

/* Bounce subtle — gentle Y-axis bounce for attention */
@keyframes bounce-subtle {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-2px);
  }
}

.animate-bounce {
  animation: bounce-subtle 0.5s ease-in-out;
}

/* --------------------------------------------------------------------------
   2. CSS color-scheme Per-Component Overrides
   -------------------------------------------------------------------------- */

.dark-widget {
  color-scheme: dark;
}

.light-widget {
  color-scheme: light;
}

input,
select,
textarea {
  color-scheme: inherit;
}

.code-block,
.syntax-highlight {
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. CSS overscroll-behavior Refinements
   -------------------------------------------------------------------------- */

.modal-content,
.sidebar,
.pipeline-panel {
  overscroll-behavior: contain;
}

.message-list {
  overscroll-behavior-y: contain;
}

body.modal-open {
  overscroll-behavior: none;
}

/* ============================================================================
   CUSTOM HIGHLIGHT API + SCROLL-DRIVEN ANIMATIONS + SUBGRID
   Cycle 88 — Search highlights, scroll-linked animations, subgrid alignment
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. CSS Custom Highlight API
   --------------------------------------------------------------------------- */

@supports (selector(::highlight(search))) {
  ::highlight(search-result) {
    background-color: rgba(255, 200, 0, 0.35);
    color: inherit;
  }

  ::highlight(active-match) {
    background-color: rgba(255, 140, 0, 0.6);
    color: inherit;
    text-decoration: underline;
  }

  ::highlight(code-error) {
    background-color: rgba(220, 38, 38, 0.2);
    text-decoration: wavy underline red;
  }

  ::highlight(mention) {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary, #2563eb);
    font-weight: 600;
  }
}

/* ---------------------------------------------------------------------------
   2. CSS Scroll-Driven Animations (scroll-timeline)
   --------------------------------------------------------------------------- */

@keyframes scroll-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes message-reveal {
  from { opacity: 0.3; transform: translateY(10px); }
  to   { opacity: 1;   transform: none; }
}

@keyframes fade-out-scroll {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@supports (animation-timeline: scroll()) {
  .progress-bar-scroll {
    animation: scroll-progress linear;
    animation-timeline: scroll(root);
  }

  .message-list .message {
    animation: message-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  .fade-on-scroll {
    animation: fade-out-scroll linear;
    animation-timeline: scroll(nearest);
  }

  @media (prefers-reduced-motion: reduce) {
    .progress-bar-scroll,
    .message-list .message,
    .fade-on-scroll {
      animation-duration: 0.01ms;
    }
  }
}

/* ---------------------------------------------------------------------------
   3. CSS Subgrid for Layout Alignment
   --------------------------------------------------------------------------- */

@supports (grid-template-columns: subgrid) {
  .settings-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }

  .settings-grid > .setting-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  .message-grid {
    display: grid;
    grid-template-columns: 40px 1fr auto;
  }

  .message-grid > .message-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }
}

/* ============================================================================
   LOGICAL PROPERTIES + ENV() SAFE AREAS + CSS MATH FUNCTIONS
   Cycle 89 — RTL/writing-mode support, safe areas, precision math
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Logical Properties Upgrade
   Progressive enhancement: only applies when the browser supports logical props.
   Provides RTL and vertical writing-mode support for key layout rules.
   --------------------------------------------------------------------------- */

@supports (inline-size: 1px) {
  .message-content {
    padding-inline: 1rem;
    margin-block-end: 0.5rem;
  }

  .sidebar {
    inline-size: 280px;
    border-inline-end: 1px solid var(--border-primary, #e2e8f0);
    padding-block: 1rem;
  }

  .pipeline-panel {
    inline-size: 320px;
    border-inline-start: 1px solid var(--border-primary, #e2e8f0);
  }

  .header {
    padding-inline: 1.5rem;
    padding-block: 0.75rem;
  }

  .modal-content {
    margin-inline: auto;
    padding-block: 2rem;
    padding-inline: 2rem;
    max-inline-size: 600px;
  }

  .btn {
    padding-inline: 1rem;
    padding-block: 0.5rem;
    margin-inline-end: 0.5rem;
  }

  .form-group {
    margin-block-end: 1rem;
  }

  .badge {
    margin-inline-start: 0.5rem;
    padding-inline: 0.5rem;
    padding-block: 0.125rem;
  }
}

/* ---------------------------------------------------------------------------
   2. CSS env() for Safe Areas and Titlebar
   Handles PWA titlebar overlay, notch/safe-area insets, and virtual keyboard.
   --------------------------------------------------------------------------- */

.app-container {
  padding-block-start: env(titlebar-area-height, 0px);
  padding-inline-start: env(safe-area-inset-left, 0px);
  padding-inline-end: env(safe-area-inset-right, 0px);
}

.bottom-bar,
.message-input-container {
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

.keyboard-toolbar {
  padding-block-end: env(keyboard-inset-height, 0px);
}

/* ---------------------------------------------------------------------------
   3. CSS round() and mod() Math Functions
   Pixel-perfect sizing via rounding functions. Progressive enhancement guard.
   --------------------------------------------------------------------------- */

@supports (width: round(1px, 1px)) {
  .grid-item {
    width: round(100% / 3, 1px);
  }

  .progress-fill {
    width: round(down, var(--progress, 0%), 1%);
  }

  .striped-bg {
    background-size: round(20px, 1px) round(20px, 1px);
  }
}

/* ===========================================================================
   4. CSS Container Size Queries
   Intrinsic responsive layouts that adapt to their container, not the viewport.
   Progressive enhancement: entire block is ignored by browsers without support.
   =========================================================================== */

@supports (container-type: inline-size) {

  /* ── Message Content Container ──────────────────────────────────────────── */

  .message-content {
    container-type: inline-size;
    container-name: message;
  }

  @container message (max-width: 400px) {
    .message-content {
      font-size: 0.85rem;
      padding: 0.5rem;
    }

    .message-content pre,
    .message-content code {
      overflow-x: auto;
      white-space: pre;
      max-width: 100%;
    }
  }

  @container message (min-width: 600px) {
    .message-content {
      font-size: 1rem;
      padding: 1rem 1.25rem;
    }

    .message-content pre,
    .message-content code {
      counter-reset: line;
    }

    .message-content pre .line::before {
      counter-increment: line;
      content: counter(line);
      display: inline-block;
      width: 2.5em;
      margin-right: 1em;
      text-align: right;
      color: var(--color-text-tertiary, #6b7280);
      user-select: none;
    }
  }

  /* ── Conversation Item Container ────────────────────────────────────────── */

  .conversation-item {
    container-type: inline-size;
    container-name: convo-item;
  }

  @container convo-item (max-width: 250px) {
    .conversation-item .conversation-timestamp,
    .conversation-item .convo-timestamp {
      display: none;
    }

    .conversation-item .conversation-title,
    .conversation-item .convo-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }

  @container convo-item (min-width: 350px) {
    .conversation-item .conversation-meta,
    .conversation-item .convo-meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .conversation-item .conversation-timestamp,
    .conversation-item .convo-timestamp {
      display: inline;
    }
  }

  /* ── Pipeline Stage Container ───────────────────────────────────────────── */

  .pipeline-stage {
    container-type: inline-size;
    container-name: stage;
  }

  @container stage (max-width: 200px) {
    .pipeline-stage .stage-label,
    .pipeline-stage .stage-text {
      display: none;
    }

    .pipeline-stage .stage-icon {
      margin: 0 auto;
    }
  }

  @container stage (min-width: 300px) {
    .pipeline-stage .stage-label,
    .pipeline-stage .stage-text {
      display: inline;
    }

    .pipeline-stage .stage-progress,
    .pipeline-stage .progress-bar {
      display: block;
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background: var(--color-surface-alt, #e5e7eb);
      margin-top: 0.25rem;
    }

    .pipeline-stage .stage-progress-fill,
    .pipeline-stage .progress-fill {
      height: 100%;
      border-radius: 2px;
      background: var(--color-active, #2563eb);
      transition: width 300ms ease;
    }
  }
}

/* ===========================================================================
   5. Aspect Ratio — Consistent Media Containers
   Ensures avatars, image previews, and thumbnails maintain proportions
   without layout shift (CLS = 0 for these elements).
   =========================================================================== */

.user-avatar,
.bot-avatar {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.image-preview {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md, 8px);
}

.thumbnail {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ===== COMPREHENSIVE ARIA & ACCESSIBILITY STYLES ===== */

/* Skip-to-content link */
.skip-to-content {
  position: absolute;
  inset-inline-start: -9999px;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  background: var(--color-accent, #2196f3);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md, 8px) 0;
}
.skip-to-content:focus {
  inset-inline-start: 0;
}

/* Enhanced focus indicators for all interactive elements */
:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="tab"], [role="menuitem"]):focus-visible {
  outline: 3px solid var(--color-accent, #2196f3);
  outline-offset: 2px;
}

/* Ensure aria-disabled elements look and behave disabled */
[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* aria-busy loading state */
[aria-busy="true"] {
  position: relative;
}
[aria-busy="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(128,128,128,0.05) 10px,
    rgba(128,128,128,0.05) 20px
  );
  animation: aria-busy-stripe 1s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes aria-busy-stripe {
  from { background-position: 0 0; }
  to { background-position: 28px 0; }
}

/* aria-current for active navigation items */
[aria-current="true"],
[aria-current="page"] {
  font-weight: 600;
  border-inline-start: 3px solid var(--color-accent, #2196f3);
  background: rgba(33, 150, 243, 0.08);
}

/* aria-expanded toggle indicators — opt-in via .aria-expand-indicator class */
.aria-expand-indicator[aria-expanded]::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-inline-start: 5px solid currentColor;
  border-block-start: 4px solid transparent;
  border-block-end: 4px solid transparent;
  margin-inline-end: 0.5rem;
  transition: transform 0.2s ease;
}
.aria-expand-indicator[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

/* aria-invalid form styling */
[aria-invalid="true"] {
  border-color: var(--color-error, #f44336) !important;
  box-shadow: 0 0 0 1px var(--color-error, #f44336);
}

/* aria-required indicator */
[aria-required="true"]::placeholder {
  /* Add asterisk to placeholder */
}
label:has(+ [aria-required="true"]):not(.pedestal-label)::after,
label:has(+ .mn-form__input-wrap > [aria-required="true"]):not(.pedestal-label)::after,
label[data-required]::after {
  content: ' *';
  color: var(--color-error, #f44336);
  font-weight: 700;
}

/* Reduced motion - ensure all animation respects preference */
@media (prefers-reduced-motion: reduce) {
  [aria-busy="true"]::after {
    animation: none;
  }
  .aria-expand-indicator[aria-expanded]::before {
    transition: none;
  }
}

/* High contrast mode support for ARIA states */
@media (forced-colors: active) {
  [aria-current="true"],
  [aria-current="page"] {
    border-color: Highlight;
    forced-color-adjust: none;
  }
  [aria-invalid="true"] {
    border-color: LinkText;
  }
  :focus-visible {
    outline-color: Highlight;
  }
}

/* ===== VIEW TRANSITIONS API ===== */
@supports (view-transition-name: none) {
  /* Named transition elements */
  .sidebar { view-transition-name: sidebar; }
  .message-list, #chat-messages { view-transition-name: message-list; }
  .pipeline-panel { view-transition-name: pipeline; }
  .header, .app-header { view-transition-name: header; }
  .conversation-item.active { view-transition-name: active-conversation; }

  /* Default cross-fade for all transitions */
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 250ms;
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Sidebar slides in/out */
  ::view-transition-old(sidebar) {
    animation: vt-slide-out-left 300ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  ::view-transition-new(sidebar) {
    animation: vt-slide-in-left 300ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Message list content fades */
  ::view-transition-old(message-list) {
    animation: vt-fade-scale-out 200ms ease-out;
  }
  ::view-transition-new(message-list) {
    animation: vt-fade-scale-in 300ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Pipeline slides from right */
  ::view-transition-old(pipeline) {
    animation: vt-slide-out-right 250ms ease-out;
  }
  ::view-transition-new(pipeline) {
    animation: vt-slide-in-right 250ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Active conversation morphs */
  ::view-transition-old(active-conversation) {
    animation: vt-fade-out 150ms ease-out;
  }
  ::view-transition-new(active-conversation) {
    animation: vt-fade-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  @keyframes vt-slide-in-left {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  @keyframes vt-slide-out-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
  }
  @keyframes vt-slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  @keyframes vt-slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
  }
  @keyframes vt-fade-scale-in {
    from { transform: scale(0.97); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  @keyframes vt-fade-scale-out {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.97); opacity: 0; }
  }
  @keyframes vt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes vt-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  /* Shared element transitions for conversation morphing */
  ::view-transition-old(conv-avatar-from),
  ::view-transition-new(conv-avatar-to) {
    animation: vt-morph-avatar 400ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  ::view-transition-old(conv-title-from),
  ::view-transition-new(conv-title-to) {
    animation: vt-morph-title 400ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  @keyframes vt-morph-avatar {
    from { transform: translate(0, 0) scale(1); opacity: 1; }
    to { transform: translate(0, 48px) scale(1); opacity: 1; }
  }
  @keyframes vt-m

@supports (selector(:scope)) {

  /* ---------------------------------------------------------------------------
     1. Sidebar Scope
     Confines sidebar navigation styles so they do not leak into the message
     list or other panels. Lower boundary: .message-list.
     --------------------------------------------------------------------------- */
  @scope (.sidebar) to (.message-list) {
    :scope {
      --scope-bg: var(--bg-chrome);
      --scope-text: var(--text-primary);
      --scope-accent: var(--color-active);
      --scope-border: var(--border-color);
      --scope-hover-bg: var(--color-active-soft);
      --scope-active-bg: var(--color-active-glow);

      background: var(--scope-bg);
      color: var(--scope-text);
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      overflow-y: auto;
    }

    .sidebar-header {
      padding: 12px 16px;
      font-size: var(--text-md);
      font-weight: 600;
      border-bottom: 1px solid var(--scope-border);
    }

    .sidebar-btn,
    .sidebar-toolbar-btn {
      padding: 6px 12px;
      font-size: var(--text-sm);
      border-radius: 4px;
      color: var(--scope-text);
      background: transparent;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .sidebar-btn:hover,
    .sidebar-toolbar-btn:hover {
      background: var(--scope-hover-bg);
      color: var(--scope-accent);
    }

    .sidebar-btn:focus-visible,
    .sidebar-toolbar-btn:focus-visible {
      outline: 2px solid var(--scope-accent);
      outline-offset: 1px;
    }

    .sidebar-btn:active,
    .sidebar-toolbar-btn:active {
      background: var(--scope-active-bg);
    }

    .sidebar-btn.active {
      background: var(--scope-active-bg);
      color: var(--scope-accent);
      font-weight: 600;
    }

    .sidebar-search-input {
      font-size: var(--text-sm);
      padding: 6px 10px;
      background: var(--bg-field);
      border: 1px solid var(--scope-border);
      border-radius: 4px;
      color: var(--scope-text);
      transition: border-color 0.15s ease;
    }

    .sidebar-search-input:focus {
      border-color: var(--scope-accent);
      outline: none;
    }

    .conversation-list {
      padding: 4px 0;
    }

    .nav-item {
      padding: 8px 16px;
      font-size: var(--text-sm);
      cursor: pointer;
      transition: background-color 0.12s ease;
    }

    .nav-item:hover {
      background: var(--scope-hover-bg);
    }

    .nav-item.active {
      background: var(--scope-active-bg);
      border-left: 3px solid var(--scope-accent);
    }

    /* Scoped scrollbar styling */
    :scope::-webkit-scrollbar {
      width: 6px;
    }

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

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

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

    @media (prefers-reduced-motion: reduce) {
      .sidebar-btn,
      .sidebar-toolbar-btn,
      .sidebar-search-input,
      .nav-item {
        transition: none !important;
      }
    }
  }

  /* ---------------------------------------------------------------------------
     2. Message List Scope
     Confines message bubble, code block, and avatar styles within the message
     area. Lower boundary: .pipeline-panel.
     --------------------------------------------------------------------------- */
  @scope (.message-list) to (.pipeline-panel) {
    :scope {
      --scope-bg: var(--bg-primary);
      --scope-text: var(--text-primary);
      --scope-accent: var(--color-active);
      --scope-bubble-user: var(--bg-elevated);
      --scope-bubble-assistant: var(--bg-chrome);
      --scope-code-bg: rgba(0, 0, 0, 0.04);
      --scope-border: var(--border-light);

      background: var(--scope-bg);
      color: var(--scope-text);
      font-family: var(--font-ui);
      font-size: var(--text-base);
    }

    .message-bubble {
      padding: 12px 16px;
      border-radius: 8px;
      line-height: 1.6;
      max-width: 80%;
      word-wrap: break-word;
      transition: box-shadow 0.15s ease;
    }

    .message-bubble:hover {
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .message.user .message-bubble {
      background: var(--scope-bubble-user);
      border: 1px solid var(--scope-border);
      margin-left: auto;
    }

    .message.assistant .message-bubble {
      background: var(--scope-bubble-assistant);
      border: 1px solid var(--scope-border);
    }

    /* Code blocks within messages */
    .message-bubble pre {
      background: var(--scope-code-bg);
      border-radius: 6px;
      padding: 12px;
      overflow-x: auto;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      line-height: 1.5;
      margin: 8px 0;
    }

    .message-bubble code {
      font-family: var(--font-mono);
      font-size: 0.9em;
      padding: 2px 5px;
      background: var(--scope-code-bg);
      border-radius: 3px;
    }

    .message-bubble pre code {
      padding: 0;
      background: transparent;
      font-size: inherit;
    }

    /* Avatar sizing within messages */
    .message-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .message-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
    }

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

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

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

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

    @media (prefers-reduced-motion: reduce) {
      .message-bubble {
        transition: none !important;
      }
    }
  }

  /* ---------------------------------------------------------------------------
     3. Pipeline Panel Scope
     Confines pipeline stage colors, progress indicators, and ring chart
     styles. Lower boundary: .sidebar (prevents leaking back into sidebar).
     --------------------------------------------------------------------------- */
  @scope (.pipeline-panel) to (.sidebar) {
    :scope {
      --scope-bg: var(--bg-elevated);
      --scope-text: var(--text-primary);
      --scope-accent: var(--color-active);
      --scope-success: var(--color-success);
      --scope-error: var(--color-error);
      --scope-muted: var(--text-muted);
      --scope-border: var(--border-color);
      --scope-stage-pending: var(--text-muted);
      --scope-stage-running: var(--color-active);
      --scope-stage-complete: var(--color-success);
      --scope-stage-failed: var(--color-error);

      background: var(--scope-bg);
      color: var(--scope-text);
      font-family: var(--font-ui);
      font-size: var(--text-sm);
    }

    /* Pipeline stage indicators */
    .pipeline-stage {
      padding: 8px 12px;
      border-left: 3px solid var(--scope-stage-pending);
      font-size: var(--text-sm);
      color: var(--scope-muted);
      transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    }

    .pipeline-stage:hover {
      background: var(--color-active-soft);
    }

    .pipeline-stage:focus-visible {
      outline: 2px solid var(--scope-accent);
      outline-offset: -2px;
    }

    .pipeline-stage.running {
      border-left-color: var(--scope-stage-running);
      color: var(--scope-accent);
    }

    .pipeline-stage.complete {
      border-left-color: var(--scope-stage-complete);
      color: var(--scope-success);
    }

    .pipeline-stage.complete::after {
      color: var(--scope-success);
    }

    .pipeline-stage.failed {
      border-left-color: var(--scope-stage-failed);
      color: var(--scope-error);
    }

    /* Progress bar */
    .pipeline-progress {
      height: 4px;
      background: var(--scope-border);
      border-radius: 2px;
      overflow: hidden;
    }

    .pipeline-progress-bar {
      height: 100%;
      background: var(--scope-accent);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .pipeline-progress-label {
      font-size: var(--text-xs);
      color: var(--scope-muted);
      margin-top: 4px;
    }

    /* Ring chart (stage visualization) */
    .ring-chart {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .ring-chart svg circle {
      transition: stroke-dashoffset 0.4s ease;
    }

    .ring-chart-label {
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--scope-text);
    }

    .ring-chart .ring-track {
      stroke: var(--scope-border);
    }

    .ring-chart .ring-fill {
      stroke: var(--scope-accent);
    }

    .ring-chart .ring-fill.success {
      stroke: var(--scope-success);
    }

    .ring-chart .ring-fill.error {
      stroke: var(--scope-error);
    }

    @media (prefers-reduced-motion: reduce) {
      .pipeline-stage,
      .pipeline-progress-bar {
        transition: none !important;
      }

      .ring-chart svg circle {
        transition: none !important;
      }
    }
  }

  /* ---------------------------------------------------------------------------
     4. Modal Scope
     Isolates modal typography, button styles, and form elements so they
     remain self-contained regardless of parent context. No lower boundary.
     --------------------------------------------------------------------------- */
  @scope (.modal-content) {
    :scope {
      --scope-bg: var(--bg-elevated);
      --scope-text: var(--text-primary);
      --scope-accent: var(--color-active);
      --scope-muted: var(--text-muted);
      --scope-border: var(--border-color);
      --scope-error: var(--color-error);
      --scope-success: var(--color-success);
      --scope-field-bg: var(--bg-field);

      background: var(--scope-bg);
      color: var(--scope-text);
      font-family: var(--font-ui);
      font-size: var(--text-base);
      border-radius: 8px;
    }

    /* Modal typography */
    h2, h3, h4 {
      font-family: var(--font-display);
      color: var(--scope-text);
      margin-bottom: 8px;
    }

    h2 { font-size: var(--text-xl); font-weight: 700; }
    h3 { font-size: var(--text-lg); font-weight: 600; }
    h4 { font-size: var(--text-md); font-weight: 600; }

    p {
      font-size: var(--text-base);
      line-height: 1.6;
      color: var(--scope-text);
      margin-bottom: 12px;
    }

    /* Modal buttons */
    button, .btn {
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      border: 1px solid var(--scope-border);
      background: var(--scope-field-bg);
      color: var(--scope-text);
      transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    button:hover, .btn:hover {
      border-color: var(--scope-accent);
      background: var(--color-active-soft);
    }

    button:focus-visible, .btn:focus-visible {
      outline: 2px solid var(--scope-accent);
      outline-offset: 1px;
    }

    button:active, .btn:active {
      background: var(--color-active-glow);
    }

    .btn-primary {
      background: var(--scope-accent);
      color: #ffffff;
      border-color: var(--scope-accent);
    }

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

    .btn-danger {
      background: transparent;
      color: var(--scope-error);
      border-color: var(--scope-error);
    }

    .btn-danger:hover {
      background: rgba(220, 38, 38, 0.08);
    }

    /* Modal form elements */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      padding: 8px 12px;
      background: var(--scope-field-bg);
      border: 1px solid var(--scope-border);
      border-radius: 6px;
      color: var(--scope-text);
      width: 100%;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: var(--scope-accent);
      box-shadow: 0 0 0 3px var(--color-active-glow);
      outline: none;
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--scope-muted);
    }

    label {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--scope-text);
      display: block;
      margin-bottom: 4px;
    }

    .form-error {
      font-size: var(--text-xs);
      color: var(--scope-error);
      margin-top: 4px;
    }

    .form-success {
      font-size: var(--text-xs);
      color: var(--scope-success);
      margin-top: 4px;
    }

    @media (prefers-reduced-motion: reduce) {
      button, .btn,
      input, textarea, select {
        transition: none !important;
      }
    }
  }

  /* ---------------------------------------------------------------------------
     5. Widget Scope (mentat-perf-widget, quality-profile-widget)
     Isolates widget-specific styles for performance + quality widgets.
     Boundary: widget root to internal metric containers.
     --------------------------------------------------------------------------- */
  @scope (.mentat-perf-widget, .quality-profile-widget) {
    :scope {
      --scope-bg: var(--bg-elevated, #ffffff);
      --scope-text: var(--text-primary, #1a1a2e);
      --scope-accent: var(--color-active, #2563eb);
      --scope-muted: var(--text-muted, #8e8ea0);
      --scope-border: var(--border-color, rgba(0,0,0,0.1));
      --scope-success: var(--color-success, #16a34a);
      --scope-warning: var(--color-warning, #f59e0b);
      --scope-error: var(--color-error, #dc2626);

      background: var(--scope-bg);
      color: var(--scope-text);
      font-family: var(--font-ui);
      font-size: var(--text-xs);
      border: 1px solid var(--scope-border);
      border-radius: var(--radius-md);
      padding: 12px;
      margin: 8px 0;
    }

    /* Widget headers */
    .mpw-header, .qp-title {
      font-family: var(--font-mono);
      font-size: var(--text-3xs);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--scope-muted);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* Metric grids */
    .mpw-grid, .qp-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
      gap: 8px;
    }

    /* Metric items */
    .mpw-metric, .qp-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 6px;
      background: var(--bg-field);
      border-radius: var(--radius-xs);
      border: 1px solid var(--scope-border);
    }

    /* Metric labels */
    .mpw-label, .qp-dim {
      font-size: var(--text-4xs);
      font-weight: 600;
      color: var(--scope-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Metric values */
    .mpw-value, .qp-val {
      font-size: var(--text-micro);
      font-weight: 700;
      color: var(--scope-text);
      font-variant-numeric: tabular-nums;
    }

    .mpw-value[data-rating="good"] { color: var(--scope-success); }
    .mpw-value[data-rating="needs-improvement"] { color: var(--scope-warning); }
    .mpw-value[data-rating="poor"] { color: var(--scope-error); }

    /* Bar tracks */
    .qp-bar-track {
      flex: 1;
      height: 6px;
      background: var(--scope-border);
      border-radius: var(--radius-xs);
      overflow: hidden;
    }

    .qp-bar-fill {
      height: 100%;
      background: var(--scope-accent);
      transition: width 0.3s ease;
    }

    /* Widget close buttons */
    .mpw-close {
      background: transparent;
      border: none;
      color: var(--scope-muted);
      cursor: pointer;
      padding: 2px 6px;
      font-size: var(--text-sm);
      line-height: 1;
      border-radius: 4px;
      transition: color 0.15s ease, background 0.15s ease;
    }

    .mpw-close:hover {
      color: var(--scope-text);
      background: var(--scope-border);
    }
  }

  /* ---------------------------------------------------------------------------
     6. Settings Panel Scope (role="tabpanel")
     Isolates settings-specific form controls, toggles, and input styles
     within tab panels. No lower boundary.
     --------------------------------------------------------------------------- */
  @scope ([role="tabpanel"]) {
    :scope {
      --scope-bg: var(--bg-primary);
      --scope-text: var(--text-primary);
      --scope-accent: var(--color-active);
      --scope-muted: var(--text-muted);
      --scope-border: var(--border-color);
      --scope-field-bg: var(--bg-field);
      --scope-toggle-off: var(--text-muted);
      --scope-toggle-on: var(--color-active);
      --scope-toggle-knob: #ffffff;

      background: var(--scope-bg);
      color: var(--scope-text);
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      padding: 16px;
    }

    /* Settings section headings */
    h3, h4 {
      font-family: var(--font-display);
      color: var(--scope-text);
      margin-bottom: 12px;
    }

    h3 { font-size: var(--text-lg); font-weight: 600; }
    h4 { font-size: var(--text-md); font-weight: 500; }

    /* Settings form controls */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    textarea,
    select {
      font-family: var(--font-ui);
      font-size: var(--text-sm);
      padding: 8px 12px;
      background: var(--scope-field-bg);
      border: 1px solid var(--scope-border);
      border-radius: 6px;
      color: var(--scope-text);
      width: 100%;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: var(--scope-accent);
      box-shadow: 0 0 0 3px var(--color-active-glow);
      outline: none;
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--scope-muted);
    }

    label {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--scope-text);
      display: block;
      margin-bottom: 4px;
    }

    /* Toggle switch */
    .toggle {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 22px;
      cursor: pointer;
    }

    .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-track {
      position: absolute;
      inset: 0;
      background: var(--scope-toggle-off);
      border-radius: 11px;
      transition: background-color 0.2s ease;
    }

    .toggle-track::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      background: var(--scope-toggle-knob);
      border-radius: 50%;
      transition: transform 0.2s ease;
    }

    .toggle input:checked + .toggle-track {
      background: var(--scope-toggle-on);
    }

    .toggle input:checked + .toggle-track::after {
      transform: translateX(18px);
    }

    .toggle input:focus-visible + .toggle-track {
      outline: 2px solid var(--scope-accent);
      outline-offset: 2px;
    }

    /* Settings range input */
    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      background: var(--scope-border);
      border-radius: 2px;
      outline: none;
      transition: background-color 0.15s ease;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      background: var(--scope-accent);
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid var(--scope-toggle-knob);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    input[type="range"]::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    input[type="range"]:focus-visible::-webkit-slider-thumb {
      outline: 2px solid var(--scope-accent);
      outline-offset: 2px;
    }

    input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      background: var(--scope-accent);
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid var(--scope-toggle-knob);
    }

    /* Settings description text */
    .setting-description {
      font-size: var(--text-xs);
      color: var(--scope-muted);
      line-height: 1.5;
      margin-top: 4px;
    }

    /* Settings row layout */
    .setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--scope-border);
    }

    .setting-row:last-child {
      border-bottom: none;
    }

    .setting-row:hover {
      background: var(--color-active-soft);
      margin: 0 -16px;
      padding: 12px 16px;
      border-radius: 6px;
    }

    @media (prefers-reduced-motion: reduce) {
      .toggle-track,
      .toggle-track::after,
      input[type="range"],
      input[type="range"]::-webkit-slider-thumb,
      input, textarea, select {
        transition: none !important;
      }
    }
  }

} /* end @supports (selector(:scope)) */

/* ── Micro-interaction Polish: Ripples, Springs, Shimmers ── */

/* 1. Button ripple effect */
@keyframes mn-ripple-expand {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.mn-ripple {
  position: relative;
  overflow: hidden;
}

.mn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  padding-bottom: 100%;
  margin-top: -50%;
  margin-left: -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

.mn-ripple.mn-ripple-active::after {
  animation: mn-ripple-expand 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 2. Input character counter */
.mn-input-wrapper {
  position: relative;
}

.mn-char-counter {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: 0.7rem;
  color: var(--text-muted, #6c757d);
  opacity: 0.4;
  transition: opacity 0.2s ease;
  pointer-events: none;
  user-select: none;
}

.mn-input-wrapper:focus-within .mn-char-counter {
  opacity: 1;
}

/* 3. Button press spring effect */
.btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:active {
  transform: scale(0.96);
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. Link hover underline animation */
.mn-link-animate {
  position: relative;
  text-decoration: none;
}

.mn-link-animate::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mn-link-animate:hover::after {
  transform: scaleX(1);
}

/* 5. Focus ring pulse */
@keyframes mn-focus-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(100, 149, 237, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(100, 149, 237, 0.2);
  }
}

.mn-focus-pulse:focus-visible {
  outline: none;
  animation: mn-focus-pulse 2s infinite;
}

/* 6. Skeleton loading shimmer enhancement */
@keyframes mn-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.mn-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary, #1a1a2e) 0%,
    var(--bg-secondary, #16213e) 40%,
    var(--bg-tertiary, #1a1a2e) 80%
  );
  background-size: 200% 100%;
  animation: mn-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* 7. Tooltip appear */
.mn-tooltip {
  position: absolute;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1000;
  padding: 6px 10px;
  font-size: 0.75rem;
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-secondary, #16213e);
  border: 1px solid var(--border-primary, #2a2a4a);
  border-radius: 4px;
  white-space: nowrap;
}

.mn-tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px 5px;
  border-style: solid;
  border-color: transparent transparent var(--border-primary, #2a2a4a) transparent;
}

.mn-tooltip-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 8. Badge bounce-in */
@keyframes mn-badge-bounce {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.mn-badge-new {
  animation: mn-badge-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mn-ripple.mn-ripple-active::after {
    animation: none;
    opacity: 0.15;
    transform: scale(2.5);
  }

  .btn {
    transition: none;
  }

  .btn:active {
    transition: none;
  }

  .mn-link-animate::after {
    transition: none;
  }

  .mn-focus-pulse:focus-visible {
    animation: none;
    box-shadow: 0 0 0 2px rgba(100, 149, 237, 0.4);
  }

  .mn-skeleton {
    animation: none;
  }

  .mn-tooltip {
    transition: none;
  }

  .mn-badge-new {
    animation: none;
  }

  .mn-char-counter {
    transition: none;
  }
}

/* ==========================================================================
   Section: CSS Native Nesting Showcase
   Progressive enhancement — only applies in browsers supporting native nesting.
   These are additive enhancements, not replacements for existing rules.
   ========================================================================== */

/* ── CSS Native Nesting: Enhanced Component Variants ── */
@supports (selector(&)) {
  /* ScrollSpy active/visible states */
  .mn-spy-active {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--accent-primary, #00d4ff);
      border-radius: 0 2px 2px 0;
      animation: mn-spy-indicator 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    & .pipeline-stage-label {
      color: var(--accent-primary, #00d4ff);
      font-weight: 600;
    }
  }

  .mn-spy-visible {
    & .pipeline-stage-content {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Theme transition enhancements */
  [data-theme="light"] {
    & .sidebar {
      background: var(--glass-bg);
      border-right-color: var(--glass-border);
    }

    & .message-content {
      color: var(--text-primary);
    }

    & .pipeline-panel {
      background: var(--bg-chrome);
    }

    & .header {
      background: var(--bg-primary);
      border-bottom-color: var(--border-color);
    }
  }

  [data-theme="midnight"] {
    & .sidebar {
      background: var(--bg-secondary, #111118);
      border-right-color: var(--border-color, #1e1e2e);
    }

    & .message-content {
      color: var(--text-primary, #e2e8f0);
    }

    & .pipeline-panel {
      background: var(--bg-tertiary, #1a1a24);
    }
  }

  /* Micro-interaction nesting */
  .mn-ripple {
    overflow: hidden;

    &::after {
      pointer-events: none;
    }

    &:hover {
      & + .mn-tooltip {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  /* Conversation item nested states */
  .conversation-item {
    &:hover {
      & .mn-relative-time {
        opacity: 1;
      }
      & .conversation-actions {
        opacity: 1;
        transform: translateX(0);
      }
    }

    &.active {
      & .conversation-title {
        font-weight: 600;
        color: var(--accent-primary, #00d4ff);
      }
    }
  }
}

@keyframes mn-spy-indicator {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* ==========================================================================
   Section: Resource Preload & Performance Hints
   Utility classes for content-visibility, will-change, CSS containment,
   font-display optimization, and print styles.
   ========================================================================== */

/* ── Resource Preload & Performance Hints ── */
/* Utility classes for lazy-loaded content */
.mn-lazy {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

.mn-lazy-tall {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* Will-change hints for animated elements */
.mn-will-animate {
  will-change: transform, opacity;
}

.mn-will-scroll {
  will-change: scroll-position;
}

/* Contain for layout performance */
.mn-contain-layout {
  contain: layout style;
}

.mn-contain-strict {
  contain: strict;
}

.mn-contain-paint {
  contain: paint;
}

/* Font display optimization */
@font-face {
  font-family: 'Mentat Mono';
  src: local('SF Mono'), local('Fira Code'), local('Cascadia Code'), local('JetBrains Mono'), local('Consolas'), local('monospace');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Print styles for conversation export */
@media print {
  .sidebar, .pipeline-panel, .header-btn, .mn-tooltip, .mn-notification-container {
    display: none !important;
  }

  .message-list {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .message-content {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }

  pre, code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    border: 1px solid #ddd !important;
    background: #f5f5f5 !important;
    color: #333 !important;
  }
}

/* ── Pipeline Visualization: SVG Stage Flow & Progress ── */

/* Pipeline flow diagram container */
.mn-pipeline-flow {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary, #00d4ff) transparent;
}

/* Individual stage node */
.mn-stage-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  flex-shrink: 0;
}

/* Stage circle indicator */
.mn-stage-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-color, #2a2a3e);
  background: var(--bg-secondary, #16213e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--text-secondary, #a0a0a0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

/* Stage states */
.mn-stage-node.pending .mn-stage-circle {
  border-color: var(--border-color, #2a2a3e);
  color: var(--text-muted, #666);
}

.mn-stage-node.running .mn-stage-circle {
  border-color: var(--accent-primary, #00d4ff);
  color: var(--accent-primary, #00d4ff);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
  animation: mn-stage-pulse 2s ease-in-out infinite;
}

.mn-stage-node.complete .mn-stage-circle {
  border-color: var(--success, #10b981);
  background: var(--success, #10b981);
  color: #fff;
}

.mn-stage-node.failed .mn-stage-circle {
  border-color: var(--error, #ef4444);
  background: var(--error, #ef4444);
  color: #fff;
}

.mn-stage-node.skipped .mn-stage-circle {
  border-color: var(--text-muted, #666);
  opacity: 0.5;
}

/* Stage label */
.mn-stage-label {
  margin-top: 6px;
  font-size: var(--text-3xs);
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  transition: color 0.3s ease;
}

.mn-stage-node.running .mn-stage-label {
  color: var(--accent-primary, #00d4ff);
}

.mn-stage-node.complete .mn-stage-label {
  color: var(--success, #10b981);
}

/* Connector line between stages */
.mn-stage-connector {
  flex: 1;
  height: 2px;
  min-width: 20px;
  background: var(--border-color, #2a2a3e);
  position: relative;
  margin: 0 -1px;
  align-self: flex-start;
  margin-top: 16px; /* center with circle */
}

.mn-stage-connector.complete {
  background: var(--success, #10b981);
}

.mn-stage-connector.active {
  background: linear-gradient(90deg, var(--success, #10b981), var(--accent-primary, #00d4ff));
  overflow: hidden;
}

/* Animated progress indicator on active connector */
.mn-stage-connector.active::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 30%;
  height: 4px;
  background: var(--accent-primary, #00d4ff);
  border-radius: 2px;
  animation: mn-connector-flow 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

@keyframes mn-connector-flow {
  0% { left: -30%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes mn-stage-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(0, 212, 255, 0.3); }
  50% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.5); }
}

/* Pipeline progress bar (compact mode) */
.mn-pipeline-progress {
  height: 3px;
  background: var(--bg-tertiary, #0f3460);
  border-radius: 2px;
  overflow: hidden;
  margin: 8px 0;
}

.mn-pipeline-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary, #00d4ff), var(--success, #10b981));
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.mn-pipeline-progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: -1px;
  width: 6px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent-primary, #00d4ff);
  opacity: 0;
  animation: mn-progress-dot 0.8s ease-in-out infinite;
}

.mn-pipeline-progress-fill[data-active="true"]::after {
  opacity: 1;
}

@keyframes mn-progress-dot {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Pipeline stage timing display */
.mn-stage-timing {
  font-size: var(--text-3xs);
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #666);
  margin-top: 2px;
}

/* Pipeline summary stats bar */
.mn-pipeline-stats {
  display: flex;
  gap: 16px;
  padding: 8px 12px;
  font-size: var(--text-micro);
  font-family: var(--font-mono, monospace);
  color: var(--text-secondary, #a0a0a0);
  border-top: 1px solid var(--border-color, #2a2a3e);
}

.mn-pipeline-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mn-pipeline-stat-value {
  font-weight: 600;
  color: var(--text-primary, #e8e8e8);
}

.mn-pipeline-stat-label {
  color: var(--text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Ring chart for pipeline completion */
.mn-pipeline-ring {
  position: relative;
  width: 48px;
  height: 48px;
}

.mn-pipeline-ring svg {
  transform: rotate(-90deg);
}

.mn-pipeline-ring-track {
  fill: none;
  stroke: var(--bg-tertiary, #0f3460);
  stroke-width: 3;
}

.mn-pipeline-ring-fill {
  fill: none;
  stroke: var(--accent-primary, #00d4ff);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mn-pipeline-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-micro);
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary, #e8e8e8);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mn-stage-node.running .mn-stage-circle {
    animation: none;
  }
  .mn-stage-connector.active::after {
    animation: none;
  }
  .mn-pipeline-progress-fill::after {
    animation: none;
    opacity: 1;
  }
  .mn-pipeline-progress-fill {
    transition-duration: 0.01ms;
  }
}

/* ═══════════════ :has() Parent-Aware Styling ═══════════════
 *
 * Premium parent-context rules using the CSS :has() relational
 * pseudo-class. Wrapped in @supports for progressive enhancement
 * — browsers without :has() simply skip the entire block.
 *
 * Apple cubic-bezier: cubic-bezier(0.25, 0.1, 0.25, 1)
 * Spring ease:        cubic-bezier(0.34, 1.56, 0.64, 1)
 * ═══════════════════════════════════════════════════════════ */

@supports selector(:has(*)) {

  /* ----------------------------------------------------------
   * 1. Form states — parent highlight glow when child input
   *    is focused. Applies to pedestal input groups used in
   *    auth forms and settings panels.
   * -------------------------------------------------------- */
  .pedestal-input-group:has(input:focus) {
    border-color: var(--color-active, #2563eb);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--color-active, #2563eb) 12%, transparent),
      0 1px 3px rgba(0, 0, 0, 0.08);
    transition: border-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow   0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .pedestal-input-group:has(input:focus) label {
    color: var(--color-active, #2563eb);
    transition: color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .pedestal-input-group:has(input:focus):hover {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--color-active, #2563eb) 18%, transparent),
      0 2px 6px rgba(0, 0, 0, 0.1);
  }

  /* ----------------------------------------------------------
   * 2. Sidebar awareness — subtle accent left-border when a
   *    conversation is actively selected, signalling context.
   * -------------------------------------------------------- */
  .sidebar:has(.conversation-item.active) {
    border-right-color: color-mix(in srgb, var(--color-active, #2563eb) 20%, var(--border-color, #e5e7eb));
    transition: border-right-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .sidebar:has(.conversation-item.active) .sidebar-header {
    border-bottom-color: color-mix(in srgb, var(--color-active, #2563eb) 15%, var(--border-color, #e5e7eb));
    transition: border-bottom-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  /* ----------------------------------------------------------
   * 3. Empty state detection — special styling when only one
   *    message exists (welcome / onboarding state).
   * -------------------------------------------------------- */
  .message-list:has(.message:only-child) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    opacity: 0.92;
    transition: opacity 0.3s ease;
  }

  .message-list:has(.message:only-child) .message {
    max-width: 560px;
    text-align: center;
    animation: hasWelcomeFadeIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }

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

  /* ----------------------------------------------------------
   * 4. Pipeline active state — glowing border pulse when the
   *    pipeline is actively running a reasoning stage.
   * -------------------------------------------------------- */
  .pipeline-panel:has(.mn-stage-node[data-state="running"]) {
    border-color: var(--color-active, #2563eb);
    box-shadow:
      0 0 12px color-mix(in srgb, var(--color-active, #2563eb) 15%, transparent),
      inset 0 0 8px color-mix(in srgb, var(--color-active, #2563eb) 5%, transparent);
    animation: hasPipelinePulse 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  @keyframes hasPipelinePulse {
    0%, 100% {
      box-shadow:
        0 0 12px color-mix(in srgb, var(--color-active, #2563eb) 15%, transparent),
        inset 0 0 8px color-mix(in srgb, var(--color-active, #2563eb) 5%, transparent);
    }
    50% {
      box-shadow:
        0 0 20px color-mix(in srgb, var(--color-active, #2563eb) 25%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--color-active, #2563eb) 8%, transparent);
    }
  }

  /* ----------------------------------------------------------
   * 5. Error containment — red-tinted border for message
   *    bubbles that contain error content.
   * -------------------------------------------------------- */
  .message-bubble:has(.error-content) {
    border: 1px solid color-mix(in srgb, var(--color-danger, #dc3545) 40%, var(--border-color, #e5e7eb));
    background: color-mix(in srgb, var(--color-danger, #dc3545) 4%, var(--bg-primary, #ffffff));
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .message-bubble:has(.error-content):hover {
    border-color: color-mix(in srgb, var(--color-danger, #dc3545) 55%, var(--border-color, #e5e7eb));
  }

  .message-bubble:has(.error-content)::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-danger, #dc3545);
    border-radius: 3px 0 0 3px;
    opacity: 0.7;
  }

  /* ----------------------------------------------------------
   * 6. Code block enhancement — wider max-width and distinct
   *    background for code-heavy messages.
   * -------------------------------------------------------- */
  .message-bubble:has(pre code) {
    max-width: min(90%, 900px);
    background: color-mix(in srgb, var(--bg-secondary, #f8f9fa) 80%, var(--bg-primary, #ffffff));
    border: 1px solid color-mix(in srgb, var(--color-active, #2563eb) 8%, var(--border-color, #e5e7eb));
    transition: max-width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                background 0.3s ease,
                border-color 0.3s ease;
  }

  .message-bubble:has(pre code):hover {
    border-color: color-mix(in srgb, var(--color-active, #2563eb) 18%, var(--border-color, #e5e7eb));
  }

  .message-bubble:has(pre code):focus-visible {
    outline: 2px solid var(--color-active, #2563eb);
    outline-offset: 2px;
  }

  /* ----------------------------------------------------------
   * 7. Image content detection — relaxed padding for message
   *    bubbles that contain images, letting visuals breathe.
   * -------------------------------------------------------- */
  .message-bubble:has(img) {
    padding: 4px;
    overflow: hidden;
    border-radius: 10px;
    transition: padding 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .message-bubble:has(img) img {
    border-radius: 8px;
    width: 100%;
    height: auto;
    display: block;
  }

  .message-bubble:has(img):hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  /* ----------------------------------------------------------
   * 8. Search active — visual indicator on the sidebar when
   *    the search field has user-entered text (filtering).
   * -------------------------------------------------------- */
  .sidebar:has(.sidebar-search-input:not(:placeholder-shown)) {
    background: color-mix(in srgb, var(--color-active, #2563eb) 3%, var(--bg-primary, #ffffff));
    transition: background 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .sidebar:has(.sidebar-search-input:not(:placeholder-shown)) .sidebar-search-input {
    border-color: var(--color-active, #2563eb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-active, #2563eb) 10%, transparent);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .sidebar:has(.sidebar-search-input:not(:placeholder-shown)) .conversation-item:not(.search-match) {
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }

  .sidebar:has(.sidebar-search-input:not(:placeholder-shown)) .conversation-item:not(.search-match):hover {
    opacity: 0.75;
  }

  /* ----------------------------------------------------------
   * 9. Modal backdrop — apply backdrop-filter blur to the page
   *    content when a modal overlay is visible.
   * -------------------------------------------------------- */
  body:has(.modal-overlay:not(.hidden)) {
    overflow: hidden;
  }

  body:has(.modal-overlay:not(.hidden)) .sidebar,
  body:has(.modal-overlay:not(.hidden)) .message-list,
  body:has(.modal-overlay:not(.hidden)) .header-bar {
    filter: blur(2px) saturate(0.7);
    transition: filter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
  }

  body:has(.modal-overlay:not(.hidden)) .modal-panel {
    animation: hasModalEnter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

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

  /* ----------------------------------------------------------
   * 10. Theme-aware layout — adjust spacing and shadows when
   *     the pipeline panel is visible in light theme.
   * -------------------------------------------------------- */
  [data-theme="light"]:has(.pipeline-panel.visible) .message-list {
    margin-inline-end: 8px;
    transition: margin-inline-end 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  [data-theme="light"]:has(.pipeline-panel.visible) .header-bar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
  }

  [data-theme="light"]:has(.pipeline-panel.visible) .pipeline-panel {
    box-shadow:
      -1px 0 0 var(--border-color, #e5e7eb),
      -4px 0 16px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
  }

  /* ----------------------------------------------------------
   * 11. Conversation with typing — pulsing indicator on the
   *     conversation list item when a response is generating.
   * -------------------------------------------------------- */
  .conversation-item:has(.typing-indicator) {
    position: relative;
    transition: background 0.3s ease;
  }

  .conversation-item:has(.typing-indicator)::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-active, #2563eb);
    animation: hasTypingPulse 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  }

  @keyframes hasTypingPulse {
    0%, 100% {
      opacity: 0.4;
      transform: translateY(-50%) scale(0.85);
    }
    50% {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }
  }

  .conversation-item:has(.typing-indicator) .conversation-title {
    color: var(--color-active, #2563eb);
    transition: color 0.3s ease;
  }

  /* ----------------------------------------------------------
   * 12. Header with notifications — subtle notification glow
   *     on the header bar when notification badges are present.
   * -------------------------------------------------------- */
  .header-bar:has(.notification-badge:not(:empty)) {
    box-shadow:
      0 1px 0 var(--border-color, #e5e7eb),
      0 0 16px color-mix(in srgb, var(--color-active, #2563eb) 8%, transparent);
    transition: box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .header-bar:has(.notification-badge:not(:empty)) .notification-badge {
    animation: hasNotificationBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes hasNotificationBounce {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
  }

  .header-bar:has(.notification-badge:not(:empty)):hover .notification-badge {
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-active, #2563eb) 30%, transparent);
    transition: box-shadow 0.3s ease;
  }

} /* end @supports selector(:has(*)) */

/* ── :has() Reduced Motion Overrides ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  @supports selector(:has(*)) {

    .message-list:has(.message:only-child) .message {
      animation: none;
    }

    .pipeline-panel:has(.mn-stage-node[data-state="running"]) {
      animation: none;
      box-shadow:
        0 0 8px color-mix(in srgb, var(--color-active, #2563eb) 12%, transparent);
    }

    .conversation-item:has(.typing-indicator)::after {
      animation: none;
      opacity: 1;
    }

    body:has(.modal-overlay:not(.hidden)) .modal-panel {
      animation: none;
    }

    .header-bar:has(.notification-badge:not(:empty)) .notification-badge {
      animation: none;
    }

    .pedestal-input-group:has(input:focus),
    .sidebar:has(.conversation-item.active),
    .sidebar:has(.sidebar-search-input:not(:placeholder-shown)),
    .message-bubble:has(pre code),
    .message-bubble:has(img),
    [data-theme="light"]:has(.pipeline-panel.visible) .message-list,
    body:has(.modal-overlay:not(.hidden)) .sidebar,
    body:has(.modal-overlay:not(.hidden)) .message-list,
    body:has(.modal-overlay:not(.hidden)) .header-bar {
      transition-duration: 0.01ms;
    }

  }
}

/* ═══════════════ Popover API & Dialog Premium Styling ═══════════════ */

/* --- Popover (progressive enhancement) --- */

@supports selector([popover]) {

  [popover] {
    background: rgba(26, 26, 26, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.45),
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: inherit;
    color: var(--text-primary, #e8e8e8);
    max-width: 360px;
    padding: 16px;
    opacity: 0;
    transform: scale(0.95);
    transition:
      opacity 0.2s cubic-bezier(0.2, 0, 0, 1),
      transform 0.2s cubic-bezier(0.2, 0, 0, 1),
      overlay 0.2s allow-discrete,
      display 0.2s allow-discrete;
  }

  [popover]:popover-open {
    opacity: 1;
    transform: scale(1);
  }

  @starting-style {
    [popover]:popover-open {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  [popover]::backdrop {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition:
      opacity 0.2s cubic-bezier(0.2, 0, 0, 1),
      overlay 0.2s allow-discrete,
      display 0.2s allow-discrete;
  }

  [popover]:popover-open::backdrop {
    opacity: 1;
  }

  @starting-style {
    [popover]:popover-open::backdrop {
      opacity: 0;
    }
  }

  /* Positioning variants */

  .mn-popover-top {
    margin-bottom: 8px;
    transform-origin: bottom center;
    translate: 0 -4px;
  }

  .mn-popover-top:popover-open {
    translate: 0 0;
  }

  @starting-style {
    .mn-popover-top:popover-open {
      translate: 0 -4px;
    }
  }

  .mn-popover-bottom {
    margin-top: 8px;
    transform-origin: top center;
    translate: 0 4px;
  }

  .mn-popover-bottom:popover-open {
    translate: 0 0;
  }

  @starting-style {
    .mn-popover-bottom:popover-open {
      translate: 0 4px;
    }
  }

  /* Menu variant */

  .mn-popover-menu {
    padding: 4px;
    min-width: 180px;
    list-style: none;
  }

  .mn-popover-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 0.8125rem;
    color: var(--text-primary, #e8e8e8);
    cursor: pointer;
    transition: background 0.12s ease;
    user-select: none;
  }

  .mn-popover-menu-item:hover {
    background: rgba(255, 255, 255, 0.07);
  }

  .mn-popover-menu-item:active {
    background: rgba(255, 255, 255, 0.11);
  }

  .mn-popover-menu-item[aria-disabled="true"] {
    opacity: 0.38;
    pointer-events: none;
  }

  .mn-popover-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 8px;
  }

  /* Tooltip variant */

  .mn-popover-tooltip {
    max-width: 240px;
    padding: 6px 10px;
    font-size: 0.75rem;
    line-height: 1.45;
    border-radius: 6px;
    pointer-events: none;
  }

  .mn-popover-tooltip::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    translate: -50% 0;
    width: 10px;
    height: 10px;
    background: inherit;
    border: inherit;
    border-top: 0;
    border-left: 0;
    rotate: 45deg;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }

  /* Popover close button */

  .mn-popover-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #a0a0a0);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition:
      background 0.15s ease,
      color 0.15s ease,
      rotate 0.25s cubic-bezier(0.2, 0, 0, 1);
  }

  .mn-popover-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #e8e8e8);
    rotate: 90deg;
  }

  /* Reduced motion — popover */

  @media (prefers-reduced-motion: reduce) {
    [popover] {
      transition-duration: 0.01ms;
      transform: none;
    }

    [popover]::backdrop {
      transition-duration: 0.01ms;
    }

    .mn-popover-top,
    .mn-popover-bottom {
      translate: 0 0;
      transition-duration: 0.01ms;
    }

    .mn-popover-close:hover {
      rotate: none;
    }
  }

} /* end @supports selector([popover]) */


/* --- Dialog element --- */

dialog {
  background: rgba(26, 26, 26, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-primary, #e8e8e8);
  font-family: inherit;
  max-width: 520px;
  width: calc(100% - 32px);
  padding: 0;
  margin: auto;
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition:
    opacity 0.25s cubic-bezier(0.2, 0, 0, 1),
    transform 0.25s cubic-bezier(0.2, 0, 0, 1),
    overlay 0.25s allow-discrete,
    display 0.25s allow-discrete;
}

dialog[open] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition:
    opacity 0.25s cubic-bezier(0.2, 0, 0, 1),
    overlay 0.25s allow-discrete,
    display 0.25s allow-discrete;
}

dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  dialog[open]::backdrop {
    opacity: 0;
  }
}

/* Dialog component sections */

.mn-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mn-dialog-body {
  padding: 20px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-secondary, #a0a0a0);
  overflow-y: auto;
  max-height: 60vh;
}

.mn-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Dialog close button */

.mn-dialog-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #a0a0a0);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    rotate 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.mn-dialog-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #e8e8e8);
  rotate: 90deg;
}

/* Reduced motion — dialog */

@media (prefers-reduced-motion: reduce) {
  dialog {
    transition-duration: 0.01ms;
    transform: none;
  }

  dialog::backdrop {
    transition-duration: 0.01ms;
  }

  .mn-dialog-close:hover {
    rotate: none;
  }
}

/* ═══════════════ Image Lazy Loading & Blur-Up ═══════════════ */

@keyframes lazyShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.mn-lazy-image {
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  border-radius: 6px;
  line-height: 0;
}

.mn-lazy-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 40%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: lazyShimmer 1.8s linear infinite;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mn-lazy-image.mn-loaded::before {
  opacity: 0;
}

.mn-lazy-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition:
    opacity 0.5s ease,
    filter 0.5s ease,
    transform 0.5s ease;
}

.mn-lazy-image img[data-src] {
  opacity: 0;
  filter: blur(20px);
  transform: scale(1.05);
}

.mn-lazy-image img.mn-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.mn-lazy-image figcaption {
  line-height: 1.4;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-muted, #888);
  font-family: var(--font-ui, system-ui, sans-serif);
  letter-spacing: 0.01em;
  background: rgba(0, 0, 0, 0.03);
}

/* Reduced motion — lazy images */
@media (prefers-reduced-motion: reduce) {
  .mn-lazy-image::before {
    animation: none;
  }

  .mn-lazy-image img {
    transition: none;
  }

  .mn-lazy-image img[data-src] {
    filter: none;
    transform: none;
    opacity: 0;
  }

  .mn-lazy-image img.mn-loaded {
    opacity: 1;
  }
}

/* ═══════════════ color-mix() Dynamic Palette System ═══════════════ */
/*
 * Generates theme-adaptive surface, border, and status colors using
 * CSS color-mix(). All values derive from existing design tokens so
 * they automatically adapt when --bg-primary, --color-active, or
 * --text-primary change (e.g. light/dark toggle).
 *
 * Progressive enhancement: wrapped in @supports so browsers without
 * color-mix() silently skip this block — no layout breakage.
 */

@supports (color: color-mix(in srgb, red, blue)) {

  /* ── 1. Root palette variables ───────────────────────────────── */
  :root {
    /* Surface tints — accent bleeds into background */
    --mn-surface-hover:   color-mix(in srgb, var(--color-active) 8%,  var(--bg-primary));
    --mn-surface-active:  color-mix(in srgb, var(--color-active) 15%, var(--bg-primary));

    /* Muted text — fade current text toward transparent */
    --mn-text-muted:      color-mix(in srgb, currentColor 50%, transparent);

    /* Borders — white mixed into background for subtle depth */
    --mn-border-subtle:   color-mix(in srgb, #ffffff 8%,  var(--bg-primary));
    --mn-border-strong:   color-mix(in srgb, #ffffff 20%, var(--bg-primary));

    /* Status tints — semantic colors softened into background */
    --mn-success-soft:    color-mix(in srgb, #00c853 15%, var(--bg-primary));
    --mn-error-soft:      color-mix(in srgb, #ff1744 15%, var(--bg-primary));
    --mn-warning-soft:    color-mix(in srgb, #ff9100 15%, var(--bg-primary));
    --mn-info-soft:       color-mix(in srgb, #2979ff 15%, var(--bg-primary));

    /* Status text — status color lightened for readability on tint */
    --mn-success-text:    color-mix(in srgb, #00c853 80%, #ffffff);
    --mn-error-text:      color-mix(in srgb, #ff1744 80%, #ffffff);
    --mn-warning-text:    color-mix(in srgb, #ff9100 80%, #ffffff);
    --mn-info-text:       color-mix(in srgb, #2979ff 80%, #ffffff);

    /* Interactive state modifiers */
    --mn-btn-hover:       color-mix(in srgb, #ffffff 15%, var(--color-active));
    --mn-btn-active:      color-mix(in srgb, #000000 15%, var(--color-active));
    --mn-focus-glow:      color-mix(in srgb, var(--color-active) 30%, transparent);
    --mn-disabled-wash:   color-mix(in srgb, var(--bg-primary) 40%, currentColor);
  }

  /* ── 2. Utility classes ──────────────────────────────────────── */

  /* Surface hover — apply to any interactive container */
  .mn-bg-hover {
    transition: background-color 120ms ease-out;
  }
  .mn-bg-hover:hover {
    background-color: var(--mn-surface-hover);
  }

  /* Surface active — click / pressed state */
  .mn-bg-active:active,
  .mn-bg-active[aria-pressed="true"] {
    background-color: var(--mn-surface-active);
  }

  /* Muted text */
  .mn-text-muted {
    color: var(--mn-text-muted);
  }

  /* Border utilities */
  .mn-border-subtle {
    border-color: var(--mn-border-subtle);
  }
  .mn-border-strong {
    border-color: var(--mn-border-strong);
  }

  /* Status backgrounds with matching text */
  .mn-status-success {
    background-color: var(--mn-success-soft);
    color: var(--mn-success-text);
  }
  .mn-status-error {
    background-color: var(--mn-error-soft);
    color: var(--mn-error-text);
  }
  .mn-status-warning {
    background-color: var(--mn-warning-soft);
    color: var(--mn-warning-text);
  }
  .mn-status-info {
    background-color: var(--mn-info-soft);
    color: var(--mn-info-text);
  }

  /* ── 3. Interactive state mixins ─────────────────────────────── */

  /* Button hover — lighten accent by mixing 15% white */
  .mn-btn-mixed:hover {
    background-color: var(--mn-btn-hover);
  }

  /* Button active — darken accent by mixing 15% black */
  .mn-btn-mixed:active {
    background-color: var(--mn-btn-active);
  }

  /* Focus ring — subtle accent glow */
  .mn-focus-mixed:focus-visible {
    outline: 2px solid var(--color-active);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--mn-focus-glow);
  }

  /* Disabled — washed-out toward background */
  .mn-disabled-mixed,
  .mn-disabled-mixed:disabled,
  [aria-disabled="true"].mn-disabled-mixed {
    color: var(--mn-disabled-wash);
    pointer-events: none;
    opacity: 0.65;
  }

  /* ── 4. Light theme overrides ────────────────────────────────── */
  /*
   * Light backgrounds need darker mixes (black instead of white)
   * to maintain visual contrast. Percentages stay the same but
   * the mix target flips.
   */
  [data-theme="light"] {
    --mn-border-subtle:   color-mix(in srgb, #000000 6%,  var(--bg-primary));
    --mn-border-strong:   color-mix(in srgb, #000000 16%, var(--bg-primary));

    --mn-btn-hover:       color-mix(in srgb, #000000 10%, var(--color-active));
    --mn-btn-active:      color-mix(in srgb, #000000 20%, var(--color-active));

    /* Status text darkened for light backgrounds */
    --mn-success-text:    color-mix(in srgb, #00c853 80%, #000000);
    --mn-error-text:      color-mix(in srgb, #ff1744 80%, #000000);
    --mn-warning-text:    color-mix(in srgb, #ff9100 80%, #000000);
    --mn-info-text:       color-mix(in srgb, #2979ff 80%, #000000);
  }

  /* ── 5. High contrast mode ───────────────────────────────────── */
  /*
   * prefers-contrast: more — double all mix percentages so tints,
   * borders, and interactive states are substantially more visible.
   */
  @media (prefers-contrast: more) {
    :root {
      --mn-surface-hover:   color-mix(in srgb, var(--color-active) 16%,  var(--bg-primary));
      --mn-surface-active:  color-mix(in srgb, var(--color-active) 30%,  var(--bg-primary));

      --mn-text-muted:      color-mix(in srgb, currentColor 75%, transparent);

      --mn-border-subtle:   color-mix(in srgb, #ffffff 16%, var(--bg-primary));
      --mn-border-strong:   color-mix(in srgb, #ffffff 40%, var(--bg-primary));

      --mn-success-soft:    color-mix(in srgb, #00c853 30%, var(--bg-primary));
      --mn-error-soft:      color-mix(in srgb, #ff1744 30%, var(--bg-primary));
      --mn-warning-soft:    color-mix(in srgb, #ff9100 30%, var(--bg-primary));
      --mn-info-soft:       color-mix(in srgb, #2979ff 30%, var(--bg-primary));

      --mn-btn-hover:       color-mix(in srgb, #ffffff 30%, var(--color-active));
      --mn-btn-active:      color-mix(in srgb, #000000 30%, var(--color-active));
      --mn-focus-glow:      color-mix(in srgb, var(--color-active) 60%, transparent);
      --mn-disabled-wash:   color-mix(in srgb, var(--bg-primary) 60%, currentColor);
    }

    [data-theme="light"] {
      --mn-border-subtle:   color-mix(in srgb, #000000 12%, var(--bg-primary));
      --mn-border-strong:   color-mix(in srgb, #000000 32%, var(--bg-primary));

      --mn-btn-hover:       color-mix(in srgb, #000000 20%, var(--color-active));
      --mn-btn-active:      color-mix(in srgb, #000000 40%, var(--color-active));
    }
  }

} /* end @supports color-mix() */

/* ═══════════════ Scroll-Driven Animations ═══════════════ */

@supports (animation-timeline: scroll()) {

  /* ── Keyframes ─────────────────────────────────────────── */

  @keyframes scrollProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

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

  @keyframes sidebarItemReveal {
    from { opacity: 0.7; transform: scale(0.98); }
    to   { opacity: 1;   transform: scale(1);    }
  }

  @keyframes codeBlockReveal {
    from { opacity: 0; transform: translateX(-12px); border-left-width: 0;   }
    to   { opacity: 1; transform: translateX(0);     border-left-width: 3px; }
  }

  @keyframes headerShrink {
    from { padding-block: 16px; font-size: 1rem;    }
    to   { padding-block: 8px;  font-size: 0.875rem; }
  }

  @keyframes pipelineShadowScroll {
    from { box-shadow: inset 0 -4px 8px -4px transparent; }
    to   { box-shadow: inset 0 -4px 8px -4px rgba(0, 0, 0, 0.35); }
  }

  /* ── 1. Message list scroll progress indicator ─────────── */

  .message-list {
    scroll-timeline: --messages-scroll block;
    position: relative;
  }

  .message-list::after {
    content: "";
    position: sticky;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-active, #ff8c21);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 10;
    pointer-events: none;
    animation: scrollProgress linear both;
    animation-timeline: --messages-scroll;
  }

  /* ── 2. Message entrance on scroll ─────────────────────── */

  .mn-message-bubble {
    animation: messageScrollReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  /* ── 3. Sidebar conversation parallax ──────────────────── */

  .conversation-item {
    animation: sidebarItemReveal linear both;
    animation-timeline: view(block);
    animation-range: entry 0% entry 100%;
  }

  /* ── 4. Pipeline panel scroll-linked shadow ────────────── */

  .pipeline-panel {
    animation: pipelineShadowScroll linear both;
    animation-timeline: scroll(self block);
  }

  /* ── 5. Header shrink on scroll ────────────────────────── */

  .header-bar {
    animation: headerShrink linear both;
    animation-timeline: scroll(nearest block);
    animation-range: 0px 200px;
  }

  /* ── 6. Code block reveal ──────────────────────────────── */

  .mn-message-bubble pre code {
    display: block;
    border-left: 0 solid var(--color-active, #ff8c21);
    animation: codeBlockReveal linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 80%;
  }

  /* ── Reduced motion: disable all scroll-driven anims ───── */

  @media (prefers-reduced-motion: reduce) {
    .message-list::after,
    .mn-message-bubble,
    .conversation-item,
    .pipeline-panel,
    .header-bar,
    .mn-message-bubble pre code {
      animation: none;
    }

    .mn-message-bubble {
      opacity: 1;
      transform: none;
    }

    .conversation-item {
      opacity: 1;
      transform: none;
    }

    .mn-message-bubble pre code {
      opacity: 1;
      transform: none;
      border-left-width: 3px;
    }
  }

}

/* ==========================================================================
   CSS ANCHOR POSITIONING — Progressive Enhancement
   Uses @supports(anchor-name: --a) so non-supporting browsers silently skip
   ========================================================================== */

@supports (anchor-name: --a) {

  /* Base anchor trigger: attach an anchor name to any trigger element */
  .mn-anchor {
    anchor-name: --mn-anchor;
  }

  /* Base anchored element: positioned relative to the anchor */
  .mn-anchored {
    position: fixed;
    position-anchor: --mn-anchor;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    inset-area: block-end;
    margin: 4px 0;
  }

  /* Placement variants */
  .mn-anchored--top {
    inset-area: block-start;
    margin: 0 0 4px;
  }

  .mn-anchored--bottom {
    inset-area: block-end;
    margin: 4px 0 0;
  }

  .mn-anchored--left {
    inset-area: inline-start;
    margin: 0 4px 0 0;
  }

  .mn-anchored--right {
    inset-area: inline-end;
    margin: 0 0 0 4px;
  }

  /* ---- Anchor-positioned tooltip ---------------------------------------- */
  .mn-tooltip-anchor {
    position: fixed;
    position-anchor: --mn-anchor;
    position-try-fallbacks: flip-block, flip-inline;
    inset-area: block-start;
    margin: 0 0 6px;

    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary, #e0e0e0);
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    max-width: 280px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    white-space: normal;
    word-break: break-word;
    z-index: 9999;
    pointer-events: none;

    opacity: 0;
    scale: 0.96;
    transition:
      opacity 0.15s ease,
      scale 0.15s ease,
      display 0.15s ease allow-discrete;
  }

  /* Arrow via clip-path pseudo-element */
  .mn-tooltip-anchor::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 6px;
    background: rgba(0, 0, 0, 0.85);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  /* Open state */
  .mn-tooltip-anchor:popover-open,
  .mn-tooltip-anchor[data-open] {
    opacity: 1;
    scale: 1;
  }

  /* Entrance from hidden */
  @starting-style {
    .mn-tooltip-anchor:popover-open,
    .mn-tooltip-anchor[data-open] {
      opacity: 0;
      scale: 0.96;
    }
  }

  /* ---- Anchor-positioned popover menu ----------------------------------- */
  .mn-popover-anchor {
    position: fixed;
    position-anchor: --mn-anchor;
    position-try-fallbacks: flip-block, flip-inline;
    inset-area: block-end;
    margin: 4px 0 0;

    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.6),
      0 2px 8px rgba(0, 0, 0, 0.4);
    min-width: 160px;
    padding: 4px 0;
    z-index: 9998;

    opacity: 0;
    scale: 0.96;
    transform-origin: top left;
    transition:
      opacity 0.15s ease,
      scale 0.15s ease,
      display 0.15s ease allow-discrete;
  }

  .mn-popover-anchor:popover-open,
  .mn-popover-anchor[data-open] {
    opacity: 1;
    scale: 1;
  }

  @starting-style {
    .mn-popover-anchor:popover-open,
    .mn-popover-anchor[data-open] {
      opacity: 0;
      scale: 0.96;
    }
  }

  /* Popover menu items */
  .mn-popover-anchor__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    color: var(--text-primary, #e0e0e0);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s ease, color 0.1s ease;
  }

  .mn-popover-anchor__item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-active, #f5a623);
  }

  .mn-popover-anchor__item:active {
    background: rgba(255, 255, 255, 0.1);
  }

  /* ---- Context menu variant ---------------------------------------------- */
  .mn-context-anchor {
    position: fixed;
    position-anchor: --mn-anchor;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    inset-area: block-end inline-end;
    margin: 2px 0 0;

    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.7),
      0 2px 8px rgba(0, 0, 0, 0.4);
    min-width: 180px;
    padding: 4px 0;
    z-index: 9997;

    opacity: 0;
    scale: 0.96;
    transform-origin: top left;
    transition:
      opacity 0.15s ease,
      scale 0.15s ease,
      display 0.15s ease allow-discrete;
  }

  .mn-context-anchor:popover-open,
  .mn-context-anchor[data-open] {
    opacity: 1;
    scale: 1;
  }

  @starting-style {
    .mn-context-anchor:popover-open,
    .mn-context-anchor[data-open] {
      opacity: 0;
      scale: 0.96;
    }
  }

  /* Context menu item */
  .mn-context-anchor__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    font-size: 0.8125rem;
    color: var(--text-primary, #e0e0e0);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s ease;
  }

  .mn-context-anchor__item:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  /* Keyboard shortcut hint aligned right */
  .mn-context-anchor__kbd {
    margin-left: 24px;
    font-size: 0.6875rem;
    color: var(--text-secondary, #888);
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.02em;
  }

  /* Separator line */
  .mn-context-anchor__sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 4px 0;
  }

  /* ---- Reduced motion overrides ----------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mn-tooltip-anchor,
    .mn-popover-anchor,
    .mn-context-anchor {
      transition: none;
    }
  }

} /* end @supports (anchor-name: --a) */


/* ==========================================================================
   CSS TEXT-WRAP & TYPOGRAPHY ENHANCEMENTS — Progressive Enhancement
   Uses @supports(text-wrap: balance) to layer enhancements safely
   ========================================================================== */

@supports (text-wrap: balance) {

  /* Balanced headings — eliminates ragged single-word last lines */
  h1,
  h2,
  h3,
  h4,
  .mn-heading,
  .pipeline-stage-label,
  .sidebar-header h2 {
    text-wrap: balance;
  }

  /* Pretty wrapping for body prose — avoids orphaned words */
  .mn-body-text,
  .message-content p {
    text-wrap: pretty;
  }

  /* ---- Utility classes -------------------------------------------------- */

  /* Force balanced wrapping on any element */
  .mn-text-balanced {
    text-wrap: balance;
  }

  /* Typographically aware wrapping — no orphans */
  .mn-text-pretty {
    text-wrap: pretty;
  }

} /* end @supports (text-wrap: balance) */

/* text-wrap: stable has separate support — guard independently */
@supports (text-wrap: stable) {
  /* Stable wrapping for editable/live-updating content — avoids layout jumps */
  .mn-text-stable {
    text-wrap: stable;
  }
}

/* ---- Typography utilities (no @supports guard — widely supported) -------- */

/* Auto-hyphenation for long words in narrow containers */
.mn-hyphenate {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  overflow-wrap: break-word;
}

/* Drop-cap initial letter for lead paragraphs */
.mn-initial-cap::first-letter {
  font-size: 3.5em;
  float: left;
  line-height: 0.8;
  color: var(--color-active, #f5a623);
  font-weight: 700;
  padding-right: 8px;
  margin-top: 4px;
  font-family: var(--font-ui, system-ui, sans-serif);
}

/* Layered subtle text shadow for depth on display text */
.mn-drop-shadow-text {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Optimal reading measure — ~65 characters per line */
.mn-reading-width {
  max-width: 65ch;
}

/* Fluid type scale — responsive font size from 0.875rem to 1.125rem */
.mn-type-scale {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.125rem);
  line-height: 1.6;
}

/* Tabular-nums for aligned numeric data (prices, counts, timings) */
.mn-mono-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-family: var(--font-mono, monospace);
}

/* ---- Reduced motion: disable float animation for initial cap ------------- */
@media (prefers-reduced-motion: reduce) {
  .mn-initial-cap::first-letter {
    float: none;
    font-size: 1em;
    line-height: inherit;
    padding-right: 0;
    margin-top: 0;
    color: inherit;
    font-weight: inherit;
  }
}

/* ==========================================================================
   SECTION: CSS @property — Registered Typed Custom Properties
   Enables interpolation, type checking, and smooth animation of CSS variables.
   ========================================================================== */

/* -- Animatable glow intensity (0 = none, 1 = full) ----------------------- */
@property --mn-glow-intensity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* -- Progress bar fill percentage ----------------------------------------- */
@property --mn-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* -- Backdrop blur amount -------------------------------------------------- */
@property --mn-blur-amount {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* -- Rotating gradient angle ----------------------------------------------- */
@property --mn-gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* -- Dynamic color-mix percentage (inheritable for theming) ---------------- */
@property --mn-color-mix-pct {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 15%;
}

/* -- Transform scale factor ----------------------------------------------- */
@property --mn-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* -- Slide animation offset ------------------------------------------------ */
@property --mn-slide-offset {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* -- Hue rotation angle ---------------------------------------------------- */
@property --mn-hue-rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---- Utility classes using registered custom properties ------------------ */

/* Animatable glow — box-shadow driven by --mn-glow-intensity */
.mn-glow {
  transition: --mn-glow-intensity 0.3s ease;
  box-shadow: 0 0 calc(var(--mn-glow-intensity) * 12px)
              calc(var(--mn-glow-intensity) * 4px)
              rgba(255, 136, 0, calc(var(--mn-glow-intensity) * 0.45));
}
.mn-glow:hover {
  --mn-glow-intensity: 1;
}

/* Animated progress bar — gradient fill tracks --mn-progress */
.mn-progress-bar {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  transition: --mn-progress 0.6s ease-out;
}
.mn-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-active, #ff8800) var(--mn-progress),
    transparent var(--mn-progress)
  );
  border-radius: inherit;
}

/* Smooth backdrop-filter blur transition */
.mn-blur-transition {
  transition: --mn-blur-amount 0.4s ease;
  backdrop-filter: blur(var(--mn-blur-amount));
  -webkit-backdrop-filter: blur(var(--mn-blur-amount));
}
.mn-blur-transition:hover,
.mn-blur-transition.is-active {
  --mn-blur-amount: 12px;
}

/* Rotating conic-gradient background */
@keyframes rotateGradient {
  from { --mn-gradient-angle: 0deg; }
  to   { --mn-gradient-angle: 360deg; }
}
.mn-rotating-gradient {
  background: conic-gradient(
    from var(--mn-gradient-angle),
    rgba(255, 136, 0, 0.15),
    rgba(255, 255, 255, 0.04),
    rgba(255, 136, 0, 0.15)
  );
  animation: rotateGradient 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mn-rotating-gradient {
    animation: none;
  }
}

/* Scale-on-hover using registered --mn-scale */
.mn-scale-hover {
  transition: --mn-scale 0.2s ease, transform 0.2s ease;
  transform: scale(var(--mn-scale));
}
.mn-scale-hover:hover {
  --mn-scale: 1.05;
}

/* Cycling hue-rotation filter */
@keyframes hueShift {
  from { --mn-hue-rotate: 0deg; }
  to   { --mn-hue-rotate: 360deg; }
}
.mn-hue-shift {
  filter: hue-rotate(var(--mn-hue-rotate));
  animation: hueShift 12s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mn-hue-shift {
    animation: none;
  }
}

/* ==========================================================================
   SECTION: CSS @layer — Progressive Enhancement Layers
   Only active in browsers that support @layer (cascade layers).
   Existing file styles remain outside layers and retain their cascade order.
   ========================================================================== */

@supports (selector(@layer base { })) {

  /* Layer order: utilities (lowest) → components → overrides (highest) */
  @layer mentat-utilities, mentat-components, mentat-overrides;

  /* ------------------------------------------------------------------------
     mentat-utilities — low-specificity single-purpose helpers
     ---------------------------------------------------------------------- */
  @layer mentat-utilities {

    /* Visually hidden but accessible to screen readers */
    .mn-sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Single-line text truncation */
    .mn-truncate {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    /* Two-line clamp */
    .mn-truncate-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Three-line clamp */
    .mn-truncate-3 {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Hide scrollbars while preserving scroll behavior */
    .mn-no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .mn-no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    /* GPU compositing hint */
    .mn-gpu {
      will-change: transform;
      transform: translateZ(0);
    }

    /* Aspect ratio shortcuts */
    .mn-aspect-square {
      aspect-ratio: 1 / 1;
    }
    .mn-aspect-video {
      aspect-ratio: 16 / 9;
    }

    /* User selection control */
    .mn-select-none {
      user-select: none;
      -webkit-user-select: none;
    }
    .mn-select-all {
      user-select: all;
      -webkit-user-select: all;
    }

    /* Pointer event control */
    .mn-pointer-events-none {
      pointer-events: none;
    }
    .mn-pointer-events-auto {
      pointer-events: auto;
    }
  }

  /* ------------------------------------------------------------------------
     mentat-components — reusable primitive components
     ---------------------------------------------------------------------- */
  @layer mentat-components {

    /* Chip / badge tag */
    .mn-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 10px;
      border-radius: 12px;
      font-size: 0.75rem;
      line-height: 1.4;
      font-family: var(--font-ui, system-ui, sans-serif);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.10);
      color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
      white-space: nowrap;
      vertical-align: middle;
    }

    /* Active/highlighted chip variant */
    .mn-chip--active {
      background: rgba(255, 136, 0, 0.20);
      border-color: rgba(255, 136, 0, 0.35);
      color: var(--color-active, #ff8800);
    }

    /* Horizontal divider rule */
    .mn-divider {
      display: block;
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
      border: none;
      margin: 8px 0;
    }

    /* Vertical divider variant */
    .mn-divider--vertical {
      display: inline-block;
      width: 1px;
      height: 100%;
      background: rgba(255, 255, 255, 0.06);
      margin: 0 8px;
      vertical-align: middle;
    }

    /* Skeleton loading placeholder with shimmer */
    @keyframes mnSkeletonShimmer {
      0%   { background-position: -400px 0; }
      100% { background-position:  400px 0; }
    }
    .mn-skeleton {
      display: block;
      border-radius: 3px;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 75%
      );
      background-size: 800px 100%;
      animation: mnSkeletonShimmer 1.6s ease-in-out infinite;
      color: transparent;
      pointer-events: none;
      user-select: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .mn-skeleton {
        animation: none;
        background: rgba(255, 255, 255, 0.06);
      }
    }
  }

  /* ------------------------------------------------------------------------
     mentat-overrides — high-specificity escape hatches
     ---------------------------------------------------------------------- */
  @layer mentat-overrides {

    /* Force element visible regardless of other rules */
    .mn-force-visible {
      visibility: visible !important;
      opacity: 1 !important;
    }

    /* Force element hidden regardless of other rules */
    .mn-force-hidden {
      display: none !important;
    }
  }

} /* end @supports @layer */

/* =============================================================================
   SECTION: CSS light-dark() Function — Adaptive Theme Tokens & Utilities
   Progressive enhancement: only applied when light-dark() is supported.
   ============================================================================= */

@supports (color: light-dark(red, blue)) {

  :root {
    color-scheme: dark light;

    /* === Primary color tokens (light-dark progressive enhancement) === */
    --bg-primary:       light-dark(#faf9f6, #0d1117);
    --bg-chrome:        light-dark(#f3f1ec, #161b22);
    --bg-field:         light-dark(#ffffff, #1c2128);
    --bg-elevated:      light-dark(#ffffff, #21262d);
    --text-primary:     light-dark(#1a1a2e, #e6edf3);
    --text-secondary:   light-dark(#4a4a68, #8b949e);
    --text-muted:       light-dark(#8e8ea0, #8590a0);
    --text-link:        light-dark(#2563eb, #58a6ff);
    --text-link-hover:  light-dark(#1d4ed8, #79c0ff);
    --color-error:      light-dark(#dc2626, #f87171);
    --color-success:    light-dark(#16a34a, #34d399);
    --color-active:     light-dark(#2563eb, #539bf5);
    --color-active-glow: light-dark(rgba(37, 99, 235, 0.15), rgba(83, 155, 245, 0.15));
    --color-active-soft: light-dark(rgba(37, 99, 235, 0.06), rgba(83, 155, 245, 0.06));
    --border-color:     light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15));
    --border-light:     light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.12));
    --border-heavy:     light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.20));
    --shadow-sm:        light-dark(0 1px 2px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.2));
    --shadow-md:        light-dark(0 2px 4px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.2));
    --shadow-lg:        light-dark(0 4px 8px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.2));
    --shadow-glow:      light-dark(0 0 0 1px rgba(37, 99, 235, 0.1), 0 0 0 1px rgba(83, 155, 245, 0.1));
    --gradient-accent:  light-dark(linear-gradient(135deg, var(--color-active) 0%, var(--color-accent-secondary) 100%), linear-gradient(135deg, var(--color-active) 0%, #79c0ff 100%));
    --gradient-accent-soft: light-dark(linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(124,58,237,0.08) 100%), linear-gradient(135deg, rgba(83,155,245,0.08) 0%, rgba(121,192,255,0.08) 100%));
    --gradient-surface: light-dark(linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%), linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%));
    --glass-bg:              light-dark(rgba(255, 255, 255, 0.95), rgba(22, 27, 34, 0.95));
    --glass-bg-heavy:        light-dark(rgba(255, 255, 255, 0.98), rgba(22, 27, 34, 0.98));
    --glass-bg-light:        light-dark(rgba(255, 255, 255, 0.85), rgba(22, 27, 34, 0.85));
    --glass-border:          light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.14));
    --glass-border-subtle:   light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.10));
    --glass-shadow-elevated: light-dark(0 4px 16px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.5));

    /* === Mnemonic tokens (legacy support) === */
    --mn-surface:         light-dark(#f8f9fa, #1a1a1a);
    --mn-surface-raised:  light-dark(#ffffff,  #242424);
    --mn-surface-sunken:  light-dark(#e9ecef,  #111111);
    --mn-text:            light-dark(#212529,  #e8e8e8);
    --mn-text-dim:        light-dark(#6c757d,  #888888);
    --mn-border:          light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.08));
    --mn-shadow-color:    light-dark(rgba(0, 0, 0, 0.1),  rgba(0, 0, 0, 0.4));
    --mn-overlay:         light-dark(rgba(0, 0, 0, 0.4),  rgba(0, 0, 0, 0.6));
    --mn-input-bg:        light-dark(#ffffff,  #1e1e1e);
    --mn-code-bg:         light-dark(#f6f8fa,  #161b22);
  }

  /* --- Utility classes ---------------------------------------------------- */

  .mn-surface {
    background: var(--mn-surface);
    color: var(--mn-text);
  }

  .mn-surface-raised {
    background: var(--mn-surface-raised);
    box-shadow: 0 1px 3px var(--mn-shadow-color);
  }

  .mn-surface-sunken {
    background: var(--mn-surface-sunken);
  }

  .mn-card-adaptive {
    background:    var(--mn-surface-raised);
    border:        1px solid var(--mn-border);
    border-radius: 8px;
    padding:       16px;
  }

  .mn-input-adaptive {
    background: var(--mn-input-bg);
    border:     1px solid var(--mn-border);
    color:      var(--mn-text);
  }

  .mn-overlay-adaptive {
    background: var(--mn-overlay);
  }

  /* --- Component-specific overrides --------------------------------------- */

  /* Status badge: shifts foreground & background automatically */
  .mn-badge-adaptive {
    background: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.08));
    color:      light-dark(#343a40, #d0d0d0);
    border:     1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.1));
    border-radius: 4px;
    padding:    2px 6px;
    font-size:  0.75em;
    font-weight: 600;
    display:    inline-block;
  }

  /* Adaptive hyperlink */
  .mn-link-adaptive {
    color:           light-dark(#0d6efd, #6ea8fe);
    text-decoration: none;
  }
  .mn-link-adaptive:hover {
    text-decoration: underline;
    color:           light-dark(#0a58ca, #9ec5fe);
  }

  /* Divider / separator */
  .mn-separator-adaptive {
    border: none;
    border-top: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.08));
    margin: 12px 0;
  }

  /* Scrollbar styling (where supported) */
  .mn-scrollbar-adaptive {
    scrollbar-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.18))
                     light-dark(#e9ecef, #111111);
    scrollbar-width: thin;
  }

  /* --- Expanded light-dark() utilities ------------------------------------ */

  /* Adaptive button backgrounds */
  .mn-btn-adaptive {
    background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08));
    color: light-dark(#212529, #e8e8e8);
    border: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.1));
  }
  .mn-btn-adaptive:hover {
    background: light-dark(rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.12));
  }

  /* Adaptive badge/chiip backgrounds */
  .mn-badge-adaptive {
    background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
    color: light-dark(#495057, #d0d0d0);
    border: 1px solid light-dark(rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.08));
  }

  /* Adaptive status colors */
  .mn-status-success {
    background: light-dark(#d4edda, rgba(40, 167, 69, 0.2));
    color: light-dark(#155724, #5cb85c);
    border-color: light-dark(#c3e6cb, rgba(40, 167, 69, 0.3));
  }
  .mn-status-error {
    background: light-dark(#f8d7da, rgba(220, 53, 69, 0.2));
    color: light-dark(#721c24, #ff6b6b);
    border-color: light-dark(#f5c6cb, rgba(220, 53, 69, 0.3));
  }
  .mn-status-warning {
    background: light-dark(#fff3cd, rgba(255, 193, 37, 0.2));
    color: light-dark(#856404, #ffc107);
    border-color: light-dark(#ffeaa7, rgba(255, 193, 37, 0.3));
  }
  .mn-status-info {
    background: light-dark(#d1ecf1, rgba(23, 162, 184, 0.2));
    color: light-dark(#0c5460, #5bc0de);
    border-color: light-dark(#bee5eb, rgba(23, 162, 184, 0.3));
  }

  /* Adaptive code block styling */
  .mn-code-block-adaptive {
    background: light-dark(#f6f8fa, #161b22);
    border: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    color: light-dark(#24292e, #e6e6e6);
  }

  /* Adaptive link colors */
  .mn-link-adaptive {
    color: light-dark(#0066cc, #6ea8fe);
  }
  .mn-link-adaptive:hover {
    color: light-dark(#004499, #9ec5fe);
  }

  /* Adaptive shadow utilities */
  .mn-shadow-adaptive-sm {
    box-shadow: 0 1px 2px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
  }
  .mn-shadow-adaptive-md {
    box-shadow: 0 4px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
  }
  .mn-shadow-adaptive-lg {
    box-shadow: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.5));
  }

  /* Adaptive gradient backgrounds */
  .mn-gradient-adaptive {
    background: linear-gradient(
      135deg,
      light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.04)),
      light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08))
    );
  }

  /* Adaptive border utilities */
  .mn-border-adaptive-subtle {
    border-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.06));
  }
  .mn-border-adaptive {
    border-color: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.12));
  }
  .mn-border-adaptive-strong {
    border-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.2));
  }

  /* Adaptive divider */
  .mn-divider-adaptive {
    border-top: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.08));
  }

  /* Adaptive empty state */
  .mn-empty-adaptive {
    background: light-dark(#f8f9fa, #1a1a1a);
    color: light-dark(#6c757d, #888888);
    border: 1px dashed light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.1));
  }

  /* Adaptive placeholder text */
  .mn-adaptive-placeholder::placeholder {
    color: light-dark(#999, #777);
    opacity: 1;
  }

  /* Adaptive input background */
  .mn-input-adaptive {
    background: light-dark(#ffffff, #1e1e1e);
    border: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.1));
    color: light-dark(#212529, #e8e8e8);
  }
  .mn-input-adaptive:focus {
    border-color: light-dark(#2563eb, #60a5fa);
    box-shadow: 0 0 0 3px light-dark(rgba(37, 99, 235, 0.15), rgba(96, 165, 250, 0.2));
  }

  /* Adaptive scrollbar track */
  .mn-scrollbar-adaptive {
    scrollbar-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.15))
                     light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
  }

} /* end @supports light-dark() */


/* =============================================================================
   SECTION: CSS @starting-style Entry Animations
   Progressive enhancement: only applied when @starting-style is supported.
   ============================================================================= */

@supports selector(@starting-style {}) {

  /* --- Fade in ------------------------------------------------------------ */
  .mn-enter-fade {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  @starting-style {
    .mn-enter-fade {
      opacity: 0;
    }
  }

  /* --- Scale in (spring bounce) ------------------------------------------ */
  .mn-enter-scale {
    opacity:   1;
    transform: scale(1);
    transition: opacity 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @starting-style {
    .mn-enter-scale {
      opacity:   0;
      transform: scale(0.95);
    }
  }

  /* --- Slide up ----------------------------------------------------------- */
  .mn-enter-slide-up {
    opacity:   1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  @starting-style {
    .mn-enter-slide-up {
      opacity:   0;
      transform: translateY(10px);
    }
  }

  /* --- Slide down --------------------------------------------------------- */
  .mn-enter-slide-down {
    opacity:   1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  @starting-style {
    .mn-enter-slide-down {
      opacity:   0;
      transform: translateY(-10px);
    }
  }

  /* --- Slide left (enters from the right) --------------------------------- */
  .mn-enter-slide-left {
    opacity:   1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  @starting-style {
    .mn-enter-slide-left {
      opacity:   0;
      transform: translateX(10px);
    }
  }

  /* --- Slide right (enters from the left) --------------------------------- */
  .mn-enter-slide-right {
    opacity:   1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  @starting-style {
    .mn-enter-slide-right {
      opacity:   0;
      transform: translateX(-10px);
    }
  }

  /* --- Contextual: new message bubbles ------------------------------------ */
  .message-list .mn-message-bubble {
    opacity:   1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  @starting-style {
    .message-list .mn-message-bubble {
      opacity:   0;
      transform: translateY(10px);
    }
  }

  /* --- Contextual: sidebar conversation list items ----------------------- */
  .sidebar .conversation-item {
    opacity:    1;
    transition: opacity 0.25s ease;
  }
  @starting-style {
    .sidebar .conversation-item {
      opacity: 0;
    }
  }

  /* --- Contextual: notifications & alerts --------------------------------- */
  .notification,
  [role="alert"] {
    opacity:   1;
    transform: scale(1);
    transition: opacity 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @starting-style {
    .notification,
    [role="alert"] {
      opacity:   0;
      transform: scale(0.95);
    }
  }

  /* --- Card entry (feed items) ------------------------------------------ */
  .mn-card-enter {
    opacity:   1;
    transform: translateY(0) scale(1);
    transition: opacity 0.35s ease,
                transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @starting-style {
    .mn-card-enter {
      opacity:   0;
      transform: translateY(8px) scale(0.98);
    }
  }

  /* --- List item entry (slide from left) --------------------------------- */
  .mn-list-item-enter {
    opacity:   1;
    transform: translateX(0);
    transition: opacity 0.3s ease,
                transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @starting-style {
    .mn-list-item-enter {
      opacity:   0;
      transform: translateX(-12px);
    }
  }

  /* --- Badge entry (small scale pop) ------------------------------------- */
  .mn-badge-enter {
    opacity:   1;
    transform: scale(1);
    transition: opacity 0.2s ease,
                transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @starting-style {
    .mn-badge-enter {
      opacity:   0;
      transform: scale(0.85);
    }
  }

  /* --- Toast entry (slide from right) ------------------------------------ */
  .mn-toast-enter {
    opacity:   1;
    transform: translateX(0);
    transition: opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @starting-style {
    .mn-toast-enter {
      opacity:   0;
      transform: translateX(100%);
    }
  }

  /* --- Chip entry (spring pop-in) ---------------------------------------- */
  .mn-chip-enter {
    opacity:   1;
    transform: scale(1);
    transition: opacity 0.25s ease,
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @starting-style {
    .mn-chip-enter {
      opacity:   0;
      transform: scale(0.8);
    }
  }

  /* --- Divider entry (width expand) -------------------------------------- */
  .mn-divider-enter {
    opacity:   1;
    width:     100%;
    transition: opacity 0.3s ease,
                width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @starting-style {
    .mn-divider-enter {
      opacity:   0;
      width:     0;
    }
  }

  /* --- Conversation item entry (sidebar) --------------------------------- */
  .conversation-item {
    opacity:   1;
    transform: translateY(0);
    transition: opacity 0.25s ease,
                transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @starting-style {
    .conversation-item {
      opacity:   0;
      transform: translateY(4px);
    }
  }

  /* --- Pipeline stage entry ---------------------------------------------- */
  .pipeline-stage {
    opacity:   1;
    transform: scaleX(1);
    transition: opacity 0.3s ease,
                transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @starting-style {
    .pipeline-stage {
      opacity:   0;
      transform: scaleX(0.9);
    }
  }

  /* --- Modal entry ------------------------------------------------------- */
  .mn-modal-enter {
    opacity:   1;
    transform: scale(1) translateY(0);
    transition: opacity 0.3s ease,
                transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @starting-style {
    .mn-modal-enter {
      opacity:   0;
      transform: scale(0.95) translateY(8px);
    }
  }

  /* --- Reduced-motion override: strip all entry transitions --------------- */
  @media (prefers-reduced-motion: reduce) {
    .mn-enter-fade,
    .mn-enter-scale,
    .mn-enter-slide-up,
    .mn-enter-slide-down,
    .mn-enter-slide-left,
    .mn-enter-slide-right,
    .mn-card-enter,
    .mn-list-item-enter,
    .mn-badge-enter,
    .mn-toast-enter,
    .mn-chip-enter,
    .mn-divider-enter,
    .message-list .mn-message-bubble,
    .sidebar .conversation-item,
    .notification,
    [role="alert"] {
      transition: none;
    }
  }

} /* end @supports @starting-style */

/* =============================================================================
   SECTION: Focus-Visible Polish — Apple-Style Focus Rings
   Progressive enhancement for :focus-visible support.
   ============================================================================= */

@supports selector(:focus-visible) {

  /* --- Base focus-visible ring with Apple-style glow ---------------------- */
  :focus-visible {
    outline: none;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.6),
      0 0 0 3px rgba(255, 136, 0, 0.35),
      0 0 12px rgba(255, 136, 0, 0.25);
    transition: box-shadow 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* --- Input fields with enhanced focus ----------------------------------- */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.7),
      0 0 0 3px rgba(255, 136, 0, 0.4),
      0 0 16px rgba(255, 136, 0, 0.3);
    border-color: rgba(255, 136, 0, 0.5);
  }

  /* --- Button focus with subtle scale ------------------------------------- */
  button:focus-visible,
  [role="button"]:focus-visible {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.6),
      0 0 0 3px rgba(255, 136, 0, 0.35),
      0 0 12px rgba(255, 136, 0, 0.25);
    transform: scale(1.02);
  }

  /* --- Link focus with animated underline --------------------------------- */
  a:focus-visible {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.6),
      0 0 0 3px rgba(255, 136, 0, 0.35);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 136, 0, 0.5);
  }

  /* --- Focus-within parent highlighting ----------------------------------- */
  .mn-input-group:focus-within {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 136, 0, 0.3);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.4),
      0 0 0 3px rgba(255, 136, 0, 0.2);
  }

  .mn-form-group:focus-within {
    border-left-color: rgba(255, 136, 0, 0.4);
  }

  .mn-search-wrapper:focus-within {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.15),
      0 0 16px rgba(255, 136, 0, 0.15);
  }

  /* --- Keyboard focus pulse animation ------------------------------------- */
  @keyframes mnFocusPulse {
    0%, 100% {
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.6),
        0 0 0 3px rgba(255, 136, 0, 0.35),
        0 0 12px rgba(255, 136, 0, 0.25);
    }
    50% {
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.7),
        0 0 0 4px rgba(255, 136, 0, 0.45),
        0 0 16px rgba(255, 136, 0, 0.35);
    }
  }

  .mn-focus-pulse:focus-visible {
    animation: mnFocusPulse 1.5s ease-in-out infinite;
  }

  /* --- Sidebar conversation item focus ------------------------------------ */
  .conversation-item:focus-visible {
    background: rgba(255, 136, 0, 0.12);
    border-left-color: rgba(255, 136, 0, 0.6);
    box-shadow:
      inset 0 0 0 1px rgba(255, 136, 0, 0.15),
      0 0 0 1px rgba(255, 255, 255, 0.4);
  }

  /* --- Message action button focus ---------------------------------------- */
  .message-action-btn:focus-visible {
    background: rgba(255, 136, 0, 0.15);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.5),
      0 0 0 3px rgba(255, 136, 0, 0.3);
  }

  /* --- Theme-specific focus overrides ------------------------------------- */
  [data-theme="light"] :focus-visible {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.4),
      0 0 0 3px rgba(255, 136, 0, 0.4),
      0 0 12px rgba(255, 136, 0, 0.3);
  }

  [data-theme="light"] input:focus-visible,
  [data-theme="light"] textarea:focus-visible {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5),
      0 0 0 3px rgba(255, 136, 0, 0.45),
      0 0 16px rgba(255, 136, 0, 0.35);
  }

  /* --- Reduced-motion: disable pulse -------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    :focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    a:focus-visible,
    .mn-focus-pulse:focus-visible {
      animation: none;
      transition: none;
    }
  }

} /* end @supports :focus-visible */

/* ═══════════════ Button Ripple Effects ═══════════════ */

.mn-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 136, 0, 0.6) 0%, rgba(255, 136, 0, 0.3) 40%, transparent 100%);
  transform: scale(0);
  animation: mnRippleExpand 0.6s ease-out;
  pointer-events: none;
  z-index: 1000;
}

@keyframes mnRippleExpand {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* Button positioning context for ripple */
.new-conversation-btn,
.send-button,
.message-action-btn,
.conversation-kebab-btn,
.pipeline-stage-btn {
  position: relative;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .mn-ripple {
    animation: none;
    opacity: 0;
  }
}

/* ═══════════════ Performance Widget ═══════════════ */

.mentat-perf-widget {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 220px;
  background: light-dark(#ffffff, #1a1a1a);
  border: 1px solid light-dark(#e0e0e0, #333333);
  border-radius: 8px;
  box-shadow: 0 4px 12px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
  z-index: 9999;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}

.mentat-perf-widget.mpw-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mpw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid light-dark(#eeeeee, #2a2a2a);
  font-size: var(--text-xs);
  font-weight: 600;
  color: light-dark(#333333, #e0e0e0);
}

.mpw-close {
  background: transparent;
  border: none;
  font-size: var(--text-md);
  line-height: 1;
  color: light-dark(#999999, #666666);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s;
}

.mpw-close:hover {
  background: light-dark(#f0f0f0, #2a2a2a);
}

.mpw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
}

.mpw-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mpw-label {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: light-dark(#666666, #999999);
  font-weight: 600;
}

.mpw-value {
  font-size: var(--text-md);
  font-weight: 700;
  font-family: 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace;
  color: light-dark(#333333, #e0e0e0);
  padding: 4px 8px;
  background: light-dark(#f5f5f5, #252525);
  border-radius: 4px;
  text-align: center;
  transition: background 0.3s, color 0.3s;
}

.mpw-value[data-rating="good"] {
  background: light-dark(#d4edda, rgba(40, 167, 69, 0.2));
  color: light-dark(#155724, #5cb85c);
}

.mpw-value[data-rating="needs-improvement"] {
  background: light-dark(#fff3cd, rgba(255, 193, 37, 0.2));
  color: light-dark(#856404, #ffc107);
}

.mpw-value[data-rating="poor"] {
  background: light-dark(#f8d7da, rgba(220, 53, 69, 0.2));
  color: light-dark(#721c24, #dc3545);
}

@media (prefers-reduced-motion: reduce) {
  .mentat-perf-widget {
    transition: none;
  }
}

/* ═══════════════ Cycle 120: Mobile-Responsive Polish ═══════════════ */

/* Touch-friendly minimum tap targets (44x44px per WCAG) */
@media (pointer: coarse) {
  .header-action-btn,
  .conversation-item,
  .message-action-btn,
  .pipeline-stage-btn,
  .mn-form-group-btn,
  .send-button {
    min-height: 44px;
    min-width: 44px;
  }

  .conversation-item {
    padding: 12px 8px;
  }

  .new-conversation-btn {
    padding: 12px 16px;
  }
}

/* Safe-area insets for notched devices */
@supports (padding: max(0px)) {
  .header-bar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .sidebar {
    padding-left: max(0px, env(safe-area-inset-left));
  }

  .message-input-wrapper {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .mentat-perf-widget {
    right: max(20px, env(safe-area-inset-right));
    top: max(60px, env(safe-area-inset-top));
  }
}

/* Responsive typography for small screens */
@media screen and (max-width: 480px) {
  :root {
    --mn-font-size-base: 14px;
  }

  .header-logo { font-size: var(--text-sm); }
  .header-status { font-size: var(--text-xs-sm); }
  .header-user { font-size: var(--text-xs); }
  .header-tm-link { font-size: var(--text-xs); }

  .message-content {
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .conversation-item-title {
    font-size: var(--text-sm);
  }

  .pipeline-stage-label {
    font-size: var(--text-micro);
  }
}

/* Mobile header overflow handling
   Note: .header-right is NOT hidden here — the more selective rule at ~line 15953
   hides only .header-right .header-group:first-child, preserving overflow menu. */
@media screen and (max-width: 768px) {
  .header-center { display: none; }
  .mobile-overflow-toggle { display: inline-flex; }
}

/* Prevent horizontal scroll on narrow viewports */
@media screen and (max-width: 360px) {
  .sidebar { max-width: 100vw; }
  .message-list { max-width: 100vw; }
  .mentat-perf-widget { width: 180px; }
}

/* ═══════════════ Cycle 126: Landscape Mobile Orientation ═══════════════ */
/*
 * Landscape orientation optimizations for mobile devices.
 * When device is rotated 90°, maximize vertical space for messages,
 * collapse sidebar to icon rail, and adjust header/padding for wide aspect.
 */

@media screen and (max-width: 900px) and (orientation: landscape) {
  /* Sidebar collapses to icon-only rail in landscape */
  .sidebar {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }

  .sidebar[data-collapsed="false"] {
    width: 56px !important;
  }

  /* Hide conversation metadata, show only icons */
  .conversation-item-metadata {
    display: none;
  }

  .conversation-item-icon {
    width: 36px;
    height: 36px;
    margin: 4px auto;
  }

  .conversation-item-title {
    display: none;
  }

  .conversation-item-time {
    display: none;
  }

  /* Header becomes more compact in landscape */
  .header {
    height: 40px;
    min-height: 40px;
    padding: 0 8px;
  }

  .header-logo {
    font-size: var(--text-xs);
  }

  .header-center {
    display: none;
  }

  .header-url {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Message list takes maximum vertical space */
  .message-list {
    max-height: calc(100vh - 40px - 60px);
    height: calc(100vh - 40px - 60px);
  }

  .message-content {
    max-width: 85%;
  }

  /* Pipeline panel becomes ultra-compact */
  .pipeline-panel {
    padding: 4px 6px;
    min-width: 140px;
  }

  .pipeline-stage-label {
    display: none;
  }

  .pipeline-stage-icon {
    width: 24px;
    height: 24px;
    font-size: var(--text-sm);
  }

  .pipeline-progress-bar {
    height: 3px;
  }

  /* Input area becomes single-line */
  .input-area {
    height: 50px;
    min-height: 50px;
    padding: 6px 8px;
  }

  .message-input {
    max-height: 38px;
    line-height: 1.4;
  }

  .send-btn {
    width: 38px;
    height: 38px;
  }

  /* Perf widget shrinks in landscape */
  .mentat-perf-widget {
    width: 140px;
    font-size: var(--text-micro);
  }
}

/* Portrait mobile — restore full sidebar */
@media screen and (max-width: 900px) and (orientation: portrait) {
  .sidebar {
    width: 280px;
    min-width: 280px;
  }

  .conversation-item-metadata {
    display: flex;
  }

  .conversation-item-title {
    display: block;
  }

  .conversation-item-time {
    display: block;
  }
}

/* ═══════════════ Cycle 120: URL Display Styles ═══════════════ */

.header-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  background: transparent;
  font-size: var(--text-xs-sm);
  font-family: var(--font-mono, SFMono-Regular, Consolas, monospace);
  color: light-dark(#6c757d, #999999);
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.header-url:hover {
  background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.08));
  color: light-dark(#495057, #adb5bd);
}

.header-url-text {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-url-icon {
  font-size: var(--text-sm);
  opacity: 0.7;
}

/* Copy feedback animation */
@keyframes mnUrlCopied {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.mn-url-copied {
  animation: mnUrlCopied 0.3s ease-in-out;
  background: light-dark(rgba(40, 167, 69, 0.15), rgba(40, 167, 69, 0.25)) !important;
  color: light-dark(#28a745, #5dd46d) !important;
}

/* ═══════════════ Cycle 120: Accessibility Hardening ═══════════════ */

/* Enhanced screen reader-only class with better clipping */
.mn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link with smooth reveal */
.mn-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: light-dark(#0066cc, #0055aa);
  color: light-dark(#ffffff, #e0e0e0);
  padding: 8px 16px;
  z-index: 100000;
  transition: top 0.2s;
  text-decoration: none;
}

.mn-skip-link:focus {
  top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .conversation-item:focus-visible {
    border-left-width: 4px;
  }

  .message-action-btn {
    border: 1px solid currentColor;
  }

  .header-action-btn {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .mn-input-adaptive {
    border-width: 2px;
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  * {
    forced-color-adjust: auto;
  }

  .conversation-item:focus-visible,
  .message-action-btn:focus-visible,
  .header-action-btn:focus-visible,
  .mn-form-group:focus-within {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }

  .send-button,
  .new-conversation-btn {
    border: 1px solid ButtonText;
  }

  .mentat-perf-widget {
    border: 2px solid CanvasText;
  }
}

/* =============================================================================
   DIALoGICAL VISUALIZATION — T/A/S convergence flow
   ============================================================================= */

.mn-dialectical-flow {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  margin-top: var(--space-2);
  background: light-dark(rgba(147, 51, 234, 0.04), rgba(147, 51, 234, 0.08));
  border-radius: var(--radius-md);
  border: 1px solid light-dark(rgba(147, 51, 234, 0.15), rgba(147, 51, 234, 0.25));
}

.mn-thesis-arrow,
.mn-antithesis-arrow,
.mn-synthesis-convergence {
  position: relative;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.3s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.3s cubic-bezier(0.32, 0.72, 0, 1), color 0.3s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.mn-thesis-arrow {
  background: light-dark(rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.15));
  color: light-dark(#2563eb, #60a5fa);
  border-left: 2px solid light-dark(#2563eb, #60a5fa);
}

.mn-thesis-arrow::before {
  content: '→';
  margin-right: 4px;
  opacity: 0.7;
}

.mn-antithesis-arrow {
  background: light-dark(rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.15));
  color: light-dark(#dc2626, #f87171);
  border-left: 2px solid light-dark(#dc2626, #f87171);
}

.mn-antithesis-arrow::before {
  content: '↝';
  margin-right: 4px;
  opacity: 0.7;
}

.mn-synthesis-convergence {
  background: light-dark(rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.15));
  color: light-dark(#22c55e, #4ade80);
  border-left: 2px solid light-dark(#22c55e, #4ade80);
}

.mn-synthesis-convergence::before {
  content: '⊕';
  margin-right: 4px;
  opacity: 0.7;
}

.mn-synthesis-merging {
  animation: mnSynthesisMerge 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes mnSynthesisMerge {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
    box-shadow: 0 0 12px light-dark(rgba(34, 197, 94, 0.3), rgba(74, 222, 128, 0.4));
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.mn-synthesis-complete {
  box-shadow: 0 0 8px light-dark(rgba(34, 197, 94, 0.2), rgba(74, 222, 128, 0.3));
}

.mn-domain-highlighted {
  border-left-color: light-dark(var(--color-accent-secondary), #a78bfa);
  background: light-dark(rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.18));
}

/* =============================================================================
   FAILURE DIAGNoSTICS — Repair timeline and error stacks
   ============================================================================= */

.mn-repair-timeline {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  background: light-dark(#ffffff, #1a1a1a);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
  border: 1px solid light-dark(#e5e7eb, #374151);
  padding: var(--space-3);
  z-index: 9999;
}

.mn-failure-card {
  background: light-dark(#f9fafb, #262626);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border-left: 3px solid light-dark(#ef4444, #f87171);
}

.mn-failure-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.mn-failure-stage {
  font-size: var(--text-xs-sm);
  font-weight: 600;
  color: light-dark(#374151, #d1d5db);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mn-failure-time {
  font-size: var(--text-2xs);
  color: light-dark(#9ca3af, #6b7280);
  font-family: var(--font-m);
}

.mn-error-stack {
  font-size: var(--text-micro);
  font-family: var(--font-m);
  color: light-dark(#6b7280, #9ca3af);
  background: light-dark(#f3f4f6, #1f2937);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* =============================================================================
   EPISTEMIC WATERMARK — Confidence bands on messages
   ============================================================================= */

.mn-epistemic-watermark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-micro);
  font-weight: 500;
  margin-left: var(--space-2);
  vertical-align: middle;
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.mn-confidence-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mn-confidence-high {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.mn-confidence-high .mn-confidence-indicator {
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
}

.mn-confidence-med {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.mn-confidence-med .mn-confidence-indicator {
  background: #eab308;
  box-shadow: 0 0 4px rgba(234, 179, 8, 0.4);
}

.mn-confidence-low {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.mn-confidence-low .mn-confidence-indicator {
  background: #ef4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
}

/* Focus visible for interactive elements with offset */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid light-dark(#0066cc, #6ea8fe);
  outline-offset: 2px;
}

/* Reduced motion: remove all non-essential animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════ CSS light-dark() Expansion ═══════════════ */

@supports (color: light-dark(red, blue)) {
  /* Background utilities */
  .mn-bg-adaptive { background: light-dark(#f8f9fa, #1a1a1a); }
  .mn-bg-elevated { background: light-dark(#ffffff, #252525); }
  .mn-bg-subtle { background: light-dark(#f1f3f4, #121212); }

  /* Border utilities */
  .mn-border-adaptive { border-color: light-dark(#dee2e6, #404040); }
  .mn-border-subtle { border-color: light-dark(#e9ecef, #333333); }
  .mn-border-strong { border-color: light-dark(#6c757d, #555555); }

  /* Text utilities */
  .mn-text-adaptive { color: light-dark(#212529, #e0e0e0); }
  .mn-text-muted { color: light-dark(#6c757d, #999999); }
  .mn-text-subtle { color: light-dark(#adb5bd, #666666); }

  /* Shadow utilities */
  .mn-shadow-adaptive-xs { box-shadow: 0 1px 2px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.4)); }
  .mn-shadow-adaptive-sm { box-shadow: 0 1px 3px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.45)); }
  .mn-shadow-adaptive-md { box-shadow: 0 4px 6px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)); }
  .mn-shadow-adaptive-lg { box-shadow: 0 8px 16px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.55)); }
  .mn-shadow-adaptive-xl { box-shadow: 0 16px 32px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.6)); }

  /* Input utilities */
  .mn-input-adaptive {
    background: light-dark(#ffffff, #1e1e1e);
    border-color: light-dark(#ced4da, #444444);
    color: light-dark(#212529, #e0e0e0);
  }

  .mn-input-adaptive:focus {
    border-color: light-dark(#80bdff, #6ea8fe);
    box-shadow: 0 0 0 3px light-dark(rgba(0, 123, 255, 0.25), rgba(110, 168, 254, 0.3));
  }

  /* Link utility */
  .mn-link-adaptive { color: light-dark(#0066cc, #6ea8fe); }
  .mn-link-adaptive:hover { color: light-dark(#004499, #94b3ff); }

  /* Pipeline visualization — theme adaptive stage colors */
  .mn-pipeline-stage-adaptive {
    background: light-dark(#f8f9fa, #1e1e1e);
    border-color: light-dark(#dee2e6, #444444);
  }
  .mn-pipeline-stage-adaptive.running {
    border-left-color: light-dark(#0066cc, #6ea8fe);
  }
  .mn-pipeline-stage-adaptive.complete {
    border-left-color: light-dark(#28a745, #34d399);
  }
  .mn-pipeline-stage-adaptive.failed {
    border-left-color: light-dark(#dc3545, #f87171);
  }

  /* Message reactions — theme adaptive */
  .mn-reaction-badge {
    background: light-dark(rgba(0, 123, 255, 0.1), rgba(110, 168, 254, 0.15));
    color: light-dark(#0066cc, #94b3ff);
  }
  .mn-reaction-badge:hover {
    background: light-dark(rgba(0, 123, 255, 0.2), rgba(110, 168, 254, 0.25));
  }

  /* Template buttons — theme adaptive */
  .mn-template-btn {
    background: light-dark(#f8f9fa, #252525);
    color: light-dark(#495057, #d0d0d0);
  }
  .mn-template-btn:hover {
    background: light-dark(#e9ecef, #353535);
    color: light-dark(#212529, #ffffff);
  }
} /* end @supports (color: light-dark(red, blue)) */


/* ============================================================
   CYCLE 108: FORM ENHANCEMENTS & CORE WEB VITALS WIDGET
   ============================================================ */

/* ── Character Counter ── */
.mn-char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: var(--text-micro);
    font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
    color: var(--muted-foreground, #6b7280);
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.mn-char-counter.mn-counter-warning {
    color: #f59e0b;
    background: rgba(251, 191, 36, 0.15);
}

.mn-char-counter.mn-counter-error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .mn-char-counter {
        background: rgba(0, 0, 0, 0.5);
        color: #9ca3af;
    }
}

/* ── Auto-resize textarea enhancements ── */
textarea.mn-auto-resize {
    overflow: hidden;
    resize: none;
    min-height: 44px;
    max-height: 300px;
    transition: height 0.1s ease-out;
}

/* ── Core Web Vitals Widget ── */
.mn-vitals-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
    z-index: 9999;
    min-width: 180px;
}

.mn-vitals-title {
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-foreground, #6b7280);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mn-vitals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.mn-vital {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
    transition: background 0.2s ease, transform 0.15s ease;
}

.mn-vital:hover {
    background: rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.mn-vital-name {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--muted-foreground, #6b7280);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.mn-vital-value {
    font-size: var(--text-md);
    font-weight: 700;
    font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
    color: var(--foreground, #111827);
}

/* Rating states */
.mn-vital--good {
    background: rgba(34, 197, 94, 0.1);
}
.mn-vital--good .mn-vital-value {
    color: #16a34a;
}

.mn-vital--needs-improvement {
    background: rgba(251, 191, 36, 0.1);
}
.mn-vital--needs-improvement .mn-vital-value {
    color: #ca8a04;
}

.mn-vital--poor {
    background: rgba(239, 68, 68, 0.1);
}
.mn-vital--poor .mn-vital-value {
    color: #dc2626;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .mn-vitals-widget {
        background: rgba(17, 24, 39, 0.95);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .mn-vitals-title {
        color: #9ca3af;
        border-color: rgba(255, 255, 255, 0.06);
    }
    .mn-vital {
        background: rgba(255, 255, 255, 0.03);
    }
    .mn-vital:hover {
        background: rgba(255, 255, 255, 0.05);
    }
    .mn-vital-value {
        color: #f3f4f6;
    }
    .mn-vital--good .mn-vital-value {
        color: #4ade80;
    }
    .mn-vital--needs-improvement .mn-vital-value {
        color: #facc15;
    }
    .mn-vital--poor .mn-vital-value {
        color: #f87171;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mn-vitals-widget,
    .mn-vital,
    textarea.mn-auto-resize,
    .mn-char-counter {
        transition: none !important;
    }
}

/* Mobile: hide vitals widget on small screens */
@media (max-width: 640px) {
    .mn-vitals-widget {
        display: none;
    }
}

/* ── Intersection Observer Sentinel ── */
.mn-sentinel {
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE POLISH — Touch Optimization & Landscape Layouts
   Apple App of the Day quality: 44px+ touch targets, no hover on touch
   ═══════════════════════════════════════════════════════════════ */

/* --- Touch devices: pointer:coarse ---
   Hide hover effects (they don't exist on touch),
   ensure 44px minimum touch targets, improve tap clarity */
@media (pointer:coarse) {
    /* Remove hover states — they're meaningless on touch */
    .conversation-item:hover,
    .header-action-btn:hover,
    .sidebar-btn:hover,
    .nav-btn:hover,
    .mn-vital:hover,
    .mn-card-adaptive:hover,
    .mn-link-adaptive:hover {
        background: transparent;
        transform: none;
        box-shadow: none;
    }

    /* Active/focus states for touch feedback */
    .conversation-item:active,
    .header-action-btn:active,
    .sidebar-btn:active,
    .nav-btn:active,
    .mn-vital:active {
        background: var(--bg-tertiary, rgba(0,0,0,0.08));
        transform: scale(0.98);
    }

    /* Ensure 44px minimum touch targets */
    .header-action-btn,
    .sidebar-btn,
    .nav-btn,
    .conversation-item,
    .prompt-suggestion,
    .send-button,
    .template-btn,
    .compare-toggle-btn,
    .multiselect-btn,
    .mn-vitals-widget button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger touch targets for navigation */
    .header-group header-nav .nav-btn {
        padding: 12px 16px;
    }

    /* Improve tap visibility with stronger borders */
    .conversation-item.active {
        border-left-width: 4px;
    }

    /* Hide desktop-only hover tooltips */
    .header-user:hover::after,
    .header-url:hover::after {
        display: none;
    }
}

/* --- Landscape orientation on mobile ---
   Optimize layout when device rotated to landscape */
@media (orientation: landscape) and (max-height: 500px) {
    /* Compact header for landscape */
    .header-bar {
        flex-wrap: wrap;
        min-height: 48px;
    }

    .header-center {
        order: 3;
        width: 100%;
        justify-content: center;
        padding: 4px 0;
    }

    .header-tm-link {
        font-size: var(--text-2xs);
        padding: 4px 8px;
    }

    /* Sidebar becomes overlay in landscape */
    .sidebar {
        position: fixed;
        left: -320px;
        height: 100%;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    .sidebar.mobile-open {
        left: 0;
    }

    /* Chat area expands to full width */
    .chat-area {
        width: 100%;
    }

    /* Comparison columns stack vertically in landscape */
    .chat-columns {
        flex-direction: column;
    }

    .chat-column--comparison {
        max-height: 200px;
        overflow-y: auto;
    }

    /* Thoughts column becomes bottom drawer */
    .thoughts-column {
        position: fixed;
        bottom: -300px;
        right: 0;
        left: 0;
        top: auto;
        max-height: 300px;
        border-left: none;
        border-top: 1px solid var(--border-color);
        transition: bottom 0.3s ease;
    }

    .thoughts-column.mobile-open {
        bottom: 0;
    }

    /* Input area more compact in landscape */
    .input-pedestal {
        padding: 8px;
    }

    .input-row textarea {
        max-height: 60px;
        min-height: 40px;
    }

    /* Hide non-essential UI in landscape */
    .pipeline-flow,
    .pipeline-progress,
    .bg-activity {
        display: none;
    }
}


/* ============================================================
   Collaborative Insights — Cycle 152
   Privacy-preserving community analytics styles
   ============================================================ */

/* Panel Container */
.collaborative-panel {
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

.collaborative-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.collaborative-header h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
}

.last-updated {
  font-size: var(--text-xs-sm);
  color: var(--text-tertiary, #6b7280);
}

/* Tab Navigation */
.insight-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.insight-tab {
  padding: 8px 16px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 20px;
  background: var(--bg-primary, #fff);
  color: var(--text-secondary, #4b5563);
  font-size: var(--text-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.insight-tab:hover {
  background: var(--bg-hover, #f3f4f6);
}

.insight-tab.active {
  background: var(--color-active, #2563eb);
  color: white;
  border-color: var(--color-active, #2563eb);
}

/* Insight Cards */
.insight-card {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.insight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.insight-header h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
}

.trend {
  font-size: var(--text-md);
}

.insight-card > p {
  margin: 0 0 12px 0;
  font-size: var(--text-xs);
  color: var(--text-secondary, #4b5563);
}

/* Stats Grid */
.insight-stats {
  display: flex;
  gap: 24px;
  margin-top: 12px;
}

.stat {
  text-align: center;
}

.stat.primary .value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-active, #2563eb);
}

.stat .value {
  display: block;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
}

.stat .label {
  font-size: var(--text-micro);
  color: var(--text-tertiary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Comparison Panel */
.comparison-header {
  margin-bottom: 16px;
}

.comparison-header h3 {
  margin: 0 0 4px 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.comparison-header p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary, #4b5563);
}

.comparison-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comparison-item {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 12px 16px;
}

.comparison-metric {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
}

.comparison-bar {
  position: relative;
  height: 8px;
  background: var(--bg-secondary, #f3f4f6);
  border-radius: 4px;
  margin: 8px 0;
}

.comparison-bar .range {
  position: absolute;
  left: 25%;
  width: 50%;
  height: 100%;
  background: var(--bg-tertiary, #e5e7eb);
  border-radius: 4px;
}

.comparison-bar .marker {
  position: absolute;
  top: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-active, #2563eb);
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transform: translateX(-50%);
}

.comparison-bar .marker.high {
  background: #22c55e;
}

.comparison-bar .marker.medium {
  background: #f59e0b;
}

.comparison-bar .marker.low {
  background: #ef4444;
}

.comparison-text {
  font-size: var(--text-xs-sm);
  font-weight: 500;
  margin-top: 8px;
}

.comparison-text.high {
  color: #22c55e;
}

.comparison-text.medium {
  color: #f59e0b;
}

.comparison-text.low {
  color: #ef4444;
}

/* Loading & Empty States */
.loading, .empty {
  text-align: center;
  padding: 32px;
  color: var(--text-tertiary, #6b7280);
  font-size: var(--text-sm);
}

/* Dark Theme Support */
[data-theme="dark"] .collaborative-panel,
[data-theme="dark"] .insight-card,
[data-theme="dark"] .comparison-item {
  background: var(--bg-primary, #1f2937);
  border-color: var(--border-color, #374151);
}

[data-theme="dark"] .insight-tab {
  background: var(--bg-secondary, #374151);
  border-color: var(--border-color, #4b5563);
  color: var(--text-secondary, #d1d5db);
}

[data-theme="dark"] .insight-tab.active {
  background: var(--color-active, #3b82f6);
  border-color: var(--color-active, #3b82f6);
}

/* ============================================================
   CYCLE 169: Profile Sync UI Styles
   ============================================================ */

.sync-ui-container {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    color: var(--text-primary, #e6edf3);
}

.sync-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-primary, rgba(240,246,252,0.08));
}

.sync-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-md);
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-primary, #e6edf3);
}

.sync-icon {
    font-size: var(--text-lg);
}

.sync-description {
    font-size: var(--text-xs-sm);
    color: var(--text-muted, #8b949e);
    line-height: 1.5;
    margin: 0;
}

.sync-section {
    margin-bottom: 24px;
}

.sync-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sync-section-title {
    font-size: var(--text-xs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #c9d1d9);
    margin: 0;
}

/* Sync Key Section */
.sync-key-display {
    background: var(--bg-secondary, rgba(255,255,255,0.04));
    border: 1px solid var(--border-primary, rgba(240,246,252,0.08));
    border-radius: 8px;
    padding: 16px;
}

.sync-key-present {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sync-key-value {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sync-key-code {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    background: var(--bg-sunken, #050505);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-primary, rgba(240,246,252,0.08));
    color: var(--accent-orange, #ff6600);
}

.sync-key-badge {
    font-size: var(--text-micro);
    padding: 4px 10px;
    background: rgba(0, 200, 83, 0.15);
    color: #00c853;
    border-radius: 4px;
    border: 1px solid rgba(0, 200, 83, 0.3);
}

.sync-key-actions {
    display: flex;
    gap: 8px;
}

.sync-key-btn {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-micro);
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border-primary, rgba(240,246,252,0.15));
    color: var(--text-secondary, #c9d1d9);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sync-key-btn:hover {
    background: var(--bg-tertiary, rgba(255,255,255,0.08));
    border-color: var(--border-secondary, rgba(240,246,252,0.15));
}

.sync-key-btn--danger {
    border-color: rgba(255, 61, 61, 0.4);
    color: #ff3d3d;
}

.sync-key-btn--danger:hover {
    background: rgba(255, 61, 61, 0.1);
    border-color: rgba(255, 61, 61, 0.6);
}

.sync-key-hint {
    font-size: var(--text-micro);
    color: var(--text-muted, #8b949e);
    margin: 0;
    font-style: italic;
}

.sync-key-missing {
    text-align: center;
    padding: 24px;
}

.sync-key-message {
    font-size: var(--text-xs);
    color: var(--text-muted, #8b949e);
    margin: 0 0 16px 0;
}

.sync-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs-sm);
    font-weight: 500;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--accent-orange, #ff6600), #ff8c00);
    border: none;
    color: #000;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sync-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
}

.sync-generate-btn .btn-icon {
    font-size: var(--text-sm);
}

/* Devices Section */
.sync-refresh-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #8b949e);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.sync-refresh-btn:hover {
    background: var(--bg-secondary, rgba(255,255,255,0.04));
    color: var(--text-secondary, #c9d1d9);
}

.refresh-icon {
    font-size: var(--text-sm);
    display: inline-block;
    transition: transform 0.3s ease;
}

.sync-refresh-btn:hover .refresh-icon {
    transform: rotate(180deg);
}

.sync-devices-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Apply stagger choreography to device list */
.sync-devices-list.stagger-enabled {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sync-devices-list.stagger-enabled > * {
    opacity: 0;
    animation: staggerFadeIn var(--duration-base) var(--ease-stagger) both;
}
.sync-devices-list.stagger-enabled > .sync-device-item:nth-child(1) { animation-delay: var(--stagger-1); }
.sync-devices-list.stagger-enabled > .sync-device-item:nth-child(2) { animation-delay: var(--stagger-2); }
.sync-devices-list.stagger-enabled > .sync-device-item:nth-child(3) { animation-delay: var(--stagger-3); }
.sync-devices-list.stagger-enabled > .sync-device-item:nth-child(4) { animation-delay: var(--stagger-4); }
.sync-devices-list.stagger-enabled > .sync-device-item:nth-child(5) { animation-delay: var(--stagger-5); }
.sync-devices-list.stagger-enabled > .sync-device-item:nth-child(6) { animation-delay: var(--stagger-6); }
.sync-devices-list.stagger-enabled > .sync-device-item:nth-child(7) { animation-delay: var(--stagger-7); }
.sync-devices-list.stagger-enabled > .sync-device-item:nth-child(8) { animation-delay: var(--stagger-8); }
.sync-devices-list.stagger-enabled > .sync-device-item:nth-child(9) { animation-delay: var(--stagger-9); }
.sync-devices-list.stagger-enabled > .sync-device-item:nth-child(10) { animation-delay: var(--stagger-10); }

.sync-devices-empty {
    text-align: center;
    padding: 32px 24px;
    color: var(--text-muted, #8b949e);
}

.sync-devices-empty .empty-icon {
    font-size: var(--text-2xl);
    display: block;
    margin-bottom: 12px;
    opacity: 0.5;
}

.sync-devices-empty p {
    margin: 0;
    font-size: var(--text-xs-sm);
}

.sync-devices-loading {
    text-align: center;
    padding: 32px 24px;
    color: var(--text-muted, #8b949e);
}

.loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 102, 0, 0.2);
    border-top-color: var(--accent-orange, #ff6600);
    border-radius: 50%;
    animation: syncSpinner 0.8s linear infinite;
    margin-bottom: 12px;
}

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

.sync-device-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary, rgba(255,255,255,0.04));
    border: 1px solid var(--border-primary, rgba(240,246,252,0.08));
    border-radius: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sync-device-item:hover {
    border-color: var(--border-secondary, rgba(240,246,252,0.15));
}

.sync-device-current {
    border-color: rgba(0, 200, 83, 0.3);
    background: rgba(0, 200, 83, 0.05);
}

.sync-device-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sync-device-icon {
    font-size: var(--text-lg);
}

.sync-device-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sync-device-name {
    font-weight: 500;
    color: var(--text-secondary, #c9d1d9);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sync-device-badge {
    font-size: var(--text-3xs);
    padding: 2px 8px;
    background: rgba(0, 200, 83, 0.15);
    color: #00c853;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sync-device-meta {
    font-size: var(--text-micro);
    color: var(--text-muted, #8b949e);
}

.sync-device-remove {
    background: transparent;
    border: none;
    color: var(--text-muted, #8b949e);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    font-size: var(--text-sm);
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.sync-device-remove:hover {
    background: rgba(255, 61, 61, 0.1);
    color: #ff3d3d;
}

/* Actions Section */
.sync-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sync-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-micro);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.sync-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sync-btn-primary {
    background: linear-gradient(135deg, var(--accent-orange, #ff6600), #ff8c00);
    border: none;
    color: #000;
}

.sync-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);
}

.sync-btn-secondary {
    background: transparent;
    border: 1px solid var(--border-primary, rgba(240,246,252,0.15));
    color: var(--text-secondary, #c9d1d9);
}

.sync-btn-secondary:hover:not(:disabled) {
    background: var(--bg-secondary, rgba(255,255,255,0.04));
    border-color: var(--border-secondary, rgba(240,246,252,0.25));
}

.sync-action-btn .btn-icon {
    font-size: var(--text-xs-sm);
}

/* Sync Status */
.sync-status {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs-sm);
    animation: syncStatusIn 0.3s ease;
}

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

.sync-status--success {
    background: rgba(0, 200, 83, 0.1);
    border: 1px solid rgba(0, 200, 83, 0.3);
    color: #00c853;
}

.sync-status--error {
    background: rgba(255, 61, 61, 0.1);
    border: 1px solid rgba(255, 61, 61, 0.3);
    color: #ff3d3d;
}

.sync-status--info {
    background: rgba(61, 184, 232, 0.1);
    border: 1px solid rgba(61, 184, 232, 0.3);
    color: #3db8e8;
}

.sync-status--warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.status-icon {
    font-size: var(--text-sm);
}

/* Security Note */
.sync-security-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: rgba(61, 184, 232, 0.05);
    border: 1px solid rgba(61, 184, 232, 0.2);
    border-radius: 8px;
    font-size: var(--text-micro);
    color: var(--text-muted, #8b949e);
    line-height: 1.5;
}

.security-icon {
    font-size: var(--text-md);
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .sync-actions {
        flex-direction: column;
    }
    
    .sync-action-btn {
        justify-content: center;
    }
    
    .sync-key-actions {
        flex-direction: column;
    }
    
    .sync-device-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .sync-device-remove {
        align-self: flex-end;
    }
}

/* ============================================================
   Cycle 172: Predictive Sync UI Styles
   ============================================================ */

/* Predictive Sync Panel */
.predictive-sync-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 320px;
    max-height: 80vh;
    background: var(--glass-bg-heavy);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.predictive-sync-panel.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.predictive-sync-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--gradient-surface);
}

.predictive-sync-header .panel-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.predictive-sync-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-lg);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

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

/* Predictive Sync Content */
.predictive-sync-content {
    padding: 16px 20px;
    max-height: calc(80vh - 60px);
    overflow-y: auto;
}

.predictive-sync-content h4 {
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 12px 0;
}

.predictions-section {
    margin-bottom: 20px;
}

/* Prediction List */
.prediction-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Apply stagger choreography to prediction list */
.prediction-list.stagger-enabled {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.prediction-list.stagger-enabled > * {
    opacity: 0;
    animation: staggerFadeIn var(--duration-base) var(--ease-stagger) both;
}
.prediction-list.stagger-enabled > .prediction-item:nth-child(1) { animation-delay: var(--stagger-1); }
.prediction-list.stagger-enabled > .prediction-item:nth-child(2) { animation-delay: var(--stagger-2); }
.prediction-list.stagger-enabled > .prediction-item:nth-child(3) { animation-delay: var(--stagger-3); }
.prediction-list.stagger-enabled > .prediction-item:nth-child(4) { animation-delay: var(--stagger-4); }
.prediction-list.stagger-enabled > .prediction-item:nth-child(5) { animation-delay: var(--stagger-5); }
.prediction-list.stagger-enabled > .prediction-item:nth-child(6) { animation-delay: var(--stagger-6); }
.prediction-list.stagger-enabled > .prediction-item:nth-child(7) { animation-delay: var(--stagger-7); }
.prediction-list.stagger-enabled > .prediction-item:nth-child(8) { animation-delay: var(--stagger-8); }
.prediction-list.stagger-enabled > .prediction-item:nth-child(9) { animation-delay: var(--stagger-9); }
.prediction-list.stagger-enabled > .prediction-item:nth-child(10) { animation-delay: var(--stagger-10); }

.prediction-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.prediction-error {
    padding: 16px;
    background: rgba(220, 38, 38, 0.05);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 8px;
    color: var(--color-error);
    font-size: var(--text-xs);
}

/* Prediction Item */
.prediction-item {
    background: var(--bg-field);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.prediction-item:hover {
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.prediction-item.syncing {
    opacity: 0.7;
    pointer-events: none;
}

.prediction-item.syncing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

/* Confidence Levels */
.prediction-item.confidence-high {
    border-left: 3px solid var(--color-success);
}

.prediction-item.confidence-medium {
    border-left: 3px solid #f59e0b;
}

.prediction-item.confidence-low {
    border-left: 3px solid var(--text-muted);
}

.prediction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.prediction-trigger {
    font-size: var(--text-xs-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.prediction-confidence {
    font-size: var(--text-xs-sm);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--bg-chrome);
}

.confidence-high .prediction-confidence {
    background: rgba(22, 163, 74, 0.1);
    color: var(--color-success);
}

.confidence-medium .prediction-confidence {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.confidence-low .prediction-confidence {
    background: rgba(112, 111, 130, 0.1);
    color: var(--text-muted);
}

/* Data Type Tags */
.prediction-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.data-type-tag {
    font-size: var(--text-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    background: var(--color-active-soft);
    color: var(--color-active);
    border-radius: 4px;
}

/* Prediction Reason */
.prediction-reason {
    font-size: var(--text-xs-sm);
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}

.prediction-time {
    font-size: var(--text-micro);
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Prediction Actions */
.prediction-actions {
    display: flex;
    gap: 8px;
}

.btn-sync-now,
.btn-dismiss {
    flex: 1;
    padding: 8px 12px;
    font-size: var(--text-xs-sm);
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.btn-sync-now {
    background: var(--color-active);
    color: white;
    border: none;
}

.btn-sync-now:hover {
    background: var(--text-link-hover);
    transform: translateY(-1px);
}

.btn-dismiss {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
}

.btn-dismiss:hover {
    background: var(--bg-chrome);
    color: var(--text-secondary);
}

/* Metrics Section */
.prediction-metrics {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-chrome);
    border-radius: 10px;
}

.prediction-metrics h4 {
    margin-bottom: 12px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.metric-item {
    text-align: center;
}

.metric-value {
    display: block;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.metric-label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* Recommendations Section */
.prediction-recommendations h4 {
    margin-bottom: 12px;
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recommendation-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-field);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.recommendation-icon {
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.recommendation-text {
    font-size: var(--text-xs-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Toggle Button */
.predictive-sync-toggle {
    font-size: var(--text-md);
    padding: 6px 10px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.predictive-sync-toggle:hover {
    background: var(--bg-chrome);
    color: var(--text-primary);
}

/* Sidebar Integration */
.sidebar .predictive-sync-panel,
.panel-sidebar .predictive-sync-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-height: none;
    margin-top: 16px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.sidebar .predictive-sync-panel .predictive-sync-close,
.panel-sidebar .predictive-sync-panel .predictive-sync-close {
    display: none;
}

/* Scrollbar Styling */
.predictive-sync-content::-webkit-scrollbar {
    width: 6px;
}

.predictive-sync-content::-webkit-scrollbar-track {
    background: transparent;
}

.predictive-sync-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.predictive-sync-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .predictive-sync-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    
    .predictive-sync-panel.visible {
        transform: translateY(0);
    }
    
    .prediction-actions {
        flex-direction: column;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .metric-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        background: var(--bg-field);
        border-radius: 6px;
    }
    
    .metric-value {
        margin-bottom: 0;
    }
}

/* ============================================================================
   INTELLIGENCE LAB EDITORIAL OVERRIDES
   Premium dashboard treatment for the chat interface and side panels.
   ============================================================================ */

:root {
    --lab-bg: hsl(220 28% 97%);
    --lab-bg-soft: hsl(220 22% 99%);
    --lab-surface: rgba(255, 255, 255, 0.84);
    --lab-surface-strong: rgba(255, 255, 255, 0.94);
    --lab-surface-muted: rgba(245, 248, 252, 0.86);
    --lab-border: rgba(15, 23, 42, 0.09);
    --lab-border-strong: rgba(15, 23, 42, 0.16);
    --lab-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.05);
    --lab-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.08);
    --lab-shadow-lg: 0 28px 72px rgba(15, 23, 42, 0.12);
    --lab-accent: hsl(220 80% 46%);
    --lab-accent-2: hsl(195 78% 38%);
    --lab-accent-soft: rgba(37, 99, 235, 0.10);
    --lab-accent-soft-2: rgba(15, 118, 110, 0.08);
}

.terminal {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 10% 12%, rgba(37, 99, 235, 0.08), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(15, 118, 110, 0.06), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(37, 99, 235, 0.05), transparent 34%),
        linear-gradient(180deg, var(--lab-bg) 0%, var(--lab-bg-soft) 100%);
}

.terminal::before,
.terminal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.terminal::before {
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
    opacity: 0.28;
}

.terminal::after {
    background-image: radial-gradient(rgba(15, 23, 42, 0.035) 0.6px, transparent 0.6px);
    background-size: 14px 14px;
    opacity: 0.18;
}

.terminal > * {
    position: relative;
    z-index: 1;
}

.header-bar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.88) 100%);
    border-bottom: 1px solid var(--lab-border);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.72) inset,
        0 20px 50px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.header-bar::after {
    content: "";
    position: absolute;
    left: clamp(16px, 2vw, 24px);
    right: clamp(16px, 2vw, 24px);
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.35), transparent);
    pointer-events: none;
}

.header-left,
.header-right,
.header-group {
    position: relative;
    z-index: 1;
}

.header-logo {
    font-family: var(--font-display, var(--font-ui));
    letter-spacing: -0.045em;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    text-wrap: nowrap;
}

.header-status {
    border: 1px solid var(--lab-border);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-secondary);
    border-radius: 999px;
    box-shadow: var(--lab-shadow-sm);
}

.header-status-dot {
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.08);
    animation: labStatusPulse 2.8s ease-in-out infinite;
}

@keyframes labStatusPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.88);
        opacity: 0.72;
    }
}

.header-url {
    border: 1px solid var(--lab-border);
    background: rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    color: var(--text-secondary);
    box-shadow: var(--lab-shadow-sm);
}

.header-action-btn {
    border: 1px solid var(--lab-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-secondary);
    box-shadow: var(--lab-shadow-sm);
    transition:
        transform var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}

.header-action-btn:hover,
.header-action-btn:focus-visible {
    transform: translateY(-1px);
    border-color: var(--lab-border-strong);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    box-shadow: var(--lab-shadow-md);
}

.terminal-body {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.20), transparent 16%),
        transparent;
}

.chat-area {
    background: transparent;
}

.chat-panes {
    padding: clamp(10px, 1.4vw, 18px);
}

.chat-columns {
    gap: 12px;
    background: transparent;
}

.chat-column {
    position: relative;
    border: 1px solid var(--lab-border);
    border-radius: 24px;
    background:
        linear-gradient(180deg, var(--lab-surface-strong) 0%, var(--lab-surface) 100%);
    box-shadow: var(--lab-shadow-sm);
    overflow: hidden;
}

.chat-column::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 20%);
    pointer-events: none;
}

.chat-column--primary {
    flex: 1.35;
    border-color: rgba(37, 99, 235, 0.14);
    box-shadow: var(--lab-shadow-lg);
}

.chat-column--comparison {
    opacity: 0;
    transform: translateX(10px);
    transition:
        flex-basis var(--duration-slow) var(--ease-out),
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}

.chat-column--comparison.active {
    width: 300px;
    opacity: 1;
    transform: translateX(0);
    transition: width var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.column-header {
    position: relative;
    z-index: 1;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.94));
    border-bottom: 1px solid var(--lab-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.column-model-name {
    font-size: var(--text-xs-sm);
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-primary);
}

.column-badge {
    border-radius: 999px;
    border-color: var(--lab-border);
    background: rgba(15, 23, 42, 0.04);
    color: var(--text-muted);
}

.column-badge--primary {
    background: var(--lab-accent-soft);
    border-color: rgba(37, 99, 235, 0.18);
    color: var(--lab-accent);
}

.column-collapse-btn {
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.03);
}

.column-collapse-btn:hover {
    background: rgba(37, 99, 235, 0.08);
}

.messages-container {
    padding: clamp(18px, 2vw, 28px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 14%);
}

.messages-container > .message {
    max-width: 920px;
}

.message {
    border-radius: 18px;
    border-color: rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--lab-shadow-sm);
}

.message.user {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(15, 118, 110, 0.04));
    border-color: rgba(37, 99, 235, 0.12);
}

.message.assistant {
    background: rgba(255, 255, 255, 0.88);
}

.message-header {
    gap: 10px;
}

.message-author {
    font-weight: 700;
    letter-spacing: 0.03em;
}

.message-time {
    color: var(--text-muted);
}

.empty-state {
    padding: clamp(32px, 4vw, 72px) clamp(20px, 4vw, 40px) clamp(32px, 5vw, 56px);
    min-height: 66vh;
    border: 1px solid var(--lab-border);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.10), transparent 38%),
        radial-gradient(circle at 82% 72%, rgba(15, 118, 110, 0.05), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.80), rgba(248, 250, 252, 0.64));
    box-shadow: var(--lab-shadow-lg);
}

.empty-state-hero {
    margin-bottom: 28px;
}

.empty-state-cloud {
    color: var(--lab-accent);
    filter: drop-shadow(0 10px 18px rgba(37, 99, 235, 0.18));
}

.empty-state-heading {
    font-size: clamp(2.4rem, 4.8vw, 4.5rem);
    line-height: 1;
    text-wrap: balance;
    background: linear-gradient(135deg, var(--text-primary) 8%, var(--lab-accent) 54%, var(--lab-accent-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-state-tagline {
    max-width: 52ch;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.6;
    color: var(--text-secondary);
}

.empty-state-cards {
    gap: 14px;
    max-width: 920px;
}

.empty-state-card {
    min-height: 160px;
    border: 1px solid var(--lab-border);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.82));
    box-shadow: var(--lab-shadow-sm);
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        background-color var(--duration-base) var(--ease-out);
}

.empty-state-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lab-shadow-md);
    border-color: rgba(37, 99, 235, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.90));
}

.empty-state-card-icon {
    border: 1px solid rgba(37, 99, 235, 0.12);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(15, 118, 110, 0.08));
    color: var(--lab-accent);
}

.empty-state-card-title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.empty-state-card-prompt {
    color: var(--text-secondary);
}

.empty-state-features {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.thoughts-column {
    border-left: 1px solid var(--lab-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 249, 252, 0.84));
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.7);
}

.thoughts-column-header {
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid var(--lab-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.thoughts-column-title {
    color: var(--text-secondary);
    letter-spacing: 0.14em;
}

.thoughts-column-count {
    background: var(--lab-accent-soft);
    color: var(--lab-accent);
}

.thoughts-column-messages {
    padding: 12px;
}

.thoughts-column-empty {
    margin: 12px;
    min-height: 160px;
    border: 1px dashed rgba(37, 99, 235, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.04), rgba(15, 118, 110, 0.02));
}

.thoughts-column-empty-text {
    max-width: 24ch;
    line-height: 1.65;
    color: var(--text-secondary);
    opacity: 0.78;
}

.thoughts-column-toggle {
    background: linear-gradient(180deg, var(--lab-surface-strong), var(--lab-surface));
    border-color: var(--lab-border);
    color: var(--lab-accent);
    box-shadow: var(--lab-shadow-md);
}

.thoughts-column-toggle:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.92));
}

[data-theme="dark"] .terminal {
    background:
        radial-gradient(circle at 12% 10%, rgba(59, 130, 246, 0.14), transparent 24%),
        radial-gradient(circle at 86% 18%, rgba(20, 184, 166, 0.08), transparent 22%),
        linear-gradient(180deg, hsl(222 28% 10%) 0%, hsl(222 24% 7%) 100%);
}

[data-theme="dark"] .header-bar,
[data-theme="dark"] .chat-column,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .thoughts-column {
    background:
        linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(15, 23, 42, 0.86));
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .header-bar {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 20px 50px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .header-action-btn,
[data-theme="dark"] .header-url,
[data-theme="dark"] .header-status,
[data-theme="dark"] .column-badge,
[data-theme="dark"] .message,
[data-theme="dark"] .empty-state-card {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .message.user {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(20, 184, 166, 0.08));
}

[data-theme="dark"] .empty-state-heading {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 15%, rgba(147, 197, 253, 0.95) 55%, rgba(94, 234, 212, 0.90) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 1024px) {
    .chat-panes {
        padding: 10px;
    }

    .chat-columns {
        gap: 10px;
    }

    .chat-column--comparison.active {
        width: 300px;
    }

    .thoughts-column {
        width: 320px;
        max-width: 320px;
    }
}

@media (max-width: 768px) {
    .header-bar {
        padding-inline: var(--space-3);
    }

    .header-logo {
        font-size: var(--text-sm);
    }

    .header-action-btn {
        min-height: 40px;
        padding-inline: 12px;
    }

    .chat-panes {
        padding: 8px;
    }

    .chat-columns {
        gap: 8px;
    }

    .chat-column,
    .empty-state,
    .thoughts-column {
        border-radius: 20px;
    }

    .messages-container {
        padding: 16px 14px;
    }

    .empty-state {
        min-height: auto;
        padding: 24px 16px 28px;
    }

    .empty-state-cards {
        grid-template-columns: 1fr;
    }

    .empty-state-card {
        min-height: auto;
    }

    .thoughts-column {
        width: 100%;
        max-width: 100%;
    }

    .thoughts-column-empty {
        margin: 10px;
        min-height: 120px;
    }
}

@media (max-width: 640px) {
    .chat-columns {
        gap: 6px;
    }

    .column-header {
        padding: 12px 14px;
    }

    .column-model-name {
        font-size: var(--text-2xs);
        letter-spacing: 0.06em;
    }

    .message {
        border-radius: 16px;
    }

    .empty-state-heading {
        font-size: clamp(2rem, 12vw, 3rem);
    }

    .empty-state-features {
        gap: 8px;
        justify-content: flex-start;
    }

    .thoughts-column-toggle {
        right: 12px;
        bottom: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-status-dot {
        animation: none;
    }

    .chat-column--comparison,
    .empty-state-card,
    .header-action-btn {
        transition: none;
    }
}


/* ── Thinking Mode Indicator ──
   Apple-style elegant notification for adaptive depth selection
*/
.thinking-mode-indicator {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-reveal), transform 0.3s var(--ease-reveal);
}

.thinking-mode-indicator.thinking-mode-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.thinking-mode-indicator.thinking-mode-hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
}

.thinking-mode-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-family: var(--font-ui);
    animation: thinking-mode-bounce 0.5s var(--ease-acknowledge);
}

@keyframes thinking-mode-bounce {
    0% { transform: scale(0.9); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.thinking-mode-icon {
    font-size: var(--text-lg);
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.thinking-mode-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.thinking-mode-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.thinking-mode-desc {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    font-weight: 400;
}

/* Depth-specific accent colors */
.thinking-mode-badge[data-depth="shallow"] {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, var(--glass-bg-heavy) 100%);
}

.thinking-mode-badge[data-depth="medium"] {
    border-color: rgba(37, 99, 235, 0.3);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, var(--glass-bg-heavy) 100%);
}

.thinking-mode-badge[data-depth="deep"] {
    border-color: rgba(124, 58, 237, 0.3);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, var(--glass-bg-heavy) 100%);
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .thinking-mode-indicator {
        bottom: 80px;
        left: 16px;
        right: 16px;
        transform: translateY(20px);
    }
    
    .thinking-mode-indicator.thinking-mode-visible {
        transform: translateY(0);
    }
    
    .thinking-mode-indicator.thinking-mode-hiding {
        transform: translateY(-10px);
    }
    
    .thinking-mode-badge {
        width: 100%;
        justify-content: center;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .thinking-mode-indicator {
        transition: opacity 0.15s ease;
    }
    
    .thinking-mode-badge {
        animation: none;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .thinking-mode-badge {
        box-shadow: 
            0 4px 24px rgba(0, 0, 0, 0.2),
            0 1px 2px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}


/* ============================================================================
   MOBILE UX — 8 Core Touch Target Optimizations
   WCAG 2.1 AAA / Apple HIG compliant: minimum 44×44px tap areas.
   Scoped to coarse pointers so desktop layouts remain unchanged.
   ============================================================================ */

@media (pointer: coarse) {

    /* 1. Buttons — primary actions, form submits, CTAs */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-login,
    .send-button,
    .template-btn,
    .toggle-btn,
    .queue-clear-btn,
    .delete-confirm-btn,
    .error-retry-btn,
    .error-depth-btn,
    .error-model-btn {
        min-height: 44px;
        min-width: 44px;
        padding-top: max(var(--btn-padding-y, 8px), 10px);
        padding-bottom: max(var(--btn-padding-y, 8px), 10px);
    }

    /* 2. Icon buttons — header actions, message actions, toolbar, kebab, collapse */
    .header-action-btn,
    .message-action-btn,
    .conversation-kebab-btn,
    .toolbar-btn,
    .column-collapse-btn,
    .admin-panel-copy-btn,
    .admin-panel-refresh-btn,
    .code-copy-btn,
    .rc-copy-btn,
    .rc-export-btn,
    .rc-search-nav-btn,
    .psych-copy-btn,
    .cl-toggle-btn,
    .mac-button {
        min-height: 44px;
        min-width: 44px;
        padding: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 3. List items — conversation rows, workspace selectors, dropdown rows */
    .conversation-item,
    .workspace-selector-item,
    .conversation-item-clickable,
    .mobile-overflow-dropdown button[role="menuitem"],
    .mn-list-item-enter {
        min-height: 48px; /* 44px target + visual breathing room */
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* 4. Nav links — sidebar, app nav, tab bars, breadcrumbs */
    .nav-link,
    .cw-app-nav-link,
    .nav-btn,
    .sidebar-link,
    .sidebar-btn {
        min-height: 44px;
        min-width: 44px;
        padding-top: max(var(--link-padding-y, 6px), 10px);
        padding-bottom: max(var(--link-padding-y, 6px), 10px);
        display: inline-flex;
        align-items: center;
    }

    /* 5. Checkbox / radio labels — custom selectors and native inputs */
    .conv-select-checkbox,
    .terms-check,
    .compare-model-item input[type="checkbox"],
    .compare-model-item input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    .conv-select-checkbox label,
    .terms-check label,
    .compare-model-item label {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    /* 6. Chips — topic tags, parameter chips, variant chips, conversation pills */
    .cw-chip,
    .variant-chip,
    .scenario-param-chip,
    .topic-tag,
    .conversation-tag-pill,
    .conversation-tag-trigger,
    .tag-option,
    .tag-create button {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 7. Tab items — settings tabs, admin tabs, insight tabs, dev tabs */
    .tab-button,
    .admin-panel-tab,
    .insight-tab,
    .dev-tab-nav button {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 8. FABs — floating action buttons, scroll-to-top, quick-action orbs */
    .fab,
    .scroll-to-top-btn,
    .quick-action-btn,
    [class*="fab"] {
        min-height: 48px;
        min-width: 48px;
        padding: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Extra spacing for FABs so they don't hug screen edges on notched devices */
    .fab,
    .scroll-to-top-btn,
    .quick-action-btn {
        margin-bottom: env(safe-area-inset-bottom, 0px);
        margin-right: env(safe-area-inset-right, 0px);
        margin-left: env(safe-area-inset-left, 0px);
    }
}

/* Orientation-specific: landscape phones need slightly larger horizontal spacing */
@media (pointer: coarse) and (orientation: landscape) {
    .fab,
    .scroll-to-top-btn,
    .quick-action-btn {
        margin-right: max(12px, env(safe-area-inset-right, 0px));
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL-DRIVEN REVEAL UTILITIES — 8 viewport-entry animation classes
   Progressive enhancement: animation-timeline: view() where supported,
   with fixed-duration keyframe fallbacks for legacy browsers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Apple-style easing custom property (scoped to this enhancement) ────── */
:root {
  --ease-apple-smooth: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Fallback keyframe animations for browsers without scroll-driven support
   These play once on load with a polished fixed duration. Browsers that
   support animation-timeline: view() override them in the @supports block.  */

@keyframes mn-reveal-fade-up-fallback {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mn-reveal-fade-left-fallback {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mn-reveal-scale-fallback {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes mn-reveal-blur-fallback {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes mn-reveal-slide-right-fallback {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mn-reveal-rotate-fallback {
  from { opacity: 0; transform: rotate(-8deg) scale(0.96); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes mn-reveal-flip-fallback {
  from { opacity: 0; transform: perspective(600px) rotateX(-15deg); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0); }
}

@keyframes mn-reveal-zoom-out-fallback {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Base classes: fallback fixed-duration entrance animations ──────────── */
.mn-reveal-fade-up {
  animation: mn-reveal-fade-up-fallback 0.65s var(--ease-apple-smooth) both;
}

.mn-reveal-fade-left {
  animation: mn-reveal-fade-left-fallback 0.65s var(--ease-apple-smooth) both;
}

.mn-reveal-scale {
  animation: mn-reveal-scale-fallback 0.65s var(--ease-apple-smooth) both;
}

.mn-reveal-blur {
  animation: mn-reveal-blur-fallback 0.65s var(--ease-apple-smooth) both;
}

.mn-reveal-slide-right {
  animation: mn-reveal-slide-right-fallback 0.65s var(--ease-apple-smooth) both;
}

.mn-reveal-rotate {
  animation: mn-reveal-rotate-fallback 0.65s var(--ease-apple-smooth) both;
}

.mn-reveal-flip {
  animation: mn-reveal-flip-fallback 0.7s var(--ease-apple-smooth) both;
}

.mn-reveal-zoom-out {
  animation: mn-reveal-zoom-out-fallback 0.7s var(--ease-apple-smooth) both;
}

/* ── Reduced motion: disable fallback entrance animations ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .mn-reveal-fade-up,
  .mn-reveal-fade-left,
  .mn-reveal-scale,
  .mn-reveal-blur,
  .mn-reveal-slide-right,
  .mn-reveal-rotate,
  .mn-reveal-flip,
  .mn-reveal-zoom-out {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL-DRIVEN PROGRESSIVE ENHANCEMENT
   Replaces fixed-duration animations with viewport-linked animations when
   the browser supports animation-timeline: scroll().
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: scroll()) {

  /* ── Scroll-linked keyframes (linear is required for scrubbed timelines) ─ */
  @keyframes mn-reveal-fade-up-scroll {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes mn-reveal-fade-left-scroll {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes mn-reveal-scale-scroll {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes mn-reveal-blur-scroll {
    from { opacity: 0; filter: blur(8px); }
    to   { opacity: 1; filter: blur(0); }
  }

  @keyframes mn-reveal-slide-right-scroll {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes mn-reveal-rotate-scroll {
    from { opacity: 0; transform: rotate(-8deg) scale(0.96); }
    to   { opacity: 1; transform: rotate(0) scale(1); }
  }

  @keyframes mn-reveal-flip-scroll {
    from { opacity: 0; transform: perspective(600px) rotateX(-15deg); }
    to   { opacity: 1; transform: perspective(600px) rotateX(0); }
  }

  @keyframes mn-reveal-zoom-out-scroll {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* ── Viewport-entry animation classes ─────────────────────────────────── */

  /** .mn-reveal-fade-up
   *  Fades in while translating upward from 24px below as the element
   *  enters the viewport. Scrubbed from hidden at entry-start to fully
   *  visible by 40% through the entry range.                                 */
  .mn-reveal-fade-up {
    animation: mn-reveal-fade-up-scroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /** .mn-reveal-fade-left
   *  Fades in while translating from 24px left to its natural position
   *  as it scrolls into view.                                                */
  .mn-reveal-fade-left {
    animation: mn-reveal-fade-left-scroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /** .mn-reveal-scale
   *  Scales up from 0.92 to 1.0 while fading in during viewport entry.       */
  .mn-reveal-scale {
    animation: mn-reveal-scale-scroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /** .mn-reveal-blur
   *  Removes an 8px Gaussian blur while fading in as the element enters.     */
  .mn-reveal-blur {
    animation: mn-reveal-blur-scroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /** .mn-reveal-slide-right
   *  Fades in while translating from 24px right to its natural position.      */
  .mn-reveal-slide-right {
    animation: mn-reveal-slide-right-scroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /** .mn-reveal-rotate
   *  Rotates from -8deg and scales from 0.96 while fading in on entry.       */
  .mn-reveal-rotate {
    animation: mn-reveal-rotate-scroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /** .mn-reveal-flip
   *  3D flips down from rotateX(-15deg) while fading in during entry.        */
  .mn-reveal-flip {
    animation: mn-reveal-flip-scroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /** .mn-reveal-zoom-out
   *  Zooms out from 1.08 to 1.0 while fading in as it enters the viewport.   */
  .mn-reveal-zoom-out {
    animation: mn-reveal-zoom-out-scroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  /* ── @starting-style guard for dynamically inserted elements ────────────
     Ensures freshly DOM-inserted elements begin from the hidden state
     before the scroll timeline evaluates their viewport position.            */
  @supports selector(@starting-style {}) {
    @starting-style {
      .mn-reveal-fade-up     { opacity: 0; transform: translateY(24px); }
      .mn-reveal-fade-left   { opacity: 0; transform: translateX(-24px); }
      .mn-reveal-scale       { opacity: 0; transform: scale(0.92); }
      .mn-reveal-blur        { opacity: 0; filter: blur(8px); }
      .mn-reveal-slide-right { opacity: 0; transform: translateX(24px); }
      .mn-reveal-rotate      { opacity: 0; transform: rotate(-8deg) scale(0.96); }
      .mn-reveal-flip        { opacity: 0; transform: perspective(600px) rotateX(-15deg); }
      .mn-reveal-zoom-out    { opacity: 0; transform: scale(1.08); }
    }
  }

  /* ── Reduced motion: disable all scroll-driven reveal animations ─────────
     Restores elements to their natural painted state for users who prefer
     reduced motion at the OS level.                                         */
  @media (prefers-reduced-motion: reduce) {
    .mn-reveal-fade-up,
    .mn-reveal-fade-left,
    .mn-reveal-scale,
    .mn-reveal-blur,
    .mn-reveal-slide-right,
    .mn-reveal-rotate,
    .mn-reveal-flip,
    .mn-reveal-zoom-out {
      animation: none;
      opacity: 1;
      transform: none;
      filter: none;
    }
  }

} /* end @supports (animation-timeline: scroll()) */




/* ============================================================
 *  Container Queries — Additional Component Adaptations
 *  Chat panels, dashboard cards, sidebar sections, form layouts,
 *  tables, charts, media objects, and navigation bars
 * ============================================================ */
@supports (container-type: inline-size) {

  /* ── 1. Chat Panels ─────────────────────────────────────────
     Adapt column headers and badges based on the panel width    */
  .chat-column {
    container-name: chat-panel;
    container-type: inline-size;
  }

  @container chat-panel (max-width: 320px) {
    .chat-column .column-header {
      padding: var(--space-1) var(--space-2);
      gap: var(--space-1);
    }

    .chat-column .column-badge {
      display: none;
    }

    .chat-column .column-model-name {
      font-size: var(--text-2xs);
    }
  }

  @container chat-panel (min-width: 560px) {
    .chat-column .column-header {
      padding: var(--space-3) var(--space-4);
      gap: var(--space-3);
    }

    .chat-column .column-model-name {
      font-size: var(--text-sm);
    }
  }

  /* ── 2. Dashboard Cards ─────────────────────────────────────
     Adjust padding and stat layout for narrow/wide cards        */
  .insight-card {
    container-name: dashboard-card;
    container-type: inline-size;
  }

  @container dashboard-card (max-width: 240px) {
    .insight-card {
      padding: 10px;
    }

    .insight-card .insight-header h4 {
      font-size: var(--text-xs);
    }

    .insight-card .insight-stats {
      flex-direction: column;
      gap: 8px;
    }
  }

  @container dashboard-card (min-width: 420px) {
    .insight-card {
      padding: 20px;
    }

    .insight-card .insight-header h4 {
      font-size: var(--text-base);
    }

    .insight-card .insight-stats {
      gap: 32px;
    }
  }

  /* ── 3. Sidebar Sections ────────────────────────────────────
     Tighten or loosen sidebar header spacing by section width   */
  .sidebar-header {
    container-name: sidebar-section;
    container-type: inline-size;
  }

  @container sidebar-section (max-width: 200px) {
    .sidebar-header {
      padding: var(--space-2);
      gap: var(--space-1);
    }

    .sidebar-header .sidebar-title {
      font-size: var(--text-3xs);
    }

    .sidebar-header .sidebar-btn {
      padding: 4px 8px;
      font-size: var(--text-micro);
    }
  }

  @container sidebar-section (min-width: 320px) {
    .sidebar-header {
      padding: var(--space-3) var(--space-4);
      gap: var(--space-2);
    }

    .sidebar-header .sidebar-title {
      font-size: var(--text-xs);
    }

    .sidebar-header .sidebar-btn {
      padding: 6px 12px;
      font-size: var(--text-xs);
    }
  }

  /* ── 4. Form Layouts ────────────────────────────────────────
     Scale field spacing and input padding to panel width        */
  .admin-panel-body {
    container-name: form-layout;
    container-type: inline-size;
  }

  @container form-layout (max-width: 360px) {
    .admin-panel-body .admin-panel-field {
      margin-bottom: 8px;
    }

    .admin-panel-body .admin-panel-label {
      font-size: var(--text-micro);
      letter-spacing: 0.12em;
    }

    .admin-panel-body .admin-panel-input {
      padding: 8px 10px;
      font-size: var(--text-xs);
    }
  }

  @container form-layout (min-width: 560px) {
    .admin-panel-body .admin-panel-field {
      margin-bottom: 16px;
    }

    .admin-panel-body .admin-panel-label {
      font-size: var(--text-3xs);
      letter-spacing: 0.22em;
    }

    .admin-panel-body .admin-panel-input {
      padding: 12px 14px;
      font-size: var(--text-sm);
    }
  }

  /* ── 5. Tables ──────────────────────────────────────────────
     Tighten or loosen cell padding based on section width       */
  .stats-section {
    container-name: data-table;
    container-type: inline-size;
  }

  @container data-table (max-width: 360px) {
    .stats-section .stats-section-title {
      font-size: var(--text-micro);
      margin-bottom: 6px;
    }

    .stats-section .stats-table {
      font-size: var(--text-micro);
    }

    .stats-section .stats-table th,
    .stats-section .stats-table td {
      padding: 4px 6px;
    }
  }

  @container data-table (min-width: 600px) {
    .stats-section .stats-section-title {
      font-size: var(--text-xs);
      margin-bottom: 14px;
    }

    .stats-section .stats-table th,
    .stats-section .stats-table td {
      padding: 8px 14px;
    }
  }

  /* ── 6. Charts ──────────────────────────────────────────────
     Adjust ring gaps and legend spacing to chart width          */
  .chc-chart {
    container-name: chart;
    container-type: inline-size;
  }

  @container chart (max-width: 320px) {
    .chc-chart .chc-rings {
      gap: var(--space-3);
    }

    .chc-chart .chc-ring-label {
      font-size: var(--text-micro);
    }

    .chc-chart .chc-legend {
      gap: 8px;
      margin-bottom: 10px;
    }
  }

  @container chart (min-width: 480px) {
    .chc-chart .chc-rings {
      gap: var(--space-8);
    }

    .chc-chart .chc-ring-label {
      font-size: var(--text-2xs);
    }

    .chc-chart .chc-legend {
      gap: 20px;
      margin-bottom: 22px;
    }
  }

  /* ── 7. Media Objects (Messages) ────────────────────────────
     Scale avatar, header gap, and padding to message width      */
  .message {
    container-name: media-object;
    container-type: inline-size;
  }

  @container media-object (max-width: 360px) {
    .message {
      padding: var(--space-2);
      margin-block-end: var(--space-2);
    }

    .message .message-header {
      gap: var(--space-1);
      margin-bottom: var(--space-1);
    }

    .message .message-avatar {
      width: 22px;
      height: 22px;
      font-size: var(--text-xs);
      border-radius: 8px;
    }

    .message .message-author {
      font-size: var(--text-2xs);
    }
  }

  @container media-object (min-width: 640px) {
    .message {
      padding: 20px;
      margin-block-end: 20px;
    }

    .message .message-header {
      gap: var(--space-3);
      margin-bottom: var(--space-3);
    }

    .message .message-avatar {
      width: 32px;
      height: 32px;
      font-size: var(--text-base);
      border-radius: 12px;
    }

    .message .message-author {
      font-size: var(--text-sm);
    }
  }

  /* ── 8. Navigation Bars ─────────────────────────────────────
     Adjust header padding and logo size to bar width            */
  .header-bar {
    container-name: nav-bar;
    container-type: inline-size;
  }

  @container nav-bar (max-width: 480px) {
    .header-bar {
      padding: 0 var(--space-2);
    }

    .header-bar .header-left {
      gap: var(--space-1);
    }

    .header-bar .header-logo {
      font-size: var(--text-sm);
    }
  }

  @container nav-bar (min-width: 800px) {
    .header-bar {
      padding: 0 var(--space-6);
    }

    .header-bar .header-left {
      gap: var(--space-4);
    }

    .header-bar .header-logo {
      font-size: var(--text-lg);
    }
  }

} /* end @supports (container-type: inline-size) */
/* ============================================================
   PREMIUM HOVER ELEVATION EFFECTS
   Apple-style micro-interactions with subtle translateY(-2px)
   lift and refined shadow transitions.
   ============================================================ */
:root {
    --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
    --elevation-duration: 250ms;
}

/* --- 1. Cards --- */
.card {
    transition: transform var(--elevation-duration) var(--ease-apple),
                box-shadow var(--elevation-duration) var(--ease-apple);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* --- 2. Buttons --- */
.btn,
.send-button {
    transition: background-color var(--elevation-duration) var(--ease-apple),
                color var(--elevation-duration) var(--ease-apple),
                transform var(--elevation-duration) var(--ease-apple),
                box-shadow var(--elevation-duration) var(--ease-apple),
                border-color var(--elevation-duration) var(--ease-apple);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.send-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* --- 3. List Items --- */
.conversation-item {
    transition: transform var(--elevation-duration) var(--ease-apple),
                opacity var(--elevation-duration) var(--ease-apple),
                background-color var(--elevation-duration) var(--ease-apple),
                border-color var(--elevation-duration) var(--ease-apple),
                color var(--elevation-duration) var(--ease-apple),
                box-shadow var(--elevation-duration) var(--ease-apple);
}

.conversation-item:hover {
    transform: translateX(2px) translateY(-2px) scale(1.01);
    box-shadow: 0 1px 4px light-dark(rgba(0,0,0,0.04), rgba(0,0,0,0.12)),
                0 0 0 1px light-dark(rgba(37,99,235,0.06), rgba(37,99,235,0.15)),
                0 4px 12px light-dark(rgba(0,0,0,0.03), rgba(0,0,0,0.1));
}

/* --- 4. Inputs --- */
#messageInput,
.sidebar-search-input {
    transition: transform var(--elevation-duration) var(--ease-apple),
                opacity var(--elevation-duration) var(--ease-apple),
                background-color var(--elevation-duration) var(--ease-apple),
                border-color var(--elevation-duration) var(--ease-apple),
                color var(--elevation-duration) var(--ease-apple),
                box-shadow var(--elevation-duration) var(--ease-apple);
}

#messageInput:hover:not(:focus),
.sidebar-search-input:hover:not(:focus) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* --- 5. Badges --- */
.badge {
    transition: transform var(--elevation-duration) var(--ease-apple),
                box-shadow var(--elevation-duration) var(--ease-apple);
}

.badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* --- 6. Chips --- */
.suggestion-chip {
    transition: border-color var(--elevation-duration) var(--ease-apple),
                background var(--elevation-duration) var(--ease-apple),
                color var(--elevation-duration) var(--ease-apple),
                box-shadow var(--elevation-duration) var(--ease-apple),
                transform var(--elevation-duration) var(--ease-apple);
}

.suggestion-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow), 0 4px 12px rgba(0,0,0,0.08);
}

/* --- 7. Toasts --- */
.toast-notification {
    transition: transform var(--elevation-duration) var(--ease-apple),
                opacity var(--elevation-duration) var(--ease-apple),
                background-color var(--elevation-duration) var(--ease-apple),
                border-color var(--elevation-duration) var(--ease-apple),
                color var(--elevation-duration) var(--ease-apple),
                box-shadow var(--elevation-duration) var(--ease-apple);
}

.toast-notification.show:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.toast-item {
    transition: transform var(--elevation-duration) var(--ease-apple),
                box-shadow var(--elevation-duration) var(--ease-apple);
}

.toast-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(211, 47, 47, 0.25);
}

/* --- 8. Modals --- */
.modal-panel,
.window {
    transition: transform var(--elevation-duration) var(--ease-apple),
                box-shadow var(--elevation-duration) var(--ease-apple);
}

.modal-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.window:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Reduced motion preference — disable hover lifts while preserving state changes */
@media (prefers-reduced-motion: reduce) {
    .card:hover,
    .btn:hover,
    .send-button:hover:not(:disabled),
    .conversation-item:hover,
    #messageInput:hover:not(:focus),
    .sidebar-search-input:hover:not(:focus),
    .badge:hover,
    .suggestion-chip:hover,
    .toast-notification.show:hover,
    .toast-item:hover,
    .modal-panel:hover,
    .window:hover {
        transform: none;
    }
}