:root {
  --bg:        #ece6d8;
  --bg-2:      #e3dccb;
  --surface:   #f7f2e6;
  --surface-2: #f1ebdc;
  --ink:       #0c0c12;
  --ink-2:     #2a2a32;
  --ink-3:     #5d5a52;
  --ink-4:     #8e8a7e;
  --ink-5:     #b9b3a4;
  --line:      #15151b;
  --line-soft: rgba(21,21,27,0.10);
  --line-mid:  rgba(21,21,27,0.22);
  --accent:    #2b358a;
  --accent-2:  #5060d4;
  --accent-bg: rgba(80,96,212,0.08);
  --ok:        #3d7a4f;
  --warn:      #b58326;
  --bad:       #a8443f;
  --night:     #0a0a12;
  --night-2:   #15151f;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.03), 0 0 0 1px var(--line-soft);
  --shadow-2: 0 8px 24px -10px rgba(13,13,18,0.18), 0 0 0 1px var(--line-soft);
  --shadow-3: 0 24px 60px -20px rgba(13,13,18,0.35);
  --t-fast: 140ms;
  --t-mid:  240ms;
  --t-slow: 420ms;
  --ease:   cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.55 Arial, Helvetica, sans-serif;
  font-feature-settings: 'tnum' 1, 'kern' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow: hidden;
}
/* Per spec correction (Niv): Arial everywhere — these helpers exist so any
   legacy class hooks still resolve to a clean Arial treatment instead of
   serif/italic or monospaced. */
.serif    { font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: 600; letter-spacing: -0.01em; }
.mono     { font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1; letter-spacing: 0.02em; }
button    { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input,textarea { font: inherit; color: inherit; background: none; border: 0; outline: 0; }

/* ── App shell ─────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 56px 1fr;
  height: 100vh;
  width: 100vw;
}

header.topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 232px 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  z-index: 5;
}
.brand {
  padding: 0 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  border-right: 1px solid var(--line);
  height: 100%;
  display: flex; align-items: center;
}
.brand-dot { display: inline-block; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; margin: 0 1px 4px; }
.tabs { display: flex; height: 100%; }
.tab {
  padding: 0 22px;
  display: flex; align-items: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  border-right: 1px solid var(--line-soft);
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.tab.active { color: var(--ink); background: var(--ink); color: #f3ecdc; }
.tab:hover:not(.active) { color: var(--ink); }
.topbar .actions { display: flex; gap: 10px; padding: 0 18px; align-items: center; }
.pill {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--surface);
  transition: all var(--t-fast) var(--ease);
}
.pill:hover { background: var(--ink); color: var(--surface); }
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 600;
}

/* ── Sidebar ──────────────────────────────────────────────── */
aside.rail {
  border-right: 1px solid var(--line);
  background: var(--bg);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 24px;
  overflow-y: auto;
}
.rail-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  width: 100%;
  text-align: left;
  transition: all var(--t-fast) var(--ease);
}
.rail-btn:hover { background: var(--ink); color: var(--surface); }
.rail-btn .plus { font-size: 15px; opacity: .7; }

.corpus-block { display: flex; flex-direction: column; gap: 4px; }
.corpus-title {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.corpus-title .chev { margin-left: auto; opacity: .8; }
.subnav { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.sub-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  color: var(--ink-3);
  width: 100%;
  text-align: left;
  transition: all var(--t-fast) var(--ease);
}
.sub-item:hover { color: var(--ink); background: var(--surface-2); }
.sub-item.active { color: var(--ink); background: var(--surface); border-color: var(--line); }
.sub-item .badge {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--ink-4);
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
}

.rail-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 0 12px;
  margin-top: 4px;
}
.history-item {
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.35;
  transition: all var(--t-fast) var(--ease);
}
.history-item:hover { background: var(--surface-2); color: var(--ink); }
.history-item .date { display: block; font-size: 10px; color: var(--ink-4); margin-top: 2px; font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1; letter-spacing: 0.5px; }

/* ── Main area + view system ─────────────────────────────── */
main.workspace {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.view {
  position: absolute; inset: 0;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}
.view.active { opacity: 1; pointer-events: auto; }

/* ── Entry view ──────────────────────────────────────────── */
.entry {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 24px;
}
.entry-card {
  width: min(820px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 60px 56px;
  box-shadow: var(--shadow-2);
}
.entry-eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 16px;
}
.entry-prompt {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.7px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 28px;
}
.entry-input {
  width: 100%;
  min-height: 120px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}
.entry-input::placeholder { color: var(--ink-4); }
.entry-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px;
  justify-content: space-between;
}
.entry-meta {
  display: flex; gap: 16px;
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.btn-primary {
  padding: 12px 24px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--t-fast) var(--ease);
}
.btn-primary:hover { background: var(--accent); }
.btn-secondary {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  transition: all var(--t-fast) var(--ease);
}
.btn-secondary:hover { background: var(--ink); color: var(--surface); }
.entry-suggest {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.entry-suggest-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
}
.suggest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suggest-item {
  padding: 12px 14px;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--ink-2);
  background: var(--bg);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  text-align: left;
  line-height: 1.4;
}
.suggest-item:hover { border-color: var(--line); background: var(--surface); }

/* ── Loading view ───────────────────────────────────────── */
.loading {
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
}
.loading-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.loading-q {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.2px;
  max-width: 560px;
  color: var(--ink-2);
  line-height: 1.4;
}
.loading-canvas {
  /* Simplistic spinning black "broken-C" ring — replaces the pulsing gradient
     orb (which read as creepy). One side of the ring is transparent (the gap),
     and it rotates continuously to convey "working". */
  width: 88px; height: 88px;
  margin: 0 auto;
  border-radius: 50%;
  border: 6px solid var(--ink, #14171c);
  border-top-color: transparent;   /* the gap → a "broken C" */
  background: none;
  box-shadow: none;
  animation: loadingOrbSpin 0.9s linear infinite;
}
@keyframes loadingOrbSpin { to { transform: rotate(360deg); } }
.loading-progress {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
}
.loading-step { display: flex; align-items: center; gap: 8px; }
.loading-step .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
.loading-bar {
  width: 280px; height: 2px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.loading-bar::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 40%;
  background: var(--ink);
  border-radius: 2px;
  animation: slide 2.4s ease-in-out infinite;
}
/* In-stage progress: when a `progress` SSE event arrives we add
   .has-progress to the loading-bar and switch to a real fill driven
   by --progress (set inline). The decorative slide is suppressed. */
.loading-bar.has-progress::after {
  animation: none;
  left: 0;
  width: var(--progress, 0%);
  transition: width 200ms ease-out;
  background: var(--accent);
}
.loading-substep {
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.2px;
  margin-top: -4px;
}
@keyframes slide {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* ── Dashboard ──────────────────────────────────────────── */
.dashboard { padding: 28px 32px 60px; }
.dash-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px;
  gap: 24px;
}
.dash-question {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 80ch;
}
.dash-question .label {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.dash-actions { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  display: grid; place-items: center;
  transition: all var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--ink); color: var(--surface); }
.icon-btn svg { width: 16px; height: 16px; }

/* Per Niv: the center image is the most important card on this page —
   it carries the main mechanism. Layout pivots from 1.6/1.4/1 (image
   was secondary) to a 1/2/1 ratio that makes the mechanism the focal point. */
.dash-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 0.85fr);
  gap: 16px;
  margin-bottom: 28px;
  align-items: stretch;
}
.meta-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.meta-label .conf {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 1.2px;
}
.meta-claim-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.1px;
  line-height: 1.45;
  color: var(--ink);
  flex: 1;
}
/* Mechanism (center) card — dominant */
.mech-card { padding: 22px 24px 20px; }
.mech-stage {
  flex: 1;
  background: var(--night);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  min-height: 240px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04),
              0 8px 32px -12px rgba(43,53,138,0.30);
  transition: transform var(--t-fast) var(--ease);
}
.mech-stage:hover { transform: translateY(-1px); }
.mech-stage svg { width: 100%; height: 100%; display: block; }
.mech-zoom-hint {
  position: absolute; top: 10px; right: 10px;
  /* Solid translucent chip — no backdrop-filter. The blur was frosting the
     image pixels behind the hint, which read as a blurred top-right corner of
     the figure in the UI (the full-size lightbox has no hint, so it looked
     un-blurred there). Keep the label legible with an opaque-ish backing
     instead of frosting the image. */
  background: rgba(20,24,40,0.55);
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.10);
}
.mech-cap {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: 12px;
  flex-shrink: 0;
}
.mech-cap strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 3px; font-size: 13px; }

/* Bottom-line card (replaces the validity ring per the locked design:
   recommendation + bottom-line text, no aggregate percentage). */
.bottomline-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 18px 18px 16px;
  gap: 10px;
}
.bottomline-text {
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* PMID anchor styling — Arial, no underline by default, color on hover */
a.pmid, .so-list a, .exp-paper a.pmid {
  color: var(--accent); text-decoration: none;
}
a.pmid:hover, .so-list a:hover, .exp-paper a.pmid:hover {
  text-decoration: underline;
}
.bottomline-text::-webkit-scrollbar { width: 4px; }
.bottomline-text::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 2px; }
/* Bottom-line / results-summary cards now render plain prose with
   inline .cite pills (no Go/No-go badge, no CONF chip). */

.overview-card { margin-top: 14px; }
.overview-card .ov-why { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.overview-card .ov-sub { margin-top: 12px; }
.overview-card .ov-sublabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); margin-bottom: 5px; }
.overview-card .ov-list { margin: 0; padding-left: 18px; }
.overview-card .ov-list li { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-bottom: 4px; }
/* Target Snapshot — the page-1 cover table (target_snapshot.rows). */
.target-snapshot-card { margin-top: 14px; }
.target-snapshot-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.target-snapshot-table th {
  text-align: left; vertical-align: top; white-space: nowrap;
  width: 240px; padding: 7px 14px 7px 0; color: var(--ink-3);
  font-weight: 600; border-bottom: 1px solid var(--line-soft);
}
.target-snapshot-table td {
  vertical-align: top; padding: 7px 0; color: var(--ink-2);
  border-bottom: 1px solid var(--line-soft); line-height: 1.5;
}
.target-snapshot-table tr:last-child th,
.target-snapshot-table tr:last-child td { border-bottom: none; }

/* Open research directions — sits between dash-meta (bottom-line + figure)
   and counter-strip. Mirrors the PDF renderer's structure: top-5 detailed
   cards, ranks 6-10 compressed, plus collapsible cross-claim tensions and
   evidence-shape observations sub-panels at the bottom. Hidden by default;
   _renderResearchDirections() shows it when payload.concerns is non-empty. */
.research-directions {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 22px 16px;
  margin-bottom: 28px;
}
.research-directions-h {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 14px 0;
  font-weight: 700;
}
.rd-list { display: flex; flex-direction: column; gap: 12px; }
.rd-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--surface-2);
}
.rd-card-head {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.rd-rank {
  font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; flex: 0 0 28px;
}
.rd-concern {
  flex: 1 1 auto; font-weight: 600; font-size: 14px; color: var(--ink);
}
.rd-chip {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; padding: 2px 7px; border-radius: 10px;
  text-transform: uppercase;
}
.rd-chip-roi-high   { background: rgba(15,110,86,0.14);  color: #0a5240; }
.rd-chip-roi-medium { background: rgba(200,140,20,0.16); color: #7a5b0c; }
.rd-chip-roi-low    { background: var(--surface-2);      color: var(--ink-4); }
.rd-chip-type {
  background: var(--accent-bg); color: var(--accent);
  font-weight: 600; text-transform: none; letter-spacing: 0;
}
.rd-action {
  font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 4px 0;
}
.rd-rule {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  margin: 2px 0 0 0; font-style: italic;
}
.rd-why {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
  margin: 6px 0 0 0;
}
.rd-detailed {
  margin-top: 8px; border-top: 1px dotted var(--line); padding-top: 8px;
}
.rd-detailed summary {
  cursor: pointer; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
  padding: 4px 0;
}
.rd-detailed dl {
  margin: 8px 0 0 0; display: grid;
  grid-template-columns: 110px 1fr; gap: 4px 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink);
}
.rd-detailed dt { font-weight: 700; color: var(--ink-3); }
.rd-detailed dd { margin: 0; }
.rd-detailed dd ul { margin: 0; padding-left: 18px; }
.rd-immediate {
  margin-top: 8px; background: #d8efe6; border: 1px solid #aedccb;
  border-left: 3px solid var(--accent); border-radius: 5px; padding: 9px 12px;
}
.rd-immediate-none {
  background: #f1f0ea; border-color: var(--line); border-left-color: var(--ink-3);
}
.rd-immediate summary { cursor: pointer; }
.rd-immediate-h {
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: #0a5240; font-weight: 700; margin: 0;
}
/* Restore spacing above the first body line only when the panel is open. */
.rd-immediate[open] .rd-immediate-h { margin: 0 0 5px 0; }
.rd-immediate-none .rd-immediate-h { color: var(--ink-3); }
.rd-immediate-meta {
  font-weight: 600; letter-spacing: 0; text-transform: none; color: #0a5240;
}
.rd-immediate p {
  font-size: 12.5px; line-height: 1.5; color: var(--ink); margin: 3px 0 0 0;
}
.rd-immediate-action { font-weight: 600; }
.rd-compressed {
  margin-top: 14px; border-top: 1px dotted var(--line); padding-top: 12px;
}
.rd-compressed-h {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-4); margin: 0 0 8px 0; font-weight: 700;
}
.rd-compressed ul { list-style: none; margin: 0; padding: 0; }
.rd-compressed li {
  display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5;
  padding: 3px 0; border-bottom: 1px dotted var(--line-soft); color: var(--ink);
}
.rd-compressed li:last-child { border-bottom: none; }
.rd-compressed .rd-rank { flex: 0 0 22px; font-size: 12px; }
.rd-subpanel {
  margin-top: 14px; border-top: 1px dotted var(--line); padding-top: 10px;
}
.rd-subpanel summary {
  cursor: pointer; font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
  padding: 4px 0;
}
.rd-subpanel-body { margin-top: 8px; }
.rd-subpanel-row {
  font-size: 12.5px; line-height: 1.5; color: var(--ink);
  padding: 6px 0; border-bottom: 1px dotted var(--line-soft);
}
.rd-subpanel-row:last-child { border-bottom: none; }
.rd-subpanel-row .rd-why { color: var(--ink-4); margin-top: 2px; }

/* counter strip */
.counter-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 28px;
  overflow: hidden;
}
.counter {
  background: var(--surface);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.counter .n {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.8px;
  font-family: Arial, Helvetica, sans-serif;
}
.counter .l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* claims */
.claims-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.claims-title {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-4);
}
.claims-title strong { color: var(--ink); font-weight: 600; }
.claims-filter { display: flex; gap: 6px; }
.chip {
  padding: 5px 11px;
  border: 1px solid var(--line-mid);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--line); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.claim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
/* Section group header inside the claim grid. Spans the full grid row
   regardless of column count so claims under the same section are
   visually clustered together. */
.claim-section-h {
  grid-column: 1 / -1;
  margin: 18px 0 4px;
  padding: 6px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.claim-section-h:first-child { margin-top: 0; }
.claim-section-n {
  font-weight: 500; color: var(--ink-4);
  letter-spacing: 0.4px; text-transform: none;
  font-size: 11px;
}
.claim-section-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
/* When a section has prose, the header acts as a click-to-expand
   affordance for the prose body that follows. */
.claim-section-h.has-prose {
  cursor: pointer;
  user-select: none;
}
.claim-section-h.has-prose:hover { color: var(--ink); }
/* Explicit "Overview" affordance so it's obvious the section title expands
   to reveal prose. Accent-coloured, pill-like; label flips to "Hide" when
   open (pure CSS, no JS text update). */
.claim-section-prose-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.2px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.claim-section-prose-cta::before { content: "Overview"; }
.claim-section-h.has-prose.open .claim-section-prose-cta::before { content: "Hide"; }
.claim-section-h.has-prose:hover .claim-section-prose-cta {
  background: var(--surface);
  border-color: var(--accent);
}
.claim-section-chevron {
  display: inline-block;
  font-size: 11px;
  color: var(--accent);
  transition: transform var(--t-fast) var(--ease);
  transform: rotate(0deg);
}
.claim-section-h.has-prose.open .claim-section-chevron {
  transform: rotate(90deg);
}
/* Prose body that drops down under a section header. Spans the full
   grid row like .claim-section-h so it sits above the claim cards. */
.claim-section-prose {
  grid-column: 1 / -1;
  margin: 6px 0 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-left: 2px solid var(--line-soft);
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 880px;
}
.claim-section-prose p {
  margin: 0 0 10px;
}
.claim-section-prose p:last-child { margin-bottom: 0; }
/* Reuse the Ask answer's citation pill style for [C-NNN] tokens inside
   the section prose. Click → open the claim's slide-over. */
.claim-section-prose .cite,
.meta-claim-text .cite,
.bottomline-text .cite,
.research-directions .cite {
  display: inline-block;
  vertical-align: super;
  font-size: 9px;
  font-family: Arial, Helvetica, sans-serif;
  font-feature-settings: 'tnum' 1;
  font-weight: 600;
  color: var(--accent);
  padding: 1px 4px;
  margin: 0 1px;
  border-radius: 3px;
  background: var(--accent-bg);
  cursor: pointer;
}
.claim-section-prose .cite:hover,
.meta-claim-text .cite:hover,
.bottomline-text .cite:hover,
.research-directions .cite:hover { background: var(--accent); color: #fff; }
.claim-rank {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 100px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.claim-card.active .claim-rank { background: rgba(255,255,255,0.10); color: var(--surface); }
.claim-verbatim {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
  margin-top: 4px;
  padding: 4px 8px;
  border-left: 2px solid var(--line-soft);
  font-style: italic;
  /* No truncation — show the full quote even if long. */
}
.claim-card.active .claim-verbatim { color: var(--ink-5); border-color: var(--ink-3); }
.claim-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  text-align: left;
  align-items: center;
  min-height: 76px;
}
.claim-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.claim-card.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.claim-card.active .claim-meta { color: var(--ink-5); }

.cv {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--cp,55) * 1%), var(--line-soft) 0);
  display: grid; place-items: center;
  position: relative;
  flex-shrink: 0;
}
.cv::before {
  content: '';
  position: absolute; inset: 4px;
  background: var(--surface);
  border-radius: 50%;
}
.claim-card.active .cv::before { background: var(--ink); }
.cv-text {
  position: relative;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.claim-card.active .cv-text { color: var(--surface); }
.cv.na {
  background: var(--accent-bg);
  border: 1px dashed var(--line-mid);
}
/* "NEED RESEARCH" wraps onto two lines inside the 44px circle. Tight
   line-height + tracking-out so both words fit and read as a single
   chip rather than a percentage. */
.cv.na .cv-text {
  color: var(--accent);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  width: 32px;
}
.cv.lo  { background: conic-gradient(var(--bad)  calc(var(--cp,30) * 1%), var(--line-soft) 0); }
.cv.mid { background: conic-gradient(var(--warn) calc(var(--cp,55) * 1%), var(--line-soft) 0); }
.cv.hi  { background: conic-gradient(var(--ok)   calc(var(--cp,75) * 1%), var(--line-soft) 0); }

.claim-body { min-width: 0; }
.claim-id {
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--ink-4);
  margin-bottom: 3px;
}
.claim-card.active .claim-id { color: var(--ink-5); }
.claim-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: inherit;
  /* No truncation — render the full claim statement verbatim. */
}
.claim-meta {
  display: flex; gap: 10px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.4px;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
}

/* ── Slideover ─────────────────────────────────────────── */
.slideover-backdrop {
  position: fixed; inset: 0;
  background: rgba(12,12,18,0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
  z-index: 50;
  backdrop-filter: blur(2px);
}
.slideover-backdrop.on { opacity: 1; pointer-events: auto; }
.slideover {
  position: fixed;
  top: 56px; right: 0; bottom: 0;
  /* Widened so the experiments table's columns (Method, Finding,
     Stance, NOTE button) all stay in view at typical viewport widths. */
  width: min(1200px, 85vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  transform: translateX(105%);
  transition: transform var(--t-slow) var(--ease);
  z-index: 60;
  display: flex; flex-direction: column;
}
.slideover.on { transform: translateX(0); }
.so-head {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.so-eye {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
}
.so-eye .id { font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1; color: var(--ink-2); font-weight: 600; }
.so-eye .vbadge {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.so-eye .vbadge.hi  { background: rgba(61,122,79,0.12);  color: var(--ok); }
.so-eye .vbadge.mid { background: rgba(181,131,38,0.12); color: var(--warn); }
.so-eye .vbadge.lo  { background: rgba(168,68,63,0.12);  color: var(--bad); }
.so-eye .vbadge.na  { background: var(--accent-bg); color: var(--accent); border: 1px dashed var(--line-mid); font-size: 11px; }
.so-close {
  position: absolute; top: 18px; right: 20px;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  display: grid; place-items: center;
}
.so-close:hover { background: var(--ink); color: var(--surface); }
.so-statement {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 1.4;
  color: var(--ink);
}
.so-bottom {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--r-md);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
}
.so-bottom strong {
  display: block;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 4px;
}
.so-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 32px;
}
.so-section + .so-section { margin-top: 28px; }
.so-h {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.so-h .count { font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1; color: var(--ink-2); font-weight: 600; }
.so-list { display: flex; flex-direction: column; gap: 8px; }
.so-li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.so-li-marker { color: var(--ink-4); font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1; font-size: 11px; padding-top: 1px; }
.so-li.gap .so-li-marker { color: var(--bad); }
.so-li.conv .so-li-marker { color: var(--ok); }

.exp-table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  background: var(--bg);
  overflow: hidden;
}
.exp-table th, .exp-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.exp-table th {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  background: var(--surface-2);
  position: sticky; top: 0;
}
.exp-table tr:last-child td { border-bottom: 0; }
.exp-table tr:hover td { background: var(--surface); cursor: pointer; }
.exp-paper {
  font-size: 12px;
}
.exp-paper .auth { display: block; font-weight: 500; color: var(--ink); }
.exp-paper .pmid { font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1; font-size: 10px; color: var(--accent); margin-top: 2px; }
.exp-finding { color: var(--ink-2); line-height: 1.5; }
.exp-stance {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.exp-stance.support { background: rgba(61,122,79,0.13); color: var(--ok); }
.exp-stance.qual,
.exp-stance.qualified { background: rgba(181,131,38,0.13); color: var(--warn); }
.exp-stance.refute  { background: rgba(168,68,63,0.13); color: var(--bad); }
.exp-stance.neutral { background: var(--line-soft); color: var(--ink-3); }
.exp-vp {
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
  font-weight: 600;
  font-size: 11px;
}
/* Combined stance + validity cell: stance pill on top, percent below.
   Keeps the column narrow without cramming both pieces side-by-side. */
.exp-stance-cell {
  white-space: nowrap;
  text-align: center;
}
.exp-stance-cell .exp-stance { display: inline-block; }
.exp-stance-cell .exp-vp-inline {
  display: block;
  margin-top: 3px;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
  font-weight: 600;
  font-size: 10px;
}
/* One-sentence rationale from the per-experiment scorer
   (`support_reason`). Mirrors the PDF section-evidence table — the
   reader needs to see *why* an experiment got its stance pill. */
.exp-stance-cell .exp-stance-reason {
  display: block;
  white-space: normal;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-3);
  font-style: italic;
  text-align: left;
}
.exp-table { table-layout: fixed; width: 100%; }
.exp-table td { vertical-align: top; word-wrap: break-word; overflow-wrap: anywhere; }
.exp-table .exp-finding { white-space: normal; }
.exp-table .exp-paper { white-space: normal; }

/* ── Ask the Corpus ────────────────────────────────────── */
.ask {
  display: grid;
  grid-template-rows: 1fr auto;  /* chat thread + input; top strip removed */
  height: 100%;
  padding: 28px 32px;
  gap: 22px;
}
.ask-top {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  gap: 18px;
  align-items: stretch;
}
.ask-orb {
  width: 240px; height: 240px;
  /* Self-contained gradient orb. Replaces a <canvas> fuzzy-ball that rendered
     as an empty near-black circle whenever its animation hadn't painted. This
     always renders; it pulses only while a question is processing (.thinking). */
  background:
    radial-gradient(circle at 35% 30%, var(--accent) 0%, #0a5240 55%, #07382b 100%);
  border-radius: var(--r-lg);
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 16px 40px -16px rgba(43,53,138,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}
.ask-orb.thinking { animation: askOrbPulse 1.8s ease-in-out infinite; }
@keyframes askOrbPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.04); opacity: .85; }
}
/* THINKING caption — ported from thinking-machine.html (same colour, same letter-spacing,
   same blink rhythm). Hidden until ask-orb has the .thinking class. */
.ask-orb .think-label {
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-bottom: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #4a4a55;
  display: flex; align-items: center; gap: 6px;
  opacity: 0;
  transition: opacity 200ms var(--ease);
  pointer-events: none;
}
.ask-orb.thinking .think-label { opacity: 1; }
.ask-orb .think-dots { display: flex; gap: 4px; }
.ask-orb .think-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #4a4a55;
  animation: thinkBlink 1.4s ease-in-out infinite;
}
.ask-orb .think-dot:nth-child(2) { animation-delay: 0.2s; }
.ask-orb .think-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkBlink {
  0%, 80%, 100% { opacity: 0.2; transform: scale(1); }
  40%           { opacity: 0.85; transform: scale(1.3); background: #888; }
}
.ask-desc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.ask-desc-h {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ask-desc-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
}
.ask-desc-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.ask-counters {
  display: grid; grid-template-rows: 1fr 1fr 1fr;
  gap: 8px;
  width: 130px;
}
.ask-counter {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--surface);
  display: flex; flex-direction: column;
  justify-content: center;
  min-width: 110px;
}
.ask-counter .n {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.ask-counter .l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 2px;
}

.chat-thread {
  flex: 1;
  /* #9 — the chat is the 1fr middle row of the .ask grid. Without min-height:0
     its min-content height forces the grid taller than the viewport, pushing
     the input row (and the "Ask" button) below the fold with no way to scroll
     to it on shorter screens. min-height:0 lets the chat shrink + scroll
     internally so the input stays pinned and visible. */
  min-height: 0;
  display: flex; flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding: 4px 0;
}
.msg {
  max-width: 80%;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  line-height: 1.55;
  font-size: 13.5px;
}
.msg.u {
  align-self: flex-end;
  background: var(--ink);
  color: var(--surface);
  border-bottom-right-radius: 4px;
}
.msg.a {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
/* Newly-retrieved-paper badge — citations to papers fetched in the
   Phase-1 quick-expand that aren't in the cluster index yet. */
.cite-new {
  display: inline-block;
  margin-left: 2px;
  padding: 0 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 100px;
  vertical-align: super;
  line-height: 1.1;
}

.msg.a .cite {
  display: inline-block;
  vertical-align: super;
  font-size: 9px;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
  font-weight: 600;
  color: var(--accent);
  padding: 1px 4px;
  margin: 0 1px;
  border-radius: 3px;
  background: var(--accent-bg);
  cursor: pointer;
}
.msg.a .cite a { color: var(--accent); text-decoration: none; }
.msg.a .cite:hover { background: var(--accent); color: #fff; }
.msg.a .cite:hover a { color: #fff; }
/* Answer-body markdown rendering */
.msg.a .msg-body p { margin: 0 0 10px 0; line-height: 1.55; }
.msg.a .msg-body p:last-child { margin-bottom: 0; }
.msg.a .msg-body h3 { font-size: 14px; font-weight: 700; margin: 14px 0 6px 0; color: var(--ink); }
.msg.a .msg-body h4, .msg.a .msg-body h5, .msg.a .msg-body h6 {
  font-size: 12.5px; font-weight: 700; margin: 12px 0 4px 0; color: var(--ink-2);
  letter-spacing: 0.2px;
}
.msg.a .msg-body ul { margin: 4px 0 10px 18px; padding: 0; }
.msg.a .msg-body li { margin: 3px 0; line-height: 1.5; }
.msg.a .msg-body strong { font-weight: 700; color: var(--ink); }
.msg-h {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
  font-weight: 600;
}
.msg.u .msg-h { color: var(--ink-5); }

.suggestions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.sg {
  padding: 6px 12px;
  border: 1px solid var(--line-mid);
  border-radius: 100px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  background: var(--bg);
  transition: all var(--t-fast) var(--ease);
}
.sg:hover { border-color: var(--line); background: var(--surface); }

/* ── Corpus-expansion CTA (Phase 2.5) ────────────────────────
   Rendered inline after an Ask answer when the answerer's coverage
   classifier flags partial / missing coverage. Single-shot card —
   click "Expand" to start a slim pipeline run that grows the corpus
   on the missing aspect, then re-renders the report. */
.expand-cta {
  margin-top: 14px; padding: 14px 16px;
  border: 1px dashed var(--line-mid); border-radius: var(--r-md);
  background: var(--accent-bg);
  display: flex; flex-direction: column; gap: 8px;
}
.expand-cta-h {
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent);
}
.expand-cta-body { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.expand-cta-aspect { font-weight: 600; color: var(--ink); }
.expand-cta-actions { display: flex; gap: 8px; align-items: center; }
.expand-cta-btn {
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: 0.3px;
  transition: all var(--t-fast) var(--ease);
}
.expand-cta-btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.expand-cta-btn[disabled] { opacity: 0.6; cursor: default; }
.expand-cta-skip {
  font-size: 12px; color: var(--ink-4); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  background: none; border: 0; padding: 0;
}
.expand-cta-skip:hover { color: var(--ink-2); }
.expand-cta-status {
  font-size: 12px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.expand-cta-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  animation: pulse 1.2s ease-in-out infinite;
}

/* Empty state in chat thread — invites real-demo questions */
.msg-empty {
  margin: auto 0;
  align-self: center;
  text-align: center;
  max-width: 720px;
  width: 100%;
  padding: 32px 0;
}
.msg-empty-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 18px;
}
.msg-empty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sg-big {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px;
  text-align: left;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.4;
  transition: all var(--t-fast) var(--ease);
}
.sg-big:hover { border-color: var(--ink); background: var(--bg); transform: translateY(-1px); }

@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg { animation: msgIn 280ms var(--ease) both; }

/* Thinking message bubble — three dots while corpus is "answering" */
.msg.thinking {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  padding: 16px 20px;
}
.msg.thinking .tk-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.msg.thinking .tk {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
  animation: thinkBlink 1.4s ease-in-out infinite;
}
.msg.thinking .tk:nth-child(2) { animation-delay: 0.2s; }
.msg.thinking .tk:nth-child(3) { animation-delay: 0.4s; }

.ask-input {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.ask-input input {
  width: 100%;
  font-size: 14px;
}
.ask-input input::placeholder { color: var(--ink-4); font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
.ask-attach {
  width: 36px; height: 36px;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 18px;
  color: var(--ink-3);
}
.ask-attach:hover { border-color: var(--line); color: var(--ink); }

/* ── Data tables view ─────────────────────────────────── */
.data { padding: 28px 32px 60px; }
.data-tabs {
  display: flex;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1px;
  margin-bottom: 22px;
  width: fit-content;
}
.dtab {
  padding: 10px 22px;
  background: var(--surface);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--ink-3);
  font-weight: 500;
  border-radius: 5px;
  transition: all var(--t-fast) var(--ease);
}
.dtab:first-child { border-radius: 5px 0 0 5px; }
.dtab:last-child { border-radius: 0 5px 5px 0; }
.dtab.on { background: var(--ink); color: var(--surface); }
.dtab .badge {
  display: inline-block;
  margin-left: 8px;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
  font-size: 10px;
  opacity: 0.7;
}

.data-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  gap: 14px;
}
.data-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1; max-width: 360px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.data-search input { width: 100%; font-size: 13px; }
.data-search input::placeholder { color: var(--ink-4); }
.data-actions { display: flex; gap: 8px; }

.data-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.data-table th, .data-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.data-table thead th {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  white-space: nowrap;
}
.data-table tbody tr:hover td { background: var(--bg); cursor: default; }
.data-table tbody tr.row-clickable { cursor: pointer; }
.data-table tbody tr.row-clickable:hover td { background: var(--accent-bg); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-bg);
  color: var(--accent);
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
  font-size: 10px;
  font-weight: 600;
}
.tag.role-focal      { background: rgba(43,53,138,0.12);  color: var(--accent); }
.tag.role-supporting { background: rgba(61,122,79,0.12);  color: var(--ok); }
.tag.role-competitive{ background: rgba(168,68,63,0.13);  color: var(--bad); }
.tag.lvl-high        { background: rgba(61,122,79,0.13);  color: var(--ok); }
.tag.lvl-mod         { background: rgba(181,131,38,0.13); color: var(--warn); }
.tag.lvl-low         { background: var(--line-soft);     color: var(--ink-3); }
.tag.lvl-na          { background: var(--line-soft);     color: var(--ink-4); }

.data-foot {
  padding: 10px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--ink-4);
  display: flex; justify-content: space-between;
  letter-spacing: 0.4px;
}

/* ── Images view ──────────────────────────────────────── */
.images { padding: 28px 32px 60px; }
.images-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 22px;
}
.images-h {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-4);
}
.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.fig {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  transition: all var(--t-fast) var(--ease);
}
.fig:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.fig:hover .fig-zoom { opacity: 1; }
.fig-zoom {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75);
  display: grid; place-items: center;
  font-size: 14px;
  opacity: 0;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  transition: opacity var(--t-fast) var(--ease);
  z-index: 2;
}
.fig-canvas {
  width: 100%;
  aspect-ratio: 16 / 11;
  background: var(--night);
  position: relative;
  overflow: hidden;
}
.fig-canvas svg { width: 100%; height: 100%; display: block; }
.fig-meta {
  padding: 14px 16px;
  border-top: 1px solid var(--line-soft);
}
.fig-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
}
.fig-tag.gen { color: var(--accent); }
.fig-cap {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.fig-src {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-4);
}
.fig-src a { color: var(--accent); font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1; text-decoration: none; }

/* ── Image Lightbox (Niv §5.6: figures must be clickable to enlarge) ─── */
.lightbox-back {
  position: fixed; inset: 0;
  background: rgba(8,8,14,0.84);
  backdrop-filter: blur(8px);
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}
.lightbox-back.on { opacity: 1; pointer-events: auto; }
.lightbox {
  background: var(--night);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.06);
  max-width: 1100px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.55);
  transform: scale(0.96);
  transition: transform var(--t-mid) var(--ease);
}
.lightbox-back.on .lightbox { transform: scale(1); }
.lightbox-stage {
  flex: 1;
  background: var(--night);
  display: grid; place-items: center;
  padding: 28px;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.lightbox-stage svg { width: 100%; height: auto; max-height: 70vh; display: block; }
.lightbox-foot {
  padding: 18px 26px 22px;
  background: #0e0e18;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
}
.lightbox-cap {
  color: #d8dbe8;
  font-family: Arial, Helvetica, sans-serif;
}
.lightbox-cap .tag-row {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #6f7290;
  margin-bottom: 6px;
}
.lightbox-cap .tag-row .gen { color: #8a98e8; }
.lightbox-cap .title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.lightbox-cap .src {
  font-size: 11px;
  color: #898ca5;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
}
.lightbox-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  color: #d8dbe8;
  background: rgba(255,255,255,0.04);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 16px;
  transition: all var(--t-fast) var(--ease);
}
.lightbox-close:hover { background: rgba(255,255,255,0.10); }

/* Lightbox image zoom toolbar (Niv: allow zoom within images) */
.lb-zoom-bar {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.lb-zoom-btn {
  width: 32px; height: 32px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #d8dbe8;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.lb-zoom-btn:hover { background: rgba(255,255,255,0.16); }
.lb-zoom-level {
  display: grid; place-items: center;
  padding: 0 10px;
  height: 32px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  color: #b9bcd0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
}
.lightbox-stage {
  position: relative;
  cursor: zoom-in;
}
.lightbox-stage.zoomed { cursor: grab; }
.lightbox-stage.dragging { cursor: grabbing; }
.lightbox-stage img,
.lightbox-stage svg {
  transition: transform 200ms var(--ease);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-stage.dragging img,
.lightbox-stage.dragging svg { transition: none; }
.lightbox-stage img {
  max-width: 100%;
  max-height: 70vh;
  display: block;
}

/* ── Generic modal (Share + Augment dialogs) ───────────────────────── */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(13,13,18,0.45);
  backdrop-filter: blur(4px);
  z-index: 80;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}
.modal-back.on { opacity: 1; pointer-events: auto; }
.modal {
  width: 560px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  transform: translateY(8px) scale(0.98);
  transition: transform var(--t-mid) var(--ease);
}
.modal-back.on .modal { transform: translateY(0) scale(1); }
.modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  padding: 22px 26px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-eye {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.modal-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.modal-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  display: grid; place-items: center;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-fast) var(--ease);
}
.modal-close:hover { background: var(--ink); color: var(--surface); }
.modal-body { padding: 18px 26px 22px; }
.modal-foot {
  padding: 16px 26px 22px;
  border-top: 1px solid var(--line-soft);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--bg);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.modal-section { margin-bottom: 18px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
  display: block;
}
.modal-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: 13.5px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
}
.modal-input::placeholder { color: var(--ink-4); }

/* Share modal — collaborator list */
.collab-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.collab-row + .collab-row { margin-top: 2px; }
.collab-row:hover { background: var(--bg); }
.collab-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.collab-info { flex: 1; min-width: 0; }
.collab-info .name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.collab-info .meta { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.collab-role {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--line-mid);
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.share-link-row {
  display: flex; gap: 8px; align-items: center;
}
.share-link-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: 12px;
  color: var(--ink-2);
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
}
.copied-pulse {
  background: var(--ok) !important;
  color: #fff !important;
  border-color: var(--ok) !important;
}

/* Augment modal — file dropzone + tabs */
.aug-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.aug-tab {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--bg);
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.aug-tab.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.aug-tab:hover:not(.on) { color: var(--ink); }
.aug-drop {
  border: 2px dashed var(--line-mid);
  border-radius: var(--r-md);
  padding: 32px 20px;
  text-align: center;
  background: var(--bg);
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
}
.aug-drop:hover { border-color: var(--ink); background: var(--surface-2); }
.aug-drop-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  display: grid; place-items: center;
  margin: 0 auto 10px;
  font-size: 18px;
  font-weight: 700;
}
.aug-drop-h { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.aug-drop-sub { font-size: 12px; color: var(--ink-4); }
.aug-list {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.aug-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  font-size: 12.5px;
}
.aug-item .name { flex: 1; color: var(--ink); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aug-item .size { color: var(--ink-4); font-size: 11px; flex-shrink: 0; font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1; }
.aug-item .rm {
  background: none;
  border: 0;
  color: var(--ink-4);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}
.aug-item .rm:hover { color: var(--bad); }
.aug-status {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--accent-bg);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--accent);
  display: none;
}
.aug-status.on { display: block; }

/* ── Expandable recent-corpus item (Niv: arrow down when expanded) ── */
.history-item {
  position: relative;
  padding: 10px 30px 10px 12px;
}
.history-item .chev-h {
  position: absolute;
  right: 10px;
  top: 12px;
  width: 14px;
  height: 14px;
  display: grid; place-items: center;
  font-size: 9px;
  color: var(--ink-4);
  transition: transform var(--t-fast) var(--ease);
}
.history-item.expanded .chev-h { transform: rotate(180deg); color: var(--ink); }
.history-sub {
  display: none;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.45;
}
.history-item.expanded .history-sub { display: block; }
.history-sub .row {
  display: flex; justify-content: space-between;
  margin-top: 6px;
}
.history-sub .row .k { color: var(--ink-4); font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; font-size: 9.5px; }
.history-sub .row .v { color: var(--ink-2); font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1; }
.history-sub-actions { display: flex; gap: 4px; margin-top: 10px; }
.history-sub-actions button {
  flex: 1;
  padding: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
}
.history-sub-actions button:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ── Report view (Niv: simply view the entire pdf end to end) ────── */
.report { padding: 28px 32px 60px; }
.report-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 22px;
  gap: 24px;
}
.report-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-4);
}
.report-meta strong { color: var(--ink); }
.report-actions { display: flex; gap: 8px; }
.report-pages {
  max-width: 920px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 14px;
}
.report-page {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 4px 16px -8px rgba(13,13,18,0.18);
  position: relative;
}
.report-page img { display: block; width: 100%; height: auto; }
.report-page-num {
  position: absolute;
  top: 8px; right: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink-4);
  background: rgba(255,255,255,0.85);
  padding: 3px 7px;
  border-radius: 3px;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
}
.report-page-placeholder {
  padding: 30px 20px;
  text-align: center;
  color: var(--ink-4);
  font-size: 12px;
  background: var(--surface-2);
}
.report-jump {
  position: sticky;
  top: 8px;
  align-self: flex-end;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  z-index: 2;
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
}

/* Use real PDF figure as the dashboard mech-stage image */
.mech-stage img.real-fig {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #ffffff;
}
.mech-stage--white { background: #ffffff; }

/* ── Unified rail accordion (selected + recent share same sub-nav) ── */
.corpus-acc {
  border-bottom: 1px solid var(--line-soft);
}
.corpus-acc:first-child { border-top: 1px solid var(--line-soft); }
.acc-head {
  position: relative;
  display: block;
  padding: 12px 30px 12px 14px;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast) var(--ease);
}
.acc-head:hover { background: var(--bg); }
.acc-head .ttl {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.acc-head .meta {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ink-4);
  margin-top: 4px;
  text-transform: uppercase;
}
.acc-chev {
  position: absolute;
  right: 12px;
  top: 16px;
  font-size: 10px;
  color: var(--ink-4);
  transition: transform var(--t-fast) var(--ease);
}
.corpus-acc.selected .acc-head .ttl::before {
  content: '●';
  color: var(--accent);
  margin-right: 6px;
  font-size: 10px;
  vertical-align: 1px;
}
.corpus-acc.open .acc-chev { transform: rotate(180deg); color: var(--ink); }
.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-mid) var(--ease);
}
.corpus-acc.open .acc-body { max-height: 500px; }
.acc-summary {
  padding: 0 14px 8px;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.45;
}
.acc-summary strong { color: var(--ink); font-size: 12px; }
.acc-summary .row {
  display: flex; justify-content: space-between;
  margin-top: 5px;
}
.acc-summary .row .k { color: var(--ink-4); font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; font-size: 9.5px; }
.acc-summary .row .v { color: var(--ink-2); font-feature-settings: 'tnum' 1; }
.acc-subnav {
  padding: 4px 8px 12px;
  display: flex; flex-direction: column; gap: 1px;
}
.acc-subnav .sub-item {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 4px;
  background: transparent;
  border: 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
}
.acc-subnav .sub-item:hover { background: var(--bg); color: var(--ink); }
.acc-subnav .sub-item.active {
  background: var(--ink);
  color: var(--surface);
}
.acc-subnav .sub-item .badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--ink-4);
  font-weight: 700;
  font-feature-settings: 'tnum' 1;
}
.acc-subnav .sub-item.active .badge { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }

/* ── Attach popover in Ask the Corpus ──────────────────────────────── */
/* #9 — pin the ask input bar to the bottom of the scroll viewport so the
   "Ask" button is always visible/reachable, even on short screens where the
   orb-heavy ask-top would otherwise push it below the fold. Sticky keeps its
   natural position when everything fits (no visual change on tall screens).
   Keeps position context for the attach popover. */
.ask-input-wrap { position: sticky; bottom: 0; z-index: 3; background: var(--bg); padding-top: 8px; }
.attach-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 270px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: 6px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.attach-pop.on {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.attach-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.attach-row:hover { background: var(--bg); }
.attach-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.attach-icon.green { background: rgba(61,122,79,0.12); color: var(--ok); }
.attach-icon.amber { background: rgba(181,131,38,0.12); color: var(--warn); }
.attach-info .ttl { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.attach-info .sub { font-size: 10.5px; color: var(--ink-4); margin-top: 1px; }

.attach-queue {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 6px;
  background: var(--accent-bg);
  border: 1px solid rgba(43,53,138,0.25);
  border-radius: 100px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
}
.attach-chip .rm {
  background: rgba(43,53,138,0.15);
  border: 0; color: var(--accent);
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 11px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.attach-chip .rm:hover { background: var(--accent); color: #fff; }

/* ── Share-as-API extension to share modal ────────────────────────── */
.api-switch {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.api-switch-label .h { font-size: 13px; font-weight: 700; color: var(--ink); }
.api-switch-label .s { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.toggle {
  position: relative;
  width: 36px; height: 20px;
  background: var(--line-mid);
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: left var(--t-fast) var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle.on { background: var(--ok); }
.toggle.on::after { left: 18px; }
.api-block {
  display: none;
  margin-top: 12px;
}
.api-block.on { display: block; }
.api-key-row {
  display: flex; gap: 6px;
  margin-bottom: 8px;
}
.api-key-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: 12px;
  font-feature-settings: 'tnum' 1;
  color: var(--ink-2);
  font-family: Arial, Helvetica, sans-serif;
}
.api-snippet {
  background: var(--night);
  color: #d8dbe8;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  font-feature-settings: 'tnum' 1;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
  margin-top: 8px;
}
.api-snippet .k { color: #c08bff; }
.api-snippet .s { color: #8de08d; }

/* Discrepant + orthogonal stances for experiment table */
.exp-stance.discrepant {
  background: rgba(168,68,63,0.10);
  color: var(--bad);
}
.exp-stance.orthogonal {
  background: rgba(80,96,212,0.08);
  color: var(--ink-3);
}

/* ── Structured gap cards in slide-over ───────────────────── */
.gap-card { align-items: flex-start; }
.gap-card .gap-body { flex: 1; min-width: 0; }
.gap-head {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}
.gap-text { color: var(--ink); font-weight: 500; }
.gap-sev {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: 0.8px;
  padding: 2px 8px; border-radius: 100px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.gap-sev--minor    { background: var(--line-soft); color: var(--ink-3); }
.gap-sev--moderate { background: rgba(181,131,38,0.15); color: var(--warn); }
.gap-sev--major    { background: rgba(168,68,63,0.15);  color: var(--bad);  }
.gap-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.5;
}
.gap-meta-h {
  font-weight: 600;
  color: var(--ink-2);
}
.gap-meta-close {
  background: var(--accent-bg);
  border-left: 2px solid var(--accent);
  padding: 6px 8px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.gap-meta-close .gap-meta-h { color: var(--accent); }
.gap-meta-pmids { font-size: 10.5px; color: var(--ink-4); }

/* Empty-experiments banner inside the slide-over.
   Surfaces when a claim has 0 per-(claim, experiment) rows attached
   — typical for cohort-study / meta-analysis / trial-readout claims
   whose support lives in the convergences, not in bench experiments. */
.so-empty-exps {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  background: var(--surface-2);
  border-left: 3px solid var(--accent-2);
  padding: 12px 14px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-top: 6px;
}
.so-empty-exps em { font-style: italic; color: var(--ink); }

/* Inline tables inside Ask answers (cohort + external-data examples) */
.qa-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 6px;
  font-size: 12.5px;
}
.qa-table th,
.qa-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.45;
}
.qa-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--line-mid);
  background: var(--bg);
}
.qa-table tr:hover td { background: var(--bg); }
.attach-lead {
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--accent);
  border-radius: 0 4px 4px 0;
}
.attach-lead strong { color: var(--ink); font-weight: 700; }

/* ── Misc ─────────────────────────────────────────────── */
.kbd {
  font-family: Arial, Helvetica, sans-serif; font-feature-settings: 'tnum' 1;
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-3);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-mid); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

@media (max-width: 1100px) {
  .dash-meta { grid-template-columns: 1fr; }
  .ask-top { grid-template-columns: 1fr; }
  .ask-orb { width: 100%; height: 240px; border-radius: var(--r-lg); }
  .msg-empty-grid { grid-template-columns: 1fr; }
  .lightbox-foot { flex-direction: column; align-items: flex-start; }
}

/* ── Feedback badge (internal review tool — Niv/Meir/Oded) ─────────
   Compact 👍/👎/💬 widget placed next to claims, gaps, experiments,
   replies, and the corpus header. Posts to /api/corpus/{id}/feedback.
   Free-text textarea is the primary affordance — internal reviewers
   leave substantive notes, not just thumbs. */
.fb-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--ink-4);
  user-select: none;
}
/* Compact placement on dense grids: positioned absolutely in the
   top-right corner of the parent. Faded by default; full opacity on
   parent hover. */
.fb-badge.fb-on-card {
  position: absolute; top: 6px; right: 6px;
  opacity: 0.55; transition: opacity .12s;
  z-index: 2;
}
.claim-card-wrap { position: relative; }
.claim-card-wrap:hover .fb-badge.fb-on-card { opacity: 1; }
.claim-card-wrap > .claim-card { width: 100%; }
.fb-btn {
  cursor: pointer;
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 3px 7px;
  font-size: 16px; line-height: 1; color: var(--ink-3);
  transition: background .12s, border-color .12s, color .12s;
}
.fb-btn:hover { background: var(--bg-2); border-color: var(--line-soft); color: var(--ink-2); }
.fb-btn.is-active { background: var(--accent-bg); border-color: var(--accent-2); color: var(--accent); }
/* Prominent free-text-comment button. Styled so it's distinct from
   the plain 👍/👎 — accent-blue background, slight emphasis. */
.fb-btn-note {
  font-size: 14px !important;
  padding: 3px 8px !important;
  background: var(--accent-bg) !important;
  border: 1px solid var(--accent-2) !important;
  color: var(--accent) !important;
  white-space: nowrap;
}
.fb-btn-note:hover {
  background: var(--accent-2) !important;
  color: white !important;
}
.fb-mark { font-size: 11px; color: var(--accent); margin-left: 2px; }

/* Inline expansion panel (textarea + correction picker) */
.fb-panel {
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm, 6px);
  background: rgba(255,255,255,0.6);
  font-size: 12px;
}
.fb-panel-row { display: flex; flex-direction: column; gap: 6px; }
.fb-panel textarea {
  width: 100%; min-height: 90px;
  font-family: inherit; font-size: 13px; color: var(--ink-2);
  border: 1.5px solid var(--accent-2); border-radius: 4px;
  padding: 8px 10px; resize: vertical; box-sizing: border-box;
  background: white;
  display: block;
}
.fb-panel textarea:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: var(--accent); }
.fb-panel-label {
  font-size: 11px; color: var(--ink-3); font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase;
  margin-bottom: 2px;
}
.fb-panel-actions { display: flex; gap: 6px; justify-content: flex-end; }
.fb-panel-btn {
  cursor: pointer; font-size: 11px; padding: 3px 9px;
  border: 1px solid var(--line); background: var(--ink-2); color: white;
  border-radius: 4px;
}
.fb-panel-btn.is-secondary { background: transparent; color: var(--ink-3); border-color: var(--line-soft); }
.fb-slider-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
.fb-slider-row input[type=range] { flex: 1; }
.fb-stance-row { display: flex; flex-wrap: wrap; gap: 4px; }
.fb-stance-pill {
  cursor: pointer; padding: 2px 8px; font-size: 11px;
  border: 1px solid var(--line-soft); border-radius: 999px;
  background: white; color: var(--ink-3);
}
.fb-stance-pill.is-active { background: var(--accent); color: white; border-color: var(--accent); }

/* User-picker modal (first-feedback prompt: Niv / Meir / Oded) */
.fb-userpick-overlay {
  position: fixed; inset: 0; background: rgba(13,13,18,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.fb-userpick {
  background: var(--bg-1, white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: var(--shadow-2);
  max-width: 360px;
}
.fb-userpick h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink-2); }
.fb-userpick p  { margin: 0 0 14px; font-size: 12px; color: var(--ink-3); }
.fb-userpick-row { display: flex; gap: 8px; }
.fb-userpick-btn {
  cursor: pointer; flex: 1; padding: 8px 12px;
  border: 1px solid var(--line); background: white; color: var(--ink-2);
  border-radius: 4px; font-size: 13px;
}
.fb-userpick-btn:hover { background: var(--bg-2); }
.fb-userpick-save {
  background: var(--ink-2); color: white;
}
.fb-userpick-save:hover { background: var(--ink); }
.fb-userpick-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; margin-bottom: 10px;
  font-family: inherit; font-size: 13px; color: var(--ink-2);
  border: 1px solid var(--line-soft); border-radius: 4px;
  background: white;
}
.fb-userpick-input:focus { outline: none; border-color: var(--accent-2); }

/* "Switch user" small affordance shown beside the active reviewer's name */
.fb-userswitch {
  position: fixed; bottom: 12px; right: 12px;
  font-size: 11px; color: var(--ink-4);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line-soft);
  padding: 4px 9px; border-radius: 999px;
  z-index: 100;
}
.fb-userswitch a { color: var(--accent); cursor: pointer; margin-left: 4px; }
.fb-userswitch a:hover { text-decoration: underline; }

/* ── "More classical" sidebar override ──────────────────────────────────
   The base rail is a content surface (cream bg, selected-corpus card
   carries title + body + key/value stats + a vertical tab strip). This
   override turns it into a navigation-only sidebar:
     - neutral palette (no cream)
     - selected card collapsed to title + meta line + a left-border accent
     - in-aside tab strip hidden; promoted to a horizontal top tab bar
       inside <main> (see .top-tabs below). */

aside.rail {
  background: #fafaf7;
  padding: 16px 10px;
  gap: 14px;
}
aside.rail .rail-btn {
  background: #fff;
  border-color: var(--line-soft);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}
aside.rail .rail-btn:hover { background: var(--ink); color: #fff; }

aside.rail .rail-section-label {
  font-size: 10px;
  letter-spacing: 1.3px;
  color: var(--ink-4);
  padding: 0 10px;
  margin: 8px 0 2px;
}

aside.rail .corpus-acc .acc-summary { display: none; }
aside.rail .corpus-acc .acc-subnav  { display: none; }

aside.rail .corpus-acc {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}
aside.rail .corpus-acc .acc-head {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 140ms;
}
aside.rail .corpus-acc .acc-head:hover { background: rgba(0,0,0,0.04); }
aside.rail .corpus-acc.selected .acc-head {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}
aside.rail .corpus-acc .acc-head .ttl {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 2px;
  white-space: normal;
}
aside.rail .corpus-acc.selected .acc-head .ttl { font-weight: 600; }
aside.rail .corpus-acc .acc-head .meta {
  display: block;
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.2px;
  text-transform: none;
  font-weight: 400;
}
aside.rail .corpus-acc .acc-head .acc-chev { display: none; }
aside.rail #recentCorporaList .corpus-acc + .corpus-acc { margin-top: 2px; }

/* ── New: horizontal top tab bar inside <main> ───────────────────────── */
main.workspace .top-tabs {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  z-index: 4;
  height: 44px;
}
main.workspace .top-tabs .top-tab {
  width: auto;                              /* override .sub-item width:100% */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px;
  height: 44px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color 140ms, border-color 140ms;
}
main.workspace .top-tabs .top-tab:hover { color: var(--ink); background: transparent; }
main.workspace .top-tabs .top-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  background: transparent;
}
main.workspace .top-tabs .top-tab .badge {
  font-size: 10px;
  color: var(--ink-4);
  font-feature-settings: 'tnum' 1;
}

/* Views are position:absolute inset:0 — when top-tabs is visible, shift
   the non-entry/non-loading views down so the tab bar isn't covered. */
.view.dashboard,
.view.analysis,
.view.ask,
.view.data,
.view.images,
.view.report,
.view.augment { top: 44px; }

/* Hide the top tab bar while the user is on entry/loading (no corpus). */
main.workspace:has(.view.entry.active)   .top-tabs,
main.workspace:has(.view.loading.active) .top-tabs { display: none; }