/* ==========================================================================
   Research copilot — streaming answers, agent progress, evidence map.

   Layered on top of agentic.css rather than merged into it: everything here
   belongs to surfaces that did not exist before (the token stream, the
   progress timeline, the citation card, the evidence map), so keeping it in
   one file makes the new UI removable in one line if it needs to be.

   Every colour comes from the tokens in app.css, so light and dark are
   inherited rather than reimplemented.
   ========================================================================== */

/* ------------------------------------------------------------------ turns */

.agentic-turn.assistant {
  position: relative;
}

/* Space for the action bar so the thread does not jump when it appears at the
   end of a stream. */
.agentic-turn.assistant .agentic-turn-body {
  min-height: 1.2em;
}

/* The caret. Only while streaming, only once there is text to trail — a
   blinking bar under an empty answer reads as a broken input, not as
   progress. */
.agentic-turn.is-streaming.has-text .agentic-turn-body > :last-child::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  border-radius: 1px;
  background: var(--accent);
  animation: agentic-caret 1.05s steps(2, start) infinite;
}

@keyframes agentic-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .agentic-turn.is-streaming.has-text .agentic-turn-body > :last-child::after {
    animation: none;
    opacity: 0.8;
  }
}

/* --------------------------------------------------- markdown: tables etc */

.md-table-wrap {
  position: relative;
  overflow: visible;
  margin: 18px 0 22px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
}

/* Chrome, not content. Without this the row counter and the expand control
   land in the clipboard when a reader drags a selection across the answer and
   copies it -- a stray "5 of 6 rows" then shows up in whatever they paste
   into, reading as part of the answer. The Copy answer button is unaffected;
   it serialises the source markdown, not the DOM. */
.md-table-bar,
.md-table-more {
  -webkit-user-select: none;
  user-select: none;
}

.md-table-bar {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  padding: 10px 14px 0;
}

.md-table-count {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.md-table-scroll { overflow-x: auto; }

.md-table-wrap.is-clipped .md-table-scroll {
  max-height: 16.75rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.md-table-wrap.is-clipped .md-table-scroll::-webkit-scrollbar { display: none; }

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.45;
}

.md-table th,
.md-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.md-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--muted);
  font-weight: 650;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.md-table tbody td:first-child { font-weight: 650; color: var(--ink); }
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-alt) 55%, var(--surface)); }

.md-table a { color: var(--info); }
.md-table a:hover { text-decoration: underline; }

.md-table-more {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: var(--e2);
  cursor: pointer;
}
.md-table-wrap.is-clipped .md-table-more { display: grid; place-items: center; }
.md-table-more:hover { color: var(--ink); border-color: var(--ink-soft); }
.md-table-more svg { width: 14px; height: 14px; }

.md-code {
  position: relative;
  margin: 14px 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface-alt);
  overflow: hidden;
}

.md-code pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.83rem;
  line-height: 1.55;
}

.md-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: none;
  padding: 0;
}

.md-code-lang {
  display: block;
  padding: 6px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* An unclosed fence mid-stream. Signals "still arriving" rather than looking
   like a rendering bug. */
.md-code.is-streaming { border-style: dashed; }

.md-tasks { list-style: none; padding-left: 0; }

.md-task {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 4px 0;
}

.md-task input { margin-top: 4px; accent-color: var(--accent); }
.md-task.is-done span { color: var(--muted); text-decoration: line-through; }

/* ------------------------------------------------------- agent timeline */

.agentic-progress {
  margin: 0 0 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  font-size: 0.82rem;
  box-shadow: var(--e1);
}

.agentic-progress.is-done { background: var(--surface); }

.tl-head {
  display: flex;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tl-head:hover { color: var(--ink); }
.tl-head-text { flex: 1; min-width: 0; font-weight: 600; color: var(--ink-soft); }
.tl-head-time { color: var(--muted); font-variant-numeric: tabular-nums; }

.tl-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--crit-bg);
  color: var(--crit);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.tl-head-icon,
.tl-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.tl-chevron {
  display: inline-flex;
  color: var(--muted);
  transition: transform 0.16s ease;
}

.tl-chevron svg { width: 14px; height: 14px; }
.agentic-progress.is-open .tl-chevron { transform: rotate(180deg); }

.tl-icon { width: 14px; height: 14px; }
.tl-step.is-ok .tl-icon { color: var(--accent); }
.tl-step.is-failed .tl-icon,
.agentic-progress.is-failed .tl-head-icon { color: var(--crit); }

.tl-spinner {
  width: 11px;
  height: 11px;
  border: 1.8px solid var(--rule-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tl-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .tl-spinner { animation-duration: 2.4s; }
}

.tl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rule-strong);
}

.tl-list {
  display: none;
  margin: 0;
  padding: 0 12px 10px 12px;
  list-style: none;
}

.agentic-progress.is-open .tl-list { display: block; }

.tl-step {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 4px 0 4px 3px;
  color: var(--muted);
}

.tl-step.is-running { color: var(--ink-soft); }
.tl-step-text { flex: 1; min-width: 0; }

.tl-step-time {
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- actions */

.agentic-turn-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.agentic-actbar {
  display: flex;
  gap: 2px;
  align-items: center;
  /* Present but recessive until the turn is hovered or something in the bar
     has focus — the answer is the content, these are tools. */
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.agentic-turn:hover .agentic-actbar,
.agentic-actbar:focus-within { opacity: 1; }

@media (hover: none) {
  .agentic-actbar { opacity: 1; }
}

.agentic-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease;
}

.agentic-act svg { width: 15px; height: 15px; }
.agentic-act:hover { background: var(--surface-alt); color: var(--ink); }
.agentic-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.agentic-act.is-ok { color: var(--accent); }
.agentic-act.is-bad { color: var(--crit); }
.agentic-act[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-press); }

.agentic-act-sep {
  width: 1px;
  height: 16px;
  margin: 0 5px;
  background: var(--rule);
}

.agentic-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}

.agentic-followup {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.13s ease, background 0.13s ease, color 0.13s ease;
}

.agentic-followup:hover {
  border-color: color-mix(in srgb, var(--ink) 22%, var(--rule));
  background: var(--surface);
  color: var(--ink);
}

.agentic-followup svg { display: none; }

/* ----------------------------------------------------------- references */

.agentic-refs-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  margin-right: 7px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-press);
  font-size: 0.74rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Citation markers read as superscript reference numbers rather than as
   bracketed links, which is how a paper does it and how ChatGPT does it. */
a.agentic-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  margin: 0 1px;
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  vertical-align: 0.32em;
  transition: background 0.12s ease, color 0.12s ease;
}

a.agentic-cite:hover,
a.agentic-cite:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-press);
}

/* ------------------------------------------------------- citation card */

.cite-card {
  position: fixed;
  z-index: 90;
  width: min(340px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--e3);
  font-size: 0.83rem;
  line-height: 1.5;
}

.cite-card-kind {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cite-card-title {
  display: block;
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

a.cite-card-title:hover { color: var(--accent-press); text-decoration: underline; }
.cite-card-meta { margin: 0 0 6px; color: var(--muted); font-size: 0.78rem; }

.cite-card-snippet {
  margin: 0;
  color: var(--ink-soft);
  /* Four lines is enough to judge relevance and short enough that the card
     never covers the paragraph it was opened from. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------- composer stop */

.agentic-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--ink);
  color: var(--surface);
  cursor: pointer;
}

.agentic-stop svg { width: 15px; height: 15px; }
.agentic-stop:hover { background: var(--crit); }

/* ========================================================== EVIDENCE MAP */

/*
 * A viewport, not a scroll box.
 *
 * `overflow: auto` on a drawing that is 900px tall means the reader sees the
 * top third and has to scroll a pane inside a pane to find the rest. The
 * renderer now scales the whole graph into whatever height this gives it, so
 * the job here is to give it a definite one.
 */
.em-wrap {
  position: relative;
  width: 100%;
  height: clamp(19rem, 58vh, 34rem);
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 1px 1px,
      color-mix(in srgb, var(--rule) 70%, transparent) 1px, transparent 0) 0 0 / 22px 22px;
  touch-action: none;               /* the SVG handles drag-to-pan itself */
}

.em-svg {
  display: block;
  width: 100%;
  height: 100%;
  font-family: inherit;
  cursor: grab;
}

.em-wrap.is-panning .em-svg { cursor: grabbing; }

/* ---- hub ---- */

.em-hub-box {
  fill: var(--surface);
  stroke: var(--info);
  stroke-width: 1.3;
}

.em-hub-text {
  fill: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.em-hub-dot {
  fill: var(--surface);
  stroke: var(--info);
  stroke-width: 1.8;
}

/* ---- groups ---- */

.em-group-text {
  fill: var(--muted);
  font-size: 10.5px;
  font-style: italic;
}

.em-group-dot {
  fill: var(--surface);
  stroke: var(--rule-strong);
  stroke-width: 1.4;
}

/* ---- edges ---- */

.em-edge {
  fill: none;
  stroke: var(--rule-strong);
  stroke-linecap: round;
}

.em-edge-spine {
  stroke: var(--rule-strong);
  stroke-width: 1.6;
  opacity: 0.45;
}

/*
 * Tier rides on weight and dash, set inline by the renderer from one ordinal
 * scale. It is deliberately NOT a third hue: strength is a rank, and painting
 * a rank as identity is what turns a chart into a colour chart. Hue on these
 * lines is the target entity's, so a line can be traced back to what it points
 * at without reading the label.
 */

/* ---- leaves ---- */

.em-leaf { cursor: pointer; }
.em-leaf:focus { outline: none; }

/* Filled. Hollow rings on every node are what made this read as a wireframe
   diagram rather than as a picture of some evidence. The 2px surface ring is
   the spacer the mark spec asks for wherever marks can overlap. */
.em-marker {
  fill: var(--muted);
  stroke: var(--muted);
  stroke-width: 0;
  paint-order: stroke fill;
  transition: transform 0.12s ease, filter 0.12s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.em-leaf-text {
  fill: var(--ink-soft);
  font-size: 11.5px;
}

.em-leaf-glyph {
  font-size: 11px;
  font-weight: 700;
  fill: var(--muted);
}

.em-leaf:hover .em-marker,
.em-leaf:focus-visible .em-marker {
  transform: scale(1.35);
  filter: saturate(1.15);
}

.em-leaf:hover .em-leaf-text,
.em-leaf:focus-visible .em-leaf-text {
  fill: var(--ink);
  font-weight: 600;
}

.em-leaf-badge {
  fill: var(--surface-alt);
  stroke: var(--rule);
  stroke-width: 1;
}

/* One hue, three steps — the sequential reading of an ordinal scale. A curated
   association is filled; a co-mention is barely there. */
.em-badge-curated_association {
  fill: var(--accent-soft);
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
}
.em-badge-structured_link { fill: var(--surface-alt); stroke: var(--rule); }
.em-badge-co_mention { fill: transparent; stroke: var(--rule); }

.em-leaf-badge-text {
  fill: var(--muted);
  font-size: 9.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.em-more {
  fill: var(--muted);
  font-size: 10.5px;
  font-style: italic;
}

/* Entity colour, applied to the direction glyph only. Colouring the labels
   too turns forty rows into a paint chart and destroys the scan. */
.em-type-gene .em-leaf-glyph { fill: var(--violet); }
.em-type-drug .em-leaf-glyph { fill: var(--info); }
.em-type-disease .em-leaf-glyph { fill: var(--warn); }
.em-type-trial .em-leaf-glyph { fill: var(--accent); }
.em-type-company .em-leaf-glyph { fill: var(--muted); }
.em-type-variant .em-leaf-glyph { fill: var(--crit); }
.em-type-other .em-leaf-glyph,
.em-type-concept .em-leaf-glyph { fill: var(--muted); }

/* ------------------------------------------------------- evidence card */

/* The rich card replaces the popover's own padding; the renderer supplies a
   fully-formed element. */
.agentic-popover.is-rich {
  width: min(330px, calc(100vw - 24px));
  padding: 0;
}

.em-card { padding: 14px 15px; font-size: 0.82rem; }

.em-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 9px;
}

.em-card-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.2;
}

.em-card-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.em-card-rel {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-align: right;
}

.em-glyph { font-size: 1rem; font-weight: 700; color: var(--info); }
.em-dir-both { color: var(--muted); }
.em-dir-in, .em-dir-in_up { color: var(--violet); }

.em-card-claim {
  margin: 0 0 11px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.em-metric { margin-bottom: 9px; }

.em-metric-label {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 0.79rem;
  font-weight: 600;
}

.em-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}

.em-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--info);
}

.em-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -4px 0 11px;
}

.em-breakdown-cell {
  display: flex;
  gap: 4px;
  align-items: baseline;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-alt);
}

.em-breakdown-key { color: var(--muted); font-size: 0.7rem; }
.em-breakdown-count { color: var(--ink); font-size: 0.72rem; font-weight: 650; }

.em-card-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin: 0 0 11px;
  color: var(--muted);
  font-size: 0.73rem;
}

.em-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;
}

.em-swatch-direct { background: var(--info); }
.em-swatch-more { background: var(--surface-3); }

.em-card-caveat {
  margin: 0 0 11px;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 0.73rem;
  line-height: 1.4;
}

.em-card-actions {
  display: flex;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.em-card-actions button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--info);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 550;
  cursor: pointer;
}

.em-card-actions button:hover { background: var(--surface-alt); }
.em-card-actions svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
  .agentic-actbar { flex-wrap: wrap; }
  .md-table { font-size: 0.8rem; }
  .md-table th, .md-table td { padding: 7px 10px; }
  .cite-card { width: calc(100vw - 24px); }
}

/* ---- second hop ---- */

/* Children sit one visual step back from their parent: same shape, less
   weight. Giving them equal presence would flatten the hierarchy the layout
   exists to express. */
.em-child .em-leaf-text { font-size: 10.5px; fill: var(--muted); }
.em-child .em-leaf-glyph { font-size: 9.5px; opacity: 0.8; }
.em-child .em-marker { opacity: 0.82; }
.em-child .em-leaf-badge { opacity: 0.85; }

.em-child:hover .em-leaf-text,
.em-child:focus-visible .em-leaf-text { fill: var(--ink); font-weight: 600; }

/* =================================================== INLINE GRAPH (in chat) */

/*
 * Deliberately not a card.
 *
 * A bordered, elevated panel reads as an attachment -- something the answer
 * came with, sitting on top of the conversation. This is the same evidence the
 * paragraph above it is citing, so it is set like the rest of the answer:
 * flush to the text column, separated by rules rather than by a box, and with
 * no background of its own.
 */
.agentic-inline-graph {
  margin: 18px 0 6px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: none;
}

.agentic-inline-graph.is-open { border-bottom-color: var(--rule); }

.ig-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.ig-bar:hover { color: var(--ink); background: none; }
.ig-bar-icon { display: inline-flex; color: var(--muted); }
.ig-bar-icon svg { width: 15px; height: 15px; }
.ig-bar:hover .ig-bar-icon { color: var(--info); }

.ig-bar-label {
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.ig-bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* Plain text with a coloured mark, not pills. Pills on a borderless strip
   just reintroduce the boxes this section removed. */
.ig-chip {
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.ig-chip + .ig-chip::before {
  content: "·";
  margin: 0 5px 0 1px;
  color: var(--rule-strong);
}

.ig-chip-gene { color: var(--violet); }
.ig-chip-drug { color: var(--info); }
.ig-chip-disease { color: var(--warn); }
.ig-chip-trial { color: var(--accent); }
.ig-chip-variant { color: var(--crit); }

.ig-chevron { display: inline-flex; color: var(--muted); transition: transform 0.16s ease; }
.ig-chevron svg { width: 15px; height: 15px; }
.agentic-inline-graph.is-open .ig-chevron { transform: rotate(180deg); }

.ig-body { border: 0; }

.ig-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 0 8px;
  border: 0;
  background: none;
}

.ig-tab {
  padding: 3px 9px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.ig-tab:hover { color: var(--ink); background: var(--surface-alt); }

.ig-tab[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent-press);
  font-weight: 600;
}

.ig-stage {
  /* Grow with the drawing. A capped box forced an inner scrollbar and made
     the map look like a widget inside the answer; the thread is the scroll. */
  height: auto;
  overflow: visible;
  background: none;
  border: 0;
}

/* The map scales itself to fit now, so the stage sets the box and the drawing
   fills it. Letting it grow with the node count is what put a 900px graph in a
   300px panel. */
.ig-stage .em-wrap { height: clamp(19rem, 58vh, 34rem); }

.ig-stage .agentic-stage-canvas {
  height: min(70vh, 36rem);
  min-height: 18rem;
}

.ig-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .ig-stage .agentic-stage-canvas { height: min(52vh, 22rem); }
  .ig-bar-chips { display: none; }
}

/* ============================ popover + detail, now app-level ============ */

/*
 * Both moved out of .agentic-canvas so they work with the inline graph. Two
 * consequences the original rules did not anticipate:
 *
 * 1. `pointer-events: none` was right for a passive tooltip and wrong for the
 *    evidence card, which carries Inspect / Multi-hop / Add. It also killed
 *    the hover-intent that keeps the card open while the pointer travels to
 *    those buttons, because `mouseenter` never fired.
 * 2. `.agentic-detail` was `position: absolute` against the canvas. As a child
 *    of the app root that resolves against a different box, so it is pinned to
 *    the viewport instead.
 */
.agentic-popover.is-rich {
  pointer-events: auto;
  max-width: none;
}

.agentic-detail {
  position: fixed;
  top: auto;
  bottom: 0;
  height: 100dvh;
  z-index: 80;
}


/* ---------------------------------------------- evidence map: chrome ---- */

.em-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--e1);
}

.em-ctl {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.em-ctl svg { width: 14px; height: 14px; fill: none; }
.em-ctl:hover { background: var(--surface-alt); color: var(--ink); }
.em-ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

/*
 * The key. Present whenever more than one entity type is drawn, and it names
 * both channels — the shape and the word — so identity never rests on hue
 * alone. That is also what lets three hues cover six types honestly.
 */
.em-legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: calc(100% - 80px);
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
}

.em-legend-item {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.72rem;
  white-space: nowrap;
}

.em-legend-mark { width: 11px; height: 11px; flex: 0 0 11px; }
.em-legend-mark path { fill: var(--muted); stroke: var(--muted); }

@media (max-width: 720px) {
  .em-legend { display: none; }
  .em-wrap { height: clamp(16rem, 46vh, 22rem); }
  .ig-stage .em-wrap { height: clamp(16rem, 46vh, 22rem); }
}

/* =============================================================== CHAT ====
   Reading measure, section rhythm, and full-bleed escapes.

   The thread had no measure: `--thread-w` capped the welcome state only, and
   every turn took `width: 100%` of a pane that on a desktop is 1600px wide.
   A cited research answer at 1600px is ~200 characters a line — roughly three
   times the width the eye can track without losing its place on the return
   sweep, which is why the answers read as a wall despite the typography being
   fine.
   ======================================================================== */

.agentic-thread-inner {
  /* ~72 characters at the body size. Measured, not guessed: 52rem rendered at
     99 characters a line, which is past the width the eye can track on the
     return sweep. The classic comfortable band is 66-75. */
  --measure: 42rem;
  /* The bleed is how far a table or a graph may escape the measure. Bounded,
     because "as wide as the pane" is how you get a 1600px table cell. */
  --bleed: clamp(0rem, 6vw, 7rem);
  max-width: calc(var(--measure) + var(--bleed) * 2);
  margin-inline: auto;
}

.agentic-turn.user,
.agentic-turn.assistant { width: 100%; }

/* Text sits at the measure; the turn itself stays full width so its children
   can opt out below. */
.agentic-turn.assistant > .agentic-turn-body,
.agentic-turn.assistant > .agentic-refs,
.agentic-turn.assistant > .agentic-turn-foot,
.agentic-turn.assistant > .agentic-progress {
  width: min(var(--measure), 100%);
  margin-inline: auto;
}

.agentic-turn.user { align-items: center; }
.agentic-turn.user > .agentic-turn-body {
  width: fit-content;
  max-width: min(34rem, 100%);
  margin-inline: auto 0;
}

/*
 * Full-bleed escapes.
 *
 * A comparison table and an evidence graph are the two things in an answer
 * that genuinely want more width than prose does — a table because its columns
 * are fixed content, a graph because it is a picture. Everything else stays at
 * the measure.
 */
.agentic-turn-body .md-table-wrap {
  width: calc(100% + var(--bleed) * 2);
  margin-inline: calc(var(--bleed) * -1);
  max-width: calc(100vw - 2rem);
}

.agentic-turn.assistant > .agentic-inline-graph {
  width: calc(min(var(--measure), 100%) + var(--bleed) * 2);
  margin-inline: auto;
  max-width: 100%;
}

/* ---- section rhythm ---- */

/* Headings earn their space from what comes *before* them, not after — the
   gap belongs to the boundary, and putting it below instead detaches a heading
   from its own paragraph. */
.agentic-turn-body h2 { margin: 1.9rem 0 0.65rem; }
.agentic-turn-body h2:first-child { margin-top: 0; }
.agentic-turn-body h3 { margin: 1.5rem 0 0.4rem; }
.agentic-turn-body h3:first-child { margin-top: 0; }

/* A hairline above each h2 so the eye finds the sections while scanning. */
.agentic-turn-body h2:not(:first-child) {
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}

.agentic-turn-body ol { counter-reset: agentic-li; list-style: none; padding-left: 1.9rem; }
.agentic-turn-body ol > li { position: relative; counter-increment: agentic-li; }
.agentic-turn-body ol > li::before {
  content: counter(agentic-li);
  position: absolute;
  left: -1.9rem;
  top: 0.15em;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.agentic-turn-body ul { list-style: none; padding-left: 1.15rem; }
.agentic-turn-body ul > li { position: relative; }
.agentic-turn-body ul > li::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rule-strong);
}

/* The task list draws its own markers; do not double up. */
.agentic-turn-body ul.md-tasks { padding-left: 0; }
.agentic-turn-body ul.md-tasks > li::before { display: none; }

@media (max-width: 720px) {
  .agentic-thread-inner { --bleed: 0.5rem; }
  .agentic-turn-body ol { padding-left: 1.7rem; }
}

/* ---- cited vs merely retrieved ---- */

/* A paper the answer leaned on and a paper an agent happened to fetch are not
   the same claim. Both stay listed -- the panel is a record of what was read --
   but only one of them is a citation. */
.agentic-ref.is-uncited { opacity: 0.62; }
.agentic-ref.is-uncited .agentic-ref-n {
  background: transparent;
  border: 1px dashed var(--rule-strong);
  color: var(--muted);
}

.agentic-refs-extra {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.72rem;
}

/* Adjacent chips in a group -- [2][18] -- need a hairline between them or they
   read as the single number "218". */
a.agentic-cite + a.agentic-cite { margin-left: 2px; }