/* ============================================================
   SHELL — Investigation, node-faithful, THEME-AWARE (dark+light).
   ============================================================ */
:root{
  /* Ambient module background = REAL IMAGE ASSET (not CSS).
     Source: AI-generated ambient PNGs in ~/Documents/XPIN/ZEO SPARK/, re-exported as
     JPEG (sips q92, ≤1600w, ~110–205KB each) into ./assets/. Matches the Figma kit 1:1.
     --bgfall = the image's edge colour, shown if the JPEG fails to load.
     HISTORY: a pure-CSS radial-gradient trace of these images was built (pixel-diff ≈1.6/255)
     and REVERTED 2026-07-20 — accurate but visually flat, lost the atmospheric falloff.
     Do not re-convert to CSS. Grain is separate + still CSS, see --grain / .screen::before. */
  --bg:url("../assets/bg-investigation-dark.jpg");
  --bgfall:#14161d;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* top-bar chips + icon buttons — values taken from Figma "Header Actions" (5740:23708 light / 5740:23602 dark) */
  --hchip-bg:#27272a; --hchip-stroke:rgba(255,255,255,.05);
  /* composer controls hover — Figma Icon Button 4091:1399 State=Hover = Zinc/70. Stroke never changes. */
  --cc-hover:#3f3f46;
  --panel:#18181b; --panel-stroke:#27272a;
  --card:#212121; --card-stroke:rgba(110,110,110,.2);
  --pill:#27272a; --pill-hover:#323238;
  --ink:#fafafa; --ink-2:#ededed; --sub:#ababab; --ricon:#d4d4d4; --ticon:#8b92a0;
  --sel-bg:#fff; --sel-fg:#18181b;
  --hair:#111; --hcard:#262626; --hcard-stroke:#111; --meta:#71717a;
  --line:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.08);
  --brand-bg:#fff; --brand-fg:#000; --avatar-bg:#d4d4d4; --avatar-fg:#000000;
  --send-bg:#27272a; --send-fg:#ffffff;
  --send-active-bg:#fafafa; --send-active-fg:#0a0a0a;   /* send lights up only with something to send */
  --acard:#1b1b1b; --acard-stroke:#303030; --box:#212121; --box-stroke:rgba(110,110,110,.2);/* original: Figma Gray/50 #212121 box on #1b1b1b card, Gray/40 #6e6e6e@20% inside hairline */
  --acard-lift:#232323;/* main container bottom lifts just ~1 point (#1b1b1b→#232323), blending up into the dark top */
  /* answer container + inner box hairlines: OPAQUE = the RESOLVED colour of Figma's Gray/40 #6e6e6e@20% inside-stroke over the card. Opaque (not alpha) so it reads uniformly/crisply on every edge over the warm ambient backdrop — matching how Figma renders the inside stroke. --box-stroke #333 = #6e6e6e@20% resolved over #212121, so the inner cards stand out like Figma instead of a washed-out alpha hairline. */
  --dock-tint:rgba(9,9,11,.18); --dock-glow:rgba(3,3,6,.9); --dock-glow-mid:rgba(3,3,6,.34);
}
[data-theme="light"]{
  --bg:url("../assets/bg-investigation-light.jpg");
  --bgfall:#f7f1ee;
  --hchip-bg:#ffffff; --hchip-stroke:#e7e5e4;   /* white fill + visible hairline, per Figma */
  --cc-hover:#e4e4e7;                            /* mirrored step of the dark Zinc/80 → Zinc/70 hover */
  --panel:#ffffff; --panel-stroke:#e7e5e4;
  --card:#ffffff; --card-stroke:#d6d3d1;
  /* rail/pill surfaces + icon come from the DS Zinc ramp (Figma Rail Item v2 4110:1406):
     default Zinc/10 + Zinc/60 · hover Zinc/20 · selected Zinc/90 + Zinc/0 */
  --pill:#f4f4f5; --pill-hover:#e4e4e7;
  --ink:#1c1917; --ink-2:#44403c; --sub:#78716c; --ricon:#52525b; --ticon:#78716c;
  --sel-bg:#18181b; --sel-fg:#fafafa;
  --hair:#e7e5e4; --hcard:#f5f5f4; --hcard-stroke:#e7e5e4; --meta:#a8a29e;
  --line:rgba(0,0,0,.1); --line-strong:rgba(0,0,0,.16);
  --glass:rgba(0,0,0,.04); --glass-2:rgba(0,0,0,.06);
  --brand-bg:#18181b; --brand-fg:#fff; --avatar-bg:#18181b; --avatar-fg:#fff;
  --send-bg:#f5f5f4; --send-fg:#57534e;
  --send-active-bg:#18181b; --send-active-fg:#fff;
  --acard:#ffffff; --acard-stroke:#e7e5e4; --box:#f5f5f4; --box-stroke:#e7e5e4; --acard-lift:#ffffff;
  --dock-tint:rgba(244,244,247,.5); --dock-glow:rgba(244,244,247,.9); --dock-glow-mid:rgba(244,244,247,.45);
}
/* module-specific ambient backgrounds (Chat with Data = purple) */
[data-module="chat"]{--bgfall:#12131b;
  --bg:url("../assets/bg-chat-dark.jpg")}
[data-theme="light"][data-module="chat"]{--bgfall:#f4f0f5;
  --bg:url("../assets/bg-chat-light.jpg")}
/* Dashboard = cyan */
[data-module="dashboard"]{--bgfall:#151921;
  --bg:url("../assets/bg-dashboard-dark.jpg")}
[data-theme="light"][data-module="dashboard"]{--bgfall:#f0f4f7;
  --bg:url("../assets/bg-dashboard-light.jpg")}

.screen{position:relative;height:100vh;height:100dvh;overflow:hidden;
  background-color:var(--bgfall);background-image:var(--bg);background-size:cover;background-position:center;background-repeat:no-repeat}
/* film grain — inline SVG noise, kept behind content (same stacking level as .bgfx-ghost).
   overlay blend = symmetric grain (lightens + darkens, no brightness wash); opacity calibrated
   to the source images' measured grain amplitude (dark SD≈1.0, light SD≈0.5). */
.screen::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--grain) repeat;background-size:220px 220px;mix-blend-mode:overlay;opacity:.1}
[data-theme="light"] .screen::before{opacity:.05}
/* ---- module-switch transition: ambient bg crossfade + content fade/rise ---- */
.bgfx-ghost{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:1;transition:opacity .65s var(--ease);pointer-events:none}
.mod-enter .topbar{animation:modFade .5s var(--ease) both}
.mod-enter .home,.mod-enter .thread,.mod-enter .search-page,.mod-enter .page,.mod-enter .workbox,.mod-enter .dash-home{animation:modRise .5s var(--ease) both}
@keyframes modFade{from{opacity:0}to{opacity:1}}
@keyframes modRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- LEFT NAV ---------- */
.nav{position:absolute;top:24px;left:24px;bottom:24px;width:72px;z-index:30;
  background:var(--panel);border:1px solid var(--panel-stroke);border-radius:28px;
  display:flex;flex-direction:column;justify-content:space-between;padding:20px 16px;transition:width .22s var(--ease),padding .22s var(--ease);overflow:visible}
.nav.expanded{width:280px;padding:16px;justify-content:flex-start}
.brandmark{width:40px;height:40px;border-radius:10px;background:var(--brand-bg);color:var(--brand-fg);display:grid;place-items:center;font-weight:600;font-size:20px;flex:none}
/* Z logo doubles as the expand toggle: hover reveals the expand icon */
.nav-toggle{cursor:pointer;border:0;padding:0}
.brandmark .bm-z,.brandmark .bm-exp{display:grid;place-items:center;width:100%;height:100%}
.brandmark .bm-exp{display:none}
.brandmark .bm-exp svg{width:22px;height:22px}
.nav:not(.expanded) .brandmark:hover .bm-z{display:none}
.nav:not(.expanded) .brandmark:hover .bm-exp{display:grid}
.rail-divider{width:24px;height:1px;background:var(--hair);margin:8px auto}
.rail-item{position:relative;width:40px;height:40px;border-radius:999px;background:var(--pill);color:var(--ricon);display:grid;place-items:center;cursor:pointer;border:0;flex:none;transition:.15s}
.rail-item svg{width:20px;height:20px}
.rail-item:hover{background:var(--pill-hover)}
.rail-item.sel{background:var(--sel-bg);color:var(--sel-fg)}
.rail-avatar{position:relative;width:40px;height:40px;border-radius:999px;background:var(--avatar-bg);color:var(--avatar-fg);display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
/* tooltip that slides in from the right when a collapsed rail icon is hovered */
.tip{position:absolute;left:calc(100% + 16px);top:50%;transform:translate(-8px,-50%);
  background:var(--menu-bg);border:1px solid var(--panel-stroke);color:var(--ink);
  font-size:13px;font-weight:500;line-height:1;padding:8px 12px;border-radius:10px;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .14s var(--ease),transform .14s var(--ease);
  z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tip::before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:8px;height:8px;background:var(--menu-bg);border-left:1px solid var(--panel-stroke);border-bottom:1px solid var(--panel-stroke)}
.nav:not(.expanded) .rail-item:hover .tip,
.nav:not(.expanded) .rail-avatar:hover .tip{opacity:1;transform:translate(0,-50%)}
/* hover flyout: collapsed rail items that have sub-items show their list on the right */
.flyout{position:absolute;left:100%;top:-10px;padding-left:14px;pointer-events:none;opacity:0;transform:translateX(-6px);
  transition:opacity .14s var(--ease),transform .14s var(--ease);z-index:60}
/* same rhythm as the expanded list, per the Figma Nav Flyout component (6056:3724):
   rows 32 · gap 4 · header sits 8 above the first row · labels inset 10 to match */
.flyout-menu{background:var(--menu-bg);border:1px solid var(--panel-stroke);border-radius:14px;padding:6px;min-width:236px;
  display:flex;flex-direction:column;gap:4px;box-shadow:0 16px 44px rgba(0,0,0,.5)}
.flyout-hd{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);padding:8px 10px 4px}
/* a flyout row = session label + a hover ⋯ (same anatomy as .nx-subrow in the expanded nav) */
.flyout-item{position:relative;display:flex;align-items:center;min-height:32px;font-size:13px;color:var(--ink-2);
  border-radius:8px;cursor:pointer;white-space:nowrap}
.flyout-item>a{flex:1;min-width:0;display:block;line-height:32px;padding:0 10px;color:inherit;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flyout-item:hover{background:var(--glass);color:var(--ink)}
.flyout-item.flyout-sel{background:var(--glass-2);color:var(--ink);font-weight:500}
.flyout-item>.pop{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);line-height:0}
.flyout-item:hover>a,.flyout-item:has(>.pop.is-open)>a{padding-inline-end:32px}
.flyout-item:hover .nx-more,.flyout-item .pop.is-open .nx-more{opacity:1}
.flyout-item:not(:hover) .pop:not(.is-open) .nx-more{pointer-events:none}
.nav:not(.expanded) .rail-item.has-flyout:hover .flyout,
.nav:not(.expanded) .rail-item.has-flyout:has(.pop.is-open) .flyout{opacity:1;transform:translateX(0);pointer-events:auto}
.nav-top{display:flex;flex-direction:column;gap:16px;align-items:center}
.nav-bottom{display:flex;flex-direction:column;gap:8px;align-items:center}
.nav .exp{display:none;flex-direction:column;justify-content:space-between;flex:1;min-height:0}
.nav.expanded .col{display:none}
.nav.expanded .exp{display:flex}
.nx{display:flex;flex-direction:column;gap:20px;flex:1;min-height:0;overflow:hidden}
/* left inset 8 keeps the brand at 24 (matches Figma); right padding 0 so the collapse
   button sits flush at the content edge — vertically aligned with the search icon below (Figma 4058:1810). */
.nx-head{display:flex;align-items:center;gap:12px;padding:0;padding-inline-start:8px;height:40px}
.nx-head .word{font-weight:600;font-size:18px;color:var(--ink);flex:1}
/* Z mark + wordmark = go home; button reset so they look identical to before */
.nx-head .nav-home{border:0;padding:0;cursor:pointer;font-family:inherit}
.nx-head .word.nav-home{background:none;text-align:start;line-height:inherit}
.nx-head .toggle{color:var(--ricon);cursor:pointer;background:none;border:0;display:grid;place-items:center}
.nx-head .toggle svg{width:20px;height:20px}
.nx-quick{display:flex;gap:8px}
.nx-new{flex:1;height:44px;border-radius:12px;background:var(--pill);border:1px solid var(--line);color:var(--ink);font-weight:500;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.nx-new svg{width:16px;height:16px}
.nx-search{width:44px;height:44px;border-radius:12px;background:var(--pill);border:1px solid var(--line);color:var(--ricon);display:grid;place-items:center;cursor:pointer}
.nx-search svg{width:22px;height:22px}
.nx-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}
.nx-item{height:48px;border-radius:8px;padding:6px;padding-inline-end:12px;display:flex;align-items:center;gap:12px;color:var(--ink-2);font-weight:500;font-size:14px;cursor:pointer}
.nx-item .ico{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;flex:none}
.nx-item .ico svg{width:20px;height:20px}
.nx-item .lbl{flex:1}.nx-item .chev{width:16px;height:16px;color:var(--sub)}
.nx-item:hover{background:var(--glass)}
.nx-item.sel{background:var(--glass-2);color:var(--ink)}
[data-theme="dark"] .nx-item.sel .ico{background:var(--sel-bg);color:var(--sel-fg)}
/* rhythm mirrors the Figma component (Sub Link – Expanded 4055:1426): row 32, gap 6, indent 44 */
.nx-sub{display:flex;flex-direction:column;gap:6px;padding:4px 0;padding-inline-start:44px}
/* collapsible nav group (accordion) — smooth grid-rows collapse, no full re-render needed */
.nx-group{display:flex;flex-direction:column}
.nx-item[data-navgroup]{cursor:pointer}
.nx-subwrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s var(--ease),opacity .22s var(--ease);opacity:1}
.nx-subwrap>.nx-sub{overflow:hidden;min-height:0}
.nx-group.collapsed .nx-subwrap{grid-template-rows:0fr;opacity:0}
.nx-item .chev{transition:transform .22s var(--ease)}
.nx-group.collapsed>.nx-item .chev{transform:rotate(-90deg)}
/* history row = label + hover-revealed ⋯ (ChatGPT/Claude pattern). The ROW owns the
   hover surface so the label and the ⋯ read as one target. */
.nx-subrow{position:relative;display:flex;align-items:center;min-height:32px;border-radius:8px}
.nx-subrow:hover{background:var(--glass)}
.nx-subrow:hover>a{color:var(--ink)}
.nx-subrow.sub-sel{background:var(--glass-2)}
.nx-subrow.sub-sel>a{color:var(--ink);font-weight:500}
/* block, not flex — flex containers ignore text-overflow:ellipsis. line-height does the centring. */
.nx-sub a{flex:1;min-width:0;display:block;color:var(--sub);font-size:13px;line-height:32px;cursor:pointer;
  padding:0 10px;border-radius:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:padding-inline-end .12s var(--ease)}
/* the ⋯ FLOATS over the row — at rest it reserves no width, so labels keep their full
   length; only on hover does the label shorten to clear it (ChatGPT/Claude behaviour) */
.nx-subrow>.pop{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);line-height:0}
.nx-subrow:hover>a,.nx-subrow:has(>.pop.is-open)>a{padding-inline-end:32px}
.nx-rename{flex:1;min-width:0;width:100%;background:var(--glass);border:1px solid var(--ink);
  border-radius:6px;padding:5px 8px;margin:1px 0;color:var(--ink);font-family:var(--font-sans);
  font-size:13px;line-height:16px;outline:none}
.nx-more{width:24px;height:24px;flex:none;border:0;border-radius:6px;background:none;color:var(--sub);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s var(--ease),background .12s var(--ease),color .12s var(--ease)}
.nx-more svg{width:16px;height:16px}
/* revealed on row hover, and kept visible while its own menu is open */
.nx-subrow:hover .nx-more,.nx-subrow .pop.is-open .nx-more,.nx-more:focus-visible{opacity:1}
.nx-subrow:not(:hover) .pop:not(.is-open) .nx-more{pointer-events:none}   /* invisible ⋯ must not eat label clicks */
.nx-more:hover{background:none;color:var(--ink)}
.nx-sep{height:1px;background:var(--panel-stroke);margin:4px 0}
.nx-foot{height:56px;border-radius:8px;padding:8px;display:flex;align-items:center;gap:12px;cursor:pointer;margin-top:8px}
.nx-foot:hover{background:var(--glass)}
.nx-foot .av{width:40px;height:40px;border-radius:999px;background:var(--avatar-bg);color:var(--avatar-fg);display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
.nx-foot .nm{flex:1}.nx-foot .nm b{display:block;font-weight:500;font-size:14px;color:var(--ink)}.nx-foot .nm span{font-size:12px;color:var(--sub)}
.nx-foot .chev{width:16px;height:16px;color:var(--ink-2)}

/* ---------- STAGE / TOP BAR ---------- */
.stage{position:absolute;top:0;left:120px;right:24px;bottom:0;display:flex;flex-direction:column;transition:left .22s var(--ease),right .22s var(--ease)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:94px;padding:0 4px 0 8px;flex:none}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0}
.breadcrumb .bc-mut{color:var(--sub);font-weight:500}/* Figma 5740:23597 — Inter Medium */
.breadcrumb .bc-sep{color:var(--sub);opacity:.5}
.breadcrumb .bc-cur{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* Figma — Inter SemiBold */
/* pinned to the browser's top-right, always — independent of nav/history expand-collapse */
/* in-flow, right side of the topbar flex row — NOT position:fixed. Fixed pinned it to the viewport,
   so in any offset/scaled/preview context (e.g. Tablet ≤1024 frame) the buttons drifted off the
   breadcrumb's vertical centre. In flow, the topbar's align-items:center centres left + right
   clusters together on every screen. */
.hactions{display:flex;align-items:center;gap:8px;flex:none}
.hchip{height:40px;border-radius:999px;background:var(--hchip-bg);border:1px solid var(--hchip-stroke);display:flex;align-items:center;gap:6px;padding:0 12px;padding-inline-start:14px;color:var(--ink-2);font-weight:500;font-size:14px;cursor:pointer}
.hchip .dot{width:8px;height:8px;border-radius:50%;background:#34d399}
.hchip svg{width:18px;height:18px;color:var(--ricon)}.hchip .chev{width:14px;height:14px}
.hbtn{width:40px;height:40px;border-radius:999px;background:var(--hchip-bg);border:1px solid var(--hchip-stroke);color:var(--ricon);display:grid;place-items:center;cursor:pointer;flex:none}
.hbtn svg{width:18px;height:18px}
[data-theme="dark"] .hchip,[data-theme="dark"] .hbtn{border:1px solid rgba(255,255,255,.05)}
/* hover — same treatment + tokens as the composer controls (.cbtn/.cchip → --cc-hover / Zinc/70) */
.hchip,.hbtn{transition:background .15s var(--ease),color .15s var(--ease)}
.hchip:hover,.hbtn:hover{background:var(--cc-hover);color:var(--ink)}

/* ---------- HOME ---------- */
.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:0 41px 40px;overflow-y:auto}
.hero{display:flex;flex-direction:column;align-items:center;gap:58px}
.toggle{display:flex;align-items:center;gap:12px}
.toggle .pill{height:46px;border-radius:14px;background:var(--accent);color:#fff;display:flex;align-items:center;gap:9px;padding:0 20px;padding-inline-start:16px;font-weight:600;font-size:14px;border:0;cursor:pointer}
.toggle .pill svg{width:18px;height:18px}
.toggle .tg{width:48px;height:48px;border-radius:14px;background:var(--glass);border:1px solid var(--line-strong);color:var(--ricon);display:grid;place-items:center;cursor:pointer}
.toggle .tg svg{width:20px;height:20px}
[data-theme="dark"] .toggle .tg{border-color:rgba(255,255,255,.08)}
/* light: the unselected buttons are solid white on an 8% black hairline (Figma 5740:26964) */
[data-theme="light"] .toggle .tg{background:var(--card);border-color:rgba(0,0,0,.08)}
/* hover: a very light glassy white lifts in the background + the icon brightens toward ink.
   Both come from DS tokens (--glass-2, --ink); no colour wash. */
.toggle .tg{transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.toggle .tg:hover{background:var(--glass-2);color:var(--ink)}
.hero-text{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.hero-text h1{font-weight:600;font-size:36px;line-height:40px;letter-spacing:0;color:var(--ink)}
.hero-text p{font-weight:500;font-size:14px;line-height:20px;color:var(--sub);max-width:520px}
.stack820{width:820px;max-width:100%;display:flex;flex-direction:column;gap:62px}
.composer{background:var(--card);border:1px solid var(--card-stroke);border-radius:28px;padding:20px;display:flex;flex-direction:column;gap:20px;box-shadow:none}
.composer textarea{background:none;border:0;outline:none;resize:none;width:100%;min-height:24px;max-height:150px;color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:24px}
.composer textarea::placeholder{color:var(--sub)}
/* Reply-context row (Figma Reply composer 4870:1391): inline "↩ Replying to <answer> ×" + hairline */
.composer--reply{gap:14px}
.reply-row{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);color:var(--sub);font-size:16px;line-height:24px}
.reply-row .reply-ic{display:grid;place-items:center;flex:none;color:var(--ricon)}
.reply-row .reply-ic svg{width:16px;height:16px}
.reply-row .reply-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-row .reply-txt b{color:var(--ink);font-weight:600}
.reply-row .reply-x{flex:none;background:none;border:0;padding:2px;cursor:pointer;color:var(--ricon);display:grid;place-items:center}
.reply-row .reply-x:hover{color:var(--ink)}
.reply-row .reply-x svg{width:16px;height:16px}
.cc{display:flex;align-items:center;justify-content:space-between}
.cc-l,.cc-r{display:flex;align-items:center;gap:8px}
.cbtn{width:40px;height:40px;border-radius:999px;background:var(--pill);border:1px solid var(--line-strong);color:var(--ricon);display:grid;place-items:center;cursor:pointer;flex:none}
.cbtn svg{width:20px;height:20px}
.cchip{height:40px;border-radius:999px;background:var(--pill);border:1px solid var(--line-strong);color:var(--ink-2);display:flex;align-items:center;gap:6px;padding:0 12px;padding-inline-start:14px;font-weight:500;font-size:14px;cursor:pointer}
.cchip svg{width:18px;height:18px;color:var(--ricon)}.cchip .chev{width:14px;height:14px}
.send{width:40px;height:40px;border-radius:999px;background:var(--send-bg);color:var(--send-fg);display:grid;place-items:center;cursor:pointer;border:0;flex:none}
.send svg{width:20px;height:20px}
.suggests{display:flex;flex-direction:column;gap:14px;align-items:center}
.suggests .lbl{font-weight:600;font-size:12px;letter-spacing:1px;color:var(--sub)}
.sgrid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* DS interactive-surface state — Figma "Suggestion Card" 5925:22628
   default Zinc/90 + Zinc/80 stroke · hover Zinc/80 + Zinc/60 stroke */
/* Suggestion Card — matches the SCREEN (5740:23727): card surface #212121 + #6e6e6e@20%,
   same chrome as the widget cards. Hover = Zinc/80 on Zinc/60 (DS state 5925:22628). */
.scard{height:66px;border-radius:14px;background:var(--card);border:1px solid var(--card-stroke);display:flex;align-items:center;gap:13px;padding:0 17px;cursor:pointer;text-align:start;transition:background .15s var(--ease),border-color .15s var(--ease)}
.scard:hover{background:var(--surface-raised);border-color:var(--border-hover)}
.scard .ibox{width:34px;height:34px;border-radius:10px;background:var(--pill);display:grid;place-items:center;flex:none;color:var(--icon)}
.scard .ibox svg{width:18px;height:18px}
.scard span{font-weight:600;font-size:14px;line-height:20px;color:var(--ink)}

/* ---------- ANSWER THREAD (Answer Types — Calm container) ---------- */
/* the scroll viewport carries the SAME 24px top radius as the answer card, so content
   scrolling up under the topbar clips on the rounded corner instead of a sharp square cut */
.thread{flex:1;overflow-y:auto;padding:0 0 192px;display:flex;flex-direction:column;gap:24px;
  border-radius:24px 24px 0 0}
/* a lone answer fills the available height (no dead void) BUT is allowed to grow past it so
   tall answers scroll and reveal all their content — never clipped to the viewport. */
.thread>.ans:only-child{min-height:100%}
/* jump-to-turn: leave a small gap above the target, and flash it briefly on arrival */
.ans,.conv-turn{scroll-margin-top:18px}
.turn-flash{animation:turnFlash 1.5s var(--ease)}
@keyframes turnFlash{0%{box-shadow:0 0 0 0 var(--accent)}22%{box-shadow:0 0 0 2px var(--accent),0 12px 40px -12px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}

/* ---- Composer Dock (Figma "Glass"): frosted backdrop-blur + soft ambient dark glow.
       Answers scroll UNDER the composer; the band is a soft frost, NOT a hard patch. ---- */
.dock{position:absolute;left:0;right:0;bottom:0;height:216px;pointer-events:none;z-index:10}
/* frosted glass: 14px backdrop blur + faint tint, masked so the top edge dissolves (no clean-cut edge) */
.dock::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  background:var(--dock-tint);
  -webkit-mask-image:linear-gradient(to top,#000 40%,transparent);
          mask-image:linear-gradient(to top,#000 40%,transparent)}
/* ambient glow: soft blurred ellipse behind the composer (Figma Ambient Glow, layer-blur 80) */
.dock::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:960px;max-width:100%;height:210px;pointer-events:none;z-index:2;
  background:radial-gradient(60% 82% at 50% 92%,var(--dock-glow),var(--dock-glow-mid) 46%,transparent 72%)}
.dock .composer{position:absolute;left:50%;bottom:56px;transform:translateX(calc(-50% + 16px));
  width:820px;max-width:calc(100% - 48px);margin:0;pointer-events:auto;z-index:3}
.ans{position:relative;flex:none;width:100%;max-width:none;margin:0 auto;background:linear-gradient(180deg,var(--acard) 45%,var(--acard-lift) 100%);
  border-radius:24px;padding:40px 42px 42px;overflow:hidden;display:flex;flex-direction:column;gap:12px;animation:rise .3s var(--ease) both}
/* container hairline drawn on a TOP layer (above the ambient glow), opaque + uniform on every edge —
   mirrors Figma's inside stroke painted over fill+glow, so top corners stay as crisp as the bottom. */
.ans::after{content:"";position:absolute;inset:0;border:2px solid var(--acard-stroke);border-radius:24px;pointer-events:none;z-index:2}
/* opacity-only entrance: animating transform here would make .ans a containing block for
   position:fixed, which offsets the floated footer/⋯ menu. Fade only keeps menus viewport-anchored. */
@keyframes rise{from{opacity:0}to{opacity:1}}
.ans>*{position:relative;z-index:1}
/* Top Glow (ambient) — traced from Figma answer card node 4789:5256 (ellipse #F97316@.15).
   FIXED to the top of the answer viewport: it lives on the non-scrolling .stage (below the
   94px topbar), NOT on each answer box — so the module-colour ambient stays put while the
   thread scrolls under it, instead of scrolling off per-box (which looked patchy). It's a
   light front layer that fades out fast, so headline/text below stay crisp. var(--glow) is
   module-scoped, so Chat (purple) inherits it automatically.
   ONLY in the answer thread (:has(.thread)) — the home/search views keep their own ambient,
   so this overlay never adds a second glow band (which cut a hard edge on the home page). */
.stage:has(.thread)::before{content:"";position:absolute;top:94px;left:0;right:0;height:320px;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse 72% 88% at 50% -4%,var(--glow) 0%,var(--glow) 16%,transparent 78%)}
/* Answer Question Header — Figma 4821:1398: top-aligned row, question Inter Bold, timestamp Inter Regular #a1a1aa @80% */
.aqh{display:flex;align-items:flex-start;gap:11px;padding-bottom:15px;border-bottom:1px solid var(--glass)}
.aqh>svg{width:16px;height:16px;color:var(--ricon);flex:none}
.aqh .q{flex:1;font-size:14px;color:var(--ink);font-weight:700}
.aqh .tm{font-size:12px;color:var(--text-muted);opacity:.8}
.ans__prenote{font-size:15px;line-height:22px;color:var(--ink-2)}
/* cached-recall banner (answer type 4789:5392) — orange left accent, neutral lightbulb, no widgets below */
.ans__recall{display:flex;gap:14px;align-items:flex-start;margin-top:15px;padding:14px 20px;
  background:var(--glass);border:1px solid var(--border);border-inline-start:3px solid var(--accent);border-radius:12px}
.ans__recall>svg{width:20px;height:20px;color:var(--ricon);flex:none;margin-top:1px}
.ans__recall .rt{font-size:14px;line-height:22px;color:var(--sub)}
.ans__recall .rt b{color:var(--ink);font-weight:600}
.ans--recall .ans__h{margin-top:18px}
.ans__h{font-weight:600;font-size:34px;line-height:40px;letter-spacing:-.01em;color:var(--ink)}
.ans__s{font-size:14px;color:var(--sub)}
.ans__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;position:relative;z-index:5}/* lift above .ans__body so the chip tooltips paint over the widget cards */
.mchip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:29px;background:var(--panel);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink)}/* Figma 4130:1566 — Inter Semi Bold 12/16 */
.mchip svg{width:14px;height:14px;color:var(--ricon)}
.mchip.ok svg{color:#34d399}
/* clickable "Sourced from" chip → opens the source-tables menu */
.ans__meta .pop{display:inline-flex}
.mchip--btn{cursor:pointer}
.mchip--btn:hover{border-color:var(--panel-stroke);background:var(--pill)}
.mchip .mchip-chev{width:13px;height:13px;color:var(--ricon);margin-inline-start:-2px}
/* multi-line explanatory tooltip for the trust chips — overrides the single-line [data-tip] */
.mchip[data-tip]::after{bottom:auto;top:calc(100% + 10px);left:0;right:auto;white-space:normal;
  width:280px;max-width:min(280px,62vw);padding:11px 13px;line-height:1.55;font-weight:400;
  color:var(--sub);text-align:left;border-radius:12px;transform:translateY(4px)}
.mchip[data-tipside="r"][data-tip]::after{left:auto;right:0}
.mchip[data-tip]:hover::after{transform:translateY(0)}
/* source-tables dropdown */
.tables-menu{min-width:0;padding:6px}/* width is set to the chip's width in floatMenu */
.tables-hd{display:flex;align-items:center;gap:8px;padding:8px 10px 6px;font-size:12px;font-weight:600;color:var(--sub)}
.tables-hd svg{width:14px;height:14px;color:var(--ricon)}
.tables-hd .th-db{color:var(--ink)}
.tables-hd .th-n{margin-inline-start:auto;font-weight:500;color:var(--meta)}
.table-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;border-radius:9px;cursor:pointer;text-align:left}
.table-item:hover{background:var(--glass)}
.table-item .ti-ic svg{width:15px;height:15px;color:var(--ricon)}
.table-item .ti-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.table-item .ti-name{font-size:13px;font-weight:500;color:var(--ink)}
.table-item .ti-meta{font-size:11px;color:var(--meta)}
.table-item .ti-link{width:15px;height:15px;color:var(--ricon);flex:none}
.table-item:hover .ti-link{color:var(--ink)}
.ans__body{margin-top:14px}
.ans__body:has(.inv-widgets){margin-top:0}/* widget-grid answers: .ans flex gap:12 = Figma parent gap-12, no extra */
.ans__insight{display:flex;gap:14px;align-items:baseline;margin-top:22px;padding-top:22px;border-top:1px solid var(--glass)}
.ans__insight .l{font-weight:600;font-size:12px;letter-spacing:1px;color:var(--ink);flex:none;text-transform:uppercase}/* INSIGHT label = Figma Gray/0 #fafafa (NOT orange). Figma 4789:5385. */
.ans__insight .x{font-size:14px;color:var(--ink);line-height:20px}
.ans__act{display:flex;gap:10px;margin-top:14px}
.abtn{height:40px;border-radius:8px;padding:0 16px;font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent;transition:background .15s ease,border-color .15s ease,filter .15s ease,opacity .15s ease}
/* Primary (brand fill) — hover/active deepen the button's OWN orange (DS Button Primary /50→/60).
   This is the button's fill, not a neutral control getting a brand wash. */
.abtn--pri{background:var(--accent);color:var(--on-accent)}
.abtn--pri:hover{background:var(--accent-hover)}
.abtn--pri:active{background:var(--accent-hover);filter:brightness(.94)}
/* Outline (secondary/neutral) — subtle neutral state wash only (DS UI-state: --glass / --glass-2),
   never an orange tint; text + border stay neutral. */
.abtn--out{background:transparent;border-color:var(--ink-2);color:var(--ink)}
.abtn--out:hover{background:var(--glass)}
.abtn--out:active{background:var(--glass-2)}
/* text-only button (DS text + icon) — used for "View full analysis ⌄" in Short Answer */
.abtn--text{background:transparent;border-color:transparent;color:var(--sub);padding:0 10px;gap:6px}
.abtn--text:hover{background:var(--glass);color:var(--ink)}
.abtn--text svg{width:16px;height:16px;transition:transform .15s var(--ease)}
.abtn--text.is-open svg{transform:rotate(180deg)}          /* chevron flips up when full analysis is open */
/* Short Answer sizes to its content — do NOT stretch to fill the thread like a full answer does */
.thread>.ans--short:only-child{min-height:0}
/* Disabled — both variants */
.abtn:disabled,.abtn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none;filter:none}
.afoot{margin-top:14px}/* no divider above the footer — Figma answer footer has no top stroke */
.afbar{display:flex;gap:4px}
.afb{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ricon);cursor:pointer;background:none;border:0;transition:color .12s var(--ease),background .12s var(--ease)}
.afb:hover{background:var(--glass);color:var(--ink)}
.afb svg{width:20px;height:20px}
.afb[hidden]{display:none}                       /* collapsed like/dislike (author rule beats .afb display:grid) */
.afb.is-on{color:var(--ink)}                      /* picked feedback = filled white icon (ChatGPT-style) */
.afb.is-on svg{fill:currentColor}
.afb.is-copied{color:var(--ink)}                  /* copy → tick, clearly visible */
.afb.spinning svg{animation:aspin .65s var(--ease)}
@keyframes aspin{to{transform:rotate(360deg)}}

/* ---------- THINKING / LOADER (follow-up generation) ----------
   Light, ChatGPT-style: three soft grey dots + status text + a live elapsed timer.
   Shown as a pending answer while the next answer-type box is being generated. */
.ans--pending{opacity:1}
.thinking{display:flex;align-items:center;gap:12px;padding:18px 0 4px}
.thinking__dots{display:inline-flex;gap:6px;flex:none}
.thinking__dots i{width:7px;height:7px;border-radius:50%;background:var(--ricon);opacity:.35;animation:think 1.15s infinite ease-in-out}
.thinking__dots i:nth-child(2){animation-delay:.14s}
.thinking__dots i:nth-child(3){animation-delay:.28s}
@keyframes think{0%,75%,100%{opacity:.3;transform:translateY(0)}38%{opacity:.85;transform:translateY(-3px)}}
.thinking__txt{font-size:14px;color:var(--sub)}
.thinking__eta{font-size:12px;color:var(--meta);margin-inline-start:auto;font-variant-numeric:tabular-nums}
/* subtle shimmer skeleton under the status line, so the space the answer will fill is hinted */
.thinking-skel{display:flex;flex-direction:column;gap:10px;padding:6px 0 2px}
.thinking-skel span{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--glass) 25%,var(--glass-2) 37%,var(--glass) 63%);background-size:400% 100%;animation:shimmer 1.4s infinite linear}
.thinking-skel span:nth-child(1){width:62%}.thinking-skel span:nth-child(2){width:88%}.thinking-skel span:nth-child(3){width:44%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- HISTORY PANEL ---------- */
.history{position:absolute;top:99px;right:24px;bottom:20px;width:320px;z-index:20;background:var(--panel);border:1px solid var(--panel-stroke);border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;transition:width .22s var(--ease);overflow:hidden}
.h-body{flex:1;display:flex;flex-direction:column;min-height:0}
/* History List = 32px gap between the active card and every following row (Figma 4035:29495) */
.h-scroll{flex:1;min-height:0;overflow-y:auto;margin-inline-end:-14px;padding-inline-end:10px;display:flex;flex-direction:column;gap:32px}
.h-scroll--docs{gap:0}   /* the Documents tab is its own list — .doc-item carries its own rhythm */
/* collapsed = 44px tail pinned to the top-right (clock + expand arrow) — Figma variant 4205:1391 */
.history.collapsed{right:0;bottom:auto;width:44px;height:auto;padding:16px 13px;
  background:var(--panel);border-color:var(--panel-stroke);
  border-radius:16px 0 0 16px;border-right:0;
  box-shadow:-4px 0 8px rgba(0,0,0,.35);
  justify-content:center;align-items:center;gap:12px}
.history.collapsed .flag-btn{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;
  color:var(--ricon);background:none;border:0;cursor:pointer;transition:.15s}
.history.collapsed .flag-btn:hover{color:var(--ink)}
.history.collapsed .flag-btn svg{width:18px;height:18px}
[data-theme="light"] .history.collapsed{box-shadow:-4px 0 8px rgba(0,0,0,.10)}
.hh{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex:none}
.hh .t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:18px;line-height:28px;color:var(--ink)}
.hh .t svg{width:14px;height:14px;color:var(--ricon)}
/* chevron points RIGHT — the direction the panel collapses towards */
.hh .x{background:none;border:0;color:var(--ricon);cursor:pointer;display:grid;place-items:center}.hh .x svg{width:12px;height:12px}
.hh .x:hover{color:var(--ink)}
/* Active Investigation card — Neutral/80 surface on a Gray/80 hairline (Figma 4035:1417) */
.hcard{border-radius:12px;background:var(--hcard);border:1px solid var(--hcard-stroke);padding:18px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease)}
.hcard:hover{border-color:var(--border-hover)}   /* DS interactive-surface state — 5925:22628 */
/* TOC selection — the history row whose turn you're currently viewing */
.hcard.is-current{box-shadow:none}
.hitem.is-current{background:var(--glass)}
.hitem.is-current .tw .t{color:var(--ink)}
.hitem.is-current::before{content:"";position:absolute;inset-inline-start:0;top:2px;bottom:2px;width:2px;border-radius:2px;background:var(--accent)}
/* header row = the message-square that marks this as a thread ⟷ the ⋯ menu */
.hcard-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hcard-ic{color:var(--ricon);display:grid;place-items:center;flex:none}.hcard-ic svg{width:14px;height:14px}
.hcard .t{font-weight:400;font-size:14px;color:var(--ink-2);line-height:20px}
.hcard .m{font-weight:500;font-size:12px;line-height:16px;color:var(--ink-2)}
.hcard .more{background:none;border:0;color:var(--ricon);cursor:pointer;flex:none;display:grid;place-items:center;border-radius:4px}.hcard .more svg{width:16px;height:16px}
.hcard .more:hover{color:var(--ink)}
/* History Item — icon + (query / timestamp) + ⋯ ; flush with the card, hover bleeds into the gutter */
.hitem{position:relative;border-radius:8px;padding:6px 8px;margin-inline-start:-8px;width:calc(100% + 8px);display:flex;gap:12px;align-items:flex-start;cursor:pointer;flex:none}
.hitem-ic{color:var(--ricon);display:grid;place-items:center;flex:none;margin-top:2px}.hitem-ic svg{width:14px;height:14px}
.hitem:hover{background:var(--glass)}
.hitem .tw{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hitem .tw .t{font-weight:400;font-size:14px;color:var(--ink-2);line-height:20px}
.hitem .tw .m{font-weight:500;font-size:12px;line-height:16px;color:var(--ricon)}
.hitem .more{background:none;border:0;color:var(--ricon);cursor:pointer;flex:none;display:grid;place-items:center;border-radius:4px}.hitem .more svg{width:16px;height:16px}
.hitem .more:hover{color:var(--ink)}
.h-expand{background:none;border:0;color:var(--ricon);cursor:pointer;display:grid;place-items:center}.h-expand svg{width:16px;height:16px}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--panel);border:1px solid var(--panel-stroke);border-radius:12px;padding:10px 16px;font-size:13px;color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.4);z-index:200;pointer-events:none;transition:.2s;display:flex;gap:8px;align-items:center}
.toast svg{width:16px;height:16px;color:var(--accent)}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- SEARCH RESULTS PAGE (dummy) ---------- */
.search-page{flex:1;overflow-y:auto;padding:8px 24px 48px}
.search-inner{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
/* "not designed yet" notice — red/danger box so devs never treat this page as final */
.notice--todo{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:14px;
  background:var(--danger-soft);border:1px solid var(--danger)}
.notice__ic{color:var(--danger);flex:none;display:grid;place-items:center;margin-top:1px}
.notice__ic svg{width:18px;height:18px}
.notice__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.notice__t{font-weight:600;font-size:14px;color:var(--danger)}
.notice__m{font-size:13px;line-height:1.5;color:var(--ink-2)}
.search-hd h1{font-weight:600;font-size:28px;line-height:34px;letter-spacing:-.01em;color:var(--ink)}
.search-hd p{font-size:14px;color:var(--sub);margin-top:6px}
.search-bar{display:flex;align-items:center;gap:12px;height:52px;padding:0 18px;border-radius:14px;background:var(--card);border:1px solid var(--card-stroke)}
.search-bar svg{width:20px;height:20px;color:var(--sub);flex:none}
.search-bar input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font-family:var(--font-sans);font-size:15px}
.search-bar input::placeholder{color:var(--sub)}
.search-list{display:flex;flex-direction:column;gap:10px}
.inv-card{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--border);cursor:pointer;text-align:start;transition:background .15s var(--ease),border-color .15s var(--ease)}
.inv-card:hover{background:var(--surface-raised);border-color:var(--border-hover)}   /* DS state — 5925:22628 */
.inv-ic{width:36px;height:36px;border-radius:999px;background:var(--pill);display:grid;place-items:center;color:var(--ricon);flex:none}
.inv-ic svg{width:18px;height:18px}
.inv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.inv-t{font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-m{font-size:13px;color:var(--sub)}
.inv-chev{width:18px;height:18px;color:var(--sub);flex:none}

/* ---- list/search page v2 — toolbar (Select · Filter · New), flat rows, select mode ---- */
.search-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.search-top h1{font-weight:700;font-size:30px;line-height:38px;letter-spacing:-.01em;color:var(--ink)}
.search-actions{display:flex;align-items:center;gap:10px}
.sbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;background:var(--card);border:1px solid var(--card-stroke);color:var(--ink);font-family:var(--font-sans);font-weight:500;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .15s var(--ease),border-color .15s var(--ease)}
.sbtn:hover{background:var(--surface-hover);border-color:var(--border-hover)}
.sbtn svg{width:16px;height:16px;flex:none}
.sbtn--filter b{font-weight:600;margin-left:-2px}
.sbtn--new{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.sbtn--new:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.sbtn--danger{background:var(--danger);border-color:var(--danger);color:#fff}
.sbtn--danger:hover{background:var(--danger);filter:brightness(.94)}
.sbtn--icon{width:40px;padding:0;justify-content:center;color:var(--ricon)}
.sel-count{font-size:14px;color:var(--sub);margin-right:2px}
/* filter dropdown = same width as its "Filter by" button (matches the trigger, never wider) */
.search-actions .pop:has(>.sbtn--filter){position:relative}
.search-actions .pop:has(>.sbtn--filter)>.menu{position:absolute;left:0;right:0;top:calc(100% + 6px);min-width:0;width:auto}

.search-list{display:flex;flex-direction:column;gap:0;margin-top:2px}
/* fixed row height so default ↔ hover never jumps; the ⋯ is absolute (nav pattern), not in flow */
.srow{position:relative;display:flex;align-items:center;gap:14px;height:56px;padding:0 14px;border-bottom:1px solid var(--line);cursor:pointer}
.srow:first-child{border-top:1px solid var(--line)}
/* rounded inset hover/selected highlight (no sharp edges) — same --glass/--glass-2 as the nav rows.
   NO isolation: it would trap the ⋯ menu in the row's stacking context so clicks fall through to the
   rows behind. Highlight = z-0, content = z-1, open menu = z-60. */
.srow::before{content:"";position:absolute;inset:4px 6px;border-radius:var(--r-lg);background:transparent;transition:background .12s var(--ease);z-index:0;pointer-events:none}
.srow:hover::before{background:var(--glass)}
.srow.is-on::before{background:var(--glass-2)}
.srow>.srow__ck,.srow>.srow__ic,.srow>.srow__t,.srow>.srow__rename,.srow>.srow__time{position:relative;z-index:1}
.srow__ck{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--card-stroke);background:transparent;display:grid;place-items:center;color:#fff;flex:none;cursor:pointer;padding:0}
.srow__ck.checked{background:var(--accent);border-color:var(--accent)}
.srow__ck svg{width:14px;height:14px}
.srow__ic{color:var(--ricon);flex:none;display:grid;place-items:center}
.srow__ic svg{width:18px;height:18px}
.srow__t{flex:1;min-width:0;font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow__rename{flex:1;min-width:0}
.srow__time{font-size:13px;color:var(--sub);flex:none;margin-left:auto;transition:opacity .12s var(--ease)}
/* ⋯ reuses the nav .nx-more (absolute → no reflow → no height jump) */
.srow>.pop{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);line-height:0;z-index:2}
.srow>.pop.is-open{z-index:60}
.srow:hover .nx-more,.srow>.pop.is-open .nx-more,.nx-more:focus-visible{opacity:1}
.srow:not(:hover)>.pop:not(.is-open) .nx-more{pointer-events:none}
.srow:hover .srow__time,.srow:has(>.pop.is-open) .srow__time{opacity:0}
.bc-link{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.bc-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- INVESTIGATION SUB-PAGES + WIDGETS ---------- */
.page{flex:1;overflow-y:auto;padding:8px 24px 48px}
.page-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.page-hd h1{font-weight:600;font-size:28px;line-height:34px;letter-spacing:-.01em;color:var(--ink)}
.page-hd p{font-size:14px;color:var(--sub);margin-top:6px}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.page-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1000px){.kpi-row{grid-template-columns:repeat(2,1fr)}.page-grid{grid-template-columns:1fr}}
.inv-widgets{display:flex;flex-direction:column;gap:16px;margin-top:4px}/* Figma 5740:23607 Panels pt-4 → 12 (gap) + 4 = 16 from meta chips to cards */
.kpi-card{background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:7px}
.kpi-card .kpi-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.kpi-card .kpi-v{font-weight:700;font-size:26px;color:var(--ink);line-height:1.15}
.kpi-card .kpi-d{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--sub)}
.kpi-card .kpi-d.up{color:var(--success)}.kpi-card .kpi-d.down{color:var(--danger)}
.wcard{background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.wcard--wide{grid-column:1 / -1}
.wcard__hd{display:flex;align-items:center;justify-content:space-between}
.wcard__hd>span:first-child{font-weight:600;font-size:14px;line-height:20px;color:var(--ink)}
.wcard__ic{display:flex;align-items:center;gap:8px;color:var(--ricon)}.wcard__ic>svg{width:18px;height:18px}
.spark svg{width:100%;height:30px;display:block}
.linechart svg{width:100%;height:130px;display:block}
.vbars{display:flex;align-items:flex-end;gap:12px;height:170px}
.vbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.vbar .bar{width:100%;max-width:40px;border-radius:6px 6px 0 0;background:var(--accent)}
.vbar .vl{font-size:12px;color:var(--sub)}
.hbars{display:flex;flex-direction:column;gap:14px}
.hbar-row{display:flex;align-items:center;gap:14px}
.hbar-lbl{width:104px;flex:none;font-size:14px;color:var(--ink-2)}
.hbar-track{flex:1;height:10px;border-radius:6px;background:var(--surface-raised);overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:6px;background:var(--accent)}
.hbar-vl{width:52px;text-align:end;font-size:13px;font-weight:600;color:var(--ink)}
.donut-wrap{display:flex;align-items:center;gap:26px}
.donut{width:132px;height:132px;border-radius:50%;flex:none;position:relative}
.donut::after{content:"";position:absolute;inset:20px;border-radius:50%;background:var(--box)}
.donut-legend{display:flex;flex-direction:column;gap:12px;flex:1}
.donut-leg{display:flex;align-items:center;gap:10px;font-size:14px}
.donut-leg .d{width:10px;height:10px;border-radius:50%;flex:none}
.donut-leg .nm{color:var(--ink-2)}.donut-leg .vl{margin-inline-start:auto;color:var(--ink);font-weight:500}
.hist{display:flex;align-items:flex-end;gap:5px;height:150px}
.hist span{flex:1;background:var(--accent);border-radius:4px 4px 0 0;min-height:3px}
.tl{display:flex;flex-direction:column}
.tl-row{display:flex;gap:14px;padding:8px 0}
.tl-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:5px;flex:none}
.tl-t{font-size:14px;color:var(--ink-2);line-height:19px}.tl-m{font-size:12px;color:var(--sub);margin-top:3px}
.p-table{width:100%;border-collapse:collapse;font-size:14px}
.p-table th{text-align:start;font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);padding:0 12px 12px;border-bottom:1px solid var(--acard-stroke)}
.p-table td{padding:13px 12px;border-bottom:1px solid var(--border-subtle);color:var(--ink-2)}
.p-table tr:last-child td{border-bottom:0}
.p-table td:first-child{color:var(--ink);font-weight:500}
.p-table .mono{font-family:var(--font-mono)}
.plist{display:flex;flex-direction:column}
.plist-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-subtle)}
.plist-row:last-child{border-bottom:0}
.plist-n{width:18px;text-align:center;font-size:12px;font-weight:600;color:var(--sub);flex:none}
.plist-nm{flex:1;font-size:14px;color:var(--ink);font-weight:500}
.plist-vl{font-size:14px;font-weight:600;color:var(--ink-2)}

/* ============================================================
   CHAT WITH DATA (Brand Secondary / purple) — upload flow,
   tabbed History|Documents panel, stat cards + coverage table.
   ============================================================ */
/* the docked composer's send reads as the module accent */
[data-module="chat"] .send{background:var(--accent);color:#fff}
[data-module="chat"] .send:hover{background:var(--accent-hover)}
.toggle .pill{box-shadow:none}

/* ---- upload composer (empty = drop-zone + locked controls) ---- */
.up-area{width:100%;border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(255,255,255,.02);border:1.5px dashed rgba(255,255,255,.16)}
[data-theme="light"] .up-area{background:#faf7ff;border-color:var(--accent-border)}
.up-ic{width:46px;height:46px;border-radius:23px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.up-ic svg{width:22px;height:22px}
.up-drop{font-size:14px;color:var(--ink-2)}
.up-btn{height:40px;border-radius:8px;padding:0 16px;background:var(--accent);color:#fff;font-weight:500;font-size:14px;border:0;cursor:pointer;transition:.15s}
.up-btn:hover{background:var(--accent-hover)}
.up-fmt{font-size:12px;color:var(--text-faint)}
.up-unlock{font-size:12px;color:var(--text-faint)}
.cc--off{opacity:.4;pointer-events:none}
.cc--off .send{background:var(--surface-raised);color:var(--icon-muted)}
/* filled = uploaded document chips + live composer */
.up-files{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.doc-chip{display:inline-flex;align-items:center;gap:8px;max-width:280px;height:34px;padding:0 8px;padding-inline-start:12px;border-radius:10px;
  background:var(--pill);border:1px solid var(--line-strong);color:var(--ink)}
/* file-type icon is NEUTRAL, never the module accent — matches the × and + in this same
   chip (--ricon) and the doc badge in the Documents panel. Brand is for emphasis, not utility icons. */
.doc-chip-ic{color:var(--ricon);display:grid;place-items:center}.doc-chip-ic svg{width:14px;height:14px}
.doc-chip .nm{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-chip-x{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:none;border:0;color:var(--ricon);cursor:pointer}
.doc-chip-x:hover{background:var(--glass);color:var(--ink)}.doc-chip-x svg{width:12px;height:12px}
.up-add{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--pill);border:1px solid var(--line-strong);color:var(--ricon);cursor:pointer}
.up-add:hover{color:var(--ink)}.up-add svg{width:16px;height:16px}

/* ---- tabbed right panel (History | Documents) ---- */
.panel-tabs{display:flex;gap:22px;border-bottom:1px solid var(--panel-stroke);margin-bottom:16px;flex:none}
.panel-tab{position:relative;background:none;border:0;cursor:pointer;padding:0 2px 12px;font-weight:500;font-size:15px;color:var(--sub);display:flex;align-items:center;gap:8px}
.panel-tab:hover{color:var(--ink-2)}
.panel-tab.sel{color:var(--ink);font-weight:600}
.panel-tab.sel::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.tab-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--surface-raised);color:var(--sub);font-size:12px;font-weight:600;display:grid;place-items:center}
.panel-tab.sel .tab-badge{color:var(--ink)}
/* Panel foot button — glass fill + glass hairline, 12/18 padding (Figma 4035:29557).
   History lists scroll infinitely and have NO foot; only the Documents tab uses this
   now, for "Upload document". */
.hviewall{padding:12px 18px;line-height:20px;border-radius:12px;background:var(--glass);border:1px solid var(--glass);color:var(--ink);font-weight:500;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;flex:none;margin-top:20px}
.hviewall:hover{background:var(--glass-2)}.hviewall svg{width:14px;height:14px}

/* ---- document list item ---- */
.doc-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--hcard);border:1px solid var(--hcard-stroke);margin-bottom:10px}
.doc-badge{width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--sub);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.02em}
.doc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.doc-nm{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-meta{font-size:12px;color:var(--meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;flex:none;white-space:nowrap}
.doc-status .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.doc-status.ok{color:var(--accent)}.doc-status.ing{color:var(--warning)}
.doc-item .more{background:none;border:0;color:var(--ricon);cursor:pointer;flex:none;display:grid;place-items:center}.doc-item .more svg{width:16px;height:16px}
.doc-item .more:hover{color:var(--ink)}
.doc-empty{font-size:13px;color:var(--meta);padding:12px 4px}

/* ---- chat history item (leading icon + N documents + status) ---- */
/* document count under a chat history row — no verification tick (Figma Chat History Item 5080:2883) */
.cwd-hmeta{display:flex;align-items:center;gap:6px;font-weight:500;font-size:12px;line-height:16px;color:var(--ricon)}

/* ---- chat answer: stat trio + requirements coverage table ---- */
.cwd-body{display:flex;flex-direction:column;gap:16px}
.cwd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cwd-stat{background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.cwd-stat__hd{display:flex;align-items:center;justify-content:space-between}
.cwd-stat__hd>span:first-child{font-size:13px;font-weight:500;color:var(--sub)}
.cwd-stat__ic{display:flex;align-items:center;gap:8px;color:var(--ricon)}.cwd-stat__ic>svg{width:18px;height:18px}
.cwd-stat__v{font-weight:700;font-size:28px;line-height:1.1;color:var(--ink);letter-spacing:-.01em}
.cwd-stat__s{font-size:13px;color:var(--sub)}
.req-card .wcard__hd>span:first-child{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.req-rows{display:flex;flex-direction:column}
.req-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--border-subtle)}
.req-row:last-child{border-bottom:0}
.req-nm{flex:1;font-size:15px;font-weight:600;color:var(--ink)}
.req-vl{font-size:14px;font-weight:600;color:var(--ink-2)}
.req-tag{font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 9px;border-radius:6px;background:var(--surface-raised);color:var(--sub);white-space:nowrap}
.req-tag.req{background:var(--accent);color:#fff}
@media(max-width:1000px){.cwd-stats{grid-template-columns:1fr}}

/* ============================================================
   BUILD DASHBOARD (Cyan module) — 3-column workbox
   ============================================================ */
.workbox{flex:1;min-height:0;margin-bottom:20px;display:flex;background:var(--panel);border:1px solid var(--panel-stroke);border-radius:20px;overflow:hidden;box-shadow:0 18px 50px -18px rgba(0,0,0,.5)}

/* ---- Conversation panel ---- */
.conv-panel{flex:0 0 auto;display:flex;flex-direction:column;min-height:0}
.conv-head{flex:none;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 12px;padding-inline-start:20px}
.conv-head__t{font-size:18px;font-weight:600;color:var(--ink)}
.conv-div{height:1px;background:var(--panel-stroke);flex:none}
.vtoggle{display:flex;background:var(--pill);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.vt{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;background:none;color:var(--sub);font-size:13px;font-weight:500;border-radius:7px;cursor:pointer;transition:.12s}
.vt svg{width:15px;height:15px}
.vt.sel{background:var(--pill-hover);color:var(--ink)}
.conv-body{flex:1;min-height:0;overflow-y:auto;padding:20px 12px 8px;padding-inline-start:20px}
.conv-dock{flex:none;padding:14px 16px}
.conv-dock .composer{border-radius:18px;padding:14px 16px;gap:14px;box-shadow:none}
.conv-dock .composer textarea{font-size:15px}
/* compact composer: shrink controls so they hold one line in the ~468px panel */
.conv-dock .cc-l,.conv-dock .cc-r{gap:6px}
.conv-dock .cbtn{width:36px;height:36px}
.conv-dock .cbtn svg{width:18px;height:18px}
.conv-dock .cchip{height:36px;padding:0 10px;padding-inline-start:12px;font-size:13px;white-space:nowrap;flex:none}
.conv-dock .cchip svg{width:16px;height:16px}
.conv-dock .send{width:36px;height:36px}
.conv-dock .send svg{width:18px;height:18px}
.conv-dock .cc-l>.cchip:last-child{display:none}   /* hide redundant EN chip in the compact composer */

.umsg{display:flex;justify-content:flex-end;gap:10px;margin-bottom:22px}
.umsg__wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:78%}
.umsg__b{color:var(--ink);font-size:15px;line-height:21px;text-align:end}
.umsg__t{font-size:12px;color:var(--meta)}
.umsg__av{width:30px;height:30px;border-radius:50%;background:var(--pill);color:var(--ink);display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}

.set-hd{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px}
.set-hd__l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);font-weight:600}
.pinall{display:flex;align-items:center;gap:7px;height:35px;padding:0 14px;border-radius:10px;background:var(--accent);color:#fff;border:0;font-size:13px;font-weight:600;cursor:pointer;transition:.12s}
.pinall svg{width:14px;height:14px}
.pinall:hover{background:var(--accent-hover)}

.ans-list{display:flex;flex-direction:column;gap:14px}
/* each conversation turn (question + its answers); a hairline separates refinements */
.conv-turn{border-radius:12px}
.conv-turn+.conv-turn{margin-top:22px;padding-top:22px;border-top:1px solid var(--hair)}
.pin-btn{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:8px;background:var(--glass);border:1px solid var(--line);color:var(--ink-2);font-size:13px;font-weight:500;cursor:pointer;transition:.12s}
.pin-btn svg{width:14px;height:14px;color:var(--accent)}
.pin-btn:hover{background:var(--glass-2)}
.pin-btn.pinned{background:var(--accent);border-color:transparent;color:#fff}
.pin-btn.pinned svg{color:#fff}
.pin-btn.pinned:hover{background:var(--accent-hover)}
.icob{width:28px;height:28px;border-radius:7px;background:none;border:0;color:var(--ricon);display:grid;place-items:center;cursor:pointer}
.icob svg{width:16px;height:16px}
.icob:hover{background:var(--glass);color:var(--ink)}

/* List view answer item */
.ansitem{background:var(--hcard);border:1px solid var(--hcard-stroke);border-radius:14px;padding:16px 16px 14px;transition:border-color .12s}
.ansitem:hover,.anstile:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-border)}
.ansitem__hd{display:flex;align-items:flex-start;gap:10px}
.ansitem__badge{width:28px;height:28px;border-radius:8px;background:var(--pill);color:var(--sub);display:grid;place-items:center;flex:none}
.ansitem__badge svg{width:16px;height:16px}
.ansitem__t{flex:1;font-size:14px;font-weight:600;color:var(--ink);line-height:19px;padding-top:4px}
.ansitem__more{background:none;border:0;color:var(--ricon);cursor:pointer;flex:none;display:grid;place-items:center;padding:4px}
.ansitem__more svg{width:16px;height:16px}
.ansitem__d{font-size:13px;color:var(--sub);line-height:19px;margin:8px 0 14px}
.ansitem__ft{display:flex;align-items:center;justify-content:space-between}
.ansitem__acts{display:flex;gap:4px}

/* Dashboard view answer tile */
.anstile{background:var(--hcard);border:1px solid var(--hcard-stroke);border-radius:14px;padding:16px}
.anstile__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.anstile__t{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);font-weight:600}
.anstile__ic{display:flex;align-items:center;gap:8px;color:var(--ricon)}
.anstile__ic>svg{width:18px;height:18px}
.anstile__div{height:1px;background:var(--hcard-stroke);margin:14px 0 12px}
.anstile__ft{display:flex;align-items:center;justify-content:space-between}
.tswitch{display:flex;gap:4px}
.ts{position:relative;width:30px;height:28px;border-radius:7px;background:none;border:0;color:var(--ricon);display:grid;place-items:center;cursor:pointer}
.ts svg{width:15px;height:15px}
.ts:hover{background:var(--glass);color:var(--ink)}
.ts.sel{background:var(--glass-2);color:var(--ink)}
/* switcher tooltip (what kind of widget) */
.ts-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--menu-bg);border:1px solid var(--panel-stroke);color:var(--ink);font-size:11px;font-weight:500;line-height:1;padding:6px 9px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .14s var(--ease),transform .14s var(--ease);z-index:40;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.ts-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%) rotate(45deg) translateY(-3px);width:7px;height:7px;background:var(--menu-bg);border-right:1px solid var(--panel-stroke);border-bottom:1px solid var(--panel-stroke)}
.ts:hover .ts-tip{opacity:1;transform:translateX(-50%) translateY(0)}
/* tile widgets scoped small; donut hole matches tile bg */
.anstile__wd{min-height:132px;display:flex;flex-direction:column;justify-content:center}
.anstile__wd .donut::after{background:var(--hcard)}
.anstile__wd--pie .donut-wrap{gap:20px}
.anstile__wd--pie .donut{width:100px;height:100px}
.anstile__wd--pie .donut::after{inset:16px}
.anstile__wd--pie .donut-leg{font-size:13px}
.anstile__wd--table{min-height:0}
.anstile__wd--table .p-table{font-size:13px}
.anstile__wd--table .p-table th{padding:0 8px 8px}
.anstile__wd--table .p-table td{padding:9px 8px}
.anstile__wd--table .rec{gap:12px;display:flex;flex-direction:column}
.tchart{display:flex;flex-direction:column;gap:8px}
.tchart svg{width:100%;height:118px;display:block}
.tchart__x{display:flex;justify-content:space-between;font-size:11px;color:var(--meta)}
.dstat__v{font-size:30px;font-weight:700;color:var(--ink);line-height:1.1}
.dstat__s{font-size:13px;color:var(--sub);margin-top:7px}
.darea__x{display:flex;justify-content:space-between;font-size:11px;color:var(--meta)}
.drank{display:flex;flex-direction:column;gap:1px}
.drank__row{display:flex;align-items:center;gap:12px;padding:8px 2px}
.drank__n{width:14px;flex:none;text-align:center;color:var(--sub);font-size:13px}
.drank__nm{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.drank__nm b{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drank__nm span{font-size:12px;color:var(--sub)}
.drank__sc{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--ink)}
.rtag{font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:6px;flex:none}
.rtag--crit{background:var(--danger-soft);color:var(--danger)}
.rtag--high{background:var(--warning-soft);color:var(--warning)}
.dcrisk{display:flex;flex-direction:column;gap:16px}
.dcrisk__top{display:flex;gap:24px;align-items:center}
.dcrisk__total{display:flex;flex-direction:column;flex:none}
.dcrisk__total b{font-size:30px;font-weight:700;color:var(--ink);line-height:1}
.dcrisk__total span{font-size:11px;letter-spacing:.08em;color:var(--sub);margin-top:5px}
.dcrisk__legend{flex:1;display:flex;flex-direction:column;gap:9px}
.dcrisk__row{display:flex;align-items:center;gap:10px;font-size:14px}
.dcrisk__row .d{width:9px;height:9px;border-radius:50%;flex:none}
.dcrisk__row .nm{color:var(--ink-2)}
.dcrisk__row .vl{margin-inline-start:auto;color:var(--ink);font-weight:500}
.dcrisk__insight{font-size:13px;color:var(--sub);line-height:19px}

/* ---- Splitter ---- */
.splitter{flex:0 0 16px;position:relative;cursor:col-resize;display:grid;place-items:center;touch-action:none}
.splitter::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--panel-stroke)}
.grip{position:relative;z-index:1;width:16px;height:54px;border-radius:8px;background:var(--pill-hover);border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--sub);transition:.12s}
.grip svg{width:14px;height:14px}
.splitter:hover .grip{color:var(--ink);border-color:var(--border-strong)}

/* ---- Canvas ---- */
.canvas{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.canvas-content{flex:1;min-height:0;overflow-y:auto;padding:22px 24px 10px}
.canvas-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.canvas-eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);font-weight:600}
.canvas-eyebrow .verify{display:flex;color:var(--success)}
.canvas-eyebrow .verify svg{width:16px;height:16px}
.canvas-tools{display:flex;gap:8px}
.ctool{width:36px;height:36px;border-radius:10px;background:var(--glass);border:1px solid var(--line);color:var(--ricon);display:grid;place-items:center;cursor:pointer;transition:.12s}
.ctool svg{width:17px;height:17px}
.ctool:hover{background:var(--glass-2);color:var(--ink)}
.ctool--pri{background:var(--accent);border-color:transparent;color:#fff}
.ctool--pri:hover{background:var(--accent-hover);color:#fff}
.ctool:disabled{opacity:.35;cursor:default;pointer-events:none}
/* spacer that separates the [add · present · export] group from [undo · redo] (~33px) */
.ctool-sep{width:1px;height:22px;background:var(--line-strong);margin:0 16px;flex:none;align-self:center}

.canvas-grid{display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start}
.cblock{position:relative;flex:1 1 auto;box-sizing:border-box;max-width:100%;background:var(--box);border:1px solid var(--box-stroke);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:18px;min-width:200px;transition:border-color .12s,box-shadow .12s}
.cblock:hover{border-color:var(--accent-border)}
.cblock.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cblock__hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cblock__t{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cblock__ic{display:flex;align-items:center;gap:8px;color:var(--ricon);flex:none}
.cblock__ic>svg{width:18px;height:18px}
.cblock__bd{flex:1;min-height:0}
.cblock--kpi{min-width:180px}
.dkpi{margin-top:6px}
.dkpi__v{font-size:30px;font-weight:700;color:var(--ink);line-height:1.1;display:flex;align-items:baseline;gap:10px}
.dkpi__delta{font-size:13px;font-weight:600}
.dkpi__delta.down{color:var(--danger)}
.dkpi__delta.up{color:var(--success)}
.dkpi__s{font-size:12px;color:var(--sub);margin-top:6px}
.cblock--area .linechart svg{height:100%;min-height:150px}
.cblock--area .cblock__bd{display:flex;flex-direction:column}
.cblock--area .darea{flex:1;display:flex;flex-direction:column}
.cblock--area .linechart{flex:1;display:flex}
.cblock--custrisk .dcrisk{margin-top:4px}

/* empty add slot */
.cblock--empty{border:1.5px dashed var(--border-strong);background:transparent;align-items:center;justify-content:center;box-shadow:none;cursor:pointer}
.cblock--empty:hover{border-color:var(--accent);background:var(--accent-soft)}
.addslot{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--sub)}
.addslot__ic{width:44px;height:44px;border-radius:50%;background:var(--glass);display:grid;place-items:center;color:var(--sub)}
.addslot span{font-size:13px}

/* selection handles + move pill */
.movepill{position:absolute;top:-11px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:5px;height:23px;padding:0 10px;border-radius:7px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;cursor:grab;white-space:nowrap;z-index:7;box-shadow:0 4px 12px -2px rgba(0,0,0,.4)}
.movepill svg{width:13px;height:13px}
.movepill:active{cursor:grabbing}
/* grip handle at the card's top-left corner — a drag-to-move affordance shown on hover */
.gripknob{position:absolute;top:-11px;left:10px;display:none;align-items:center;justify-content:center;width:26px;height:23px;padding:0;border:0;border-radius:7px;background:var(--accent);color:#fff;cursor:grab;z-index:7;box-shadow:0 4px 12px -2px rgba(0,0,0,.4)}
.gripknob svg{width:15px;height:15px}
.gripknob:active{cursor:grabbing}
.rhandle{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid var(--accent);border-radius:2px;display:none;z-index:7}
/* affordances appear on HOVER (no click needed) as well as when selected */
.cblock:hover>.movepill,.cblock.sel>.movepill,.cblock.resizing>.movepill{display:flex}
.cblock:hover>.gripknob,.cblock.sel>.gripknob,.cblock.resizing>.gripknob{display:flex}
.cblock:hover>.rhandle,.cblock.sel>.rhandle,.cblock.resizing>.rhandle{display:block}
.cblock:hover,.cblock.resizing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-border)}
/* while resizing/moving a card, the OTHERS must not react to the pointer (no hover-select, no jump/collision) */
body.block-resizing .cblock:not(.resizing),
body.grabbing .cblock:not(.dragging){pointer-events:none}
.rh-nw{top:-5px;left:-5px;cursor:nwse-resize}
.rh-ne{top:-5px;right:-5px;cursor:nesw-resize}
.rh-sw{bottom:-5px;left:-5px;cursor:nesw-resize}
.rh-se{bottom:-5px;right:-5px;cursor:nwse-resize}
.rh-n{top:-5px;left:50%;transform:translateX(-50%);cursor:ns-resize}
.rh-s{bottom:-5px;left:50%;transform:translateX(-50%);cursor:ns-resize}
.rh-e{right:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.rh-w{left:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.cblock.dragging{opacity:.9;box-shadow:0 18px 44px -10px rgba(0,0,0,.55);z-index:20}
.cblock.drop-target{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

.canvas-help{flex:none;display:flex;align-items:center;gap:8px;padding:12px 24px;border-top:1px solid var(--panel-stroke);color:var(--meta);font-size:12px;line-height:1.4}
.canvas-help>svg{width:13px;height:13px;flex:none;color:var(--accent)}
.canvas-help b{color:var(--sub);font-weight:600}

/* ---- History rail (inside workbox) ---- */
.hrail{flex:0 0 48px;border-inline-start:1px solid var(--panel-stroke);display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0;transition:flex-basis .2s var(--ease)}
.hrail.open{flex:0 0 300px;align-items:stretch;padding:0}
.rail-flag{width:36px;height:36px;border-radius:10px;background:none;border:0;color:var(--ricon);display:grid;place-items:center;cursor:pointer}
.rail-flag svg{width:18px;height:18px}
.rail-flag:hover{background:var(--glass);color:var(--ink)}
.rail-open{display:flex;flex-direction:column;min-height:0;height:100%;padding:20px}
.rail-hh{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.rail-hh .t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--ink)}
.rail-hh .t svg{width:14px;height:14px;color:var(--ricon)}
.rail-hh .x{background:none;border:0;color:var(--ricon);cursor:pointer;display:grid;place-items:center}
.rail-hh .x svg{width:14px;height:14px}
.rail-scroll{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:32px}  /* same History List rhythm as the external panel */

/* drag cursors */
body.col-resizing,body.col-resizing *{cursor:col-resize!important;user-select:none}
body.block-resizing{user-select:none}
body.grabbing,body.grabbing *{cursor:grabbing!important;user-select:none}

/* ---- pin-to-canvas: draggable conversation cards + drop states ---- */
.ansitem,.anstile{cursor:grab}
.ansitem:active,.anstile:active{cursor:grabbing}
.ansitem button,.ansitem .pop,.anstile button,.anstile .pop{cursor:pointer}
.ans-dragging{opacity:.5}
.conv-ghost{position:fixed;z-index:9999;transform:translate(14px,10px);pointer-events:none;display:flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:9px 13px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 14px 34px -8px rgba(0,0,0,.55);white-space:nowrap;max-width:300px}
.conv-ghost svg{width:15px;height:15px;flex:none}
.conv-ghost span{overflow:hidden;text-overflow:ellipsis}
.canvas-grid.droppable{outline:2px dashed var(--accent-border);outline-offset:8px;border-radius:12px}
/* empty canvas state (e.g. Fraud Monitoring Board opened but nothing pinned yet) */
.canvas-empty{flex:1 1 100%;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px;border:2px dashed var(--box-stroke);border-radius:18px}
.canvas-empty__ic{width:64px;height:64px;border-radius:18px;background:var(--glass);display:grid;place-items:center;color:var(--accent)}
.canvas-empty__ic svg{width:30px;height:30px}
.canvas-empty__t{font-size:17px;font-weight:600;color:var(--ink)}
.canvas-empty__s{font-size:13px;color:var(--sub);max-width:400px;line-height:19px}
.canvas-empty__s b{color:var(--ink-2);font-weight:600}
.canvas-empty__btn{margin-top:6px;height:40px;border-radius:10px;padding:0 18px;background:var(--accent);color:#fff;font-weight:600;font-size:14px;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.canvas-empty__btn:hover{background:var(--accent-hover)}
.canvas-empty__btn svg{width:16px;height:16px}
/* drop indicator — thin LINE between two cards (Google-style); dashed "Place here" BOX over empty space / the end */
.drop-slot--line{flex:0 0 4px;align-self:stretch;min-height:120px;border-radius:99px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);animation:slotIn .16s var(--ease)}
.drop-slot--box{flex:1 1 300px;max-width:100%;align-self:stretch;min-height:150px;box-sizing:border-box;border-radius:16px;border:2px dashed var(--accent);background:var(--accent-soft);display:grid;place-items:center;animation:slotBox .18s var(--ease)}
.drop-slot__in{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:13px;font-weight:600}
.drop-slot__in svg{width:16px;height:16px}
@keyframes slotIn{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:none}}
@keyframes slotBox{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
/* while dragging a card, hide the passive add-slot / empty placeholder so only the drop indicator shows */
body.grabbing .cblock--empty,body.grabbing .canvas-empty{display:none}

/* ============================================================
   COMPOSER — controls, dropdowns, tooltips, recording
   Mirrors Figma Prompt Composer 4093:1515 (Variation=1 / =2).
   Shared by Investigation · Chat with Data · Build Dashboard.
   ============================================================ */

/* Send: dark by default (Icon Button State=Default), lit only when there is
   something to send. The white/accent fill is the ACTIVE state, not the resting one. */
.send{background:var(--send-bg);border:1px solid var(--line-strong);color:var(--send-fg);
  transition:background .14s var(--ease),color .14s var(--ease),transform .14s var(--ease)}
.send:hover{background:var(--pill-hover);color:var(--ink)}
.send.is-active{background:var(--send-active-bg);color:var(--send-active-fg);border-color:transparent}
.send.is-active:hover{transform:translateY(-1px);opacity:.92}
[data-module="chat"] .send{background:var(--send-bg);color:var(--send-fg)}
[data-module="chat"] .send:hover{background:var(--pill-hover);color:var(--ink)}
[data-module="chat"] .send.is-active,[data-module="dashboard"] .send.is-active{background:var(--accent);color:#fff}
[data-module="chat"] .send.is-active:hover,[data-module="dashboard"] .send.is-active:hover{background:var(--accent-hover)}
.cc--off .send,.cc--off .send.is-active{background:var(--surface-raised);color:var(--icon-muted);border-color:var(--line-strong)}
/* Send stays DISABLED until the user types. DS disabled treatment = opacity .5
   (Answer / Action Button 4211:1943 · State=Disabled). Applies in both themes and all modules. */
.send:disabled{opacity:.5;cursor:not-allowed}
.send:disabled:hover{background:var(--send-bg);color:var(--send-fg);transform:none}
[data-module="chat"] .send:disabled:hover,[data-module="dashboard"] .send:disabled:hover{background:var(--send-bg);color:var(--send-fg)}

/* brain = reasoning toggle. Selected = white fill, dark icon — no brand colour. */
.cbtn.is-on{background:var(--sel-bg);border-color:transparent;color:var(--sel-fg)}
.cbtn.is-on:hover{background:var(--sel-bg);color:var(--sel-fg)}
/* Composer controls (attach · Full Analysis · settings · brain · EN · mic) lift on hover:
   background steps Zinc/80 → Zinc/70 per Figma Icon Button State=Hover. Stroke stays put.
   The send button is excluded — it is disabled until there is something to send. */
.cbtn:hover,.cchip:hover{background:var(--cc-hover);color:var(--ink)}
.cc--off .cbtn:hover,.cc--off .cchip:hover{background:var(--pill);color:var(--ricon)}   /* locked composer: no lift */

/* keyboard focus = the same subtle treatment, never the browser's blue ring */
.cchip:focus-visible,.cbtn:focus-visible,.send:focus-visible,
.hchip:focus-visible,.hbtn:focus-visible,
.mi:focus-visible,.sm-hd:focus-visible,.sm-row:focus-visible,.sm-eng:focus-visible{
  outline:none;box-shadow:inset 0 0 0 1px var(--glass-2)}

/* hover tooltips on the composer's icon controls (above, since the composer is docked) */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translate(-50%,4px);background:var(--menu-bg);color:var(--ink);border:1px solid var(--border);
  border-radius:8px;padding:6px 10px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;z-index:70;
  transition:opacity .14s var(--ease),transform .14s var(--ease)}
[data-tip]:hover::after{opacity:1;transform:translate(-50%,0)}
.pop.is-open [data-tip]::after{opacity:0}   /* the open menu replaces the tooltip */

/* composer menus open UPWARD — the composer is docked to the bottom */
.composer .pop > .menu,.conv-dock .pop > .menu{top:auto;bottom:calc(100% + 8px);transform-origin:bottom}
.composer .pop > .menu{transform:translateY(4px) scale(.98)}
.composer .pop.is-open > .menu{transform:none}

/* rich menu rows: icon + label + description (Figma Menu / Action Item 4356:1991) */
.menu--rich{min-width:288px;max-width:320px;padding:8px}
.mi{display:flex;gap:10px;width:100%;padding:9px 10px;border-radius:var(--r-sm);background:none;border:0;
  text-align:start;cursor:pointer;transition:background .12s var(--ease)}
.mi:hover{background:var(--glass)}
.mi--sel{background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-2)}
.mi--sel:hover{background:var(--glass)}
.mi-ic{width:16px;flex:none;display:grid;place-items:center;padding-top:1px}
.mi-ic svg{width:16px;height:16px;color:var(--icon-muted)}
.mi--sel .mi-ic svg{color:var(--icon)}
.mi-c{display:flex;flex-direction:column;gap:3px;min-width:0}
.mi-t{font-size:13px;font-weight:600;color:var(--text-secondary);line-height:1.2}
.mi--sel .mi-t{color:var(--text-primary)}
.mi-d{font-size:12px;font-weight:400;color:var(--text-faint);line-height:1.35;white-space:normal}
.menu-div{height:1px;background:var(--border);margin:8px 2px}

/* settings dropdown — Agents group + Deep Research and its engines */
.settings-menu{min-width:300px}
.sm-hd,.sm-row{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:9px 10px;border-radius:var(--r-sm);background:none;border:0;cursor:pointer;
  color:var(--text-primary);font-size:13px;font-weight:600;transition:background .12s var(--ease)}
.sm-hd:hover,.sm-row:hover{background:var(--glass)}
.sm-hd-l{display:flex;align-items:center;gap:9px}
.sm-hd-l svg{width:18px;height:18px;color:var(--icon-muted)}
.sm-hd .chev{width:16px;height:16px;color:var(--icon-muted);transition:transform .16s var(--ease)}
.sm-hd.is-closed .chev{transform:rotate(-90deg)}
.sm-list{display:flex;flex-direction:column;gap:2px;padding:2px 0;padding-inline-start:6px}
/* on/selected = the SAME subtle treatment as hover — fill --glass, stroke --glass-2. No brand colour. */
.sm-row.is-on{background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-2);color:var(--text-primary)}
.sm-row.is-on:hover{background:var(--glass)}
.sm-row.is-on .sm-hd-l svg{color:var(--icon)}
.sm-tog{font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:999px;
  background:var(--glass);color:var(--text-faint)}
.sm-row.is-on .sm-tog{background:var(--glass-2);color:var(--text-secondary)}
.sm-engines{display:flex;gap:6px;padding:8px 4px 2px;padding-inline-start:6px}
.sm-eng{flex:1;padding:8px 4px;border-radius:9px;background:none;border:1px solid transparent;
  color:var(--text-faint);font-size:12px;font-weight:600;cursor:pointer;transition:all .12s var(--ease)}
.sm-eng:hover{background:var(--glass);color:var(--text-primary)}
.sm-eng.is-sel{background:var(--glass);border-color:var(--glass-2);color:var(--text-primary)}

/* recording state — Figma Prompt Composer Variation=2 (4093:1429).
   The composer keeps its resting shape/fill; only the control row collapses to
   wave + close + send, and the live transcript takes the textarea's place. */
.rec-transcript{min-height:24px;max-height:96px;overflow-y:auto;color:var(--ink);
  font-size:16px;line-height:24px;font-style:italic}
.rec-transcript:empty::before{content:"Listening…";color:var(--sub);font-style:italic}
.cc--rec{gap:16px}
.wave{flex:1;min-width:0;height:40px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}
.wave span{width:2px;flex:none;border-radius:1px;background:var(--ricon);
  animation:waveP 1.1s ease-in-out infinite alternate;transform-origin:center}
/* the transcript has landed — the wave settles so the text is the focus */
.rec-transcript.is-done ~ .cc--rec .wave span{animation:none;opacity:.55}
@keyframes waveP{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.wave span{animation:none}}

/* reasoning block — shown on every answer while the brain toggle is on */
.ans__reason{margin:0 0 14px;padding:12px 14px;border-radius:12px;
  background:var(--box);border:1px solid var(--accent)}
.ans__reason-hd{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.08em;color:var(--accent)}
.ans__reason-hd svg{width:14px;height:14px}
.ans__reason-n{margin-inline-start:auto;font-weight:600;letter-spacing:0;color:var(--text-faint);text-transform:none}
.ans__reason-l{margin:9px 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:5px}
.ans__reason-l li{font-size:13px;line-height:1.5;color:var(--text-secondary)}
.ans__reason-l li::marker{color:var(--accent);font-weight:600}

/* zoe-widgets mount points — the library card supplies its own chrome, so the
   placeholder only handles layout inside the answer body. */
.zw-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.zw{display:flex;min-width:0}
.zw > div{flex:1;min-width:0}
@media (max-width:1100px){ .zw-row{grid-template-columns:1fr} }

/* ============================================================
   TABLET RESPONSIVE BAND — ≤1024px  (tested down to an 800px floor)
   The left nav and right history collapse into scrim drawers and the
   stage goes full-bleed. Only one drawer opens at a time (JS-enforced).
   The Build Dashboard module is intentionally excluded — it keeps its
   desktop multi-column layout for now (own responsive pass later).
   ============================================================ */
.tb-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.nav-burger,.hist-burger{display:none}
.scrim{display:none}

@media (max-width:1024px){
  /* burgers appear (never on Build Dashboard) */
  html:not([data-module="dashboard"]) .nav-burger,
  html:not([data-module="dashboard"]) .hist-burger{display:grid}

  /* TABLET-ONLY breadcrumb variation — give it the SAME 40px control height as the burger + header
     buttons and centre the single line inside it, so the text sits on the exact same centreline as
     every round control (fixes the "text reads high" optical offset in the tablet header). */
  html:not([data-module="dashboard"]) .breadcrumb{height:40px}
  html:not([data-module="dashboard"]) .breadcrumb .bc-mut,
  html:not([data-module="dashboard"]) .breadcrumb .bc-sep,
  html:not([data-module="dashboard"]) .breadcrumb .bc-cur{display:flex;align-items:center;height:100%;line-height:1}

  /* stage reclaims full width — inline column offsets are cleared by render() */
  html:not([data-module="dashboard"]) .stage{left:16px;right:16px}

  /* dimmed scrim sits behind whichever drawer is open */
  html:not([data-module="dashboard"]) .scrim{
    display:block;position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.5);
    opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
  html:not([data-module="dashboard"]) .screen.nav-open .scrim,
  html:not([data-module="dashboard"]) .screen.hist-open .scrim{opacity:1;pointer-events:auto}

  /* LEFT NAV → off-canvas drawer, slides in from the left */
  html:not([data-module="dashboard"]) .nav{
    transform:translateX(calc(-100% - 40px));transition:transform .28s var(--ease);
    box-shadow:0 24px 60px rgba(0,0,0,.5)}
  html:not([data-module="dashboard"]) .nav.expanded{width:300px;max-width:calc(100vw - 56px);padding:16px}
  html:not([data-module="dashboard"]) .screen.nav-open .nav{transform:none;z-index:50}

  /* RIGHT HISTORY → off-canvas drawer, slides in from the right */
  html:not([data-module="dashboard"]) .history{
    top:16px;bottom:16px;right:16px;width:340px;max-width:calc(100vw - 48px);
    transform:translateX(calc(100% + 48px));transition:transform .28s var(--ease);
    box-shadow:0 24px 60px rgba(0,0,0,.5)}
  html:not([data-module="dashboard"]) .screen.hist-open .history{transform:none;z-index:50}
}