/* Atlas — theme system
 * Themes: legacy (original backup), black (pure dark), light (clean light)
 * Applied via html[data-theme="…"] + CSS variables. See theme.js for toggle/rollback.
 */

/* `hidden` must actually hide. Any author rule setting `display` outranks the user-agent
 * `[hidden]{display:none}`, so an element styled by class — `header a.ghost` sets `inline-flex` —
 * stays on screen with the attribute set and no visible reason why. That is how Sign in and Sign
 * out came to be painted side by side. Global, so the next component cannot rediscover it. */
[hidden]{display:none !important}

/* ---- Theme: Legacy (original) ------------------------------------------- */
:root,
html[data-theme="legacy"] {
  --bg: #0b0f19;
  --panel: #121829;
  --panel2: #0e1422;
  --border: #222b42;
  --text: #e6ebf5;
  --muted: #8a97b3;
  --accent: #4f8cff;
  --accent2: #22c55e;
  --user: #1b2336;
  --bot: #0f1626;
  --chip: #1a2238;

  --accent-rgb: 79, 140, 255;
  --logo-end: #7c5cff;
  --code-bg: #0a0e1a;
  --th-bg: #0e1626;
  --av-user-bg: #2a3454;
  --av-user-fg: #cfe0ff;
  --link-fg: #cfe0ff;
  --muted-strong: #5d6b8a;
  --hover-surface: #1a2540;
  --select-hover-bg: #1e2842;
  --soft-surface: rgba(26, 34, 56, 0.6);
  --soft-surface-2: rgba(26, 34, 56, 0.55);
  --soft-surface-3: rgba(26, 34, 56, 0.5);
  --soft-surface-4: rgba(18, 24, 41, 0.55);
  --item-hover: rgba(26, 34, 56, 0.75);
  --header-bg: linear-gradient(180deg, rgba(14, 20, 34, 0.98) 0%, rgba(11, 15, 25, 0.98) 100%);
  --header-shadow: 0 1px 0 rgba(79, 140, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow: rgba(0, 0, 0, 0.35);
  --modal-shade: rgba(0, 0, 0, 0.55);
  --danger-fg: #ffb4b4;
  --danger-bg: #5a2b2b;
  --danger-border: #7a3a3a;
  --danger-hover-bg: rgba(255, 100, 100, 0.12);
  --chip-tool: #bcd0f7;
  --chip-intent-fg: #cdb6ff;
  --chip-intent-border: #3a2f63;
  --chip-intent-bg: #1c1733;
  --chip-aud-fg: #9ff0c8;
  --chip-aud-border: #274d3b;
  --chip-aud-bg: #142a20;
  --chip-err-fg: #ffb4b4;
  --chip-err-border: #5a2b2b;
  --chip-err-bg: #2a1820;
  --chip-tid: #7f8db0;
  --user-hover-fg: #b8c8e8;
  --src-ok-fg: #9ff0c8;
  --src-ok-border: rgba(34, 197, 94, 0.35);
  --src-ok-bg: rgba(20, 42, 32, 0.5);
  --src-warn-fg: #fde68a;
  --src-warn-border: rgba(234, 179, 8, 0.35);
  --src-warn-bg: rgba(42, 36, 20, 0.5);
  --src-bad-fg: #ffb4b4;
  --src-bad-border: rgba(239, 68, 68, 0.35);
  --src-bad-bg: rgba(42, 24, 24, 0.5);
  --advanced-dim-border: rgba(34, 43, 66, 0.8);
  --clarify-hover: #152038;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a97b3' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---- Theme 1: Pure Black Dark ------------------------------------------- */
html[data-theme="black"] {
  --bg: #000000;
  --panel: #0a0a0a;
  --panel2: #0a0a0a;
  --border: #222222;
  --text: #ffffff;
  --muted: #cfcfcf;
  --accent: #2563eb;
  --accent2: #22c55e;
  --user: #111111;
  --bot: #0a0a0a;
  --chip: #141414;

  --accent-rgb: 37, 99, 235;
  --logo-end: #3b82f6;
  --code-bg: #050505;
  --th-bg: #111111;
  --av-user-bg: #1a1a1a;
  --av-user-fg: #e8e8e8;
  --link-fg: #dbeafe;
  --muted-strong: #a3a3a3;
  --hover-surface: #161616;
  --select-hover-bg: #1a1a1a;
  --soft-surface: rgba(20, 20, 20, 0.85);
  --soft-surface-2: rgba(20, 20, 20, 0.8);
  --soft-surface-3: rgba(20, 20, 20, 0.75);
  --soft-surface-4: rgba(10, 10, 10, 0.9);
  --item-hover: rgba(37, 99, 235, 0.12);
  --header-bg: #000000;
  --header-shadow: 0 1px 0 rgba(37, 99, 235, 0.08), 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow: rgba(0, 0, 0, 0.55);
  --modal-shade: rgba(0, 0, 0, 0.7);
  --danger-fg: #fecaca;
  --danger-bg: #450a0a;
  --danger-border: #7f1d1d;
  --danger-hover-bg: rgba(239, 68, 68, 0.15);
  --chip-tool: #bfdbfe;
  --chip-intent-fg: #ddd6fe;
  --chip-intent-border: #4c1d95;
  --chip-intent-bg: #1e1b2e;
  --chip-aud-fg: #bbf7d0;
  --chip-aud-border: #166534;
  --chip-aud-bg: #052e16;
  --chip-err-fg: #fecaca;
  --chip-err-border: #7f1d1d;
  --chip-err-bg: #1c0a0a;
  --chip-tid: #a3a3a3;
  --user-hover-fg: #e5e5e5;
  --src-ok-fg: #86efac;
  --src-ok-border: rgba(34, 197, 94, 0.4);
  --src-ok-bg: rgba(20, 83, 45, 0.35);
  --src-warn-fg: #fde68a;
  --src-warn-border: rgba(234, 179, 8, 0.4);
  --src-warn-bg: rgba(66, 32, 6, 0.4);
  --src-bad-fg: #fecaca;
  --src-bad-border: rgba(239, 68, 68, 0.4);
  --src-bad-bg: rgba(69, 10, 10, 0.45);
  --advanced-dim-border: #333333;
  --clarify-hover: #161616;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cfcfcf' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---- Theme 2: Clean Light ----------------------------------------------- */
html[data-theme="light"] {
  --bg: #ffffff;
  --panel: #f8fafc;
  --panel2: #f8fafc;
  --border: #e5e7eb;
  --text: #111111;
  --muted: #4b5563;
  --accent: #2563eb;
  --accent2: #16a34a;
  --user: #eff6ff;
  --bot: #f8fafc;
  --chip: #ffffff;

  --accent-rgb: 37, 99, 235;
  --logo-end: #1d4ed8;
  --code-bg: #f1f5f9;
  --th-bg: #f1f5f9;
  --av-user-bg: #dbeafe;
  --av-user-fg: #1e3a8a;
  --link-fg: #1d4ed8;
  --muted-strong: #6b7280;
  --hover-surface: #f1f5f9;
  --select-hover-bg: #f1f5f9;
  --soft-surface: rgba(248, 250, 252, 0.95);
  --soft-surface-2: rgba(241, 245, 249, 0.95);
  --soft-surface-3: rgba(241, 245, 249, 0.9);
  --soft-surface-4: rgba(248, 250, 252, 0.95);
  --item-hover: rgba(37, 99, 235, 0.08);
  --header-bg: #ffffff;
  --header-shadow: 0 1px 0 rgba(37, 99, 235, 0.06), 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow: rgba(15, 23, 42, 0.12);
  --modal-shade: rgba(15, 23, 42, 0.4);
  --danger-fg: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-hover-bg: rgba(185, 28, 28, 0.08);
  --chip-tool: #1e40af;
  --chip-intent-fg: #5b21b6;
  --chip-intent-border: #ddd6fe;
  --chip-intent-bg: #f5f3ff;
  --chip-aud-fg: #166534;
  --chip-aud-border: #bbf7d0;
  --chip-aud-bg: #f0fdf4;
  --chip-err-fg: #b91c1c;
  --chip-err-border: #fecaca;
  --chip-err-bg: #fef2f2;
  --chip-tid: #6b7280;
  --user-hover-fg: #1e3a8a;
  --src-ok-fg: #166534;
  --src-ok-border: rgba(22, 163, 74, 0.35);
  --src-ok-bg: rgba(220, 252, 231, 0.9);
  --src-warn-fg: #854d0e;
  --src-warn-border: rgba(202, 138, 4, 0.4);
  --src-warn-bg: rgba(254, 249, 195, 0.9);
  --src-bad-fg: #b91c1c;
  --src-bad-border: rgba(239, 68, 68, 0.4);
  --src-bad-bg: rgba(254, 226, 226, 0.9);
  --advanced-dim-border: #d1d5db;
  --clarify-hover: #eff6ff;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234b5563' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---- Base layout -------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:background-color .2s ease,color .2s ease;
}
.app-shell{display:flex;height:100vh;overflow:hidden}
.app-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

/* --- sidebar --- */
.sidebar{
  width:272px;flex:0 0 272px;display:flex;flex-direction:column;
  background:var(--panel2);border-right:1px solid var(--border);
  position:relative;z-index:50;
}
.sb-inner{display:flex;flex-direction:column;height:100%;min-height:0}
.sb-top{padding:14px 12px 10px;border-bottom:1px solid var(--border);flex:0 0 auto}
.sb-new-chat{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--chip);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .15s ease,box-shadow .2s ease;
}
.sb-new-chat:hover{
  border-color:rgba(var(--accent-rgb),.45);background:var(--hover-surface);
  transform:translateY(-1px);box-shadow:0 2px 10px var(--shadow);
}
.sb-new-icon{font-size:16px;line-height:1;color:var(--accent)}
.sb-search-wrap{margin-top:10px}
.sb-search{
  width:100%;padding:8px 12px;border-radius:9px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);font:inherit;font-size:13px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.sb-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.sb-search::placeholder{color:var(--muted-strong)}
.sb-list{flex:1;overflow-y:auto;padding:8px 8px 16px}
.sb-group{margin-bottom:12px}
.sb-group-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:6px 10px 4px}
.sb-item{
  display:flex;align-items:center;gap:4px;padding:9px 8px 9px 10px;border-radius:9px;cursor:pointer;
  border:1px solid transparent;margin-bottom:2px;
  transition:background .15s ease,border-color .15s ease;
}
.sb-item:hover{background:var(--item-hover)}
.sb-item.active{background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.35)}
.sb-item-pin{width:14px;flex:0 0 14px;font-size:10px;opacity:.85}
.sb-item-title{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-item-menu{
  flex:0 0 28px;width:28px;height:28px;border:none;border-radius:7px;background:transparent;
  color:var(--muted);font-size:16px;line-height:1;cursor:pointer;opacity:0;
  transition:opacity .15s ease,background .15s ease,color .15s ease;
}
.sb-item:hover .sb-item-menu,.sb-item.active .sb-item-menu{opacity:1}
.sb-item-menu:hover{background:rgba(var(--accent-rgb),.15);color:var(--link-fg)}
.sb-empty{padding:20px 12px;color:var(--muted);font-size:13px;text-align:center}
.sb-menu{
  position:fixed;z-index:200;min-width:148px;padding:6px;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 28px var(--shadow);
  animation:hdrFadeIn .15s ease;
}
.sb-menu button{
  display:block;width:100%;text-align:left;padding:8px 12px;border:none;border-radius:7px;
  background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer;
  transition:background .15s ease;
}
.sb-menu button:hover{background:rgba(var(--accent-rgb),.12)}
.sb-menu button.danger{color:var(--danger-fg)}
.sb-menu button.danger:hover{background:var(--danger-hover-bg)}

/* --- modal --- */
.conv-modal-backdrop{
  position:fixed;inset:0;z-index:10000;
  display:none;align-items:center;justify-content:center;padding:20px;
  background:var(--modal-shade);
  animation:hdrFadeIn .2s ease;
}
.conv-modal-backdrop.open{display:flex}
.conv-modal{
  position:relative;z-index:10001;pointer-events:auto;
  width:100%;max-width:400px;background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:20px 22px;box-shadow:0 16px 48px var(--shadow);
}
.conv-modal h3{margin:0 0 10px;font-size:16px;font-weight:650}
.conv-modal p{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.5}
.conv-modal-actions{display:flex;justify-content:flex-end;gap:8px}
.conv-modal-actions button{
  padding:8px 16px;border-radius:9px;font-size:13px;font-weight:500;
  cursor:pointer;pointer-events:auto;position:relative;z-index:1;
}
.conv-modal-actions .danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-fg)}

/* Error banner. Lives in the shared sheet because every page renders one, but for a long time only
   the pages that happened to define their own could style it — the estate map announced "you are
   not signed in" as bare unstyled text, which reads as a broken page rather than a recoverable one.
   Dashboard restates this on its own token scale; that override is intentional. */
.err-banner{
  background:var(--danger-bg);color:var(--danger-fg);border:1px solid var(--danger-border);
  border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.45;margin-bottom:14px;
}
.err-banner a{color:inherit;text-decoration:underline}
.err-banner button{margin-left:8px}
@media (max-width:900px){
  .sidebar{width:240px;flex-basis:240px}
}
@media (max-width:720px){
  .sidebar{width:100%;flex:0 0 auto;max-height:38vh;border-right:0;border-bottom:1px solid var(--border)}
  .app-shell{flex-direction:column}
}

/* --- header ---------------------------------------------------------------
 * One definition, composed per page by architect/ui_shell.py. Four hand-maintained copies is how
 * the same nav link came to have a tooltip on Settings and none on Dashboard.
 *
 * Metrics follow MUI v9's system rather than being picked by eye: the 8px spacing grid, a 64px
 * regular toolbar collapsing to 56px, the standard easing curve, a 3px focus-visible ring, and
 * hover/selected drawn as alpha state layers so all three themes get them for free.
 */
:root{
  --pa-ease:cubic-bezier(.4,0,.2,1);
  --pa-dur:200ms;
  --pa-focus:0 0 0 3px rgba(var(--accent-rgb),.4);
}
header.app-header,
header{
  display:flex;align-items:center;
  gap:clamp(12px,1.8vw,24px);
  padding:8px clamp(16px,2.4vw,28px);
  min-height:64px;
  border-bottom:1px solid var(--border);
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  flex-wrap:wrap;position:sticky;top:0;z-index:100;
  box-shadow:var(--header-shadow);
}
/* The brand is a link home. Padded and pulled back by the same amount so the hover surface is
   comfortably large without moving anything next to it. */
.header-brand{
  display:flex;align-items:center;gap:12px;min-width:0;
  text-decoration:none;color:inherit;
  padding:6px 10px;margin:-6px -10px;border-radius:12px;
  transition:background var(--pa-dur) var(--pa-ease);
}
.header-brand:hover{background:var(--soft-surface-3)}
.header-brand:focus-visible{outline:none;box-shadow:var(--pa-focus)}
header .logo{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--logo-end) 100%);
  display:flex;align-items:center;justify-content:center;
  /* 17px, not 13px: the monogram is a single letter (Atlas), and one glyph at the two-letter size
     reads as thin and off-centre inside a 38px tile. */
  font-size:17px;font-weight:700;letter-spacing:.02em;color:#fff;flex:0 0 38px;
  box-shadow:0 2px 12px rgba(var(--accent-rgb),.35),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform var(--pa-dur) var(--pa-ease),box-shadow var(--pa-dur) var(--pa-ease);
}
.header-brand:hover .logo{transform:translateY(-1px);box-shadow:0 4px 18px rgba(var(--accent-rgb),.45),inset 0 1px 0 rgba(255,255,255,.2)}
.header-titles{min-width:0;display:flex;flex-direction:column;gap:1px}
header h1{font-size:17px;margin:0;font-weight:650;letter-spacing:-.02em;line-height:1.25;color:var(--text)}
/* `display:block` is load-bearing: .sub is a <span> in the composed header, and an inline box
   ignores the vertical rhythm and sits alongside the h1 instead of under it. */
header .sub{
  display:block;color:var(--muted);font-size:12px;line-height:1.4;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
header .spacer{flex:1;min-width:8px}

/* Primary product nav. Scrolls rather than wrapping when the viewport cannot hold four tabs, so
   the header keeps its height instead of growing a second row of chrome. */
.header-nav{
  display:inline-flex;align-items:center;gap:2px;
  padding:4px;border-radius:12px;
  background:var(--soft-surface);border:1px solid var(--border);
  max-width:100%;overflow-x:auto;
  /* Firefox and Edge respectively; WebKit needs the pseudo-element below. The bar scrolls when it
     has to, but a scrollbar drawn through the nav pills looks like a rendering fault. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.header-nav::-webkit-scrollbar{display:none}
.header-nav .nav-link{
  position:relative;appearance:none;text-decoration:none;color:var(--muted);white-space:nowrap;
  font-size:13px;font-weight:600;letter-spacing:.01em;padding:8px 14px;border-radius:9px;
  transition:background var(--pa-dur) var(--pa-ease),color var(--pa-dur) var(--pa-ease);
}
.header-nav .nav-link:hover{color:var(--text);background:var(--soft-surface-3)}
.header-nav .nav-link:focus-visible{outline:none;color:var(--text);box-shadow:var(--pa-focus)}
.header-nav .nav-link.is-active,
.header-nav .nav-link[aria-current="page"]{
  color:var(--text);background:var(--chip);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.28),0 1px 2px rgba(0,0,0,.18);
}
/* The 2px accent bar from MUI Tabs, kept on the pill so the current page reads at a glance and
   not only by a slightly lighter background. */
.header-nav .nav-link[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;
  height:2px;border-radius:2px;background:var(--accent);
}

.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
/* An uppercase micro-label stacked over its control belongs on a form, not in a 64px toolbar. */
.ctrl-inline{display:inline-flex;align-items:center;gap:8px}
header .ctrl-inline label.lbl{
  display:inline-block;margin-bottom:0;
  text-transform:none;letter-spacing:.01em;font-size:12px;font-weight:600;
}
.theme-controls select{min-width:104px}
.header-user{
  font-size:11px;font-weight:500;color:var(--muted);
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:6px 12px;border-radius:999px;
  background:var(--soft-surface);border:1px solid var(--border);
  transition:border-color var(--pa-dur) var(--pa-ease),background var(--pa-dur) var(--pa-ease),color var(--pa-dur) var(--pa-ease);
}
.header-user:not(:empty):hover{border-color:rgba(var(--accent-rgb),.35);color:var(--user-hover-fg)}
header .ghost:focus-visible{outline:none;box-shadow:var(--pa-focus)}

/* The subtitle is the first thing to go: it restates the page the nav already names. */
@media (max-width:1180px){
  header .sub{display:none}
}
@media (max-width:900px){
  header.app-header,
  header{padding:8px 16px;min-height:56px;gap:10px}
  header h1{font-size:15px}
  header .logo{width:32px;height:32px;flex:0 0 32px;border-radius:9px}
  header .spacer{display:none}
  .header-actions{order:2}
  /* Nav drops to its own full-width row instead of squeezing the actions off the edge. */
  .header-nav{order:3;width:100%;justify-content:flex-start}
}
@media (max-width:600px){
  header .ctrl-inline label.lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .header-brand,.header-brand .logo,.header-nav .nav-link,.header-user{transition:none}
  .header-brand:hover .logo{transform:none}
}
header label.lbl,
.advanced-bar label.lbl{
  display:block;font-size:10px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;
}
header .ctrl-group,
.advanced-bar .ctrl-group{display:flex;flex-direction:column;min-width:0}
header select,
.advanced-bar select{
  font:inherit;font-size:13px;color:var(--text);
  background-color:var(--chip);border:1px solid var(--border);border-radius:9px;
  padding:7px 30px 7px 11px;min-width:128px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:var(--select-chevron);
  background-repeat:no-repeat;background-position:right 10px center;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .15s ease;
}
header select:hover,
.advanced-bar select:hover{border-color:rgba(var(--accent-rgb),.45);background-color:var(--select-hover-bg)}
header select:focus,
.advanced-bar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
header button,
header a.ghost{
  font:inherit;cursor:pointer;color:var(--text);
  border:1px solid var(--border);border-radius:9px;
  padding:7px 14px;font-size:13px;font-weight:500;
  text-decoration:none;display:inline-flex;align-items:center;
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease;
}
header button.ghost,
header a.ghost{background:var(--soft-surface-3)}
header button.ghost:hover,
header a.ghost:hover{
  background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.4);color:var(--link-fg);
  transform:translateY(-1px);box-shadow:0 2px 8px var(--shadow);
}
header button.ghost:active,
header a.ghost:active{transform:translateY(0);box-shadow:none}

/* Mode/audience live under the header only when Advanced is on — not in the primary chrome. */
.advanced-bar{
  border-bottom:1px solid var(--border);
  background:var(--soft-surface-4);
  padding:8px 24px;
  animation:hdrFadeIn .2s ease;
}
.advanced-bar-inner{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  max-width:1100px;
}
.advanced-bar-label{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding-bottom:10px;
}
header #advToggle[aria-expanded="true"]{
  background:rgba(var(--accent-rgb),.14);border-color:var(--accent);color:var(--link-fg);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.2);
}
@keyframes hdrFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:720px){
  header{padding:12px 16px;gap:12px}
  .header-nav{order:3;width:100%;justify-content:stretch}
  .header-nav .nav-link{flex:1;text-align:center}
  .header-actions{width:100%;justify-content:space-between}
  .advanced-bar{padding:8px 16px}
  .advanced-bar select{min-width:0;flex:1}
  header select{min-width:0}
  .header-user{max-width:140px}
  .theme-controls{width:auto}
}
@media (max-width:480px){
  header h1{font-size:15px}
  header .sub{font-size:11px}
  .header-actions{flex-wrap:wrap}
}

/* --- global controls --- */
label.lbl{font-size:11px;color:var(--muted)}
select,button{font:inherit;color:var(--text);background:var(--chip);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
button{cursor:pointer}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
html[data-theme="legacy"] button.primary{background:#2563eb;border-color:#2563eb}
button.primary:hover{filter:brightness(1.05)}
button.ghost{background:transparent}
main{flex:1;overflow:auto;padding:22px 0;min-height:0}
.wrap{max-width:880px;margin:0 auto;padding:0 18px}
.msg{display:flex;gap:12px;margin:18px 0}
.msg .av{width:30px;height:30px;border-radius:8px;flex:0 0 30px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.msg.user .av{background:var(--av-user-bg);color:var(--av-user-fg)}
.msg.bot .av{background:linear-gradient(135deg,var(--accent),var(--logo-end));color:#fff}
.bubble{background:var(--bot);border:1px solid var(--border);border-radius:12px;padding:12px 16px;max-width:100%;overflow-x:auto}
.msg.user .bubble{background:var(--user)}
.bubble :first-child{margin-top:0}.bubble :last-child{margin-bottom:0}
.bubble pre{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:12px;overflow:auto}
.bubble code{background:var(--code-bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:13px}
.bubble pre code{border:0;padding:0;background:none}
.bubble table{border-collapse:collapse;width:100%;font-size:13.5px}
.bubble th,.bubble td{border:1px solid var(--border);padding:6px 9px;text-align:left}
.bubble th{background:var(--th-bg)}
.bubble .mermaid{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:12px;margin:10px 0;overflow:auto;text-align:center}
.bubble .diagram-fallback{background:var(--code-bg);border:1px dashed var(--border);border-radius:8px;padding:10px 12px;margin:10px 0;overflow:auto}
.bubble .diagram-fallback-cap{font-size:12px;color:var(--muted);margin-bottom:6px}
.bubble .diagram-fallback pre{margin:0;white-space:pre-wrap;word-break:break-word}
.bubble .reactflow-host{margin:12px 0;min-height:1px}
.bubble .chart-wrap{position:relative;height:320px;margin:10px 0;background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:10px}
.trace{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.trace .chip{font-size:11px;color:var(--muted);background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:2px 9px}
.trace .chip .meta{color:var(--muted-strong);font-variant-numeric:tabular-nums;margin-left:4px}
.trace .chip.tool{color:var(--chip-tool)}
.trace .chip.intent{color:var(--chip-intent-fg);border-color:var(--chip-intent-border);background:var(--chip-intent-bg);text-transform:capitalize}
.trace .chip.aud{color:var(--chip-aud-fg);border-color:var(--chip-aud-border);background:var(--chip-aud-bg);text-transform:capitalize}
.trace .chip.evidence{color:var(--chip-aud-fg);border-style:dashed;text-transform:capitalize}
.trace .chip.claims{color:var(--chip-tool);border-style:dotted}
.trace .chip.faithfulness{color:var(--chip-tool);border-style:solid}
.trace .chip.metadata{color:var(--chip-aud-fg);border-style:double}
.trace .chip.relations{color:var(--chip-route);border-style:dashed}
.trace .chip.visuals{color:var(--accent);border-style:double}
.trace .chip.err{color:var(--chip-err-fg);border-color:var(--chip-err-border);background:var(--chip-err-bg)}
.trace .chip.tid{cursor:pointer;color:var(--chip-tid);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.trace .chip.tid:hover{border-color:var(--accent);color:var(--link-fg)}
.hint{color:var(--muted);font-size:13px}
.feedback{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.feedback .lbl{margin-right:2px}
.feedback .fb{border:1px solid var(--border, #333);background:transparent;border-radius:8px;padding:2px 8px;cursor:pointer;font-size:14px;line-height:1.4}
.feedback .fb:hover{background:rgba(127,127,127,.12)}
.feedback .fb:disabled{opacity:.45;cursor:default}
.feedback .fb-status{font-size:12px}
.examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.examples .ex{font-size:13px;color:var(--link-fg);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:9px 12px;cursor:pointer}
.examples .ex:hover{border-color:var(--accent)}
.audience-pref{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--soft-surface)}
.audience-pref.is-ask{border-color:rgba(var(--accent-rgb),.35)}
.audience-pref.needs-pick{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.audience-pref-lbl{display:block;margin-bottom:10px;font-size:13px;color:var(--text);line-height:1.4}
.audience-pref.is-set{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.audience-pref.is-set .audience-pref-lbl{margin-bottom:0}
.audience-pref .opts{display:flex;flex-wrap:wrap;gap:8px}
.audience-pref .opt{font-size:13px;color:var(--link-fg);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer}
.audience-pref .opt:hover{border-color:var(--accent);background:var(--clarify-hover)}
.audience-pref-change{font-size:12px;padding:4px 10px}
/* The question an Ask link brought in, held until we know who is asking. Without it on screen the
   reader saw a generic greeting and a "who are you?" prompt, and concluded Ask was broken. */
.audience-pref-held{
  margin:0 0 8px;padding:8px 10px;
  border-left:2px solid var(--accent);border-radius:0 8px 8px 0;
  background:var(--soft-surface-4);
  font-size:12px;line-height:1.45;color:var(--muted);
}
.audience-pref-held q{color:var(--text);font-style:normal;quotes:"\201C" "\201D"}
.clarify{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.clarify .lbl{display:block;margin-bottom:8px;font-size:12px;color:var(--muted)}
.clarify .opts{display:flex;flex-wrap:wrap;gap:8px}
.clarify .opt{font-size:13px;color:var(--link-fg);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer}
.clarify .opt:hover{border-color:var(--accent);background:var(--clarify-hover)}
.clarify .opt.skip{color:var(--muted);border-style:dashed}
.clarify .opt.skip:hover{color:var(--text)}
.epic-card{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.epic-card.resolved{opacity:.6}
.epic-card button:disabled{cursor:default;opacity:.55}
.epic-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.epic-kind{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.epic-proj{font-size:12px;color:var(--chip-aud-fg);border:1px solid var(--chip-aud-border);background:var(--chip-aud-bg);border-radius:999px;padding:1px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.epic-badge{font-size:11px;border-radius:999px;padding:1px 8px;border:1px solid var(--border);color:var(--chip-tid)}
.epic-badge.real,.epic-badge.err{color:var(--chip-err-fg);border-color:var(--chip-err-border);background:var(--chip-err-bg)}
.epic-title{font-size:15px;font-weight:650;margin:2px 0}
.epic-goal{font-size:13px;color:var(--muted);margin-bottom:2px}
.epic-count{font-size:12px;color:var(--muted);margin:6px 0 2px}
.epic-stories{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.epic-story-title{font-weight:600}
.epic-story-body{font-size:13px;color:var(--muted);margin:2px 0}
.epic-ac{margin:2px 0 0;padding-left:16px;font-size:12px;color:var(--muted)}
.epic-actions{display:flex;gap:8px;margin-top:12px}
.epic-confirm{font-size:13px;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:600}
.epic-confirm:hover{filter:brightness(1.06)}
.epic-cancel{font-size:13px;color:var(--link-fg);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 14px;cursor:pointer}
.epic-cancel:hover{border-color:var(--accent);background:var(--clarify-hover)}
.epic-hint{font-size:12px;color:var(--muted);margin-top:10px}
.epic-result{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.epic-keys{font-size:12px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* MCP write approval: the confirm card reuses .epic-card, plus a grant button and a header badge
   that makes an active conversation-wide approval impossible to miss. */
.mcpw-confirm{font-size:13px;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:600}
.mcpw-confirm:hover{filter:brightness(1.06)}
.mcpw-grant,.mcpw-cancel{font-size:13px;color:var(--link-fg);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 14px;cursor:pointer}
.mcpw-grant:hover,.mcpw-cancel:hover{border-color:var(--accent);background:var(--clarify-hover)}
.epic-card.mcp-write{border-left:3px solid var(--accent)}
.mcp-grants{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mcp-grant{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  color:var(--chip-err-fg);background:var(--chip-err-bg);
  border:1px solid var(--chip-err-border);border-radius:999px;padding:5px 6px 5px 10px;
  white-space:nowrap;
}
.mcp-grant-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.mcp-revoke{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:inherit;background:transparent;border:1px solid currentColor;border-radius:999px;
  padding:2px 7px;cursor:pointer;opacity:.75;
}
.mcp-revoke:hover{opacity:1;background:rgba(var(--accent-rgb),.12)}
footer{border-top:1px solid var(--border);background:var(--panel2)}
.composer{
  max-width:880px;margin:0 auto;padding:12px 18px;
  display:flex;flex-direction:column;gap:10px;
}
.composer-input-row{
  display:flex;gap:10px;align-items:flex-end;width:100%;
}
.composer-actions{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.composer-secondary{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.composer-primary{display:flex;align-items:center;gap:8px;margin-left:auto}
.composer-secondary button{
  height:36px;padding:0 14px;border-radius:10px;font-size:13px;font-weight:500;
}
textarea{
  flex:1;resize:none;min-height:48px;max-height:200px;
  background:var(--panel);border:1px solid var(--border);color:var(--text);
  border-radius:14px;padding:12px 14px;font:inherit;
}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
textarea::placeholder{color:var(--muted-strong)}
button#send.primary{
  height:48px;padding:0 18px;border-radius:14px;min-width:88px;
}
/* Stop generation — exact spec */
button.stop-btn{
  display:none;
  background:transparent;
  border:1px solid #EF4444;
  color:#EF4444;
  border-radius:14px;
  height:48px;
  padding:0 18px;
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
button.stop-btn.visible{display:inline-flex;align-items:center;justify-content:center}
button.stop-btn:hover{
  background:rgba(239,68,68,0.12);
}
button.stop-btn:active{transform:translateY(1px)}
button.stop-btn:disabled{opacity:.55;cursor:default}
body.is-generating button.stop-btn{display:inline-flex;align-items:center;justify-content:center}
body.is-generating #send{opacity:.55}
.typing{display:inline-flex;gap:4px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:b 1.2s infinite}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes b{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* Live turn progress: interactive "where I'm looking" feed while the agent works,
   then a collapsed history above the answer. Must stay readable on demos without
   competing with the finished answer. */
.activity{margin:0 0 12px;font-size:13px}
.activity.live{
  padding:12px 14px;border:1px solid var(--border);border-radius:12px;
  background:var(--panel);box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.activity .ap-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  font-weight:600;color:var(--fg);line-height:1.35;
}
.activity .ap-looking{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--border);border-radius:999px;
  padding:2px 8px;background:var(--soft-surface, transparent);
}
.activity .ap-now-label{flex:1 1 160px;min-width:0}
.activity .ap-elapsed{
  font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;
  color:var(--muted);margin-left:auto;
}
.activity.live .ap-body{margin-top:10px;max-height:360px;overflow-y:auto;scroll-behavior:smooth}
.activity .ap-phase{margin:10px 0 3px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.activity .ap-phase:first-child{margin-top:0}
.activity .ap-steps{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.activity .ap-steps li{list-style:none;position:relative;color:var(--muted);line-height:1.5;padding:1px 0}
.activity .ap-steps li::before{content:"";position:absolute;left:-12px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.55}
.activity .ap-steps li.ap-now{
  color:var(--fg);font-weight:600;
}
.activity .ap-steps li.ap-now::before{
  width:7px;height:7px;left:-13.5px;top:7px;opacity:1;
  box-shadow:0 0 0 0 rgba(var(--accent-rgb,79,140,255),.45);
  animation:apPulse 1.6s ease infinite;
}
.activity .ap-tool{
  display:inline-block;margin-left:6px;font-size:10.5px;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--border);border-radius:6px;padding:0 6px;vertical-align:1px;
}
.activity .ap-res{color:var(--muted);opacity:.75}
.activity .ap-res::before{content:"\2014\00a0"}

/* Phase rail — shows how far through Understanding → Gathering → … Finishing */
.activity .ap-rail{
  list-style:none;margin:10px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;
}
.activity .ap-rail-step{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;color:var(--muted);opacity:.55;
}
.activity .ap-rail-step + .ap-rail-step::before{
  content:"";width:10px;height:1px;background:var(--border);margin-right:2px;
}
.activity .ap-rail-dot{
  width:7px;height:7px;border-radius:50%;background:var(--border);flex:0 0 auto;
}
.activity .ap-rail-step.is-done{opacity:.85;color:var(--muted)}
.activity .ap-rail-step.is-done .ap-rail-dot{background:var(--accent);opacity:.7}
.activity .ap-rail-step.is-active{opacity:1;color:var(--fg);font-weight:600}
.activity .ap-rail-step.is-active .ap-rail-dot{
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb,79,140,255),.22);
}
.activity .ap-rail-label{white-space:nowrap}

@keyframes apPulse{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb,79,140,255),.4)}
  70%{box-shadow:0 0 0 6px rgba(var(--accent-rgb,79,140,255),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb,79,140,255),0)}
}
@media (prefers-reduced-motion:reduce){
  .activity .ap-steps li.ap-now::before,
  .activity .ap-rail-step.is-active .ap-rail-dot{animation:none;box-shadow:none}
  .activity.live .ap-body{scroll-behavior:auto}
}

/* Completed turns collapse to one line; expanding restores the full history. */
.activity.done{border-left:2px solid var(--border);padding-left:10px}
.activity.done>summary{cursor:pointer;color:var(--muted);font-size:12px;list-style:none;width:fit-content}
.activity.done>summary::-webkit-details-marker{display:none}
.activity.done>summary::before{content:"\25B8\00a0";display:inline-block;transition:transform .15s}
.activity.done[open]>summary::before{transform:rotate(90deg) translateX(-1px)}
.activity.done>summary:hover{color:var(--fg)}
.activity.done .ap-body{margin-top:6px}
@media (prefers-reduced-motion:reduce){.activity.done>summary::before{transition:none}}

/* Deep-research live progress (streamed while a background job runs). */
/* Deep research renders through the shared .activity panel; its own styles are gone with the
   duplicate JS humanizer that fed them. */