/* Guardrail lab: chat on the left, the pipeline wire on the right, tallies and the exam below. */
/* Guardrail lab: the tower of checks on top, then chat and the pipeline wire, tallies, the exam and screenshot checks. */
.lab { padding: 0; }

/* spark colours, by what happened to the message (kit/hero-tower.js reads these) */
:root { --t-answer: var(--accent); --t-clarify: #b4870f; --t-handoff: var(--good); --t-decline: var(--ink-2); --t-care: var(--hold); }
:root[data-theme="night"] { --t-clarify: var(--accent-3); --t-decline: var(--muted); }

/* the hero: the tower fills the band; the title sits bottom-left over parchment; tags run down the right */
.lab-hero { position: relative; height: min(72svh, 660px); min-height: 540px; border-bottom: 1px solid var(--rule); overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 60% 52%, color-mix(in srgb, var(--plate) 92%, transparent), transparent 75%); }
.lab-hero .stage { position: absolute; inset: 0; }
.lab-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tower-hud { position: absolute; inset: 0; pointer-events: none; }
.ttag { position: absolute; top: 0; left: 0; pointer-events: auto; cursor: default; display: grid; gap: 3px;
  text-shadow: 0 0 2px var(--bg), 0 0 6px var(--bg), 0 0 12px var(--bg); }
.ttag .n { font: 600 22px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.ttag.base .n { font-size: 30px; color: var(--accent-ink); }
.ttag .lab { font: 10.5px/1.3 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ttag .lab i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--c); }
.ttag:hover .lab, .ttag:focus-visible .lab { color: var(--ink-2); }
.ttag:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.hero-text { position: absolute; left: clamp(16px, 4.5vw, 72px); bottom: clamp(28px, 7vh, 64px); max-width: min(520px, 38vw); pointer-events: none; }
.kicker { font: 11px/1.4 var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--kick); margin: 0 0 14px; }
.kicker .sl { color: var(--faint); margin: 0 .35em; }
.hero-text h1 { font: 600 clamp(38px, 4.4vw, 70px)/.98 var(--sans); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.hero-text .dek { font: 400 clamp(15.5px, 1.25vw, 17.5px)/1.5 var(--sans); color: var(--ink-2); margin: 16px 0 0; max-width: 46ch; text-wrap: pretty; }
.hero-text .dek + .dek { margin-top: 10px; color: var(--ink); }
/* between the stacked layout and a full-width one, the text keeps clear of the funnel's wide mouth */
@media (min-width: 961px) and (max-width: 1180px) { .hero-text { max-width: 330px; } .hero-text .dek { font-size: 15px; } }
.tower-note { margin: 14px 0 0; font: 10.5px/1.5 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tower-note b { font: 600 13px/1 var(--mono); letter-spacing: 0; color: var(--ink-2); }
.tower-caption { position: absolute; right: clamp(16px, 3vw, 44px); top: 22px; max-width: min(380px, 34vw); padding: 8px 11px; font: 12px/1.5 var(--mono);
  color: var(--ink); background: color-mix(in srgb, var(--plate) 92%, transparent); border: 1px solid var(--rule); opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s; pointer-events: none; }
.tower-caption.on { opacity: 1; transform: none; }
.tower-caption { transform: translateY(-4px); }
.tower-caption span { display: block; font: 10px/1.3 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

.status-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 6px; font: 11px/1.4 var(--hud); letter-spacing: .14em; text-transform: uppercase; }
.status-row .stat b { color: var(--muted); font-weight: 400; margin-right: 8px; }
.status-row .stat span { color: var(--ink); font-family: var(--mono); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
#st-reader.ok::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 7px; vertical-align: 1px; }
.about { margin: 4px 0 22px; color: var(--ink-2); }
.about summary { cursor: pointer; font: 11px/1.4 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.about summary:hover { color: var(--hover-ink); }
.about p { max-width: var(--measure); margin: 10px 0 0; font-size: 15.5px; }

.bench { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 22px; align-items: start; }
.chat { display: flex; flex-direction: column; min-height: 640px; }
.msg.you { align-self: flex-end; max-width: 80%; background: var(--plate-2); border: 1px solid var(--rule); padding: 9px 12px; font-size: 15px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.you.masked { font-family: var(--mono); font-size: 13px; }
.msg.bot { max-width: 94%; border-left: 2px solid var(--ok); padding: 2px 0 2px 14px; }
.msg.bot.care { border-left-color: var(--hold); }
.msg.bot.decline, .msg.bot.clarify, .msg.bot.handoff { border-left-color: var(--rule); }
.msg.bot h3 { margin: 4px 0 8px; }
.msg.bot .act { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.msg.bot p { margin: 0 0 9px; color: var(--ink-2); }
.msg.bot ul { margin: 0 0 9px; padding-left: 18px; color: var(--ink-2); } .msg.bot li { margin: 3px 0; }
.msg.bot .note { font-size: 13.5px; color: var(--muted); }
.msg.bot .warn { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--rule)); background: color-mix(in srgb, var(--warn) 6%, var(--plate)); color: var(--ink); }
.msg.bot .support { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--hold) 45%, var(--rule)); background: color-mix(in srgb, var(--hold) 6%, var(--plate)); color: var(--ink); }
.msg.bot .correct { padding: 8px 10px; border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--mark) 18%, var(--plate)); color: var(--ink); }
.msg.bot .big { font: 600 28px/1.2 var(--sans); color: var(--ink); margin: 6px 0 10px; }
.msg.bot table { border-collapse: collapse; margin: 4px 0 12px; font-size: 14px; min-width: 60%; }
.msg.bot th, .msg.bot td { text-align: left; padding: 5px 12px 5px 0; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); vertical-align: top; }
.msg.bot th { font: 10.5px/1.3 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.msg.bot .src { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; }
.msg.bot .src a { color: var(--ink-2); }
.msg.bot .foot { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 11px/1.4 var(--mono); color: var(--faint); }
.msg.bot .foot button { all: unset; cursor: pointer; color: var(--muted); border-bottom: 1px dotted var(--rule); }
.msg.bot .foot button:hover { color: var(--hover-ink); }
.msg.bot .follow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* the nearest questions the pages do address, under a reply that couldn't find what was asked: a list, each one asks it */
.msg.bot .nearest { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 4px; }
.msg.bot .nearest li { display: flex; align-items: baseline; gap: 8px; }
.msg.bot .nearest li::before { content: "→"; color: var(--act); flex: none; }
.msg.bot .nearest button { all: unset; cursor: pointer; color: var(--ink); border-bottom: 1px solid var(--rule); line-height: 1.35; }
.msg.bot .nearest button:hover, .msg.bot .nearest button:focus-visible { border-bottom-color: var(--act); color: var(--act); }
.msg.bot .nearest button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg.bot .related { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.fig.echo { background: none; border-bottom: 1px dashed var(--muted); cursor: default; }
.fig.calc { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--ok) 22%, transparent) 62%); }

.ask { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--rule-2); }
.ask textarea { flex: 1; resize: vertical; min-height: 46px; font: 15px/1.45 var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--rule); padding: 10px 12px; border-radius: var(--radius); }
.ask textarea:focus { outline: none; border-color: var(--act); }
.presets { display: grid; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--rule-2); }
.presets .prow { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.presets .hud { margin: 0; white-space: nowrap; color: var(--label); }
.presets .chip { padding: 5px 9px; font-size: 13px; }
@media (max-width: 640px) { .presets .prow { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.trace { position: sticky; top: 72px; }
#wire { width: 100%; height: auto; display: block; }
#wire .rail { stroke: var(--rule); stroke-width: 1.2; }
#wire .lit { stroke: var(--accent); stroke-width: 2.2; filter: drop-shadow(0 0 3px var(--glow)); }
#wire .node circle.ring { fill: var(--plate); stroke: var(--rule); stroke-width: 1.2; }
#wire .node.passed circle.ring { stroke: var(--accent); }
#wire .node.fired circle.ring { stroke: var(--accent); fill: var(--accent-3); }
#wire .node.fired.care circle.ring { stroke: var(--hold); fill: color-mix(in srgb, var(--hold) 25%, var(--plate)); }
#wire .node.skipped { opacity: .4; }
#wire .node text { font: 11px var(--hud); letter-spacing: .12em; fill: var(--ink-2); text-transform: uppercase; }
#wire .node text.sub { font: 11.5px var(--mono); letter-spacing: 0; text-transform: none; fill: var(--muted); }
#wire .node.fired text.sub { fill: var(--accent-ink); }
#wire .node { cursor: pointer; }
#wire .pulse { fill: var(--accent-3); filter: drop-shadow(0 0 6px var(--glow)); }
.detail { padding: 12px 16px 16px; border-top: 1px solid var(--rule-2); font-size: 13.5px; color: var(--ink-2); min-height: 110px; }
.detail pre { margin: 6px 0 0; white-space: pre-wrap; font: 12px/1.5 var(--mono); color: var(--ink); background: var(--bg); padding: 8px; border: 1px solid var(--rule-2); max-height: 220px; overflow: auto; }

.ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.tally { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.tally b { font: 600 40px/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.tally small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.tally.warmth b { color: var(--accent-ink); }

.about { margin-top: 18px; }
.about + .about { margin-top: -10px; }
.verify-form { padding: 2px 0 0; max-width: var(--measure); }
.verify .row { margin-top: 10px; }
.verify .row { display: flex; gap: 10px; }
.verify input { flex: 1; font: 14px var(--mono); padding: 10px 12px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); }
#verify-out { margin-top: 12px; }

@media (max-width: 640px) {
  .lab-hero { height: auto; min-height: 0; display: flex; flex-direction: column; background: none; }
  .hero-text { position: static; order: 0; max-width: none; padding: 26px 16px 4px; pointer-events: auto; }
  .hero-text h1 { font-size: 36px; }
  .lab-hero .stage { position: relative; order: 1; height: 460px; }
  .fundhead small { display: none; }
  .tower-caption { left: 10px; right: auto; top: 6px; max-width: 62%; font-size: 11px; }
  .ttag .n { font-size: 18px; } .ttag .lab { font-size: 9.5px; letter-spacing: .1em; white-space: normal; line-height: 1.35; }
  .ttag.base .n { font-size: 22px; }
}
@media (max-width: 980px) {
  .bench { grid-template-columns: minmax(0, 1fr); }
  .trace { position: static; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .ledger { grid-template-columns: 1fr; } }

/* the small model: loader in the status row, and the unguarded answer shown beside the checked one */
.stat.llm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.stat.llm select { font: 12px var(--mono); padding: 4px 6px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); }
.btn.mini { padding: 6px 9px; font-size: 10.5px; }
.rawtoggle { font: 12px/1.3 var(--sans); color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.raw { margin-top: 10px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--bad) 45%, var(--rule)); background: color-mix(in srgb, var(--bad) 4%, var(--plate)); }
.raw .hud { color: var(--bad); margin: 0 0 6px; }
.raw p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.raw .rawtext p, .raw .rawtext li { margin: 0 0 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.raw .rawtext ul, .raw .rawtext ol { margin: 0 0 8px; padding-left: 22px; }
.raw .rawtext li::marker { color: var(--muted); }
.raw .rawtext b { color: var(--ink); font-weight: 600; }
.raw .rawtext code { font: 13px var(--mono); }
.raw .unchecked { text-decoration: underline wavy color-mix(in srgb, var(--bad) 70%, transparent); text-underline-offset: 3px; }

/* ---- rebuilt page (20 Oct): model line, three-branch tree, check strip ---- */
@keyframes spin { to { transform: rotate(360deg); } }

.chat { display: flex; flex-direction: column; }
/* the conversation: earlier questions as rows on a thread, the current one as a tree. The wires are one SVG drawn in
   lab.js from the measured boxes; everything about how they look is here. */
.thread { position: relative; padding: 20px 16px 4px; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.wires path { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-linecap: round; }
.wires .spine { stroke: var(--rule); stroke-width: 1.2; }
.wires .branch { opacity: .45; transition: opacity .2s; }
.wires .branch.sel, .wires .carry { stroke: var(--sel-plain); stroke-width: 1.6; opacity: 1; }   /* the branch being read, in its own colour */
.wires .branch.sel.raw, .wires .carry.raw { stroke: var(--sel-raw); }
.wires .branch.sel.guarded, .wires .carry.guarded { stroke: var(--sel-guarded); }
.wires .branch.off, .wires path.ghost { stroke-dasharray: 2 4; opacity: .4; }
.wires .branch.flow { stroke-dasharray: 5 5; opacity: .85; animation: wireflow .9s linear infinite; }
@keyframes wireflow { to { stroke-dashoffset: -10; } }
@media (prefers-reduced-motion: reduce) { .wires .branch.flow { animation: none; } }
.wires circle { fill: var(--muted); stroke: var(--plate); stroke-width: 2; }
.wires .node { fill: var(--ink); }
.wires .node.ghost, .wires .tip.ghost { fill: var(--faint); }
.wires .tip.sel { fill: var(--sel-plain); }
.wires .tip.sel.raw { fill: var(--sel-raw); }
.wires .tip.sel.guarded { fill: var(--sel-guarded); }
.wires .pdot.plain { fill: var(--ink-2); }
.wires .pdot.raw { fill: var(--bad); }
.wires .pdot.guarded { fill: var(--ok); }
.wires .pdot.more { fill: var(--plate); stroke: var(--rule); stroke-width: 1.2; }

.history { display: grid; gap: 1px; margin-bottom: 20px; }
.history:empty { display: none; }
.history .more { all: unset; cursor: pointer; padding: 3px 0 5px 26px; font: 10.5px/1.4 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.history .more:hover { color: var(--hover-ink); }
.past summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 14px; padding: 6px 0 6px 26px; }
.past summary::-webkit-details-marker { display: none; }
.past summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.past .pq { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; color: var(--ink-2); }
.past .pb { flex: none; font: 10.5px/1.3 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.past.raw .pb { color: var(--bad); }
.past.guarded .pb { color: var(--ok-ink); }
.past summary:hover .pq, .past[open] .pq { color: var(--ink); }
.past[open] .pq { white-space: normal; }
.past .pbody { padding: 4px 0 16px 26px; }
.past .pbody > .msg.bot, .past .pbody > .raw { max-width: none; }

.exchange { display: flex; flex-direction: column; align-items: stretch; }
.exchange .msg.you { align-self: center; max-width: 70%; text-align: center; scroll-margin-top: 90px; }
.exchange.ghost .msg.you { color: var(--faint); background: none; border-style: dashed; }
/* the tree: the gap above the leaves is where the wires curve */
.tree { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 96px; }
.leaf { all: unset; position: relative; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; align-content: start; padding: 12px 14px; border: 1px solid var(--rule); background: var(--plate); min-height: 112px; transition: border-color .15s, box-shadow .15s; }
.leaf:hover { border-color: var(--ink-2); }
.leaf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.leaf { --sel: var(--sel-plain); } .leaf.raw { --sel: var(--sel-raw); } .leaf.guarded { --sel: var(--sel-guarded); }
.leaf.sel { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel) inset; }
.leaf.off { opacity: .55; }
.exchange:not(.ghost) .leaf { animation: leafin .45s ease-out both; }
.exchange:not(.ghost) .leaf:nth-child(2) { animation-delay: .07s; }
.exchange:not(.ghost) .leaf:nth-child(3) { animation-delay: .14s; }
@keyframes leafin { from { opacity: 0; } }                  /* opacity only: the wires are measured from these boxes */
.exchange.ghost .leaf { cursor: default; min-height: 0; background: none; border-style: dashed; }
.exchange.ghost .leaf .lt { color: var(--muted); }
.leaf .lt { font: 600 15px/1.2 var(--sans); color: var(--ink); }
.leaf .ln { font: 10.5px/1.3 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.leaf.raw .lt { color: var(--bad); }
.leaf.guarded .lt { color: var(--ok-ink); }
.leaf .badge { justify-self: start; margin-top: 4px; font: 10.5px/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; padding: 4px 6px; border: 1px solid var(--rule); color: var(--ink-2); }
.leaf .badge.good { border-color: color-mix(in srgb, var(--good) 50%, var(--rule)); color: var(--good); }
.leaf .badge.care { border-color: color-mix(in srgb, var(--hold) 50%, var(--rule)); color: var(--hold); }
.leaf .badge.warn { border-color: color-mix(in srgb, var(--bad) 45%, var(--rule)); color: var(--bad); }
.leaf .lsum { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* the chosen branch's wire runs on into this panel's top rule */
.expanded { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); }
.expanded:empty { display: none; }
.expanded > .msg.bot, .expanded > .raw { max-width: none; }

/* the answer, with the seven checks drawn beside it (checks.css) */
.answer { position: relative; display: grid; }


@media (max-width: 760px) {
  .thread { padding: 16px 12px 4px; }
  .exchange .msg.you { max-width: 100%; align-self: stretch; }
  /* three narrow leaves: titles, verdicts and the check dots; the full answer opens below */
  .tree { gap: 8px; margin-top: 60px; }
  .leaf { position: static; min-height: 0; padding: 10px; }
  .leaf .ln, .leaf .lsum { display: none; }
  .leaf .lt { font-size: 13.5px; }
  .leaf .badge { line-height: 1.25; letter-spacing: .1em; }
  .answer { gap: 10px; }
  .past .pb { display: none; }
}

/* the guarded reply in the model's own words: reads as a reply, figures still receipted, the approved text one click away */
.msg.bot.written .said p, .msg.bot.written .said li { margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.msg.bot.written .said li { margin: 0 0 6px; }
.msg.bot.written .said ul { margin: 0 0 12px; padding-left: 20px; }
.msg.bot.written .said p.note { font-size: 14px; color: var(--ink-2); }
.msg.bot.written .said .warn, .msg.bot.written .said .support, .msg.bot.written .said .correct { font-size: 15px; }
.msg.bot .fellback { margin: 10px 0 0; font: 10.5px/1.5 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--warn); }
.msg.bot .from { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--rule); }
.msg.bot .from summary { cursor: pointer; list-style: none; font: 10.5px/1.5 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.msg.bot .from summary::-webkit-details-marker { display: none; }
.msg.bot .from summary::before { content: "+ "; }
.msg.bot .from[open] summary::before { content: "− "; }
.msg.bot .from summary:hover { color: var(--hover-ink); }
.msg.bot .from .card { margin-top: 8px; padding: 8px 12px; background: var(--plate-2); border-left: 2px solid var(--rule); }
.msg.bot .from .card h3 { font-size: 14px; margin: 2px 0 6px; }
.msg.bot .from .card p, .msg.bot .from .card li { font-size: 13.5px; }
/* a reply written from official extracts: citations as small linked numbers, the pages cited listed under it */
.msg.bot .said .cite { font: 600 10.5px/1 var(--mono); margin-left: 2px; vertical-align: super; }
.msg.bot .said .cite a { color: var(--cool-ink); border-bottom: 0; padding: 0 1px; }
.msg.bot .refs { margin: 4px 0 0; padding-left: 26px; font-size: 12.5px; color: var(--ink-2); }
.msg.bot .refs li { margin: 2px 0; }
.msg.bot .refs li::marker { font: 11px var(--mono); color: var(--muted); content: "[" counter(list-item) "] "; }
.msg.bot .refs a { color: var(--ink-2); }
.msg.bot .extract { margin: 8px 0 0; padding: 8px 12px; background: var(--plate-2); border-left: 2px solid var(--rule); }
.msg.bot .extract p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.msg.bot .extract .ex-src { margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.msg.bot .extract .ex-src b { font: 600 11px var(--mono); color: var(--ink); }

/* a written reply's details: the sentences the check left out, each with why */
.msg.bot .from > .small { margin: 12px 0 0; }
.msg.bot .from .dropped { margin: 6px 0 0; padding-left: 18px; }
.msg.bot .from .dropped li { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.msg.bot .from .dropped .why { display: block; font: 10.5px/1.5 var(--hud); letter-spacing: .08em; text-transform: uppercase; color: var(--warn); }
.msg.bot.written .said.after { margin-top: 12px; }

/* ---- the model + guardrails reply: the model's direct answer, then the approved answer on the topic, in full ---- */
.msg.bot.written .said p.direct { font-size: 17px; line-height: 1.55; }
.msg.bot.written .said p.pending { font-size: 14px; color: var(--muted); font-style: italic; }
.msg.bot.written .said p.pending::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--cool); animation: pending 1.1s ease-in-out infinite; }
@keyframes pending { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msg.bot.written .said p.pending::before { animation: none; opacity: .6; } }
.msg.bot.written .approved { margin-top: 12px; padding: 10px 14px 6px; background: var(--plate-2); border: 1px solid var(--rule); }
.msg.bot.written .said + .approved { margin-top: 4px; }
.msg.bot.written .approved > .hud { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .14em; }
.msg.bot.written .approved .card h3 { margin: 0 0 8px; font-size: 17px; }
.msg.bot.written .approved .card p, .msg.bot.written .approved .card li { font-size: 15px; line-height: 1.55; color: var(--ink); }
.msg.bot.written .approved .card p.note { font-size: 13.5px; color: var(--ink-2); }
.msg.bot.written .approved + .approved { margin-top: 8px; }

/* the model: it loads by itself, and all the page says of it is its progress while it loads (a line along the foot of
   the chat's header) and one way to try the larger one */
.chat { margin-top: 26px; }
.chat > .head { position: relative; align-items: baseline; }
.modelnote { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 12px; font: 10.5px/1.5 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.modelnote[data-state="unavailable"], .modelnote[data-state="failed"] { color: var(--warn); }
.modelnote .swap { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); border-bottom: 1px dotted currentColor; }
.modelnote .swap:hover, .modelnote .swap:focus-visible { color: var(--hover-ink); }
.modelnote .swap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.llm-line { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--cool); transition: width .25s; pointer-events: none; }
/* the lines of the approved answer that the model's sentences leaned on: the part the question is about */
.msg.bot.written .approved .card .hit { margin-left: -14px; padding-left: 11px; border-left: 3px solid var(--ok); background: linear-gradient(90deg, color-mix(in srgb, var(--mark) 26%, transparent), transparent 85%); }
.msg.bot.written .approved .card li.hit { margin-left: -34px; padding-left: 31px; list-style-position: inside; }

/* ------------------------------------------------------------------ signal only (see the foot of shared/super.css) */
:root[data-palette="signal"] .kicker::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 12px; background: var(--heat); vertical-align: middle; }
/* a callout is marked by its rule, not by a tinted ground */
:root[data-palette="signal"] .msg.bot :is(.warn, .support, .correct), :root[data-palette="signal"] .raw:not(.leaf, .past) { background: transparent; }
/* the model alone: one dashed frame round the unchecked answer and its empty funnel, not a second one inside it */
:root[data-palette="signal"] .answer.raw > .raw { border-color: transparent; }
:root[data-palette="signal"] .msg.bot.written .approved .card .hit { background: color-mix(in srgb, var(--mint) 7%, transparent); }
:root[data-palette="signal"] .msg.bot.written .approved > .hud { color: var(--label); }   /* names a part of the reply */
:root[data-palette="signal"] .fig.calc { background: none; box-shadow: none; border-bottom: 1px dashed var(--mint); }   /* worked out here, not quoted */
:root[data-palette="signal"] .fig.echo { box-shadow: none; }                                                          /* the member's own number: no receipt */
:root[data-palette="signal"] .ask textarea, :root[data-palette="signal"] .verify input { background: transparent; border-radius: 0; }
:root[data-palette="signal"] :is(.history .more, .past .pb, .leaf .ln, .leaf .badge, .msg.bot th, .msg.bot .fellback, .msg.bot .from summary, .msg.bot .said .cite,
  .msg.bot .from .dropped .why, .msg.bot.written .approved > .hud, .modelnote, .btn.mini) { font-size: 11px; }   /* nothing under 11px */