:root {
  color-scheme: light;
  --mineral-0: #fbfaf6;
  --mineral-1: #f2f0e9;
  --mineral-2: #e3e0d6;
  --ink: #17201f;
  --ink-soft: #4d5855;
  --orange: #c84f13;
  --orange-ink: #b04409;
  --orange-soft: #fff0e7;
  --green: #25745c;
  --focus: #0969da;
  --line: 1px solid var(--mineral-2);
  --rule: 2px solid var(--ink);
  --ind: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", "Aptos Narrow", system-ui, sans-serif;
  --body: Inter, Aptos, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --insp-w: 320px;
  --composer-h: 148px;
  --t-entry: 140ms;
  --t-insp: 180ms;
  --t-event: 200ms;
  --t-takeover: 160ms;
  --t-cite: 120ms;
  --t-composer: 120ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: var(--mineral-0); color: var(--ink); font: 15px/1.55 var(--body); overflow-x: hidden; }
h1, h2, h3, p, dl, dd { margin-block: 0; }
ol, ul, dl { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; top: .75rem; left: .75rem; background: var(--ink); color: #fff; padding: .75rem 1rem; font-weight: 800; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: translateY(0); }

.eyebrow { font-family: var(--ind); font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); }
.mono { font-family: var(--mono); font-size: 13px; }

.btn { min-height: 44px; padding: .7rem 1.05rem; border: 2px solid var(--ink); background: var(--ink); color: #fff; font: 800 14px/1 var(--body); cursor: pointer; transition: background-color var(--t-composer) var(--ease), color var(--t-composer) var(--ease), border-color var(--t-composer) var(--ease), opacity var(--t-composer) var(--ease); }
.btn.quiet { background: var(--mineral-0); color: var(--ink); }
.btn.quiet:hover:not(:disabled) { background: var(--mineral-1); }
.btn:hover:not(:disabled) { background: #0d1413; }
.btn.small { min-height: 36px; padding: .5rem .8rem; font-size: 13px; }
.btn.tiny { min-height: 32px; padding: .35rem .6rem; font-size: 12px; border-width: 1px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

input, textarea { font: 15px/1.5 var(--body); color: var(--ink); background: #fff; border: 1px solid var(--ink); padding: .65rem .75rem; width: 100%; min-height: 44px; }
textarea { resize: vertical; }

.entry { min-height: 100svh; display: grid; place-items: center; padding: 1.5rem; }
.entry-card { width: min(27rem, 100%); background: #fff; border: var(--rule); padding: 2rem 1.75rem; }
.entry-card h1 { font-family: var(--ind); font-size: 2.6rem; line-height: 1; letter-spacing: -.035em; margin-top: .35rem; }
.entry-card .brand { margin-bottom: 1.5rem; }
.lede { color: var(--ink-soft); margin-top: .75rem; max-width: 38ch; }
.stack { display: grid; gap: .35rem; margin-top: 1.5rem; }
.stack label { margin-top: .6rem; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.stack .btn { margin-top: 1.25rem; width: 100%; }
.alarm { margin-top: 1rem; padding: .7rem .85rem; border: 2px solid var(--orange); background: var(--orange-soft); }
.powered-foot { margin-top: 1.5rem; padding-top: .85rem; border-top: var(--line); font-size: 13px; color: var(--ink-soft); }
.powered-foot .eyebrow { display: block; }

.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--ind); letter-spacing: .04em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 900; font-size: 16px; }
.brand strong { display: block; font-size: 16px; line-height: 1.05; }
.brand small { display: block; color: var(--ink-soft); font-size: 11.5px; }

.topbar { display: flex; align-items: stretch; border-bottom: var(--rule); background: var(--mineral-0); }
.topbar .brand { padding: .7rem 1rem; border-right: var(--line); }
.ctxbar { flex: 1; display: flex; align-items: center; gap: 1.5rem; padding: .5rem 1rem; min-width: 0; }
.field { display: grid; gap: 1px; min-width: 0; }
.field b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
/* COMPOSITION PASS. The canonical reference was the widest and darkest thing in
   the bar. It stays — a customer quotes it — at a weight that lets the product
   beside it be read first. */
.ctxbar .f-ref b { font: 400 12px/1.4 var(--mono); color: var(--ink-soft); max-width: 22ch; }
.rel { font: 500 12px/1 var(--mono); color: var(--ink-soft); border: var(--line); padding: .15rem .3rem; }
.chipwrap { display: grid; align-content: center; padding: 0 .9rem; }
.statechip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .7rem; border: 2px solid var(--ink); background: var(--mineral-1); color: var(--ink); font-family: var(--ind); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: background-color var(--t-takeover) var(--ease), border-color var(--t-takeover) var(--ease), color var(--t-takeover) var(--ease); }
.statechip i { width: 9px; height: 9px; background: currentColor; }
.statechip.human { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-ink); }
.powered { padding: .6rem 1rem; border-left: var(--line); display: grid; align-content: center; justify-items: end; }
.powered b { font-size: 12.5px; }
.inline { display: grid; align-content: center; padding: .5rem 1rem; border-left: var(--line); }

.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr) var(--insp-w); align-items: stretch; height: calc(100svh - 60px); transition: grid-template-columns var(--t-insp) var(--ease); }
.shell.rail { --insp-w: 52px; }
.shell.wide { --insp-w: 420px; }

.case { border-right: var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.case > h2, .insp h2 { font-family: var(--ind); font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); padding: .6rem .9rem; border-bottom: var(--line); }
.caseitem { padding: .5rem .9rem; border-bottom: var(--line); display: grid; gap: 1px; }
.caseitem dd { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
/* A canonical id is 26 characters of base32 and it must not push the column
   open or be clipped by it. It wraps. */
.caseitem dd.mono { font-size: 12px; font-weight: 500; line-height: 1.35; }
.caseitem.markink { background: var(--mineral-1); box-shadow: inset 0 0 0 1px var(--ink); }
#c-handler { transition: background-color var(--t-takeover) var(--ease), box-shadow var(--t-takeover) var(--ease); }
.casefoot { margin-top: auto; border-top: var(--line); background: var(--mineral-1); padding: .5rem .9rem .55rem; }
.casefoot > summary { color: var(--ink-soft); cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; }
.casefoot > summary::-webkit-details-marker { display: none; }
.casefoot > summary::before { content: "+"; font: 700 13px/1 var(--mono); color: var(--ink-soft); }
.casefoot[open] > summary::before { content: "−"; }
.casefoot > summary:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
.casefoot .techref { margin-top: .35rem; }
.techref { display: grid; gap: 1px; }
.techref span { font-size: 11px; color: var(--ink-soft); }
.techref b { font: 400 11px/1.35 var(--mono); color: var(--ink-soft); overflow-wrap: anywhere; user-select: all; }

.thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* A register reads from the TOP. Anchoring the stack to the bottom put a white
   canyon between the takeover event and the messages it introduced — the event
   at the top of the region, the conversation pinned three hundred pixels below
   it against the composer. Whatever space is left over belongs after the last
   entry, which is where a reader expects a document to end. */
.conv { flex: 1; min-height: 0; overflow-y: auto; scroll-padding-bottom: var(--composer-h); }

.chainbar { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 1rem; padding: .6rem 1.3rem; border-bottom: var(--line); background: var(--mineral-1); flex: 0 0 auto; }
.chain-lab { font-family: var(--ind); font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); text-align: right; padding-top: 3px; }
.steps { display: flex; min-width: 0; }
.steps li { flex: 1 1 0; min-width: 0; display: grid; gap: 1px; padding: .3rem .6rem; border: var(--line); border-right: 0; background: var(--mineral-0); }
.steps li:last-child { border-right: var(--line); }
.steps b { font-family: var(--ind); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.steps span { font: 12px/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps .done { background: var(--ink); border-color: var(--ink); }
.steps .done b { color: #bdc6c3; }
.steps .done span { color: #fff; }
.steps .now { background: var(--orange-soft); border-color: var(--orange); border-right: 1px solid var(--orange); }
.steps .now b, .steps .now span { color: var(--orange-ink); }
.steps .todo span { color: var(--ink-soft); }

.opening { padding: 2rem 1.3rem 1rem; max-width: 62ch; }
.opening-lead { font-size: 18px; font-weight: 700; }
.opening-facts { margin-top: .9rem; display: grid; gap: .5rem; }
.opening-facts li { color: var(--ink-soft); padding-left: 1.2rem; position: relative; }
.opening-facts li::before { content: ""; position: absolute; left: 0; top: .68em; width: .5rem; height: 1px; background: var(--mineral-2); }

/* COMPOSITION PASS. The structure is the approved one — a right-aligned actor
   gutter and a reading column — but the answer had no presence: it began under
   the state chain looking like documentation that had fallen into the console,
   and nothing said "this is what AIDNEX is telling you". The fix is typography,
   spacing and the actor marker, not a card and not a bubble.
   The question is set quiet and the answer is set loud, so the eye lands on the
   answer first and the question reads as its heading. */
.msg { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.1rem; padding: .85rem 1.3rem; border-bottom: var(--line); }
.msg .who { display: grid; grid-template-columns: auto auto; grid-template-areas: "mk lab" "tm tm"; gap: 1px .45rem; justify-content: end; align-content: start; text-align: right; }
.msg .mk { grid-area: mk; width: 12px; height: 12px; align-self: center; }
.msg .lab { grid-area: lab; font-family: var(--ind); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.msg .body { line-height: 1.6; }
.msg time { grid-area: tm; font: 12px/1.3 var(--mono); color: var(--ink-soft); }
.msg .body { max-width: min(68ch, 100%); min-width: 0; }
.msgact { grid-column: 2; justify-self: start; }
.msgact .btn { white-space: nowrap; }
.msg .body > * + * { margin-top: .8rem; }
.mdlist { display: grid; gap: .5rem; padding-left: 1.6rem; min-width: 0; }
.mdlist li { padding-left: .2rem; min-width: 0; overflow-wrap: anywhere; }
ol.mdlist { list-style: decimal; }
ul.mdlist { list-style: none; padding-left: 1.1rem; }
ul.mdlist li { position: relative; }
ul.mdlist li::before { content: ""; position: absolute; left: -1.1rem; top: .68em; width: .55rem; height: 1px; background: var(--ink-soft); }
.mdp { min-width: 0; overflow-wrap: anywhere; }
.mdhead { font-family: var(--ind); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.msg .body strong { font-weight: 700; }
.msg.END_USER { padding: .7rem 1.3rem .55rem; border-bottom: 0; background: var(--mineral-0); }
.msg.END_USER .mk { border: 2px solid var(--mineral-2); }
.msg.END_USER .lab { color: var(--ink-soft); }
.msg.END_USER .body { color: var(--ink-soft); font-size: 14px; }

/* The answer is the protagonist of the centre region. */
.msg.AI { background: #fff; padding: 1.15rem 1.3rem 1.35rem; }
.msg.AI .mk { background: var(--ink); width: 14px; height: 14px; }
.msg.AI .lab { font-size: 13px; letter-spacing: .13em; color: var(--ink); }
.msg.AI time { font-size: 12.5px; }
.msg.AI .body { font-size: 15px; }
/* An editorial opening: the first paragraph carries the answer, the rest
   supports it. One step of scale, not a headline. */
.msg.AI .body > .mdp:first-child { font-size: 17px; line-height: 1.5; font-weight: 500; }
.msg.OPERATOR { background: var(--orange-soft); border-top: 1px solid var(--orange); border-bottom: 1px solid var(--orange); }
.msg.OPERATOR .mk { background: var(--orange); }
.msg.OPERATOR .lab { color: var(--orange-ink); }
/* "Le fonti che ho trovato non sono sufficienti" is something the system DID,
   not something a fourth participant said. It was being drawn as an actor row
   with a marker and a name, which put a machine in the conversation beside the
   customer, the assistant and the operator. It now takes the approved event
   treatment: full width, between rules, with a marker and no invented name.
   The sentence is the content; nothing is added to it. */
.msg.SYSTEM { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .9rem;
              padding: .9rem 1.3rem; background: var(--mineral-1);
              border-top: var(--rule); border-bottom: var(--rule); }
.msg.SYSTEM .who { display: block; grid-column: 1; justify-self: start; text-align: left; }
.msg.SYSTEM .lab, .msg.SYSTEM time { position: absolute; width: 1px; height: 1px; overflow: hidden;
                                     clip-path: inset(50%); white-space: nowrap; }
.msg.SYSTEM .mk { width: 32px; height: 32px; display: grid; place-items: center;
                  background: var(--mineral-0); border: 2px solid var(--ink-soft); }
.msg.SYSTEM .body { grid-column: 2; color: var(--ink); max-width: 66ch; font-size: 14px; }
.msg.SYSTEM .msgact { grid-column: 2; }

@media (prefers-reduced-motion: no-preference) {
  .msg.fresh { animation: enter var(--t-entry) var(--ease) both; }
  @keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

.cite { font: 500 13px/1 var(--mono); color: var(--orange-ink); background: transparent; border: 0; border-bottom: 1px solid var(--orange); padding: 0 1px; margin-left: .22em; cursor: pointer; }
.mdcode { font: 12.5px/1.4 var(--mono); background: var(--mineral-1); border: var(--line); padding: 0 .25em; overflow-wrap: anywhere; }
.cite:hover { background: var(--orange-soft); }
.msgact { margin-top: 1.05rem; display: flex; gap: .5rem; flex-wrap: wrap; }

.event { border-top: var(--rule); border-bottom: var(--rule); background: var(--mineral-1); display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .9rem; padding: .95rem 1.3rem; flex: 0 0 auto; }
.marker { width: 32px; height: 32px; display: grid; place-items: center; background: var(--orange-soft); border: 2px solid var(--orange); color: var(--orange-ink); font: 900 17px/1 var(--ind); }
.marker.ink { background: var(--mineral-0); border-color: var(--ink); color: var(--ink); }
.eventbody h3 { font-family: var(--ind); font-size: 19px; letter-spacing: .03em; text-transform: uppercase; }
.eventbody h3.or { color: var(--orange-ink); }
.eventbody p { margin-top: .3rem; color: var(--ink-soft); max-width: 66ch; font-size: 14px; }
.eventact { margin-top: .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .event.fresh { animation: eventin var(--t-event) var(--ease) both; }
  @keyframes eventin { from { opacity: 0; transform: scaleY(.9); transform-origin: top; } to { opacity: 1; transform: none; } }
}

.working { padding: .85rem 1.3rem; border-bottom: var(--line); background: #fff; }
.workbody { border: 1px solid var(--ink); padding: .75rem .85rem; max-width: 62ch; }
.workbody b { font-family: var(--ind); font-size: 16px; letter-spacing: .02em; text-transform: uppercase; }
.workbody p { margin-top: .25rem; font-size: 13px; color: var(--ink-soft); }
.work-time { font-family: var(--mono); }
.work-rule { margin-top: .6rem; height: 2px; background: var(--mineral-2); overflow: hidden; }
.work-rule i { display: block; height: 100%; width: 35%; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .work-rule i { animation: sweep 1.6s cubic-bezier(.65, 0, .35, 1) infinite; }
  @keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
}
@media (prefers-reduced-motion: reduce) { .work-rule i { width: 100%; opacity: .5; } }
.workbody.slow { border-color: var(--orange); }
.workbody.slow b { color: var(--orange-ink); }
.workbody.slow .work-rule i { background: var(--orange); }
.workact { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }

.feedback { padding: 1rem 1.3rem 1.05rem; border-top: var(--rule); background: var(--mineral-1); flex: 0 0 auto; }
.feedback p:first-child { font-family: var(--ind); font-size: 17px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; margin-bottom: .7rem; }
.row { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }

/* Subordinate until it has focus. It was a large empty rectangle carrying more
   perceptual weight than the answer above it. */
.composer { border-top: var(--line); background: var(--mineral-0); padding: .5rem 1.3rem .6rem; flex: 0 0 auto; }
.composer #compose-h { font-size: 10.5px; color: var(--ink-soft); }
.composer textarea { min-height: 40px; height: 40px; padding: .45rem .6rem; font-size: 14px; border: var(--line); background: var(--mineral-0); resize: none; overflow: hidden; }
.composer textarea:focus-visible { border: 2px solid var(--ink); }
.composer.live textarea { background: #fff; }
.composer-form { display: grid; gap: .45rem; max-width: 68ch; margin-top: .3rem; }
.hint { font: 12px/1.3 var(--mono); color: var(--ink-soft); }

/* Supporting, not competing: the evidence rail carries less typographic weight
   than the conversation beside it. */
.insp { border-left: var(--line); background: var(--mineral-1); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.insphead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-bottom: var(--line); flex: 0 0 auto; }
.insphead h2 { border: 0; }
.insphead .btn { margin-right: .6rem; }
.shell.rail .insphead, .shell.rail .inspbody, .shell.rail .inspfoot { display: none; }
.shell.rail #rail { display: grid; }
.railcollapsed { display: none; justify-items: center; align-content: start; gap: .7rem; padding: .6rem 0; cursor: pointer; }
.railcollapsed .cnt { background: var(--ink); color: #fff; width: 26px; text-align: center; padding: .15rem 0; font: 800 12px/1.4 var(--ind); }
.railcollapsed .lab { writing-mode: vertical-rl; font-family: var(--ind); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.inspbody { flex: 1; min-height: 0; overflow-y: auto; }
.ev-empty { padding: .9rem; color: var(--ink-soft); font-size: 13px; }
.ev-empty p { max-width: 34ch; }

.cov { padding: .7rem .85rem; border-bottom: var(--line); background: var(--mineral-0); }
.cov .n { font: 800 32px/1 var(--ind); letter-spacing: -.02em; }
.cov .n small { font-size: 15px; color: var(--ink-soft); margin-left: .3rem; }
.cov .bar { margin-top: .5rem; height: 6px; background: var(--mineral-2); }
.cov .bar i { display: block; height: 100%; background: var(--ink); }

.src { padding: .55rem .8rem; border-bottom: var(--line); display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .6rem; }
.src .rank { font: 900 13.5px/1.4 var(--ind); color: var(--orange-ink); }
.src .t { font-size: 13px; font-weight: 700; line-height: 1.35; }
.src .m { margin-top: 3px; font: 11.5px/1.3 var(--mono); color: var(--ink-soft); }
.src.on { background: var(--orange-soft); box-shadow: inset 0 0 0 1px var(--orange); }
@media (prefers-reduced-motion: no-preference) {
  .src { transition: background-color var(--t-cite) var(--ease), box-shadow var(--t-cite) var(--ease); }
}

.ev-h { font-family: var(--ind); font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); padding: .7rem .8rem .35rem; }
.ev-tech { border-top: var(--rule); background: var(--mineral-0); }
.ev-tech dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .7rem; padding: 0 .8rem .7rem; font-size: 12px; }
.ev-tech dt { color: var(--ink-soft); }
.ev-tech dd { font-family: var(--mono); word-break: break-word; }
.ev-tech dd.np { color: var(--ink-soft); font-family: var(--body); font-style: italic; }
.ev-tech dl.idlist { grid-template-columns: 1.2rem minmax(0, 1fr); }
.ev-tech dl.idlist dt { font: 900 12px/1.4 var(--ind); color: var(--orange-ink); }
.ev-tech dl.idlist dd { font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.inspfoot { border-top: var(--line); padding: .6rem .8rem; flex: 0 0 auto; background: var(--mineral-0); }
.inspfoot .btn { width: 100%; }

.noev { padding: .9rem .85rem; display: grid; gap: .55rem; justify-items: start; }
.noev h3 { font-family: var(--ind); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--orange-ink); }
.noev p { font-size: 12.5px; color: var(--ink-soft); }
.noev dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .7rem; font-size: 12px; width: 100%; }
.noev dt { font-family: var(--ind); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.noev dd { font-family: var(--mono); }

@media (max-width: 60rem) {
  .topbar { flex-wrap: wrap; }
  .topbar .brand { border-right: 0; }
  /* The desktop rule's flex shorthand sets flex-basis to 0, and a basis of 0
     beats width: 100% — the bar stayed on the first row, squeezed next to the
     brand, and pushed its own labels off the screen. The basis is what has to
     change. */
  .ctxbar { order: 3; flex: 0 0 100%; border-top: var(--line); padding: .45rem .8rem;
            display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem; align-items: baseline; }
  .ctxbar .f-ref { grid-column: 1 / -1; }
  .field { display: flex; align-items: baseline; gap: .45rem; min-width: 0; border: 0; background: none; padding: 0; }
  .field .eyebrow { flex: none; }
  .field .rel { flex: none; }
  .field b { max-width: 100%; min-width: 0; }
  .powered { display: none; }
  .inline { border-left: 0; padding: .5rem .8rem; }
  .chipwrap { margin-left: auto; }
  .shell { display: flex; flex-direction: column; height: auto; min-height: calc(100svh - 60px); }
  .case { border-right: 0; border-bottom: var(--line); overflow: visible; }
  .case > h2 { display: none; }
  .caselist { display: flex; flex-wrap: wrap; }
  .caseitem { border-bottom: 0; border-right: var(--line); padding: .35rem .7rem; }
  .casefoot { display: none; }
  .thread { flex: 1; }
  .conv { overflow: visible; }
  .chainbar { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .chain-lab { text-align: left; }
  /* Five equal segments cannot share 320 pixels. The chain keeps its left-to-
     right reading and wraps, rather than growing a scrollbar that would hide
     the state the customer is actually in. */
  .steps { flex-wrap: wrap; }
  .steps li { flex: 1 1 8rem; border-right: var(--line); }
  /* The .msgact rule pinning grid-column 2 is right on the two-column desktop
     grid and wrong here: it creates an implicit second column, and auto-placement
     then drops the body into it, beside the actor line instead of beneath it. On a
     phone every child belongs to the single column. */
  .msg { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: .8rem; }
  .msg .body, .msgact { grid-column: 1; }
  .msg.AI { padding: .95rem .8rem 1.05rem; }
  .msg.END_USER { padding: .7rem .8rem .5rem; }
  .msg .who { grid-template-columns: auto auto 1fr; grid-template-areas: "mk lab tm"; justify-content: start; align-items: center; text-align: left; }
  .msg time { justify-self: end; }
  .composer { position: sticky; bottom: 0; z-index: 5; }
  .insp { position: fixed; z-index: 20; inset: auto 0 0; border-left: 0; border-top: var(--rule); max-height: 82svh; transform: translateY(100%); visibility: hidden; }
  .insp.open { transform: none; visibility: visible; }
  .shell.rail .insphead, .shell.rail .inspbody, .shell.rail .inspfoot { display: revert; }
  .railcollapsed { display: none !important; }
  .insphead { padding-top: .8rem; position: relative; }
  .insphead::before { content: ""; position: absolute; top: .4rem; left: 50%; translate: -50% 0; width: 44px; height: 4px; background: var(--mineral-2); }
  @media (prefers-reduced-motion: no-preference) {
    .insp { transition: transform var(--t-insp) var(--ease), visibility 0s linear var(--t-insp); }
    .insp.open { transition: transform var(--t-insp) var(--ease), visibility 0s; }
  }
}

@media (max-width: 30rem) {
  /* At the narrowest supported width a label and its value no longer fit side
     by side in half the bar, so the bar stops being two columns. */
  .ctxbar { grid-template-columns: minmax(0, 1fr); }
  .caseitem { border-right: 0; }
  .row .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}