/* ─────────────────────────────────────────────────────────────────
   JSE design system — Direction 07 light. Tokens, fonts, base type.
   Marketing pages (landing, trust, compliance) and the new app shell
   set data-theme="light" to opt in. Existing /app + /eval surfaces
   that haven't been rebuilt yet keep the legacy dark theme until
   their respective rewrites land.
   ───────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,wght@1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

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

[hidden] {
  display: none !important;
}

/* Defensive: SVGs anywhere in the messages stream are hard-capped so a
   poisoned payload, broken save, or orphaned icon can't fill the screen.
   Specific UI chrome (copy buttons, mode icons) set their own sizes via
   width/height which still apply alongside max-*. */
#messages svg {
  max-width: 24px;
  max-height: 24px;
}
#messages .content svg {
  max-width: 100%;
  max-height: 64px;
}

/* DOMPurify strips <button> from saved chat HTML as a phishing defense, which
   leaves orphan <svg>s as direct children of .role. They're never legit
   content there — kill them. */
#messages .role > svg {
  display: none;
}

:root {
  --bg: #09090b;
  --surface: #111113;
  --surface-2: #18181b;
  --surface-3: #1f1f23;
  --border: #27272a;
  --border-hover: #3f3f46;
  --text: #fafafa;
  --text-secondary: #a1a1aa;
  --text-dim: #71717a;
  --text-muted: #52525b;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-dim: #4f46e5;
  --accent-glow: rgba(99, 102, 241, 0.12);
  --accent-glow-strong: rgba(99, 102, 241, 0.25);
  --user-bg: #1e1b4b;
  --ai-bg: #111113;
  --success: #22c55e;
  --success-dim: #166534;
  --warning: #eab308;
  --warning-dim: #854d0e;
  --error: #ef4444;
  --superpower: #8b5cf6;
  --superpower-dim: #6d28d9;
  --superpower-glow: rgba(139, 92, 246, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
  --glass: rgba(17, 17, 19, 0.8);
  --glass-border: rgba(255,255,255,0.06);
  --transition: 0.15s ease;
  --fade-bg: #111113;
}

/* ========== LIGHT THEME ========== */

[data-theme="light"] {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #e4e4e7;
  --border: #e4e4e7;
  --border-hover: #a1a1aa;
  --text: #18181b;
  --text-secondary: #3f3f46;
  --text-dim: #52525b;
  --text-muted: #a1a1aa;
  --accent: #4f46e5;
  --accent-hover: #6366f1;
  --accent-dim: #4338ca;
  --accent-glow: rgba(79, 70, 229, 0.1);
  --accent-glow-strong: rgba(79, 70, 229, 0.2);
  --user-bg: #eef2ff;
  --ai-bg: #ffffff;
  --success: #16a34a;
  --success-dim: #bbf7d0;
  --warning: #ca8a04;
  --warning-dim: #fef3c7;
  --error: #dc2626;
  --superpower: #7c3aed;
  --superpower-dim: #8b5cf6;
  --superpower-glow: rgba(124, 58, 237, 0.08);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --glass: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0,0,0,0.08);
  --fade-bg: #fafafa;

  /* ── JSE design tokens (Direction 07 light) ──
     Override the legacy light theme above with the design's values
     and add the names the design system uses directly (--ink, --dim,
     --card, --line, etc.). New pages reference these directly; legacy
     app surfaces that consume --bg / --text / --accent / --border /
     --surface keep working because the values still resolve. */
  --bg:           #fafaf7;          /* paper white */
  --surface:      #ffffff;          /* card surface */
  --surface-2:    #f3f3ee;          /* sub-surface, table headers */
  --surface-3:    #f3f3ee;
  --border:       rgba(21,24,29,0.09);
  --border-hover: rgba(21,24,29,0.16);
  --text:         #15181d;          /* ink */
  --text-secondary: #6a7180;        /* dim */
  --text-dim:     #6a7180;
  --text-muted:   #c8ccd4;          /* dim2 — ghost button border */
  --accent:       #1f7a52;          /* JSE forest green */
  --accent-hover: #248d5d;
  --accent-dim:   #1a6645;
  --accent-glow:       rgba(31,122,82,0.12);
  --accent-glow-strong: rgba(31,122,82,0.25);
  --success:      #1f7a52;
  --warning:      #b8862a;
  --error:        #b94a4a;

  /* Direct design token names — used by the new pages 1:1 with the design's CSS. */
  --ink:    #15181d;
  --dim:    #6a7180;
  --dim2:   #c8ccd4;
  --card:   #ffffff;
  --card2:  #f3f3ee;
  --line:   rgba(21,24,29,0.09);
  --warn:   #b8862a;
  --fail:   #b94a4a;
  --accent2: #3a5fb8;
}

/* ── Base type system (only applies inside data-theme="light") ──
   Inter for body + UI; Newsreader italic for accent emphasis (em
   tags become forest-green serif italics, e.g. "Stop guessing which
   model to use. *Prove it.*"); IBM Plex Mono via the .mono utility
   for breadcrumbs, model names, metadata labels. */
[data-theme="light"] body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[data-theme="light"] .mono,
[data-theme="light"] code {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
}
[data-theme="light"] em,
[data-theme="light"] .accent-italic {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
[data-theme="light"] .serif {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
}

[data-theme="light"] #login-screen {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79, 70, 229, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(124, 58, 237, 0.04) 0%, transparent 50%),
    var(--bg);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page-level horizontal-scroll guard. Without this, ANY child element
   wider than viewport (matrix card, long code block, sticky table,
   horizontally-flexed toolbar) makes the WHOLE page horizontal-scroll
   and Safari clips text at the page edge — the symptom the user keeps
   sending screenshots of. Components that legitimately need internal
   horizontal scroll (matrix grid, code blocks, model groups toolbar)
   set their own overflow-x: auto and stay scrollable inside their box.
   max-width:100vw belt-and-braces vs. obscure WebKit edge cases where
   overflow:hidden on body alone doesn't fully contain. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

.screen {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ========== LOGIN ========== */

/* JSE-styled login screen — paper white surface, ink + forest green
   accent, Inter type. Hardcoded design tokens (rather than CSS-var
   inheritance from data-theme=light) because the dark-themed chat
   shell sits in the same #login-screen sibling and we don't want
   data-theme on body to break it. */
#login-screen.jse-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 100vh;
  background: #fafaf7;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #15181d;
}

/* Faint 64px grid for the editorial feel matching the marketing site. */
#login-screen.jse-auth::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(21,24,29,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,24,29,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  opacity: 0.6;
}

#login-screen.jse-auth .login-back-home {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 12.5px;
  color: #6a7180;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
  z-index: 10;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
}
#login-screen.jse-auth .login-back-home:hover {
  color: #15181d;
  background: rgba(21,24,29,0.04);
}

#login-screen.jse-auth .login-brand-link { display: block; text-decoration: none; color: inherit; }

#login-screen.jse-auth .login-brand {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: #15181d;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
#login-screen.jse-auth .login-brand-accent {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  color: #1f7a52;
  font-weight: 500;
}
#login-screen.jse-auth .login-brand-dot { color: #1f7a52; margin-left: 2px; }

#login-screen.jse-auth .login-box {
  text-align: center;
  width: 100%;
  max-width: 380px;
  padding: 40px 36px;
  background: #ffffff;
  border: 1px solid rgba(21,24,29,0.09);
  border-radius: 8px;
  margin: 0 20px;
  position: relative;
  z-index: 1;
}

.login-box h1 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.subtitle {
  color: var(--text-dim);
  margin-bottom: 28px;
  font-size: 14px;
}

/* JSE-styled form fields inside the auth screen — paper white,
   forest-green focus glow, IBM Plex Mono placeholders. Hardcoded so
   the dark-themed chat shell stays untouched. */
#login-screen.jse-auth .subtitle {
  color: #6a7180;
  margin-bottom: 28px;
  font-size: 13px;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
}
#login-screen.jse-auth #login-form,
#login-screen.jse-auth #register-form,
#login-screen.jse-auth #forgot-form,
#login-screen.jse-auth #reset-form,
#login-screen.jse-auth #waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
#login-screen.jse-auth #login-form input,
#login-screen.jse-auth #register-form input,
#login-screen.jse-auth #forgot-form input,
#login-screen.jse-auth #reset-form input,
#login-screen.jse-auth #waitlist-form input,
#login-screen.jse-auth #login-form button,
#login-screen.jse-auth #register-form button,
#login-screen.jse-auth #forgot-form button,
#login-screen.jse-auth #reset-form button,
#login-screen.jse-auth #waitlist-form button {
  padding: 11px 14px;
  border-radius: 5px;
  border: 1px solid rgba(21,24,29,0.12);
  background: #ffffff;
  color: #15181d;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#login-screen.jse-auth input:focus {
  border-color: #1f7a52;
  box-shadow: 0 0 0 3px rgba(31,122,82,0.12);
}
#login-screen.jse-auth input::placeholder { color: #9ca3af; }
#login-screen.jse-auth #login-form button,
#login-screen.jse-auth #register-form button,
#login-screen.jse-auth #forgot-form button,
#login-screen.jse-auth #reset-form button,
#login-screen.jse-auth #waitlist-form button {
  background: #1f7a52;
  color: #fafaf7;
  border: none;
  cursor: pointer;
  font-weight: 500;
  margin-top: 4px;
  transition: opacity 0.15s;
}
#login-screen.jse-auth button[type="submit"]:hover { opacity: 0.9; box-shadow: none; transform: none; }
#login-screen.jse-auth .error { color: #b94a4a; font-size: 12.5px; margin-top: 12px; text-align: center; }
#login-screen.jse-auth .success { color: #1f7a52; font-size: 12.5px; margin-top: 12px; text-align: center; }
#login-screen.jse-auth .auth-links { margin-top: 18px; font-size: 12.5px; color: #6a7180; text-align: center; }
#login-screen.jse-auth .auth-links p { margin: 4px 0; }
#login-screen.jse-auth .auth-links a { color: #1f7a52; text-decoration: none; font-weight: 500; }
#login-screen.jse-auth .auth-links a:hover { text-decoration: underline; }
#login-screen.jse-auth .legal-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(21,24,29,0.06); display: flex; gap: 18px; justify-content: center; font-size: 11px; font-family: "IBM Plex Mono", monospace; color: #6a7180; letter-spacing: 0.04em; }
#login-screen.jse-auth .legal-footer a { color: inherit; text-decoration: none; }
#login-screen.jse-auth .legal-footer a:hover { color: #1f7a52; }
#login-screen.jse-auth .consent-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #6a7180; padding: 4px 0; }
#login-screen.jse-auth .consent-checkbox span { line-height: 1.45; }
#login-screen.jse-auth .consent-checkbox a { color: #1f7a52; text-decoration: underline; }

#login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#login-form input {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

#login-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

#login-form input::placeholder {
  color: var(--text-muted);
}

#login-form button {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

#login-form button:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 20px var(--accent-glow);
}

#login-form button:active {
  transform: scale(0.98);
}

.error {
  color: var(--error);
  font-size: 13px;
  margin-top: 12px;
}

.success {
  color: var(--success);
  font-size: 13px;
  margin-top: 12px;
}

#register-form,
#forgot-form,
#reset-form,
#waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


#register-form input,
#register-form button,
#forgot-form input,
#forgot-form button,
#reset-form input,
#reset-form button,
#waitlist-form input,
#waitlist-form button {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

#register-form input:focus,
#forgot-form input:focus,
#reset-form input:focus,
#waitlist-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

#register-form input::placeholder,
#forgot-form input::placeholder,
#reset-form input::placeholder,
#waitlist-form input::placeholder {
  color: var(--text-muted);
}

#register-form button,
#forgot-form button,
#reset-form button,
#waitlist-form button {
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 600;
  cursor: pointer;
}

#register-form button:hover,
#forgot-form button:hover,
#reset-form button:hover,
#waitlist-form button:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 20px var(--accent-glow);
}

.auth-links {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-dim);
}

.auth-links a {
  color: var(--accent);
  text-decoration: none;
}

.auth-links a:hover {
  text-decoration: underline;
}

/* ========== HEADER ========== */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
  border-bottom: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
  z-index: 10;
}

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

#sidebar-toggle {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-xs);
  transition: color var(--transition), background var(--transition);
  line-height: 1;
}

#sidebar-toggle:hover {
  color: var(--text);
  background: var(--surface-2);
}

.header-logo-icon {
  height: 28px;
  width: 28px;
  flex-shrink: 0;
  display: block;
  /* SVG inherits page text color via fill="currentColor" so the J adapts
     to dark/light theme automatically. No background, no rounding — the
     letterform stands on its own. */
  color: var(--text);
}

.header-logo-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  white-space: nowrap;
}

/* Brand wrapper turns the logo + wordmark into a link back to the
   marketing home (justsmarter.ai/). Without this, /app and /eval are
   dead-ends for anyone who wants to get back to the landing page.
   The brand is a single anchor; child elements inherit decoration via
   text-decoration:none on the link itself. */
.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.header-brand:hover .header-logo-text { color: var(--accent); }
.header-logo-accent { color: var(--accent); }
.header-logo-dot { color: var(--accent); margin-left: 4px; }

/* Small badge after the brand telling the user which surface they're
   on right now (Chat vs Eval). Mirrors the eval page's title bar so
   the two products read as siblings under the same brand. */
.header-surface-badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  margin-left: 4px;
}

/* Cross-product nav link — sits in the header-right rail and lets
   chat users jump straight to /eval without going through the URL bar
   or the marketing landing. Styled understated so it doesn't compete
   with the credit balance and primary actions. */
.header-nav-link {
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.header-nav-link:hover {
  color: var(--text);
  background: var(--surface-2);
}

header h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text-secondary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========== THEME TOGGLE ========== */

#theme-toggle {
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  line-height: 1;
  /* Lock dimensions so the icon swap (sun ↔ moon) doesn't reflow
     surrounding nav items. Without this, the button sizes itself to
     the currently-visible SVG; the two icons have different intrinsic
     stroke widths even at the same viewBox, causing a ~1px shift on
     every toggle. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
#theme-toggle svg { display: block; width: 16px; height: 16px; }

#theme-toggle:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}

#theme-toggle .icon-sun { display: inline; }
#theme-toggle .icon-moon { display: none; }

[data-theme="light"] #theme-toggle .icon-sun { display: none; }
[data-theme="light"] #theme-toggle .icon-moon { display: inline; }

/* ========== SETTINGS POPOVER ========== */

.settings-wrapper {
  position: relative;
}

#settings-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  transition: all var(--transition);
  line-height: 1;
}

#settings-btn:hover,
#settings-btn.active {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}

.settings-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  min-width: 200px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
  animation: popoverIn 0.15s ease;
}

.settings-popover.open {
  display: block;
}

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

.settings-popover .toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  transition: background var(--transition);
}

.settings-popover .toggle:hover {
  background: var(--surface-3);
}

.settings-popover .toggle span {
  flex: 1;
}

/* Data hosting dropdown inside the settings popover — mirrors the
   toggle layout but uses a select instead of a checkbox. */
.settings-popover .popover-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 10px;
  border-radius: var(--radius-xs);
}

.settings-popover .popover-field span {
  flex: 1;
}

.settings-popover .popover-field select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-1);
  color: var(--text);
  cursor: pointer;
}

/* ========== SIDEBAR ========== */

.chat-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

#sidebar {
  width: var(--sidebar-width, 260px);
  background: var(--surface);
  border-right: none;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: margin-left 0.2s ease;
  position: relative;
}

#sidebar.collapsed {
  margin-left: calc(-1 * var(--sidebar-width, 260px));
}

.sidebar-resize {
  position: absolute;
  top: 0;
  right: -2px;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  transition: background var(--transition);
}

.sidebar-resize:hover,
.sidebar-resize.dragging {
  background: var(--accent);
}

#new-chat-btn {
  padding: 10px 14px;
  margin: 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
}

#new-chat-btn:hover {
  border-color: var(--accent);
  border-style: solid;
  color: var(--accent);
  background: var(--accent-glow);
}

#chat-search-wrap {
  position: relative;
  margin: 0 12px 8px;
}
#chat-search-wrap svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
#chat-search {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px 7px 28px;
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
#chat-search::placeholder { color: var(--text-muted); }
#chat-search:focus { border-color: var(--border); }

#chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
}

.chat-section-header {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 12px 6px;
  user-select: none;
}
.chat-section-header:first-child { padding-top: 6px; }

.chat-section-toggle {
  display: block;
  width: calc(100% - 16px);
  margin: 4px 8px 0;
  padding: 6px 10px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition), border-color var(--transition);
}
.chat-section-toggle:hover { color: var(--text); border-color: var(--text-muted); }

.chat-empty-state {
  padding: 24px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

#chat-list::-webkit-scrollbar {
  width: 4px;
}
#chat-list::-webkit-scrollbar-track {
  background: transparent;
}
#chat-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* --- Session items --- */

.session-item {
  margin-bottom: 2px;
}

.session-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--transition);
}

.session-title {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  /* Single-line ellipsis: long auto-titles wrap into 3-4 lines and
     visually inflate every chat row. The full title is preserved in
     the title= attribute for hover-tooltip. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
  margin-right: 2px;
}

.session-header:hover {
  background: var(--surface-2);
  color: var(--text-secondary);
}

.session-item.active .session-header {
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 500;
}

.session-delete {
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1;
  transition: all var(--transition);
}

.session-header:hover .session-delete {
  display: flex;
}

.session-delete:hover {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

.session-queries {
  padding: 2px 0 6px 12px;
  border-left: 1px solid var(--border);
  margin-left: 18px;
}

.session-query {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: all var(--transition);
}

.session-query:hover {
  color: var(--text-secondary);
  background: var(--surface-2);
}

/* Highlights which query the user is currently reading in the main area.
   Visually distinct from the hover state so the user always knows where
   they are in a multi-query session — like Claude's active message. */
.session-query.active-query {
  background: var(--accent-glow);
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}

.query-delete {
  display: none;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  margin-left: auto;
  flex-shrink: 0;
  transition: color var(--transition);
}

.session-query:hover .query-delete {
  display: block;
}

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

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

.query-dot.mode-auto { background: var(--warning); }
.query-dot.mode-all { background: var(--accent); }
.query-dot.mode-council { background: var(--success); }
.query-dot.mode-superpower { background: var(--superpower); }
.query-dot.mode-superpower-lite { background: #14b8a6; }
.query-dot.mode-top-council { background: #f59e0b; }
.query-dot.mode-medium-council { background: #06b6d4; }
.query-dot.mode-small-council { background: #a855f7; }
.query-dot.mode-single { background: var(--text-dim); }

.query-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.query-text {
  word-break: break-word;
  line-height: 1.4;
}

/* Legacy flat chat items (fallback) */
.chat-item {
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  transition: all var(--transition);
}

.chat-item:hover {
  background: var(--surface-2);
  color: var(--text-secondary);
}

.chat-item.active {
  background: var(--surface-2);
  color: var(--accent);
}

/* Old header model-select styles removed — now styled in .mode-bar */

/* Header toggles */
.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}

.toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  border-radius: 3px;
}

.user-display {
  font-size: 12px;
  color: var(--text-dim);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

#logout-btn {
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
}

#logout-btn:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--surface-2);
}

/* ========== MAIN CHAT AREA ========== */

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  padding: 24px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Defensive: any direct child of #messages (message blocks, answer-blocks)
   must not exceed the scroll container. Stops oversize flex/grid children
   from punching past the viewport — body's overflow:hidden hides the
   overflow but the visible text inside still wraps to the wider width
   and gets clipped on the right edge. */
#messages > * {
  max-width: 100%;
  min-width: 0;
}

main::-webkit-scrollbar {
  width: 6px;
}
main::-webkit-scrollbar-track {
  background: transparent;
}
main::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}
main::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

/* ========== MESSAGES ========== */

/* Document layout: messages flow as continuous text instead of stacked
   capture boxes. No background, no borders, no nested scroll. The
   typography hierarchy (uppercase role label + comfortable line-height)
   carries the structure. */
.message {
  width: 100%;
  padding: 4px 0 12px;
  font-size: 16px;
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  background: transparent;
  border: none;
}

.message + .message {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.message .role {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  margin-bottom: 10px;
  display: flex;
  /* Label on the left, action icons clustered on the right —
     `space-between` used to spread the icons across the full row. */
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}

/* Push everything after the role label to the right edge so the
   copy/export/Nootio icons cluster together instead of being spread
   across the full row by space-between. */
.message .role > span:first-child {
  margin-right: auto;
}

.message.assistant .role {
  color: var(--accent);
}

.single-time {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

/* ========== COLLAPSIBLE ANSWERS ========== */

.collapsible {
  position: relative;
}

.collapsible.collapsed .content {
  max-height: 500px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}

.collapsible.expanded .content {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.collapsible.has-quick-answer.collapsed .content {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.collapse-toggle {
  display: inline-block;
  width: auto;
  padding: 6px 0;
  margin-top: 14px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
}

.collapse-toggle:hover {
  background: transparent;
  text-decoration: underline;
}

.collapse-toggle::before {
  content: "▾ ";
  display: inline-block;
}

/* Header summary for All Models, Council, and non-auto Superpower modes.
   Sits above the grid showing mode label + time + credits together so
   users can compare cost vs latency at a glance. Single-model and
   auto-Superpower modes put the same info in their existing answer-card
   headers (the role line / compiled-time span). */
.answer-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  margin: 18px 0 8px;
  padding-bottom: 6px;
}

.answer-summary-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
}

.answer-summary-meta {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.2px;
}

/* Privacy mode verification receipt — small inline badge that proves
   Brain Orchestra ran Presidio on the request. Appended to the answer
   summary meta line after the receipt fetch resolves. */
.privacy-receipt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  white-space: nowrap;
  cursor: help;
}
.privacy-receipt-ok {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.privacy-receipt-warn {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.message.user .role .privacy-receipt {
  /* Tighter spacing inside the user-message role line for single-model mode */
  margin-left: 8px;
}

/* ========== EMPTY STATE ========== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
}

.empty-state h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.empty-state p {
  font-size: 15px;
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 36px;
  color: var(--text-secondary);
}

.empty-state .mode-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 760px;
  width: 100%;
}

@media (max-width: 700px) {
  .empty-state .mode-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.empty-state .mode-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.empty-state .mode-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.empty-state .mode-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--accent-glow);
}

.empty-state .mode-card:hover::before {
  opacity: 1;
}

.empty-state .mode-card .mode-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.empty-state .mode-card .mode-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.empty-state .mode-card .mode-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
}

.empty-state .mode-card.superpower-card {
  border-color: var(--superpower-dim);
}

.empty-state .mode-card.superpower-card::before {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
}

.empty-state .mode-card.superpower-card:hover {
  border-color: var(--superpower);
  box-shadow: 0 4px 20px var(--superpower-glow), 0 0 40px var(--superpower-glow);
}

/* ========== COPY & EXPORT BUTTONS ========== */

.copy-btn, .export-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  opacity: 0.75;
  transition: opacity var(--transition), background var(--transition), transform var(--transition);
  flex-shrink: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.copy-btn:hover, .export-btn:hover,
.copy-btn:focus, .export-btn:focus {
  opacity: 1;
  background: rgba(127, 127, 127, 0.12);
  transform: translateY(-1px);
}

.copy-btn svg, .export-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Each action icon gets its own resting tint so they're scannable at
   a glance — copy=neutral, .md export=accent indigo, Nootio=green. */
.copy-btn svg { stroke: var(--text-dim); }
.export-btn svg { stroke: var(--accent); }
.nootio-export-btn svg { stroke: #22c55e; }

.copy-btn.copied svg {
  stroke: var(--success);
}

/* ========== MODE BAR ========== */

.mode-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.mode-pills {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 2px;
}

.mode-pills::-webkit-scrollbar {
  display: none;
}

.mode-pill {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.mode-pill:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--surface-2);
}

.mode-pill.active {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
}

.mode-pill.active[data-mode="council"] {
  background: var(--success);
  border-color: var(--success);
}

.mode-pill.active[data-mode="superpower"] {
  background: var(--superpower);
  border-color: var(--superpower);
}

.mode-pill.active[data-mode="superpower-lite"] {
  background: #14b8a6;
  border-color: #14b8a6;
}

.mode-pill.active[data-mode="top-council"] {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #000;
}

.mode-pill.active[data-mode="medium-council"] {
  background: #06b6d4;
  border-color: #06b6d4;
}

.mode-pill.active[data-mode="small-council"] {
  background: #a855f7;
  border-color: #a855f7;
}

.mode-pill.active[data-mode="all"] {
  background: #3b82f6;
  border-color: #3b82f6;
}

.mode-bar #model-select {
  padding: 5px 28px 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.mode-bar #model-select:hover {
  border-color: var(--text-muted);
}

.mode-bar #model-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.mode-bar #model-select.hidden-select {
  display: none;
}

/* ========== VERIFY BANNER ========== */

.verify-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(245, 158, 11, 0.12);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--text);
  font-size: 13px;
  flex-shrink: 0;
}

.verify-banner span {
  flex: 1;
}

.verify-banner button {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--text);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.verify-banner button:hover {
  background: rgba(245, 158, 11, 0.3);
}

#dismiss-verify-btn {
  padding: 2px 8px;
  font-size: 16px;
  line-height: 1;
}

/* ========== INPUT AREA ========== */

#chat-form {
  display: flex;
  flex-direction: column;
  padding: 12px 32px 16px;
  background: var(--bg);
  width: 100%;
}

.input-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 4px 4px 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
}

.input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-md);
}

#prompt {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  resize: none;
  outline: none;
  max-height: 200px;
  line-height: 1.5;
}

#prompt::placeholder {
  color: var(--text-muted);
}

#send-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}

#send-btn:hover {
  background: var(--accent-hover);
}

#send-btn:active {
  transform: scale(0.92);
}

#send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

#send-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========== ALL MODELS GRID ========== */

.all-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

/* Hide the inactive view. The toggle just flips these classes — both
   views are rendered in parallel so switching has no cost and the .md
   export (which reads the card DOM) keeps working regardless of view. */
.all-models-grid.hidden,
.all-models-list.hidden {
  display: none;
}

/* ========== ALL MODELS: LIST VIEW ========== */

.all-models-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.45;
}

.all-models-list thead th {
  background: var(--surface-2);
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  user-select: none;
}

/* Sort affordance — pointer + subtle arrow for sortable columns only
   when sorting is unlocked (all streams settled). */
.all-models-list.sortable thead th.sortable {
  cursor: pointer;
}
.all-models-list.sortable thead th.sortable:hover {
  color: var(--text);
}
.all-models-list thead th.sort-asc::after {
  content: " ▲";
  font-size: 9px;
  color: var(--accent);
}
.all-models-list thead th.sort-desc::after {
  content: " ▼";
  font-size: 9px;
  color: var(--accent);
}

.all-models-list tbody tr.row-main {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}
.all-models-list tbody tr.row-main:hover {
  background: var(--surface-2);
}
.all-models-list tbody tr.row-main.expanded {
  background: var(--surface-2);
  border-bottom: 1px solid transparent;
}
.all-models-list tbody tr.row-main td {
  padding: 10px;
  vertical-align: middle;
}

.all-models-list td.col-model {
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.all-models-list td.col-model.substituted {
  color: #f59e0b;
}
.all-models-list td.col-provider {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.all-models-list td.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.all-models-list td.col-preview {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
  width: 100%;
}
.all-models-list td.pending {
  color: var(--text-dim);
  opacity: 0.6;
}

/* Expand panel — lives as a full-width row under the clicked row. */
.all-models-list tbody tr.row-detail {
  display: none;
}
.all-models-list tbody tr.row-detail.open {
  display: table-row;
}
.all-models-list tbody tr.row-detail td {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}
.all-models-list .answer-detail {
  position: relative;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 36px; /* room for the copy button */
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.6;
}
.all-models-list .answer-detail .detail-copy-btn {
  position: absolute;
  top: 0;
  right: 0;
}

/* Segmented view-toggle in the summary header.
   `align-self: center` overrides the parent .answer-summary's
   align-items:baseline so the button row sits vertically centered
   instead of being stuck on the text baseline, which squashed the
   buttons into looking like inline text. Explicit divider between
   buttons + strong active state so the toggle reads clearly as an
   interactive control. */
.view-toggle {
  display: inline-flex;
  align-self: center;
  align-items: stretch;
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  overflow: hidden;
  margin-left: 12px;
  background: var(--surface-2);
}
.view-toggle button {
  background: transparent;
  color: var(--text-dim);
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.view-toggle button + button {
  border-left: 1px solid var(--border-hover);
}
.view-toggle button:hover:not(.active) {
  color: var(--text);
  background: var(--surface-2);
}
.view-toggle button.active {
  background: var(--accent);
  color: #fff;
}

.model-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  height: 350px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease;
}

.model-card .content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.model-card .content::-webkit-scrollbar {
  width: 4px;
}
.model-card .content::-webkit-scrollbar-track {
  background: transparent;
}
.model-card .content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.model-card .model-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 8px;
}

/* BO resolved to a different model than we requested. Amber so the user
   can see at a glance that the response came from something other than
   the badge they picked — without this, you get "gpt-o4-mini says I'm
   Claude" confusion like the Apr 12 bug report. */
.model-card.model-substituted .model-label {
  color: #f59e0b;
}
.model-card.model-substituted {
  border-color: rgba(245, 158, 11, 0.3);
}

.model-card .model-time {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.model-card.streaming {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.model-card.error {
  border-color: var(--error);
}

.model-card.error .model-name {
  color: var(--error);
}

/* ========== SUPERPOWER: REFINED PROMPT ========== */

/* Inline disclosure widget — no card chrome, just a thin left border
   that subtly identifies it as the refined version of the question.
   Open by default on desktop, collapsed by default on mobile (via the
   media query at the bottom of this file). */
.refined-prompt-card {
  width: 100%;
  margin: 4px 0 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--superpower-dim);
  background: transparent;
  box-shadow: none;
}

.refined-prompt-card > summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--superpower);
  padding: 4px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.refined-prompt-card > summary::-webkit-details-marker {
  display: none;
}

.refined-prompt-card > summary::before {
  content: "▸";
  display: inline-block;
  font-size: 10px;
  transition: transform var(--transition);
}

.refined-prompt-card[open] > summary::before {
  transform: rotate(90deg);
}

.refined-prompt-card .refined-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
  font-style: italic;
  padding-bottom: 8px;
  /* overflow-wrap doesn't inherit; long unbreakable strings (URLs,
     dotted tokens) were running off-screen on phone viewports because
     the parent .message rule didn't propagate. Mirror it here. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.refined-prompt-card textarea {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  min-height: 60px;
  transition: border-color var(--transition);
}

.refined-prompt-card textarea:focus {
  border-color: var(--superpower);
  box-shadow: 0 0 0 3px var(--superpower-glow);
}

.refined-send-btn {
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  border: none;
  background: var(--superpower);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  transition: background var(--transition);
}

.refined-send-btn:hover {
  background: var(--superpower-dim);
}

/* ========== SUPERPOWER: COMPILED ANSWER ========== */

/* No card border. Identity comes from a thin top accent rule + the
   purple "Superpower Answer" label. The body flows as normal page
   content with comfortable typography. */
.compiled-answer {
  width: 100%;
  margin-top: 20px;
  padding: 16px 0 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-top: 2px solid var(--superpower-dim);
}

.compiled-answer .compiled-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 8px;
}

.compiled-answer .compiled-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--superpower);
}

.compiled-answer .compiled-time {
  font-size: 10px;
  color: var(--text-dim);
}

.compiled-answer .content {
  font-size: 16px;
  line-height: 1.75;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ========== ANSWER BLOCK: per-query DOM scope ========== */

/* Wrapper around a single pipeline run's DOM (pipeline pills, refined
   prompt card, chain-details, compiled answer). We scope all the pipeline
   querySelector calls to this wrapper so Q2's compile:delta can't overwrite
   Q1's compiled-answer. Uses display: flex (column) so children stack
   naturally with explicit gap — `display: contents` was tried first but had
   edge-case rendering issues with the nested <details> chain-details element
   on some browsers, where the summary line could disappear entirely after
   the compiled-answer was appended and chain-details was moved below it. */
.answer-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.answer-block > * {
  max-width: 100%;
  min-width: 0;
}

/* ========== SUPERPOWER: COLLAPSIBLE CHAIN ========== */

.chain-details {
  max-width: 100%;
  width: 100%;
  margin: 12px auto 0;
  overflow-x: auto;
}

.chain-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  padding: 6px 0;
  user-select: none;
  background: transparent;
  border: none;
  text-align: left;
  list-style: none;
  display: inline-block;
}

.chain-details summary::-webkit-details-marker {
  display: none;
}

.chain-details summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform var(--transition);
}

.chain-details[open] summary::before {
  content: "▾ ";
}

.chain-details summary:hover {
  text-decoration: underline;
}

.chain-details[open] summary {
  margin-bottom: 12px;
}

/* ========== PIPELINE STATUS ========== */

.pipeline-status {
  max-width: 100%;
  width: 100%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
  flex-wrap: wrap;
  padding: 0 4px;
}

.pipeline-stop {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #ef4444;
  border: 1px solid #dc2626;
  border-radius: 20px;
  cursor: pointer;
  transition: background var(--transition);
}

.pipeline-stop:hover:not(:disabled) {
  background: #dc2626;
}

.pipeline-stop:disabled {
  background: var(--surface-3);
  color: var(--text-dim);
  border-color: var(--border);
  cursor: default;
}

.pipeline-aborted-note {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Connection-interrupted recovery card. Shown when the SSE pipe to
   /api/pipeline closes without a terminal event (proxy idle-close,
   server crash, network drop). Visually distinct from the simple
   .pipeline-aborted-note above because it requires user action — the
   amber border + Resend button signal "you need to do something"
   instead of just informing. */
.pipeline-interrupted-card {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}

.pipeline-interrupted-card .interrupted-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #f59e0b;
  margin-bottom: 8px;
}

.pipeline-interrupted-card .interrupted-icon {
  font-size: 16px;
  line-height: 1;
}

.pipeline-interrupted-card .interrupted-title {
  font-size: 14px;
}

.pipeline-interrupted-card .interrupted-body p {
  margin: 0 0 8px 0;
  color: var(--text-dim);
  line-height: 1.5;
}

.pipeline-interrupted-card .interrupted-meta {
  margin: 8px 0;
  font-size: 12px;
  color: var(--text-dim);
}

.pipeline-interrupted-card .interrupted-meta strong {
  color: var(--text);
}

.pipeline-interrupted-card .interrupted-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.pipeline-interrupted-card .interrupted-resend {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
}

.pipeline-interrupted-card .interrupted-resend:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.pipeline-interrupted-card .interrupted-resend:active {
  transform: translateY(0);
}

.pipeline-step {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  font-size: 11px;
  font-weight: 500;
}

.pipeline-step.active {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.pipeline-step.done {
  color: var(--success);
  border-color: var(--success-dim);
}

.pipeline-step.skipped {
  opacity: 0.35;
  text-decoration: line-through;
}

.pipeline-arrow {
  color: var(--text-muted);
  font-size: 10px;
}

.pipeline-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.pipeline-check {
  color: var(--success);
  font-weight: bold;
  font-size: 13px;
}

/* ========== COUNCIL GRID ========== */

.council-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

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

.council-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  max-height: 600px;
}

.chain-details .council-card {
  max-height: none;
  height: auto;
}

.council-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.council-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.council-time {
  font-size: 10px;
  color: var(--text-dim);
}

.council-models {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 10px;
  line-height: 1.4;
}

.council-status {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 8px;
}

.fact-check-card {
  grid-column: 1 / -1;
  height: auto;
  max-height: none;
  border-color: var(--warning-dim);
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.06);
}

.fact-check-card .council-label {
  color: var(--warning);
}

.verdict-card {
  border-color: var(--success-dim);
}

.verdict-card .council-label {
  color: var(--success);
}

.council-card .content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.chain-details .council-card .content {
  overflow-y: visible;
  flex: none;
}

.council-card .content::-webkit-scrollbar {
  width: 4px;
}
.council-card .content::-webkit-scrollbar-track {
  background: transparent;
}
.council-card .content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* ========== MARKDOWN CONTENT ========== */

.content h1, .content h2, .content h3, .content h4 {
  margin: 14px 0 8px;
  line-height: 1.3;
  color: var(--text);
}
.content h1 { font-size: 1.3em; }
.content h2 { font-size: 1.15em; }
.content h3 { font-size: 1.05em; }
.content h4 { font-size: 1em; }
.content h1:first-child, .content h2:first-child, .content h3:first-child {
  margin-top: 0;
}

.content p {
  margin: 8px 0;
}

.content ul, .content ol {
  margin: 8px 0;
  padding-left: 20px;
}

.content li {
  margin: 4px 0;
}

.content blockquote {
  border-left: 3px solid var(--accent-dim);
  padding: 4px 14px;
  margin: 10px 0;
  color: var(--text-secondary);
  background: rgba(99, 102, 241, 0.04);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.content table {
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
  width: 100%;
}

.content th, .content td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}

.content th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--text-secondary);
}

.content code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  color: var(--accent-hover);
}

.content pre {
  background: var(--surface-2);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 10px 0;
  border: 1px solid var(--border);
}

.content pre code {
  background: none;
  padding: 0;
  color: var(--text);
}

.content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

.content a {
  color: var(--accent-hover);
  text-decoration: none;
  transition: color var(--transition);
}

.content a:hover {
  text-decoration: underline;
  color: var(--accent);
}

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

.content img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

/* ========== RESPONSIVE — TABLET ========== */

@media (max-width: 900px) {
  #sidebar {
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 0;
    z-index: 50;
    box-shadow: var(--shadow-lg);
    margin-left: 0 !important;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  #sidebar:not(.collapsed) {
    transform: translateX(0);
  }

  #sidebar.collapsed {
    transform: translateX(-100%);
    margin-left: 0 !important;
  }
}

/* ========== RESPONSIVE — MOBILE ========== */

@media (max-width: 640px) {
  header {
    padding: 0 8px;
    height: 48px;
    gap: 4px;
  }

  .header-logo-icon {
    width: 22px;
    height: 22px;
  }

  /* On mobile, keep the wordmark visible but compact — without it the
     header has no brand at all. */
  .header-logo-text {
    font-size: 13px;
  }

  /* Hide secondary header chrome on phones — the header was running
     ~9 visible items into ~360px and the brand was clipping off the
     LEFT edge while items spilled past the right. Aggressive hide:
     keep only sidebar toggle + brand + settings (⚙️) + billing
     (credits/Account). Theme toggle, admin link, user-display chip,
     and Sign-out button are all available inside the settings popover
     (mobile-only items added to it). */
  /* !important across the row — there's a higher-specificity light-theme
     rule ([data-theme="light"] #chat-screen #theme-toggle, etc.) that
     sets display:flex with width/height. Without !important my mobile
     hide rules lose the cascade and the buttons keep showing. */
  .header-surface-badge { display: none !important; }
  /* Hide secondary cross-product links by default; the .primary
     variant ("Eval") stays visible so the user can reach the other
     surface in one tap. Catalog + others live in the settings popover. */
  .header-nav-link { display: none !important; }
  .header-nav-link.header-nav-link-primary {
    display: inline-flex !important;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
  }
  #chat-screen #theme-toggle { display: none !important; }
  #chat-screen #nav-admin-chat { display: none !important; }
  #chat-screen #user-settings-btn { display: none !important; }
  #chat-screen #logout-btn { display: none !important; }
  /* Make sure the header itself can't horizontal-scroll if anything
     does manage to overflow — clip with overflow:hidden on the row. */
  #chat-screen header { overflow: hidden; }
}

/* Settings-popover items that should ONLY appear on phones — they
   mirror standalone header buttons that desktop hides them via the
   "always-visible" header pattern. Outside the @media block so the
   default state is `display:none`; the @media rule below flips them
   on for phone widths. */
/* !important wins over .popover-link / button rules below that
   would otherwise reset display to block at desktop width. The
   user-reported bug: nav items 'Eval runner', 'Catalog changes',
   'Admin console', 'Toggle dark mode', 'Sign out' showed in the
   chat-settings popover even on desktop because .popover-link's
   display:block beat .popover-mobile-only's display:none on source-
   order ties. Forcing it as !important makes mobile-only behave
   the way the class name promises. */
.popover-mobile-only { display: none !important; }
/* Section header + visual break between 'chat settings' (toggles +
   privacy + data hosting) and 'navigation & account' (page links +
   theme + sign out) when both are stacked in the same popover on
   phone widths. Two earlier attempts (subtle bg fill, then 2px
   accent top border + 10px label) were both reported as invisible
   by the user even after hard-refresh and visual scrutiny. Going
   chunky: a 4px accent rule on top, 12px label with bigger padding,
   accent tint background, and force-show via display:block !important
   so any stray rule that hides bare <div>s in the popover can't win.
   Also flip the @media gate so the divider shows on EVERY width
   (matches the always-visible chat settings above it — even on
   desktop the divider acts as a clear group label, with the
   nav items hidden by their own popover-mobile-only rule). */
.popover-section-divider {
  display: block !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  font-weight: 800;
  padding: 12px 10px 8px;
  margin: 12px -8px 4px;
  border-top: 4px solid var(--accent);
  background: var(--accent-glow);
}
/* On phone widths the divider shows above the nav links, which is the
   primary use case. On desktop, the nav links are hidden — so the
   divider would float alone above nothing. Hide on desktop. */
@media (min-width: 641px) {
  .popover-section-divider { display: none !important; }
}
.popover-link {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
.popover-link:hover { background: var(--card2); color: var(--text); }
@media (max-width: 640px) {
  .popover-mobile-only { display: block !important; }

  header h1 {
    font-size: 13px;
    display: none;
  }

  .header-right {
    gap: 4px;
  }

  .mode-pill {
    padding: 4px 10px;
    font-size: 11px;
  }

  .mode-bar #model-select {
    font-size: 11px;
    max-width: 120px;
  }

  #theme-toggle,
  #settings-btn {
    padding: 5px 6px;
  }

  #logout-btn {
    font-size: 11px;
    padding: 4px 8px;
  }

  main {
    padding: 16px 12px 32px;
  }

  .message {
    padding: 12px 14px;
    font-size: 14px;
  }

  #chat-form {
    padding: 10px 12px 14px;
  }

  .input-wrapper {
    padding: 2px 2px 2px 12px;
  }

  #prompt {
    font-size: 14px;
    padding: 8px 0;
  }

  #send-btn {
    width: 32px;
    height: 32px;
  }

  .pipeline-status {
    gap: 3px;
  }

  .pipeline-step {
    font-size: 10px;
    padding: 4px 7px;
  }

  .council-card {
    height: 300px;
  }

  .model-card {
    height: 250px;
  }

  .settings-popover {
    right: -40px;
    min-width: 180px;
  }

  .compiled-answer {
    padding-top: 12px;
    margin-top: 16px;
  }

  .refined-prompt-card {
    padding-left: 12px;
  }

  .message {
    font-size: 15px;
    line-height: 1.65;
    padding-bottom: 10px;
  }

  .message + .message {
    margin-top: 14px;
    padding-top: 14px;
  }

  .compiled-answer .content {
    font-size: 15px;
    line-height: 1.7;
  }

  /* Markdown tables get a stacked-row layout under 640px so they don't
     horizontally scroll off-screen. Each row becomes a vertical card,
     each cell becomes "Header: value". */
  #messages table {
    display: block;
    width: 100%;
    overflow: visible;
  }
  #messages table thead {
    display: none;
  }
  #messages table tbody, #messages table tr {
    display: block;
    width: 100%;
  }
  #messages table tr {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
  }
  #messages table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border: none;
  }
  #messages table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-dim);
    flex-shrink: 0;
  }
}

/* --- Billing --- */

.billing-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.billing-link:hover {
  border-color: var(--accent);
  color: var(--text);
}

.billing-link svg {
  flex-shrink: 0;
}

.billing-link.low {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.billing-link.bo {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

.tier-notice {
  font-size: 13px;
  color: var(--text-dim);
  padding: 8px 16px;
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.tier-notice a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.tier-notice a:hover {
  text-decoration: underline;
}

.word-estimate {
  font-size: 12px;
  padding: 4px 16px;
  color: var(--text-dim);
}

.word-estimate .estimate-ok {
  color: var(--text-dim);
}

.word-estimate .estimate-warn {
  color: #f59e0b;
}

.balance-block-msg {
  padding: 16px;
  border: 1px solid #f59e0b40;
  border-radius: var(--radius);
  background: #f59e0b08;
}

.balance-block-msg strong {
  color: #f59e0b;
  font-size: 15px;
}

.balance-block-msg p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

.balance-block-msg a {
  color: var(--accent);
  text-decoration: underline;
}

.multiplier-grid {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mult-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.mult-tier {
  font-weight: 700;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
  min-width: 110px;
  text-align: center;
}

.mult-tier.mini { background: #22c55e20; color: #22c55e; }
.mult-tier.standard { background: var(--accent-glow); color: var(--accent); }
.mult-tier.premium { background: #f59e0b20; color: #f59e0b; }
.mult-tier.ultra { background: #ef444420; color: #ef4444; }

.mult-models {
  color: var(--text-dim);
  font-size: 12px;
}

/* Billing page */

.billing-content {
  width: 100%;
  /* Full width so wheel events anywhere on the screen hit this scroll
     container; inner content stays centered at ~720px via responsive
     side padding. Without this, hovering over the empty side margins
     dropped wheel events on .screen which had nothing to scroll. */
  padding: 24px max(16px, calc((100% - 720px) / 2));
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}

.billing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
}

.billing-card h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.plan-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.plan-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-badge.free {
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.plan-badge.pro {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: white;
}

.plan-price {
  font-size: 14px;
  color: var(--text-dim);
}

.balance-bar-container {
  margin-bottom: 12px;
}

.balance-bar-container label {
  font-size: 12px;
  color: var(--text-dim);
  display: block;
  margin-bottom: 6px;
}

.balance-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}

.balance-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.balance-bar-fill.warn {
  background: #f59e0b;
}

.balance-bar-fill.critical {
  background: #ef4444;
}

.balance-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

.balance-details {
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.plan-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

/* Upgrade-tier grid — v1.1 ladder. Each card is a button (or anchor for
   the Enterprise contact-sales link). Stacked vertically since the
   billing card is narrow; horizontal would crush the price/blurb. */
.upgrade-tier-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upgrade-tier-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name price" "blurb blurb";
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.upgrade-tier-btn:hover {
  border-color: var(--accent);
  background: var(--card);
}
.upgrade-tier-btn .upgrade-tier-name {
  grid-area: name;
  font-weight: 600;
  font-size: 14px;
}
.upgrade-tier-btn .upgrade-tier-price {
  grid-area: price;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}
.upgrade-tier-btn .upgrade-tier-blurb {
  grid-area: blurb;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.45;
}
.upgrade-tier-btn.enterprise-link {
  border-style: dashed;
}

/* TRIAL_EXPIRED / NO_CREDITS banner — sticky above the chat composer
   when the backend signals a hard stop. Two visual variants reuse the
   same shape; the trial flavor is amber (recoverable for 90 days),
   no-credits is more urgent in red. */
.balance-banner {
  margin: 12px 16px 0;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card2);
}
.balance-banner.trial-expired {
  border-color: #b8862a;
  background: rgba(184, 134, 42, 0.08);
}
.balance-banner.no-credits {
  border-color: #b94a4a;
  background: rgba(185, 74, 74, 0.08);
}
/* Soft countdown — distinct from the hard-stop banners above. Uses
   the JSE accent green so it reads as informational, not alarming.
   When the trial ends, the harder amber/red banners above take over. */
.balance-banner.trial-countdown {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.balance-banner .banner-headline {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text);
}
.balance-banner .banner-body {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 10px;
}
.balance-banner .banner-actions {
  display: flex;
  gap: 8px;
}
.balance-banner .btn-accent {
  font-size: 13px;
  padding: 6px 12px;
}
.balance-banner .btn-ghost {
  font-size: 13px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
}

.pro-benefits {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-top: 4px;
}

.pro-benefits strong {
  color: var(--text);
  font-size: 13px;
}

.pro-benefits ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.pro-benefits li {
  margin-bottom: 2px;
}

.currency-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-dim);
}

.currency-selector select {
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
}

.btn-accent {
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}

.btn-accent:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-secondary {
  padding: 10px 20px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
}

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

.btn-danger {
  padding: 8px 16px;
  background: transparent;
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.btn-small {
  padding: 4px 10px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
}

/* Pack grid */

.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.pack-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.pack-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.pack-words {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.pack-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.pack-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
}

/* BO connection */

.bo-connect-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.bo-connect-form input {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
}

.bo-connect-form input:focus {
  border-color: var(--accent);
  outline: none;
}

.bo-connect-form button {
  padding: 10px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
}

.bo-connected {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.bo-connected-badge {
  padding: 6px 14px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

/* Usage table */

.usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.usage-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--text-dim);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}

.usage-table td {
  padding: 8px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

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

.usage-table th.num,
.usage-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.prompt-history-sub {
  margin: -4px 0 12px;
  font-size: 12px;
}

.prompt-history-table .ph-when {
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.prompt-history-table .ph-mode-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-secondary);
  white-space: nowrap;
}

.prompt-history-table .ph-prompt {
  max-width: 480px;
}

.prompt-history-table .ph-preview {
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

.prompt-history-table .ph-sub {
  font-size: 11px;
  margin-top: 3px;
  word-break: break-word;
}

.prompt-history-table .ph-credits {
  font-weight: 500;
  white-space: nowrap;
}

.usage-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.text-dim {
  color: var(--text-dim);
}

/* --- Dashboard --- */

.header-link {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

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

.month-select {
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.stat-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

.billing-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.billing-card-header h2 {
  margin: 0;
}

.billing-card .subhead {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 20px 0 8px;
}

.status-completed { color: var(--text); }
.status-failed { color: #ef4444; }
.status-timed_out { color: #f59e0b; }

/* Settings form */

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.settings-form label {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

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

.settings-form input:disabled {
  opacity: 0.5;
}

.settings-form .btn-accent {
  align-self: flex-start;
  margin-top: 8px;
}

.user-display-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}

.user-display-btn:hover {
  color: var(--text);
}

/* Legal links */

.legal-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-links-list a {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
}

.legal-links-list a:hover {
  text-decoration: underline;
}

.legal-footer {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
  font-size: 12px;
}

.legal-footer a {
  color: var(--text-muted);
  text-decoration: none;
}

.legal-footer a:hover {
  color: var(--text-dim);
}

/* Danger zone */

.danger-zone {
  border-color: rgba(239, 68, 68, 0.2);
}

.danger-zone h2 {
  color: #ef4444;
}

.delete-confirm {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.delete-confirm input {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
}

/* Consent modal */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 480px;
  width: 90%;
  text-align: center;
}

.modal-box h2 {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 20px;
  line-height: 1.5;
}

.consent-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

/* Nootio export modal uses the same modal-box shell but left-aligns its
   form content (the export modal has labels, inputs, a space dropdown). */
#nootio-export-modal .modal-box {
  text-align: left;
}
#nootio-export-modal .modal-box h2 {
  text-align: left;
  margin-bottom: 16px;
}

/* Settings form action row — Connect / Disconnect buttons side by side. */
.settings-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Nootio export button — sibling of .md export button. All visual
   state (resting green stroke, hover bg, sizing) lives in the shared
   `.copy-btn, .export-btn` block higher up. */

/* Nootio toast — brief confirmation + link after a successful export.
   Fixed to the bottom-right, auto-fades via JS after ~4 seconds. */
.nootio-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.nootio-toast:hover {
  background: var(--surface-2);
  transform: translateY(-2px);
}
.nootio-toast.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

.consent-links a {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
}

.consent-links a:hover {
  text-decoration: underline;
}

/* Registration consent checkbox */

.consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}

.consent-checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.consent-checkbox a {
  color: var(--accent);
  text-decoration: none;
}

.consent-checkbox a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .billing-content {
    padding: 16px 12px;
  }
  .billing-card {
    padding: 16px;
  }
  .pack-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bo-connect-form {
    flex-direction: column;
  }
  .delete-confirm {
    flex-direction: column;
  }
}

/* ─────────────────────────────────────────────────────────────────
   JSE chat surface — reskin under [data-theme="light"].
   Preserves the existing #chat-screen HTML structure so app.js keeps
   working unchanged. Re-styles header, sidebar, mode pills, message
   stream, and composer to match the JSE design system. Step 5b of
   the redesign rollout.
   ───────────────────────────────────────────────────────────────── */

/* ── Chat header → JSE topbar pattern ── */
[data-theme="light"] #chat-screen > header {
  height: 52px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: 0 24px;
  font-family: "Inter", sans-serif;
}
[data-theme="light"] #chat-screen .header-left,
[data-theme="light"] #chat-screen .header-right {
  display: flex; align-items: center; gap: 10px;
}
[data-theme="light"] #chat-screen #sidebar-toggle {
  width: 30px; height: 30px;
  background: transparent; border: none; border-radius: 5px;
  color: var(--dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
[data-theme="light"] #chat-screen #sidebar-toggle:hover { background: var(--card2); color: var(--ink); }

[data-theme="light"] #chat-screen .header-brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
}
[data-theme="light"] #chat-screen .header-logo-icon { display: none; }
[data-theme="light"] #chat-screen .header-logo-text { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
[data-theme="light"] #chat-screen .header-logo-accent {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic; color: var(--accent); font-weight: 500;
}

[data-theme="light"] #chat-screen .header-surface-badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px; letter-spacing: 0.12em;
  padding: 2px 6px; background: var(--card2);
  border: 1px solid var(--line); border-radius: 3px;
  color: var(--dim); text-transform: uppercase;
}

[data-theme="light"] #chat-screen .header-nav-link {
  font-size: 13px; color: var(--dim);
  padding: 4px 8px; border-radius: 5px;
  text-decoration: none;
}
[data-theme="light"] #chat-screen .header-nav-link:hover { color: var(--ink); background: var(--card2); }

[data-theme="light"] #chat-screen #theme-toggle,
[data-theme="light"] #chat-screen #settings-btn,
[data-theme="light"] #chat-screen #user-settings-btn {
  width: 30px; height: 30px;
  background: transparent; border: none; border-radius: 5px;
  color: var(--dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
[data-theme="light"] #chat-screen #theme-toggle:hover,
[data-theme="light"] #chat-screen #settings-btn:hover,
[data-theme="light"] #chat-screen #user-settings-btn:hover { background: var(--card2); color: var(--ink); }
[data-theme="light"] #chat-screen #user-settings-btn {
  width: auto;
  padding: 4px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  font-size: 12.5px; color: var(--ink);
  font-family: "IBM Plex Mono", monospace; letter-spacing: 0.04em;
}
[data-theme="light"] #chat-screen #user-settings-btn:hover { background: var(--card2); }

[data-theme="light"] #chat-screen #billing-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 100px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--dim);
  text-decoration: none; cursor: pointer;
}
[data-theme="light"] #chat-screen #billing-btn:hover { color: var(--ink); }
[data-theme="light"] #chat-screen #billing-btn-text { color: var(--ink); font-weight: 500; }

[data-theme="light"] #chat-screen #logout-btn {
  background: transparent; border: none;
  font-size: 13px; color: var(--dim);
  padding: 4px 8px; border-radius: 5px; cursor: pointer;
  font-family: inherit;
}
[data-theme="light"] #chat-screen #logout-btn:hover { color: var(--ink); background: var(--card2); }

[data-theme="light"] #chat-screen #nav-admin-chat {
  font-size: 13px !important;
  padding: 4px 8px !important;
  border-radius: 5px;
  color: var(--accent) !important;
}
[data-theme="light"] #chat-screen #nav-admin-chat:hover { background: var(--card2); }

/* ── Sidebar (chat history) → JSE sidebar pattern ── */
[data-theme="light"] #chat-screen #sidebar {
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 14px 0;
}
[data-theme="light"] #chat-screen #new-chat-btn {
  margin: 6px 14px 10px;
  padding: 8px 12px;
  border: 1px dashed var(--dim2); border-radius: 6px;
  font-size: 12.5px; color: var(--dim); cursor: pointer;
  background: transparent;
  display: flex; align-items: center; gap: 8px;
  width: calc(100% - 28px);
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
[data-theme="light"] #chat-screen #new-chat-btn:hover { border-color: var(--accent); color: var(--accent); }

[data-theme="light"] #chat-screen #chat-list {
  padding: 0 6px;
}
[data-theme="light"] #chat-screen .chat-item {
  padding: 7px 12px;
  font-size: 12.5px; color: var(--dim);
  border-radius: 4px;
  line-height: 1.35;
  cursor: pointer;
}
[data-theme="light"] #chat-screen .chat-item:hover { background: var(--card2); color: var(--ink); }
[data-theme="light"] #chat-screen .chat-item.active,
[data-theme="light"] #chat-screen .chat-item.current { background: rgba(31, 122, 82, 0.08); color: var(--ink); }
[data-theme="light"] #chat-screen .chat-item-title { font-size: 12.5px; line-height: 1.35; }
[data-theme="light"] #chat-screen .chat-item-meta,
[data-theme="light"] #chat-screen .chat-item-date {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--dim);
}

/* ── Mode bar — pills + model select ── */
[data-theme="light"] #chat-screen .mode-bar {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 12px 24px 0;
}
[data-theme="light"] #chat-screen .mode-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
[data-theme="light"] #chat-screen .mode-pill {
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  padding: 5px 11px;
  background: var(--card); border: 1px solid var(--line); border-radius: 100px;
  color: var(--dim); cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
[data-theme="light"] #chat-screen .mode-pill:hover:not(.active) { color: var(--ink); border-color: var(--dim); }
[data-theme="light"] #chat-screen .mode-pill.active {
  background: var(--accent); color: var(--bg); border-color: var(--accent);
}
[data-theme="light"] #chat-screen #model-select {
  padding: 6px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 5px;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  color: var(--ink);
}

/* ── Composer (input + send) ── */
[data-theme="light"] #chat-screen #chat-form {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 12px 24px 16px;
}
[data-theme="light"] #chat-screen .input-wrapper {
  display: flex; align-items: center; gap: 10px;
  padding: 6px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 100px;
}
[data-theme="light"] #chat-screen .input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 122, 82, 0.12);
}
[data-theme="light"] #chat-screen #prompt {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 13px; font-family: inherit; color: var(--ink);
  padding: 6px 14px; resize: none; line-height: 1.5;
}
[data-theme="light"] #chat-screen #prompt::placeholder { color: var(--dim); }
[data-theme="light"] #chat-screen #send-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--bg); border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
[data-theme="light"] #chat-screen #send-btn:hover { opacity: 0.9; }
[data-theme="light"] #chat-screen #send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
[data-theme="light"] #chat-screen #send-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

[data-theme="light"] #chat-screen .word-estimate {
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  color: var(--dim); margin-top: 8px; padding: 0 8px;
}
[data-theme="light"] #chat-screen .estimate-warn { color: var(--warn); }
[data-theme="light"] #chat-screen .estimate-ok { color: var(--accent); }

/* ── Message stream surface ── */
[data-theme="light"] #chat-screen #messages {
  background: var(--bg);
}
[data-theme="light"] #chat-screen .message,
[data-theme="light"] #chat-screen .answer-block {
  background: var(--card);
  border: 1px solid var(--line);
}
[data-theme="light"] #chat-screen .role { color: var(--dim); font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Settings popover ── */
[data-theme="light"] #chat-screen #settings-popover {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* ── Verify-email banner ── */
[data-theme="light"] #verify-banner {
  background: rgba(184, 134, 42, 0.08); color: var(--warn);
  border: 1px solid rgba(184, 134, 42, 0.3);
  border-radius: 0;
  padding: 10px 24px;
}
[data-theme="light"] #verify-banner button {
  background: var(--warn); color: var(--bg); border: none;
  padding: 4px 10px; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 12px;
}