/* ============================================================
   Ork Design Tokens
   Single source of truth for all design values.
   Components should reference these — never hardcode raw values.
   ============================================================ */

:root {
  /* ── Spacing Scale ── */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;

  /* ── Layout Tokens ── */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 80px;
  --titlebar-height: 38px;
  --tabbar-height: 32px;
  /* Empty lead between the window's top border and the top of the tab pills.
     SessionTabs pads its own strip by this much and paints the whole padded
     box as a window drag region, so this band is the primary place to grab
     the window from along the top edge. */
  --tabbar-top-gap: 20px;
  --actionbar-height: auto;
  --content-max-width: 800px;
  --input-max-width: 720px;

  /* Where the app's own content starts, below the frameless chrome:
     SessionTabs (tab bar + its --tabbar-top-gap pad) then TopActionBar stack
     above it. Both the main content region AND the sidebar nav align their
     first row to this, so the two never drift apart when the bar heights
     change. */
  --content-top: calc(var(--titlebar-height) + var(--tabbar-height) + var(--tabbar-top-gap));

  /* Width of the OS resize frame on a frameless window. Windows keeps
     WS_THICKFRAME under `decorations: false`, so the outermost few pixels
     are a live drag-to-resize target. Anything docked to a window edge must
     stop short of it or the window stops resizing from that edge. Set per
     platform by the component that needs it (body.platform-windows). */
  --window-edge-gutter: 0px;

  /* Width of the docked Session Changes tab (glyph 18px + 2x7px padding +
     1px border), declared here so the clearance below can be derived from it
     instead of guessed. */
  --tools-tab-width: 33px;

  /* Clearance content must leave on the right edge for the docked Session
     Changes tab. The tab is `position: fixed` and parked at the edge, so
     anything flush to that edge — the conversation scrollbar, most visibly —
     ends up underneath an opaque surface and ungrabbable. Consumed by
     ConversationArea as padding-right, which moves the scrollbar inboard
     rather than moving the tab off the edge it is docked to.

     Derived from the tab's width, because guessing is what made the first two
     attempts read as no-ops:
       20px — narrower than the 33px tab, so the scrollbar moved inboard and
              stayed underneath it. Nothing visibly changed.
       39px — the tab plus a 6px gap, but the `--window-edge-gutter` term in
              that sum was dead weight: a var() inside a custom property is
              substituted where the property is DECLARED, so it resolved
              against `:root`'s 0, never the 5px the tab is actually parked by
              on Windows. Measured at ~1px of gap, which still reads as clipped.

     `--tools-tab-gap` is the space between the tab's inner edge and the
     scrollbar track. It has to be wide enough that the two obviously do not
     touch — the tab is translucent with rounded corners, so a scrollbar
     peeking out from behind its edge reads as occluded rather than as clear.
     20px cleared it but read as dead space, so it is dialled back to 10px,
     which is still half a tab-width of clear separation. */
  --tools-tab-gap: 10px;
  --tools-tab-clearance: calc(var(--tools-tab-width) + var(--tools-tab-gap));

  /* ── Type Scale ── */
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 12px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 20px;
  --text-4xl: 24px;

  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Emoji', 'Apple Color Emoji',
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Border Radius ── */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 50%;

  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 10;
  --z-dropdown: 50;
  --z-overlay: 100;
  --z-stacked: 150;
  --z-modal: 200;
  --z-toast: 1000;

  /* ── Colors: Backgrounds ── */
  --bg-primary: #0a0608;
  --bg-secondary: rgba(35, 25, 20, 0.6);
  --bg-tertiary: rgba(60, 50, 40, 0.5);
  --bg-overlay: rgba(10, 4, 6, 0.82);
  --bg-elevated: rgba(20, 18, 16, 0.95);
  --bg-code: #1a0f12;

  /* ── Colors: Borders ── */
  --border-subtle: rgba(255, 235, 205, 0.08);
  --border-default: rgba(255, 235, 205, 0.12);
  --border-hover: rgba(255, 235, 205, 0.2);

  /* ── Colors: Text ── */
  --text-primary: #f5f5f0;
  --text-secondary: #bdb7a6;
  --text-muted: #8a8477;

  /* ── Colors: Accent (white — not crimson) ── */
  --accent-primary: #f5f5f0;
  /* Generic alias. 19 sites historically wrote var(--accent, <blue>) — but
     --accent was never defined, so the hardcoded blue fallback won in EVERY
     theme. Defined as a live alias it follows --accent-primary through the
     theme overrides below (phosphor/paper redefine --accent-primary). New
     code should still name --accent-primary directly. */
  --accent: var(--accent-primary);
  --accent-primary-glow: rgba(245, 245, 240, 0.12);
  --accent-highlight: #e07b39;
  --accent-blue: #3b82f6;
  --accent-blue-dark: #2563eb;
  --accent-purple: #8b5cf6;
  --accent-cyan: #06b6d4;
  --accent-green: #22c55e;
  --accent-red: #ef4444;
  --accent-amber: #f97316;
  --accent-yellow: #f59e0b;
  --accent-emerald: #10b981;

  /* ── Colors: Semantic (status) ── */
  --status-success: #22c55e;
  --status-success-bg: rgba(34, 197, 94, 0.15);
  --status-warning: #f59e0b;
  --status-warning-bg: rgba(245, 158, 11, 0.15);
  --status-error: #ef4444;
  --status-error-bg: rgba(239, 68, 68, 0.15);

  /* ── Colors: Diff preview (Edit/Write overlays — aud13-25) ──
   * Soft "added" green / "removed" red — the 4 base var pairs below are
   * Overridden in the bar-theme selectors so ruby/sapphire/amethyst
   * Shift the palette to match their accent. The popups use these vars
   * instead of hardcoded rgba(34,197,94,*) so the diff stat colors
   * Theme-shift with the user's bar style. */
  --diff-added-text: #4ade80;
  --diff-added-bg: rgba(34, 197, 94, 0.12);
  --diff-removed-text: #f87171;
  --diff-removed-bg: rgba(239, 68, 68, 0.08);
  --diff-context-bg: rgba(0, 0, 0, 0.18);
  --diff-surface-bg: rgba(14, 14, 16, 0.55);

  /* Yellow accent for "focus highlight" — used by the Bash command focus
   * Badge in the permission popup's displayData. */
  --accent-focus-text: #facc15;
  --accent-focus-bg: rgba(250, 204, 21, 0.12);

  /* ── Colors: White Opacity (aud13-25: additional tiers for popups) ── */
  --white-4: rgba(255, 255, 255, 0.04);
  --white-5: rgba(255, 255, 255, 0.05);
  --white-6: rgba(255, 255, 255, 0.06);
  --white-8: rgba(255, 255, 255, 0.08);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-16: rgba(255, 255, 255, 0.16);
  --white-20: rgba(255, 255, 255, 0.2);

  /* ── Colors: Black Opacity ── */
  --black-30: rgba(0, 0, 0, 0.3);
  --black-50: rgba(0, 0, 0, 0.5);

  /* ── Accent tints (aud13-25: paired with --accent-* above for
   *  Glass-tint and glass-tint-hover variants) ── */
  --accent-blue-bg: rgba(59, 130, 246, 0.12);
  --accent-blue-tint: rgba(59, 130, 246, 0.18);
  --accent-green-bg: rgba(34, 197, 94, 0.2);
  --accent-green-bg-hover: rgba(34, 197, 94, 0.32);
  --accent-red-bg: rgba(239, 68, 68, 0.16);
  --accent-amber: #f59e0b;
  --accent-amber-bg: rgba(255, 200, 50, 0.08);
  --accent-amber-bg-hover: rgba(255, 200, 50, 0.18);
  --status-success: #22c55e;
  --status-success-bg-hover: rgba(34, 197, 94, 0.32);

  /* ── Colors: Message Avatars ── */
  --avatar-user: #3b82f6;
  --avatar-assistant: #f97316;
  --avatar-system-bg: rgba(59, 130, 246, 0.15);

  /* ── Colors: Window Controls (macOS) ── */
  --window-close: #ff5f57;
  --window-minimize: #febc2e;
  --window-maximize: #28c840;

  /* ── Colors: Provider Badges ── */
  --provider-anthropic: #10a37f;
  --provider-openai: #10a37f;
  --provider-google: #4a90e2;
  --provider-deepseek: #4ae288;
  --provider-nvidia: #76b900;
  --provider-xai: #f5a623;

  /* ── Colors: Syntax Highlighting ── */
  --syn-keyword: #c678dd;
  --syn-string: #98c379;
  --syn-number: #d19a66;
  --syn-comment: #5c6370;
  --syn-literal: #56b6c2;
  --syn-class: #e5c07b;
  --syn-variable: #e06c75;
  --syn-function: #61afef;
  --syn-punctuation: #abb2bf;

  /* ── Glass Morphism (Pure glass — blur only, zero darkening) ── */
  --glass-subtle-bg: transparent;
  --glass-subtle-blur: blur(24px);
  --glass-default-bg: transparent;
  --glass-default-blur: blur(28px);
  --glass-elevated-bg: transparent;
  --glass-elevated-blur: blur(40px);
  --glass-input-bg: transparent;
  --glass-bg-card: transparent;

  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-hover: rgba(255, 255, 255, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-default: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-sidebar: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Theme-Aware Popup/Dropdown Variables (frosted glass) ── */
  --popup-bg: rgba(255, 255, 255, 0.08);
  --popup-blur: blur(48px);
  --popup-border-tint: rgba(255, 255, 255, 0.1);
  --dropdown-bg: transparent;
  --dropdown-blur: blur(24px);

  /* ── Professional Insights Palette ──
     Tight, technical, GitHub-dark-inspired palette for the Hub Insights tab.
     Additive only — used by InsightsDashboard.svelte + insights-generator.ts.
     Do NOT reuse these in the main glass shell; they are a sibling aesthetic
     for the data-dense "spreadsheet-of-numbers" surfaces. */
  --insights-bg-app: #0d1117; /* Deep institutional dark */
  --insights-bg-shell: #161b22; /* App-shell surface */
  --insights-bg-glass: rgba(22, 27, 34, 0.6); /* Subtle glass overlay */
  --insights-bg-report: #010409; /* Near-black for shadow-DOM report */
  --insights-bg-card: #21262d; /* Card / pill surface */
  --insights-bg-cell: rgba(13, 17, 23, 0.5); /* Stat-cell glass overlay */

  --insights-border-default: #30363d; /* Hairline divider */
  --insights-border-muted: #21262d; /* Internal row separator */

  /* Typography — Inter (UI) + JetBrains Mono (numerals/code/file paths).
     Reference falls back to system stack so no font load is required. */
  --insights-text-primary: #e6edf3;
  --insights-text-secondary: #7d8590;
  --insights-text-tertiary: #484f58;
  --insights-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --insights-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Functional accent + status (priority colors). The reference uses
     GitHub-dark status colors: critical / warning / success. These map to
     P0 / P1 / P2 priority in the report's task table. */
  --insights-accent: #2f81f7; /* Functional blue */
  --insights-accent-bg: rgba(56, 139, 253, 0.15);
  --insights-accent-border: rgba(56, 139, 253, 0.4);
  --insights-status-critical: #f85149; /* P0 / red */
  --insights-status-warning: #d29922; /* P1 / amber */
  --insights-status-success: #3fb950; /* P2 / green */

  /* Tight technical spacing — reuses existing --space-2/4/6 etc. won't fit
     a 4px-base scale cleanly, so alias the reference values directly. */
  --insights-radius-sm: 4px;
  --insights-radius-md: 6px;
}

/* ── Bar Style Theme Overrides ── */

/* Onyx — dark tinted glass (old "Tinted Glass") */
html[data-bar-style='onyx'] {
  --glass-subtle-bg: rgba(26, 26, 28, 0.75);
  --glass-subtle-blur: blur(16px);
  --glass-default-bg: rgba(26, 26, 28, 0.75);
  --glass-default-blur: blur(24px);
  --glass-elevated-bg: rgba(26, 26, 28, 0.75);
  --glass-elevated-blur: blur(40px);
  --glass-input-bg: transparent;
  --glass-bg-card: rgba(26, 26, 28, 0.5);

  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  --popup-bg: rgba(20, 18, 16, 0.88);
  --popup-blur: blur(32px);
  --popup-border-tint: transparent;
  --dropdown-bg: rgba(14, 14, 16, 0.65);
  --dropdown-blur: blur(12px);
}

/* Obsidian — dark warm glass (old "Black") */
html[data-bar-style='obsidian'] {
  --glass-subtle-bg: rgba(15, 14, 15, 0.95);
  --glass-subtle-blur: blur(16px);
  --glass-default-bg: rgba(15, 14, 15, 0.95);
  --glass-default-blur: blur(24px);
  --glass-elevated-bg: rgba(15, 14, 15, 0.95);
  --glass-elevated-blur: blur(40px);
  --glass-input-bg: rgba(20, 19, 20, 0.95);
  --glass-bg-card: rgba(5, 5, 5, 0.8);

  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-hover: rgba(255, 255, 255, 0.2);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);

  --popup-bg: rgba(15, 14, 15, 0.95);
  --popup-blur: blur(32px);
  --popup-border-tint: transparent;
  --dropdown-bg: rgba(15, 14, 15, 0.95);
  --dropdown-blur: blur(12px);
}

/* Ruby — dark red tinted glass */
html[data-bar-style='ruby'] {
  --glass-subtle-bg: rgba(30, 5, 5, 0.75);
  --glass-subtle-blur: blur(16px);
  --glass-default-bg: rgba(35, 5, 5, 0.75);
  --glass-default-blur: blur(24px);
  --glass-elevated-bg: rgba(35, 5, 5, 0.75);
  --glass-elevated-blur: blur(40px);
  --glass-input-bg: transparent;
  --glass-bg-card: rgba(30, 5, 5, 0.5);

  --glass-border: rgba(135, 0, 0, 0.2);
  --glass-border-hover: rgba(135, 0, 0, 0.35);
  --glass-highlight: rgba(135, 0, 0, 0.1);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  --popup-bg: rgba(25, 0, 0, 0.88);
  --popup-blur: blur(32px);
  --popup-border-tint: rgba(135, 0, 0, 0.2);
  --dropdown-bg: rgba(25, 0, 0, 0.75);
  --dropdown-blur: blur(16px);

  /* Ruby: amber → deep crimson so "always allow" highlights match
   * The gem tone. */
  --accent-amber: #dc2626;
  --accent-amber-bg: rgba(220, 38, 38, 0.12);
  --accent-amber-bg-hover: rgba(220, 38, 38, 0.22);

  /* Diff colors: warmer, slightly desaturated palette to harmonize
   * with the red ruby chrome. Green stays green (universal "added"
   * affordance), red shifts to a softer coral so removed lines don't
   * compete with the chrome. */
  --diff-removed-text: #fca5a5;
  --diff-removed-bg: rgba(248, 113, 113, 0.1);
  --diff-context-bg: rgba(15, 0, 0, 0.18);
}

/* Sapphire — dark blue tinted glass */
html[data-bar-style='sapphire'] {
  --glass-subtle-bg: rgba(10, 14, 40, 0.75);
  --glass-subtle-blur: blur(16px);
  --glass-default-bg: rgba(12, 16, 45, 0.75);
  --glass-default-blur: blur(24px);
  --glass-elevated-bg: rgba(12, 16, 45, 0.75);
  --glass-elevated-blur: blur(40px);
  --glass-input-bg: transparent;
  --glass-bg-card: rgba(10, 14, 40, 0.5);

  --glass-border: rgba(60, 90, 180, 0.2);
  --glass-border-hover: rgba(60, 90, 180, 0.35);
  --glass-highlight: rgba(60, 90, 180, 0.1);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  --popup-bg: rgba(8, 12, 36, 0.88);
  --popup-blur: blur(32px);
  --popup-border-tint: rgba(60, 90, 180, 0.15);
  --dropdown-bg: rgba(8, 12, 36, 0.75);
  --dropdown-blur: blur(16px);

  /* Sapphire: amber → ocean blue so "always allow" matches the gem. */
  --accent-amber: #1e40af;
  --accent-amber-bg: rgba(30, 64, 175, 0.12);
  --accent-amber-bg-hover: rgba(30, 64, 175, 0.22);

  /* Diff colors: cool palette to harmonize with the blue sapphire chrome.
   * Greens shift toward teal; reds shift toward soft pink. */
  --diff-added-text: #5eead4;
  --diff-added-bg: rgba(94, 234, 212, 0.12);
  --diff-removed-text: #fda4af;
  --diff-removed-bg: rgba(253, 164, 175, 0.1);
  --diff-context-bg: rgba(6, 12, 36, 0.2);
}

/* Amethyst — dark purple glass */
html[data-bar-style='amethyst'] {
  --glass-subtle-bg: rgba(38, 12, 42, 0.8);
  --glass-subtle-blur: blur(16px);
  --glass-default-bg: rgba(45, 14, 50, 0.8);
  --glass-default-blur: blur(24px);
  --glass-elevated-bg: rgba(52, 17, 58, 0.8);
  --glass-elevated-blur: blur(40px);
  --glass-input-bg: transparent;
  --glass-bg-card: rgba(38, 12, 42, 0.5);

  --glass-border: rgba(150, 40, 160, 0.35);
  --glass-border-hover: rgba(150, 40, 160, 0.55);
  --glass-highlight: rgba(150, 40, 160, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  --popup-bg: rgba(30, 10, 34, 0.88);
  --popup-blur: blur(32px);
  --popup-border-tint: rgba(150, 40, 160, 0.25);
  --dropdown-bg: rgba(30, 10, 34, 0.85);
  --dropdown-blur: blur(16px);

  /* Amethyst: amber → magenta so "always allow" matches the gem. */
  --accent-amber: #c026d3;
  --accent-amber-bg: rgba(192, 38, 211, 0.12);
  --accent-amber-bg-hover: rgba(192, 38, 211, 0.22);

  /* Diff colors: lush greens / saturated pinks to harmonize with the
   * Purple amethyst chrome — a vibrant green/pink palette that pops
   * Against the deep purple base without clashing. */
  --diff-added-text: #86efac;
  --diff-added-bg: rgba(134, 239, 172, 0.14);
  --diff-removed-text: #f9a8d4;
  --diff-removed-bg: rgba(249, 168, 212, 0.12);
  --diff-context-bg: rgba(28, 8, 32, 0.2);
}

/* ── Legacy aliases (store migrates these, but CSS fallback for safety) ── */
html[data-bar-style='tinted-glass'],
html[data-bar-style='glass'] {
  /* → onyx */
}
html[data-bar-style='black'] {
  /* → obsidian */
}
html[data-bar-style='crimson'] {
  /* → ruby */
}
html[data-bar-style='navy'] {
  /* → sapphire */
}
html[data-bar-style='plum'],
html[data-bar-style='mustard'] {
  /* → amethyst */
}

/* ============================================================
   Legacy Terminal Themes
   Purely visual — monospace fonts, flat borders, no blur,
   CRT-style colors, pipe separators, no rounded corners.
   ============================================================ */

/* ── Legacy Terminal: Dark ── */
html[data-legacy='dark'] {
  --font-sans: 'Cascadia Code', 'Fira Code', 'SF Mono', 'Consolas', 'Courier New', monospace;
  --font-mono: 'Cascadia Code', 'Fira Code', 'SF Mono', 'Consolas', 'Courier New', monospace;

  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-full: 0px;

  --bg-primary: #0c0c0c;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #222222;
  --bg-overlay: rgba(0, 0, 0, 0.92);
  --bg-elevated: #1a1a1a;
  --bg-code: #111111;

  --border-subtle: #333333;
  --border-default: #444444;
  --border-hover: #666666;

  --text-primary: #cccccc;
  --text-secondary: #999999;
  --text-muted: #666666;

  --accent-primary: #00ff41;
  --accent-primary-glow: rgba(0, 255, 65, 0.15);
  --accent-highlight: #00cc33;
  --accent-blue: #5599ff;
  --accent-purple: #bb88ff;
  --accent-cyan: #00cccc;
  --accent-green: #00ff41;
  --accent-red: #ff4444;
  --accent-amber: #ffaa00;
  --accent-yellow: #ffff00;
  --accent-emerald: #00dd66;

  --status-success: #00ff41;
  --status-success-bg: rgba(0, 255, 65, 0.1);
  --status-warning: #ffaa00;
  --status-warning-bg: rgba(255, 170, 0, 0.1);
  --status-error: #ff4444;
  --status-error-bg: rgba(255, 68, 68, 0.1);

  --glass-subtle-bg: #0c0c0c;
  --glass-subtle-blur: none;
  --glass-default-bg: #141414;
  --glass-default-blur: none;
  --glass-elevated-bg: #1a1a1a;
  --glass-elevated-blur: none;
  --glass-input-bg: #111111;
  --glass-bg-card: #161616;

  --glass-border: #333333;
  --glass-border-hover: #555555;
  --glass-highlight: rgba(255, 255, 255, 0.04);
  --glass-shadow: none;

  --popup-bg: #1a1a1a;
  --popup-blur: none;
  --popup-border-tint: #444444;
  --dropdown-bg: #1a1a1a;
  --dropdown-blur: none;

  --syn-keyword: #ff79c6;
  --syn-string: #50fa7b;
  --syn-number: #bd93f9;
  --syn-comment: #6272a4;
  --syn-literal: #8be9fd;
  --syn-class: #f1fa8c;
  --syn-variable: #ff5555;
  --syn-function: #50fa7b;
  --syn-punctuation: #cccccc;

  --avatar-user: #5599ff;
  --avatar-assistant: #00ff41;
  --avatar-system-bg: rgba(0, 255, 65, 0.1);

  --window-close: #ff5555;
  --window-minimize: #f1fa8c;
  --window-maximize: #50fa7b;
}

/* Session tabs (SessionTabs.svelte): in Phosphor mode the active tab is squared
   (rectangular JS cutout via updateTabCutout) with a bright 3-sided outline that
   merges into the conversation below. The Paper (light) variant lives in legacy-paper.css. */
html[data-legacy='dark'] .tab.active {
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}

/* Top action bar widget buttons (TopActionBar.svelte): in Phosphor mode items
   are borderless — separated only by the pipe dividers already in the bar. Paper
   variant lives in legacy-paper.css. */
html[data-legacy='dark'] .widget-button {
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
html[data-legacy='dark'] .widget-button:hover {
  border-color: transparent !important;
}

/* ── Phosphor bar-style tints ──
   Under Phosphor the html[data-legacy="dark"] block (above) normally overrides
   the glass surfaces so the Theme selector has no effect. These compound rules
   (specificity 0,2,1 — they beat the 0,1,1 legacy block) re-apply each theme's
   dark hue to the glass surfaces, as flat solids (legacy is no-blur).
   Crystal = no rule → keeps the default Phosphor look. Custom already works via
   the inline vars set by applyCustomTheme (inline beats any stylesheet rule).
   Green terminal text/accents and the conversation bg (--bg-primary) are
   untouched — only the sidebar/bar/card glass surfaces take the hue. */
html[data-legacy='dark'][data-bar-style='onyx'] {
  --glass-subtle-bg: #0a0a0c;
  --glass-default-bg: #0e0e10;
  --glass-elevated-bg: #121214;
  --glass-bg-card: #080809;
}
html[data-legacy='dark'][data-bar-style='obsidian'] {
  --glass-subtle-bg: #040405;
  --glass-default-bg: #060607;
  --glass-elevated-bg: #08080a;
  --glass-bg-card: #020203;
}
html[data-legacy='dark'][data-bar-style='ruby'] {
  --glass-subtle-bg: #1e0505;
  --glass-default-bg: #230505;
  --glass-elevated-bg: #280606;
  --glass-bg-card: #1a0404;
}
html[data-legacy='dark'][data-bar-style='sapphire'] {
  --glass-subtle-bg: #0a0e28;
  --glass-default-bg: #0c102d;
  --glass-elevated-bg: #0e1233;
  --glass-bg-card: #080b1f;
}
html[data-legacy='dark'][data-bar-style='amethyst'] {
  --glass-subtle-bg: #260c2a;
  --glass-default-bg: #2d0e32;
  --glass-elevated-bg: #34113a;
  --glass-bg-card: #1f0a22;
}

/* ── Legacy Terminal: Light ── */
html[data-legacy='light'] {
  --font-sans: 'Cascadia Code', 'Fira Code', 'SF Mono', 'Consolas', 'Courier New', monospace;
  --font-mono: 'Cascadia Code', 'Fira Code', 'SF Mono', 'Consolas', 'Courier New', monospace;

  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-full: 0px;

  --bg-primary: #f5f5f0;
  --bg-secondary: #e8e8e0;
  --bg-tertiary: #ddddd5;
  --bg-overlay: rgba(245, 245, 240, 0.95);
  --bg-elevated: #ffffff;
  --bg-code: #f0f0ea;

  --border-subtle: #cccccc;
  --border-default: #aaaaaa;
  --border-hover: #888888;

  --text-primary: #1a1a1a;
  --text-secondary: #444444;
  --text-muted: #777777;

  --accent-primary: #006400;
  --accent-primary-glow: rgba(0, 100, 0, 0.12);
  --accent-highlight: #008800;
  --accent-blue: #0000cc;
  --accent-purple: #6600cc;
  --accent-cyan: #008888;
  --accent-green: #006400;
  --accent-red: #cc0000;
  --accent-amber: #cc6600;
  --accent-yellow: #998800;
  --accent-emerald: #006644;

  --status-success: #006400;
  --status-success-bg: rgba(0, 100, 0, 0.08);
  --status-warning: #cc6600;
  --status-warning-bg: rgba(204, 102, 0, 0.08);
  --status-error: #cc0000;
  --status-error-bg: rgba(204, 0, 0, 0.08);

  /* Diff preview — light counterpart. Without these the diff panel keeps its
   * near-black surface and green/red tints over a white background. */
  --diff-added-text: #006400;
  --diff-added-bg: rgba(0, 100, 0, 0.1);
  --diff-removed-text: #cc0000;
  --diff-removed-bg: rgba(204, 0, 0, 0.1);
  --diff-context-bg: rgba(0, 0, 0, 0.04);
  --diff-surface-bg: #f0f0ea;

  --glass-subtle-bg: #f5f5f0;
  --glass-subtle-blur: none;
  --glass-default-bg: #eeeeea;
  --glass-default-blur: none;
  --glass-elevated-bg: #ffffff;
  --glass-elevated-blur: none;
  --glass-input-bg: #f0f0ea;
  --glass-bg-card: #e8e8e2;

  --glass-border: #cccccc;
  --glass-border-hover: #aaaaaa;
  --glass-highlight: rgba(0, 0, 0, 0.03);
  --glass-shadow: none;

  --popup-bg: #ffffff;
  --popup-blur: none;
  --popup-border-tint: #aaaaaa;
  --dropdown-bg: #ffffff;
  --dropdown-blur: none;

  --syn-keyword: #8b008b;
  --syn-string: #008800;
  --syn-number: #0000cc;
  --syn-comment: #888888;
  --syn-literal: #008888;
  --syn-class: #cc6600;
  --syn-variable: #cc0000;
  --syn-function: #006400;
  --syn-punctuation: #333333;

  --avatar-user: #0000cc;
  --avatar-assistant: #006400;
  --avatar-system-bg: rgba(0, 100, 0, 0.08);

  --window-close: #cc0000;
  --window-minimize: #cc6600;
  --window-maximize: #006400;
}

/* ── Legacy Terminal: Universal Overrides ──
   Hoisted OUT of the shared-overrides block below so the overlay-mode guard can
   sit on the <html> ancestor, where the overlay-mode class lives. The guard is
   wrapped in :where() (zero specificity) so these rules keep the exact (0,1,1)
   specificity they had before it was added — otherwise the bump to (0,2,1)
   would start beating legacy-paper.css's deliberate `blur(14px) !important` on
   .last-user-bar purely by stylesheet order.

   The overlay-pill/popover windows load this same stylesheet. Squaring every
   element inside the pill turned it from a rounded translucent control into a
   hard-edged opaque box — the "full bg border" showing in terminal mode. The
   pill is persistent floating chrome (like a tray icon) and keeps the app's
   glass look in every theme. This mirrors the html-background guard in
   legacy-paper.css, which was already excluded this way. */
html[data-legacy='dark']:where(:not(.overlay-mode)) *,
html[data-legacy='light']:where(:not(.overlay-mode)) * {
  /* Force monospace everywhere */
  font-family: var(--font-sans) !important;
  border-radius: 0 !important;
}

/* Kill all backdrop-filter / blur */
html[data-legacy='dark']:where(:not(.overlay-mode)) *,
html[data-legacy='dark']:where(:not(.overlay-mode)) *::before,
html[data-legacy='dark']:where(:not(.overlay-mode)) *::after,
html[data-legacy='light']:where(:not(.overlay-mode)) *,
html[data-legacy='light']:where(:not(.overlay-mode)) *::before,
html[data-legacy='light']:where(:not(.overlay-mode)) *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Legacy Terminal: Shared Overrides ── */
html[data-legacy='dark'],
html[data-legacy='light'] {
  /* Flat solid borders instead of glass */
  .sidebar {
    border-right: 2px solid var(--border-default) !important;
  }

  /* Pipe-style separators in the action bar */
  .widget-separator {
    width: 1px !important;
    height: 20px !important;
    background: var(--border-default) !important;
    border-radius: 0 !important;
  }

  /* Input fields: flat terminal style.
     Range inputs are excluded — they're sliders, not text fields, and a 1px
     box around the track reads as a stray border (e.g. the Custom Theme
     opacity meter). Their own track/thumb rules live in the component. */
  input:not([type='range']),
  textarea,
  [contenteditable] {
    border: 1px solid var(--border-default) !important;
    background: var(--glass-input-bg) !important;
    caret-color: var(--accent-primary) !important;
  }

  input:not([type='range']):focus,
  textarea:focus,
  [contenteditable]:focus {
    outline: 1px solid var(--accent-primary) !important;
    outline-offset: -1px !important;
  }

  /* Buttons: flat, no glow */
  button {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Scrollbars: flat terminal style */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-primary);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border: 1px solid var(--bg-primary);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
  }

  /* Code blocks: flat terminal */
  pre,
  code {
    font-family: var(--font-mono) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
  }

  /* Tooltips / popups: flat.
     Excluded: .widget-dropdown-wrapper and .pill-dropdown are the *trigger*
     wrappers around each action-bar item, not popup panels — the rule below
     would stroke every item in the top/bottom bars. Their panels (.widget-dropdown,
     .pill-menu) still match and keep the flat border. */
  [class*='popup'],
  [class*='dropdown']:not(.widget-dropdown-wrapper):not(.pill-dropdown),
  [class*='tooltip'] {
    border: 1px solid var(--border-default) !important;
    box-shadow: 2px 2px 0 var(--border-subtle) !important;
  }

  /* Toggle switches: flat terminal */
  .toggle-switch {
    border-radius: 0 !important;
    border: 1px solid var(--border-default) !important;
  }
  .toggle-thumb {
    border-radius: 0 !important;
  }

  /* Session tabs: flat */
  .session-tab {
    border-radius: 0 !important;
    border: 1px solid transparent !important;
  }
  .session-tab.active {
    border-bottom: 2px solid var(--accent-primary) !important;
  }

  /* Nav items: flat */
  .nav-item {
    border-radius: 0 !important;
  }
  .nav-item.active {
    background: var(--glass-highlight) !important;
    border-left: 2px solid var(--accent-primary) !important;
  }

  /* Credential cards: flat */
  .credential-card {
    border-radius: 0 !important;
    border: 1px solid var(--border-subtle) !important;
  }

  /* Settings sections: flat */
  .settings-section {
    border-radius: 0 !important;
  }
  .section-title {
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }
  .setting-row {
    border-radius: 0 !important;
    border: 1px solid var(--border-subtle) !important;
  }

  /* Theme dots: square */
  .bar-dot,
  .accent-dot,
  .custom-preview {
    border-radius: 0 !important;
  }

  /* Pill bar: flat */
  .pill-bar {
    border-radius: 0 !important;
  }

  /* Message bubbles: flat */
  [class*='message'],
  [class*='bubble'] {
    border-radius: 0 !important;
  }

  /* Traffic lights: square */
  .traffic-light {
    border-radius: 0 !important;
  }

  /* Provider dots: square */
  .provider-dot {
    border-radius: 0 !important;
  }

  /* Background preview: square */
  .bg-preview {
    border-radius: 0 !important;
  }

  /* Select menu: flat */
  .key-select-menu {
    border-radius: 0 !important;
    border: 1px solid var(--border-default) !important;
  }
  .select-menu-item {
    border-radius: 0 !important;
  }

  /* Add key form: flat */
  .add-key-form {
    border-radius: 0 !important;
  }
  .key-input {
    border-radius: 0 !important;
    border: 1px solid var(--border-subtle) !important;
  }

  /* Action bar widgets: flat */
  .widget-btn {
    border-radius: 0 !important;
  }

  /* Sub-panel header: flat */
  .sub-panel-header {
    border-bottom: 1px solid var(--border-subtle) !important;
  }

  /* Sidebar header: flat */
  .sidebar-header {
    border-bottom: 1px solid var(--border-subtle) !important;
  }

  /* Sidebar footer: flat */
  .sidebar-footer {
    border-top: 1px solid var(--border-subtle) !important;
  }

  /* Move popup: flat */
  .move-popup {
    border-radius: 0 !important;
    border: 1px solid var(--border-default) !important;
  }

  /* Trash section: flat */
  .trash-header {
    border-radius: 0 !important;
  }
  .trash-item {
    border-radius: 0 !important;
  }

  /* Session search: flat */
  .session-search-input {
    border-radius: 0 !important;
    border: 1px solid var(--border-subtle) !important;
  }
  .session-search-result {
    border-radius: 0 !important;
  }

  /* New group input: flat */
  .new-group-input {
    border-radius: 0 !important;
  }

  /* Feedback / account panels: flat */
  .feedback-input,
  .feedback-textarea {
    border-radius: 0 !important;
    border: 1px solid var(--border-subtle) !important;
  }

  /* Scanline overlay for CRT feel (subtle) */
  position: relative;
}

/* :where(:not(.overlay-mode)) — the overlay-pill/popover windows share this
   stylesheet. A position:fixed full-viewport layer inside a tiny transparent
   always-on-top window paints the square scanline grid across the pill's
   rounded transparent shadow-bleed (the "full bg border" showing), and forces
   the whole alpha surface to recomposite on every StatusOrb animation frame
   (the flicker). Their chrome must stay transparent, same as the html
   background guard in legacy-paper.css. */
html[data-legacy='dark']:where(:not(.overlay-mode))::after,
html[data-legacy='light']:where(:not(.overlay-mode))::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(128, 128, 128, 0.03) 2px,
    rgba(128, 128, 128, 0.03) 4px
  );
}

/* Light legacy: slightly more visible scanlines */
html[data-legacy='light']:where(:not(.overlay-mode))::after {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.02) 2px,
    rgba(0, 0, 0, 0.02) 4px
  );
}