/* Hopper Frontier Chat, local edition, on the HopperLabs.ai brand tokens only (web/brand/hopperlabs.css, from
   @hopperlabs/brand-assets 0.2.2). The page of the design mockup (DESIGN-BRIEF.md, frontier-chat/chat.css), wired:
   the pays strip (account picker + its standing, one line, repair on the line), evidence marks, the Tabs list at the
   rail's foot, and the account panel beside the conversation (it never switches the chat). */
@import "./brand/hopperlabs.css";

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--link)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico.sm{width:14px;height:14px}
.num{font-variant-numeric:tabular-nums}
.cents{font-size:.72em;vertical-align:.32em;margin-left:1px}

.app{display:grid;grid-template-columns:288px 1fr;height:100dvh;overflow:hidden}
.app.with-panel{grid-template-columns:288px 1fr 420px}

/* ---- rail ---- */
.rail{display:flex;flex-direction:column;min-height:0;background:var(--well);border-right:1px solid var(--rule)}
.rail-head{display:flex;align-items:center;gap:8px;height:52px;padding:0 12px 0 16px;flex:none}
.rail-head .brand-wordmark{display:flex;align-items:center;gap:7px;min-width:0;font-size:16px}
.mark{width:20px;height:20px;flex:none}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--muted);transition:background var(--state) var(--ease),color var(--state) var(--ease)}
.icon-btn:hover{background:var(--well-strong);color:var(--ink)}
.rail-new{display:flex;align-items:center;gap:9px;margin:0 8px 4px;padding:7px 10px;border:0;border-radius:var(--radius-control);background:transparent;font-size:14px;font-weight:500;text-align:left}
.rail-new:hover{background:var(--well-strong)}
.rail-new kbd,.search kbd{margin-left:auto;font:500 11px/1 var(--sans);color:var(--muted);padding:3px 5px;border:1px solid var(--rule);border-radius:5px;background:var(--well)}
.search{position:relative;display:block;margin:2px 10px 6px}
.search input{width:100%;height:34px;padding:0 44px 0 12px;border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--surface);outline:none}
.search input::placeholder{color:var(--muted)}
.search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.talks{flex:1;min-height:0;overflow-y:auto;padding:0 8px 8px}
.group{margin:14px 8px 4px;font:600 11.5px/1.3 var(--sans);color:var(--muted);letter-spacing:.01em}
.talk-row{display:flex;align-items:baseline;gap:8px;padding:7px 10px;border-radius:var(--radius-control);color:var(--ink);text-decoration:none;font-size:14px;line-height:1.35}
.talk-row:hover{background:var(--well-strong)}
.talk-row.on{background:var(--surface);box-shadow:0 0 0 1px var(--rule)}
.talk-row-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talk-row-when{flex:none;font-size:12px;color:var(--muted)}

/* The rail's foot: one quiet line per tab. Colour only on the one that is wrong; its repair on its row. */
.tabs{flex:none;padding:6px 8px 10px;border-top:1px solid var(--rule)}
.tabs .group{display:flex;justify-content:space-between;margin:8px 8px 4px}
.tabs .group a{font-weight:500;text-decoration:none;color:var(--muted)}
.tab-row{display:grid;grid-template-columns:22px 1fr auto;column-gap:8px;align-items:center;width:100%;padding:6px 8px;border:0;border-radius:var(--radius-control);background:transparent;text-align:left}
.tab-row:hover{background:var(--well-strong)}
.tab-name{font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab-left{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.tab-note{grid-column:2/4;font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab-row .glyph{grid-row:1/span 2;align-self:start;margin-top:2px}
.tab-note.bad{color:var(--danger);font-weight:500}

/* A provider is a plain mark with its letter: no vendor colour. */
.glyph{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);font:700 10.5px/1 var(--sans);color:var(--ink);flex:none}

/* Evidence: how a figure is known, as a mark that fills with its strength and a word. Never a colour. */
.ev{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:var(--muted)}
.ev::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;flex:none}
.ev.reported::before{background:currentColor}
.ev.settled::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.ev.estimated::before{background:transparent}
.ev.stale::before{border-style:dashed;background:transparent}

/* ---- the conversation ---- */
.talk{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.talk-head{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px 0 24px;flex:none;border-bottom:1px solid var(--rule)}
.talk-title{margin:0;font:600 15px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.talk-meta{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.talk-actions{margin-left:auto;display:flex;gap:2px}
.only-phone{display:none}

.log{flex:1;min-height:0;overflow-y:auto}
.column{max-width:768px;margin:0 auto;padding:8px 24px 28px}
.msg.you{display:flex;flex-direction:column;align-items:flex-end;margin:22px 0 6px}
.bubble{max-width:min(85%,620px);padding:10px 15px;border-radius:18px 18px 6px 18px;background:var(--well-strong);overflow-wrap:anywhere}
.msg.claude{margin:12px 0 4px}
.who{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:13px}
.who-name{font-weight:700;color:var(--wordmark);letter-spacing:-.01em}
.agent{font:700 9.5px/1 var(--sans);letter-spacing:.08em;padding:3px 5px;border-radius:5px;background:var(--well);color:var(--muted);border:1px solid var(--rule)}
.who-model{color:var(--muted)}
.body{font-size:15.5px;line-height:1.7;overflow-wrap:anywhere}
.md p{margin:0 0 .85em}
.md ol,.md ul{margin:0 0 .85em;padding-left:1.4em}
.md li{margin:.2em 0}
.md-code{font:500 .86em/1.4 var(--mono);padding:.12em .38em;border-radius:6px;background:var(--well);border:1px solid var(--rule)}
.md-pre{margin:0 0 1em;border-radius:12px;background:var(--night);color:var(--on-night);overflow:hidden}
.md-pre-bar{display:flex;justify-content:space-between;padding:6px 12px 2px 14px;font-size:12px;color:var(--sage-light)}
.md pre{margin:0;padding:4px 16px 14px;overflow-x:auto;font:400 13px/1.6 var(--mono)}
.msg-tools{display:flex;align-items:center;gap:4px;min-height:28px;color:var(--muted)}
.tool{display:inline-grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--muted)}
.tool:hover{background:var(--well);color:var(--ink)}
.receipt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:4px}
.receipt b{font-weight:600;color:var(--ink)}
.receipt .bad{font-weight:600;color:var(--danger)}
.msg-tools.soft{opacity:.0}
.msg.claude:hover .msg-tools.soft{opacity:1}

/* ---- dock and composer ---- */
.dock{flex:none;padding:0 24px max(14px,env(safe-area-inset-bottom));max-width:816px;width:100%;margin:0 auto}
.composer{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:20px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.06)}
.composer:focus-within{border-color:var(--sage)}

/* The pays strip: who pays for this chat and how it stands, said first, in one line, with the repair on it. */
.pays{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 8px 6px 8px;border-bottom:1px solid var(--rule);font-size:13px;color:var(--muted)}
.payer{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 8px 0 5px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink);font-weight:600;font-size:13px;white-space:nowrap;flex:none}
.payer:hover,.payer[aria-expanded="true"]{background:var(--well)}
.payer .glyph{width:20px;height:20px}
.payer .ico{color:var(--muted)}
.standing{flex:1;min-width:0;display:flex;align-items:center;gap:6px 10px;overflow:hidden;white-space:nowrap}
.standing .amt{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.standing .sep{color:var(--rule)}
.standing .bad{color:var(--danger);font-weight:600}
.standing .strong{color:var(--ink);font-weight:600}
.standing .cut{overflow:hidden;text-overflow:ellipsis}
.fix{flex:none;height:30px;padding:0 12px;border:0;border-radius:var(--radius-control);background:var(--action);color:var(--action-ink);font-weight:600;font-size:13px;white-space:nowrap}
.fix:hover{background:var(--action-hover)}
.fix.quiet{background:var(--surface);color:var(--ink);border:1px solid var(--rule);font-weight:500}
.fix.quiet:hover{background:var(--well)}

.composer textarea{display:block;width:100%;min-height:56px;padding:14px 18px 4px;border:0;background:transparent;resize:none;outline:none;font-size:15.5px;line-height:1.55}
.composer textarea::placeholder{color:var(--muted)}
.composer-row{display:flex;align-items:center;gap:6px;padding:6px 8px 8px 10px}
.grow{flex:1}
.chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 9px 0 11px;border:1px solid var(--rule);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;white-space:nowrap}
.chip:hover{background:var(--well)}
.chip .ico{color:var(--muted)}
.send{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:var(--radius-pill);background:var(--action);color:var(--action-ink)}
.send:disabled{opacity:.3;cursor:default}
.send .ico{stroke-width:2.2}
.foot-note{margin:8px 4px 0;text-align:center;font-size:12px;color:var(--muted)}

/* A refused send is said where the message would have been, with its retry on it. */
.refused{display:flex;flex-direction:column;align-items:flex-end;margin:22px 0 6px}
.refused .bubble{background:var(--surface);border:1px solid var(--rule);color:var(--muted)}
.refused-line{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:12.5px;color:var(--danger);font-weight:500}

/* ---- new chat: the empty conversation ---- */
.fresh{max-width:720px;margin:0 auto;padding:min(20vh,180px) 24px 0}
.fresh h2{margin:0 0 22px;text-align:center;font:700 clamp(24px,3vw,30px)/1.15 var(--sans);letter-spacing:-.035em;color:var(--wordmark)}

/* ---- the account picker (a listbox on the payer) ---- */
.pop{width:400px;padding:6px;border:1px solid var(--rule);border-radius:var(--radius-card);background:var(--surface);box-shadow:0 12px 40px rgba(0,0,0,.14)}
.pop-head{display:flex;justify-content:space-between;align-items:baseline;padding:6px 10px 8px;font-size:12px;color:var(--muted)}
.pop-head b{color:var(--ink);font-size:13px}
.pick{display:grid;grid-template-columns:22px 1fr auto;column-gap:10px;align-items:center;width:100%;padding:8px 10px;border:0;border-radius:var(--radius-control);background:transparent;text-align:left}
.pick:hover{background:var(--well)}
.pick.on{background:var(--well)}
.pick .glyph{grid-row:1/span 2}
.pick-name{font-size:14px;font-weight:600}
.pick-left{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.pick-note{grid-column:2/4;display:flex;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.pick-note .bad{color:var(--danger);font-weight:500}
.pick .fix{grid-row:1/span 2;grid-column:3;height:28px;padding:0 10px}
.pick-check{grid-row:1/span 2;grid-column:3;color:var(--brand)}
.pop-foot{display:flex;justify-content:space-between;gap:10px;padding:8px 10px 4px;margin-top:4px;border-top:1px solid var(--rule);font-size:12px;color:var(--muted)}
.pop-foot a{font-weight:600;text-decoration:none}

/* ---- the account panel: beside the conversation, which stays as it was ---- */
.panel{display:flex;flex-direction:column;min-height:0;background:var(--surface);border-left:1px solid var(--rule)}
.panel-head{display:flex;align-items:center;gap:10px;height:52px;padding:0 10px 0 20px;border-bottom:1px solid var(--rule);flex:none}
.panel-head h2{margin:0;font:600 15px/1.3 var(--sans);white-space:nowrap}
.panel-head .meta{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-head .icon-btn{margin-left:auto}
.panel-body{flex:1;overflow-y:auto;padding:0 20px 24px}
.p-state{display:flex;align-items:center;gap:10px;margin:0 -20px;padding:11px 20px;border-bottom:1px solid var(--rule);font-size:13.5px}
.p-state .say{flex:1;min-width:0}
.p-state .bad{color:var(--danger);font-weight:600}
.p-state.quiet{color:var(--muted)}
.sec{padding:16px 0;border-bottom:1px solid var(--rule)}
.sec:last-child{border-bottom:0}
.sec h3{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;font:600 12.5px/1.3 var(--sans);color:var(--muted)}
.sec h3 a{font-weight:600;text-decoration:none}
.big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.big-n{font:800 40px/1 var(--sans);letter-spacing:-.04em;color:var(--wordmark);font-variant-numeric:tabular-nums}
.big-of{color:var(--muted);font-size:14px}
.big-ev{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.none{font:700 22px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.none-sub{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.ladder{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.ladder td{padding:6px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.ladder tr:last-child td{border-bottom:0}
.ladder td.r{text-align:right;white-space:nowrap}
.ladder .when{color:var(--muted);font-size:12px;display:block}
.ladder .head-rung td{font-weight:600}
.ladder .old td{color:var(--muted)}
.pools{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:13.5px}
.pools dt{font-weight:600}
.pools dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.pools .sub{grid-column:1/3;font-size:12px;color:var(--muted);margin-bottom:8px;text-align:left;font-weight:400}
.who-spends{list-style:none;margin:0;padding:0}
.who-spends li{display:grid;grid-template-columns:1fr auto;column-gap:10px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.who-spends li:last-child{border-bottom:0}
.who-spends .n{font-weight:600}
.who-spends .v{text-align:right;font-variant-numeric:tabular-nums}
.who-spends .s{grid-column:1/3;font-size:12px;color:var(--muted)}
.who-spends .s b{color:var(--ink);font-weight:600}
.who-spends .s b.bad{color:var(--danger)}
.who-spends .s.note{margin-top:3px;line-height:1.4}
.spend{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.spend th{font-weight:600;color:var(--muted);font-size:12px;text-align:right;padding:4px 0 6px 8px;border-bottom:1px solid var(--rule)}
.spend td{text-align:right;padding:6px 0 6px 8px;border-bottom:1px solid var(--rule)}
.spend th:first-child,.spend td:first-child{text-align:left;padding-left:0}
.switch{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;cursor:pointer}
.switch-track{position:relative;width:36px;height:22px;margin-top:1px;border-radius:var(--radius-pill);background:var(--action)}
.switch-track::after{content:"";position:absolute;top:3px;left:17px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch-text{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--muted);line-height:1.45}
.switch-text strong{color:var(--ink);font-size:13.5px;font-weight:600}
.links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px}
.links a{font-weight:600;text-decoration:none}
.links .ico{vertical-align:-2px}

/* ---- narrow (a phone, or a shelf beside another app): one thing at a time. `.narrow` is on the page's root, set
   by mount.js from (max-width:760px), and always when the page is embedded as a shelf. ---- */
.narrow .app,.narrow .app.with-panel{grid-template-columns:1fr}
.narrow .rail{display:none}
.narrow .only-phone{display:inline-grid}
.narrow .talk-head{padding:0 6px;gap:4px}
.narrow .talk-meta{max-width:30vw}
.narrow .column{padding:4px 16px 20px}
.narrow .dock{padding:0 8px max(8px,env(safe-area-inset-bottom))}
.narrow .bubble{max-width:88%}
.narrow .chip{padding:0 8px;font-size:12.5px}
.narrow .pays{gap:6px;padding:5px 6px}
.narrow .wide{display:none}
.narrow .payer{max-width:46%;overflow:hidden}
.narrow .pays:has(.fix){flex-wrap:wrap;row-gap:2px}
.narrow .pays:has(.fix) .fix{margin-left:auto}
.narrow .pays:has(.fix) .standing{order:3;flex-basis:100%;padding:0 6px 2px}
.narrow .pays:has(.fix) .payer{max-width:60%}
.narrow .payer .pname{overflow:hidden;text-overflow:ellipsis}
.narrow .fresh{padding-top:12vh}
.narrow .panel{position:fixed;inset:0;z-index:20}
.narrow .with-panel .talk{display:none}
.narrow .foot-note{display:none}
@media (prefers-color-scheme:dark){
  .composer{box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35)}
}
.fix.sm{height:26px;padding:0 9px;font-size:12.5px}


/* ---- wired states: what the mockup drew still, now moving ---- */
[hidden]{display:none !important}
.app.with-panel .panel{display:flex}
.rail-new .ico{color:var(--muted)}
.talk-row.on .talk-row-title{font-weight:600}
.empty-talks{margin:10px 18px;font-size:13px;color:var(--muted)}
.scrim{position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.28)}
.send.stop{background:var(--ink);color:var(--surface)}
.send.stop .ico{fill:currentColor;stroke:none}
.conn{margin:0 4px 6px;font-size:12.5px;color:var(--muted);text-align:center}
.writing>:last-child::after,.writing:empty::after{content:"";display:inline-block;width:7px;height:1.05em;margin-left:3px;vertical-align:-2px;background:var(--muted)}
.body .waiting{color:var(--muted)}
.queued{display:flex;flex-direction:column;align-items:flex-end;margin:22px 0 6px}
.queued .bubble{background:var(--surface);border:1px dashed var(--rule)}
.queued-line{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;color:var(--muted)}
.failed-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 2px;font-size:13px}
.failed-line .bad{color:var(--danger);font-weight:600}
.failed-line .why{color:var(--muted)}
.stopped-line{margin:4px 0 2px;font-size:13px;color:var(--muted)}
.refused .bubble{background:var(--surface);border:1px dashed var(--rule);color:var(--muted)}
.refused .failed-line{justify-content:flex-end;margin-top:6px}
.refused-next{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 8px;max-width:min(100%,620px);margin-top:4px;font-size:12.5px;color:var(--muted)}
.refused-next code{font:500 12px/1.5 var(--mono);color:var(--ink);padding:3px 6px;border-radius:6px;background:var(--well);border:1px solid var(--rule);overflow-wrap:anywhere}
.link{border:0;background:transparent;padding:0;color:var(--link);font-weight:600;font-size:inherit;cursor:pointer}
.fix-note{display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--muted)}
.fix-note code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font:500 12px/1.5 var(--mono);color:var(--ink);padding:3px 6px;border-radius:6px;background:var(--well);border:1px solid var(--rule)}
.confirm{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--rule);font-size:13px}
.confirm .grow{flex:1}
.pop{position:fixed;z-index:30;max-height:min(70vh,520px);max-width:calc(100vw - 16px);overflow-y:auto}
.pop .opt{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:var(--radius-control);background:transparent;text-align:left;font-size:14px}
.pop .opt:hover,.pop .opt[aria-selected="true"]{background:var(--well)}
.pop .opt .ico{margin-left:auto;color:var(--brand)}
.pop.narrow{width:260px}
.toast{position:fixed;left:50%;bottom:24px;z-index:40;transform:translateX(-50%);max-width:min(92vw,560px);padding:10px 14px;border-radius:var(--radius-control);background:var(--night);color:var(--on-night);font-size:13.5px;box-shadow:0 8px 28px rgba(0,0,0,.2)}
.panel .cmd{display:flex;align-items:center;gap:8px;margin-top:8px}
.panel .cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font:500 12px/1.5 var(--mono);padding:4px 6px;border-radius:6px;background:var(--well);border:1px solid var(--rule)}
.who-spends .s .muted,.spend .muted{color:var(--muted)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch input:not(:checked)+.switch-track{background:var(--rule)}
.switch input:not(:checked)+.switch-track::after{left:3px}
.switch input:focus-visible+.switch-track{outline:2px solid var(--focus);outline-offset:2px}
.p-state .bad{color:var(--danger);font-weight:600}
.narrow .app.rail-open .rail{display:flex;position:fixed;inset:0 auto 0 0;width:min(86vw,320px);z-index:20}
.narrow .app.with-panel .panel{display:flex}
.link-row{border:0;background:transparent;padding:0;text-align:left;color:inherit;cursor:pointer}
.p-state .say{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.p-state .say .sep{color:var(--rule)}

/* ---- lanes, files, steer, answers, the chat's own menu (0.2.0) ---- */
.lane-tag{font:600 10.5px/1 var(--sans);letter-spacing:.02em;padding:3px 6px;border:1px solid var(--rule);border-radius:var(--radius-pill);color:var(--muted)}
.pick-account{display:flex;align-items:center;gap:8px;margin:8px 10px 2px;font-size:12px;color:var(--muted)}
.pick-account .pick-name{font-size:13px;color:var(--ink)}
.pick-of{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick.lane{grid-template-columns:1fr auto;padding:7px 10px 7px 40px}
.pick.lane .pick-name{font-size:13.5px;font-weight:500}
.pick.lane .pick-note{grid-column:1/3;flex-wrap:wrap;white-space:normal;row-gap:2px}
.pick.lane .pick-check,.pick.lane .fix{grid-row:1;grid-column:2}
.pick.off{cursor:default}
.pick.off:hover{background:transparent}
.pick.off .pick-name{color:var(--muted)}
.pick-note .strong{color:var(--ink);font-weight:600}
.pick-note .amt{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pick-note .sep{color:var(--rule)}
.files{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0}
.file-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:30px;padding:0 4px 0 8px;border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--well);color:var(--ink);font-size:12.5px;text-decoration:none}
.file-kind{font:700 10px/1 var(--sans);letter-spacing:.04em;color:var(--muted)}
.file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn.sm{width:24px;height:24px}
.file-refused{display:flex;align-items:center;gap:8px;flex-basis:100%;margin:0;font-size:12.5px;color:var(--muted)}
.file-refused .bad{color:var(--danger);font-weight:600;flex:none}
.msg-files{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:6px;max-width:min(85%,620px)}
.msg-files .file-chip{padding-right:8px}
.msg-files .file-chip:hover{background:var(--well-strong)}
.chip.steer{gap:6px}
.drop{position:fixed;inset:12px;z-index:50;display:grid;place-items:center;border:2px dashed var(--sage);border-radius:var(--radius-card);background:var(--surface);opacity:.94;pointer-events:none}
.drop p{font:600 18px/1.3 var(--sans);color:var(--ink)}
.msg.you.steer{margin-top:10px}
.steer-line{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:12px;color:var(--muted)}
.msg.superseded .body{color:var(--muted);font-size:14px;max-height:9em;overflow:hidden}
.superseded-line{margin:0 0 2px;font-size:12px;color:var(--muted)}
.answers{display:inline-flex;align-items:center;gap:2px;margin-left:4px;font-size:12px;color:var(--muted)}
.answers .tool{width:24px;height:24px;font-size:16px}
.answers-n{font-variant-numeric:tabular-nums;padding:0 2px}
.answers-on{margin-left:6px}
.answers .fix{margin-left:6px}
.rename{min-width:0;flex:0 1 420px;height:32px;padding:0 10px;border:1px solid var(--sage);border-radius:var(--radius-control);background:var(--surface);font:600 15px/1.3 var(--sans);outline:none}
.talk-title{cursor:text}
.pop .opt.danger{color:var(--danger)}
.fix.danger{background:var(--danger);color:var(--action-ink)}
.head-confirm{position:absolute;top:52px;left:0;right:0;z-index:5;background:var(--surface)}
.windows .w-label{font-weight:600}
.cap-account{padding:4px 0 10px}
.cap-account+.cap-account{border-top:1px solid var(--rule);padding-top:10px}
.cap-name{display:flex;gap:8px;align-items:baseline;margin:0 0 4px;font-size:13.5px}
.cap-name span{font-size:12px;color:var(--muted)}
.narrow .pick.lane{padding-left:12px}
.narrow .lane-tag{display:none}
.narrow .files{padding:6px 8px 0}

/* A reply's tool uses (view/widgets.js): quiet, under the answer; the alarm colour only on a tool that did not run. */
.uses{display:flex;flex-direction:column;gap:8px;margin:10px 0 2px}
.use{padding:8px 12px;border:1px solid var(--rule);border-radius:var(--radius-card);background:var(--surface)}
.use-head{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;font-size:12px;color:var(--muted)}
.use-head .bad{color:var(--danger);font-weight:600}
.use-tool{font:500 11.5px/1.3 var(--mono);color:var(--muted)}
.use-about{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.use-notes{margin:6px 0 0;font-size:12px;color:var(--muted)}
.w-sources{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.w-sources a{color:var(--link);text-decoration:none;font-weight:500}
.w-sources a:hover{text-decoration:underline}
.w-meta{margin-left:6px;font-size:12px;color:var(--muted)}
.w-sources li.w-meta{list-style:none;margin-left:0}
.w-quote{display:block;margin:2px 0 0;font-size:12.5px;color:var(--muted);quotes:"“" "”"}
.w-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:0}
.w-value{font:600 20px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.w-unit{font-size:14px;color:var(--ink)}
.w-of{font:400 12.5px/1.3 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.w-table{overflow-x:auto}
.w-table table{border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.w-table th,.w-table td{padding:4px 10px 4px 0;border-bottom:1px solid var(--rule);text-align:left;white-space:nowrap}
.w-table th{font-weight:600;color:var(--muted)}
.w-code{margin:0;padding:8px 10px;overflow-x:auto;font:400 12.5px/1.5 var(--mono);background:var(--well);border-radius:var(--radius-control)}
.w-text dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:4px 0 0;font-size:13px}
.w-text dt{color:var(--muted)}
.w-text dd{margin:0;overflow-wrap:anywhere}
.w-list{margin:0;padding-left:18px;font-size:13.5px}
.w-envelope summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.w-envelope pre{margin:6px 0 0;max-height:240px;overflow:auto;font:400 12px/1.5 var(--mono);background:var(--well);padding:8px;border-radius:var(--radius-control)}
/* The level picker: each level its label and its line; the model it runs, when shown, quietly beside the label. */
.opt.level{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;text-align:left;white-space:normal}
.opt.level .level-name{display:flex;align-items:baseline;gap:8px}
.opt.level .level-runs{font-size:12px;color:var(--muted)}
.opt.level .level-about{grid-column:1;font-size:12.5px;color:var(--muted);line-height:1.35}
.opt.level .ico{grid-column:2;grid-row:1 / span 2}