/* Tone - the type and the colour, after the measured audit of 2026-09-25.

   Loaded last. Two rules the frontier products share, applied throughout:

   1. A state's word is set in its ink, never in its fill. Green, amber and
      red at fill strength read at 3.2-4.1:1 on paper; their inks read at
      5.3-6.3:1. A dot keeps the fill; a word gets the ink. The same holds
      for the clay: a mark is --signal, a word is --signal-ink.
   2. Three tiers of text and no more - ink, muted, faint - and each tier
      passes 4.5:1 on every surface it sits on, in both modes. Nothing sets a
      hex colour of its own; everything comes from the palette, so light mode
      can never inherit a colour picked for dark.

   Type: one sans at 14.5, the serif for what the model wrote at 16.5, mono
   only for code; three weights; headings tracked tighter as they grow, small
   text tracked a hair wider; prose set with pretty line breaks and
   proportional figures, interface numbers tabular. */

/* -- words in a state colour use its ink ------------------------------------------------ */
a, .link { color: var(--signal-ink); }
.turn-who .what.live { color: var(--signal-ink); }
.turn-who .what.live::before { background: var(--signal); }
.turn-who .what.needs { color: var(--signal-ink); background: var(--signal-soft); }
.turn-who .what.warn { color: var(--warning-ink); background: var(--warning-soft); }
.turn-who .what.err { color: var(--danger-ink); background: var(--danger-soft); }
.chat-row .last.needs, .chat-row .meta .needs, .chat-row .needs { color: var(--signal-ink); }
.chat-row.running .last { color: var(--success-ink, var(--success)); }   /* working: the green family in both themes (notes 49 and 55) */
.session-row.bot.working .state { color: var(--signal-ink); }
.session-row.bot.needs-attention .state { color: var(--warning-ink); }
.machine-head .wake-btn:hover { color: var(--ink); border-color: var(--ink); }   /* a button: ink under the pointer, never the clay */
.w-checked.short { color: var(--warning-ink); }
.w-checked.ok { color: var(--success-ink); }
.w-call.bad .call-head .state, .w-sched.bad .sched-head b { color: var(--danger-ink); }
.walk-frame.err figcaption span, .cap-chip.over { color: var(--danger-ink); }
.judgement .j-item.missing .j-verdict { color: var(--danger-ink); }
.judgement .j-item.partial .j-verdict { color: var(--warning-ink); }
.turn .result.ok .mark { color: var(--success-ink); }
.turn .result.not-ok .mark { color: var(--danger-ink); }
.turn .result.stopped .mark { color: var(--warning-ink); }
.turn .result .words { color: var(--muted); }
.machine-note { color: var(--muted); }
.machine-note.problem { color: var(--ink); }
.machine-stage .machine-note { color: #9a9aa3; }            /* on the pane's dark bezel, whatever the theme */
.machine-stage .machine-note.problem { color: #c9c9cf; }
.w-pill .w-pressure { color: var(--warning-ink); }
.flow-bar .live-count { color: var(--success-ink); }
/* the trail's "failed" and "+12 −3" use the same red and green as the cards: one red in the product */
.work, :root[data-theme="dark"] .work, :root[data-theme="obsidian"] .work { --w-del: var(--danger-ink); --w-add: var(--success-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .work { --w-del: var(--danger-ink); --w-add: var(--success-ink); } }

/* -- the one filled button is ink, and the clay is a mark, not a fill ------------------ */
/* "Done", "Make the group", "Schedule", "Save": ink on paper reads at 17:1; white on the
   clay read at 3.9:1. The composer's send and a turn's "Continue where it stopped" are ink
   too, and stay ink under the pointer: an older hover turned both clay (the owner, 2026-10-02,
   two pictures: "change these from orange"). Send, Stop and Continue are one family. */
.btn.primary { background: var(--send); color: var(--send-ink); border-color: var(--send); }
.btn.primary:hover:not(:disabled) { background: var(--send); border-color: var(--send); opacity: .88; }
.btn.primary:disabled { opacity: .45; }
.composer-bar .send { background: var(--send); color: var(--send-ink); }
.composer-bar .send:hover:not(:disabled):not(.stop) { background: color-mix(in srgb, var(--send) 85%, var(--paper)); }
.composer-bar .send:disabled { background: var(--surface-muted); color: var(--faint); }
.composer-bar .send.stop { background: var(--danger); color: #fff; box-shadow: 0 0 0 3px var(--danger-soft); }
/* an error toast is the same dark card with a red edge, not white words on a red slab */
.toast.error { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-md), inset 3px 0 0 var(--danger); }

/* -- type --------------------------------------------------------------------------- */
/* prose breaks its lines by paragraph shape, and headings balance their lines */
.answer, .says, .w-said, .w-thought-body, .msg-user .text, .h-intro, .bot-intro, .machine-note, .try-note, .lead, .sub, .dialog p { text-wrap: pretty; }
.greeting h1, .page h1, .settings h1, .answer h1, .answer h2, .answer h3, .card h2, .dialog h2, .dialog h3, .bi-name { text-wrap: balance; }
/* Newsreader's optical size: the display cut for the big lines, the text cut for the rest */
.answer h1, .answer h2, .answer h3, .greeting h1, .signin-box h1, .plan-price { font-variation-settings: "opsz" 60; }
.answer, .says, .step.assistant .body { font-optical-sizing: auto; font-variation-settings: normal; }
/* headings tracked tighter as they grow - the same curve the frontier sans use */
.greeting h1 { letter-spacing: -.028em; }
.page h1, .settings h1 { letter-spacing: -.018em; }
.answer h1 { letter-spacing: -.022em; }
.answer h2 { letter-spacing: -.016em; }
.answer h3 { letter-spacing: -.008em; }
.card h2, .dialog h2 { letter-spacing: -.006em; }
/* small text tracked a hair wider, so a 12-px time or count stays open */
.session-row .meta, .chat-row .meta, .turn-foot .when, .w-status .aside, .w-pill .elapsed, .w-chip-head .meta,
.device-caption, .changes-card .row .lang, .file-row .st, .w-agent, .w-out-tag, .walk-head .when, .w-thought-mini,
.w-fold .dim, .w-quiet, .hint { letter-spacing: .012em; }
/* figures: proportional in the serif prose, tabular wherever numbers line up */
.answer, .says, .msg-user .text, .h-intro { font-variant-numeric: proportional-nums; }
table, .stable, .tr-table, .members, .usage-toolbar, .w-counts, .num-add, .num-del, .took, .w-pill .elapsed, .turn-foot .when,
.session-row .meta, .chat-row .meta, .result-head, .changes-card .row { font-variant-numeric: tabular-nums; }
/* the serif carries a weight of its own; 600 is a title, never bolder */
.answer strong, .says strong, .answer b, .says b { font-weight: 600; }
/* code is set a step smaller than the prose around it, never smaller than 12.5 */
.answer code, .says code { font-size: .88em; }
.w-out, .w-code, .file-view, .diff { font-size: 12.5px; }

/* The reply, set like the best chat tools: one clean sans for every word the
   bot says, the same while it streams and after; measured leading, tight
   lists, tables with a shaded head row, bold labels. (2026-09-25 evening) */
.answer, .says, .step.assistant .body, .answer h1, .answer h2, .answer h3, .says h1, .says h2, .says h3 { font-family: var(--sans); font-variation-settings: normal; font-optical-sizing: auto; }
.answer, .says { font-size: 15px; line-height: 1.6; letter-spacing: -.004em; }
.answer p, .says p { margin: 0 0 10px; }
.answer p:last-child, .answer ul:last-child, .answer ol:last-child { margin-bottom: 0; }
.answer h1, .answer h2, .answer h3 { font-weight: 650; line-height: 1.3; margin: 16px 0 6px; letter-spacing: -.012em; }
.answer h1 { font-size: 18px; } .answer h2 { font-size: 16px; } .answer h3 { font-size: 15px; }
.answer ul, .answer ol { margin: 0 0 10px; padding-left: 22px; }
.answer li { margin: 4px 0; }
.answer li::marker { color: var(--faint); }
.answer strong, .says strong, .answer b, .says b { font-weight: 650; }
.answer table { font-size: 13.5px; line-height: 1.45; margin: 8px 0 14px; border: 1px solid var(--line); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.answer th, .answer td { border: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; }
.answer tr:last-child td { border-bottom: 0; }
.answer th { background: var(--bg-2); font-weight: 600; color: var(--ink); }
.answer td + td, .answer th + th { border-left: 1px solid var(--line); }
.answer code, .says code { font-size: 13px; }
.answer.streaming::after { height: 14px; vertical-align: -2px; }
/* a table's words are not broken mid-word to fit: the first column keeps its
   words whole and the table may scroll sideways on a narrow pane instead */
.answer table { table-layout: auto; width: auto; max-width: 100%; display: block; overflow-x: auto; }
.answer th, .answer td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.answer th:first-child, .answer td:first-child { white-space: nowrap; font-weight: 600; color: var(--ink); }
.answer td:first-child { font-weight: 500; }
/* the Team mark beside a project's bots: every one of them, in one chat */
.bot-mark.team { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); }
.bot-mark.team:hover { color: var(--ink); border-color: var(--line-2); }
.bot-mark.team .i { width: 14px; height: 14px; }

/* One pointer over the machine's pane in every state - the live screen, the
   kept last screen of a resting machine, the waking note: the product's own
   graphite arrow, the size the live screen shows it. */
.machine-stage, .machine-stage * { cursor: -webkit-image-set(url(pointer.png) 1x, url(pointer@2x.png) 2x) 4 3, url(pointer.png) 4 3, default; }
.machine-stage iframe { cursor: auto; }

/* A file the person attached (a sheet, a document, data): a small card with
   its name, beside the message, opening the file - never a broken picture. */
.shots .file-card { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--hairline);
                    background: var(--bg-2, rgba(127,127,127,.08)); color: inherit; text-decoration: none; font: 500 13px/1.3 var(--sans); max-width: 260px; }
.shots .file-card .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shots .file-card:hover { border-color: var(--ink-4); }

/* A roster of seven and the Team mark fit a narrow sidebar: the row wraps
   instead of running under its edge. */
.bots-row { flex-wrap: wrap; row-gap: 4px; }

/* A turn that stopped short can go on from where it was: one press, or an
   answer to the question it left open, and the continue goes with it. */
.continue-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px 30px; }
.continue-row .continue-answer { flex: 1 1 260px; min-width: 200px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--hairline-strong, var(--line)); background: var(--paper, transparent); color: var(--ink); font: 14px/1.4 var(--sans); }
.continue-row .btn .i { width: 14px; height: 14px; }

/* Files the person adds: a tile each above the words, as the chat apps people
   know show them - the kind's icon, the name on two lines, how far the upload
   is, a round x to take it away. A picture fills its tile. (2026-09-26: the
   owner's reference was another app's composer; ours had 22-pixel chips.) */
.attach-tiles { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 12px 4px; }
.att-tile { position: relative; width: 116px; height: 116px; border-radius: 16px; background: var(--surface-muted); box-sizing: border-box;
            padding: 12px 12px 14px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
            box-shadow: inset 0 0 0 1px var(--hairline); transition: box-shadow .15s, opacity .15s; }
.att-tile:hover { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.att-tile .kind-icon svg { display: block; }
.att-tile .att-meta { min-width: 0; }
.att-tile .att-name { font-size: 13.5px; line-height: 1.28; font-weight: 500; color: var(--ink); word-break: normal; overflow-wrap: anywhere;
                      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.att-tile .att-sub { margin-top: 3px; font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-tile.pic { padding: 0; }
.att-tile.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-tile.pic .pic-sub { position: absolute; left: 8px; bottom: 8px; right: 8px; margin: 0; padding: 2px 6px; border-radius: 6px; width: max-content; max-width: calc(100% - 16px);
                         background: rgba(0,0,0,.55); color: #fff; }
.att-tile.pic.done .pic-sub { display: none; }
.att-x { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; padding: 0;
         background: rgba(20,20,20,.78); color: #fff; opacity: .92; }
.att-x:hover { opacity: 1; background: rgba(0,0,0,.9); }
.att-x svg { width: 11px; height: 11px; }
.att-bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--hairline-strong); opacity: 0; transition: opacity .2s; }
.att-tile.uploading .att-bar { opacity: 1; }
.att-bar i { display: block; height: 100%; border-radius: 3px; background: var(--signal); transition: width .25s ease; }
.att-tile.error { box-shadow: inset 0 0 0 1.5px var(--danger); }
.att-tile.error .att-sub { color: var(--danger-ink); white-space: normal; }
.composer.drop, .composer .drop { box-shadow: 0 0 0 2px var(--signal) inset; }

:root { --fi-page: #ffffff; --fi-edge: #d3d6dc; --fi-fold: #eceef2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fi-page: #2b2b2b; --fi-edge: #4a4a4a; --fi-fold: #363636; } }
:root[data-theme="dark"], :root[data-theme="obsidian"] { --fi-page: #2b2b2b; --fi-edge: #4a4a4a; --fi-fold: #363636; }

/* A file as its kind's icon, the same everywhere a file appears (app.js kindIcon): a white page, its kind's mark in its
   kind's colour, its extension on a tag in that colour at its foot (the owner, 2026-10-03: "like image 3 icons"). */
.kind-icon { display: inline-flex; flex: none; }
.kind-icon svg .page { fill: var(--fi-page); stroke: var(--fi-edge); stroke-width: 1.3; stroke-linejoin: round; }
.kind-icon svg .fold { fill: var(--fi-fold); stroke: var(--fi-edge); stroke-width: 1.3; stroke-linejoin: round; }
.kind-icon svg .mark { fill: none; stroke: var(--kind); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kind-icon svg .mark .solid { fill: var(--kind); stroke: none; }
.kind-icon svg .tag { fill: var(--kind); }
.kind-icon svg text { font: 700 6.3px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; }

/* A file already in the chat - added by the person, prepared by the bot - opens from its chip. */
.file-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 2px 20px; margin: 10px 0 2px; max-width: 660px; }
/* A file the bot made or the person sent: its type's mark, its name and what it is, on the page itself - no box round
   it (the owner, 2026-10-03: "those boxes are also too old school around document icon"). A light wash under the
   pointer, where its two actions show too. */
.shots.user .file-chip, .file-chips .file-chip, .video-card figcaption .file-chip { display: flex; align-items: center; gap: 12px; width: auto; min-width: 0; max-width: 100%; padding: 6px 8px; margin: 0 -8px;
            border-radius: 12px; background: transparent; box-shadow: none; color: var(--ink); text-decoration: none; box-sizing: border-box;
            transition: background-color .12s ease; }
.file-chip:hover, .file-chip:focus-within { background: var(--press); box-shadow: none; }
.file-chip .fc-text { display: flex; flex-direction: column; min-width: 0; }
.file-chip .fc-name { font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-chip .fc-sub { font-size: 12px; color: var(--faint); margin-top: 2px; }
.shots.user { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.user-turn > .shots.user { margin: 14px 0 -8px; }            /* above the bubble, 6px apart from it */
.user-turn > .shots.user:last-child { margin-bottom: 22px; }  /* files with no words */

/* A file held over the page: where it goes, said once, over everything (dropAnywhere in app.js) */
.drop-veil { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--bg, #111) 72%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: drop-in .14s ease-out; }
.drop-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 44px 28px; border-radius: 22px;
  background: var(--surface, #1c1c1c); box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 0 0 1px var(--hairline-strong, rgba(255,255,255,.12)); }
.drop-fan { display: flex; align-items: flex-end; margin-bottom: 10px; }
.drop-fan .kind-icon:nth-child(1) { transform: rotate(-12deg) translateX(8px); }
.drop-fan .kind-icon:nth-child(2) { transform: translateY(-6px); z-index: 1; }
.drop-fan .kind-icon:nth-child(3) { transform: rotate(12deg) translateX(-8px); }
.drop-title { font-size: 18px; font-weight: 600; color: var(--ink); }
.drop-sub { font-size: 13.5px; color: var(--faint); max-width: 300px; text-align: center; line-height: 1.4; }
@keyframes drop-in { from { opacity: 0; } to { opacity: 1; } }

/* the plan's usage, over the composer: from 80%, and when it is used up (2026-09-27) */
.usage-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--hairline-strong, var(--line)); background: var(--bg-2, transparent); color: var(--ink); font: 13.5px/1.45 var(--sans); }
.usage-line > span { flex: 1 1 260px; }
.usage-line.full { border-color: color-mix(in srgb, var(--warn, #e5a50a) 55%, transparent); }
.usage-line .icon-btn .i { width: 14px; height: 14px; }
.usage-card .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* the panel's tabs never widen the page: at a narrow width the strip scrolls by itself (a tab past the
   edge once dragged the whole panel sideways on a phone, 2026-09-27) */
.panel-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-width: 0; }
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs .tab { flex: 0 0 auto; }
.phone-tabs { overflow-x: auto; scrollbar-width: none; }
.phone-tabs::-webkit-scrollbar { display: none; }
.phone-tabs button { flex: 0 0 auto; }
/* the machine's two screens, when a chat has worked on Windows too: one small segmented switch in the header */
.machine-head .screen-switch { display: inline-flex; gap: 2px; padding: 2px; margin-right: 6px; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--line); }
.machine-head .screen-switch button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; line-height: 1;
  padding: 5px 9px; border-radius: 5px; cursor: pointer; }
.machine-head .screen-switch button:hover { color: var(--ink); }
.machine-head .screen-switch button.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.18)); }

/* The work as the best agent tools show it (2026-10-01): what the agent says in plain type, ink not grey - it is the story;
   what it did between two sayings folded into one quiet line, opened to every step; "Thought for 12s" opened to the
   model's own summary of its thinking; and "Thinking 8s", shimmering, under the last step while it waits on the model. */
.w-said { color: var(--ink); font-size: 14.5px; line-height: 1.65; margin: 12px 0 8px 2px; }
.w-said p { margin: 0 0 8px; }
.w-group { margin: 2px 0; }
.w-group-head { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 4px 6px 4px 2px; font-size: 13.5px;
  color: var(--muted); border-radius: 8px; min-width: 0; }
.w-group-head:hover { background: var(--press); color: var(--ink); }
.w-group-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-group-head .w-spin { margin-left: 0; width: 12px; height: 12px; border-width: 1.5px; }
.w-group-head .w-tag.bad { margin-left: 4px; }
.w-group-body { margin: 2px 0 6px 7px; padding-left: 12px; border-left: 1.5px solid var(--hairline); }
.w-group > .w-group-body { display: none; }
.w-group.open > .w-group-body { display: block; }
.w-group-body .w-chip { margin: 4px 0; }
.w-thought-mini { font-size: 13px; color: var(--faint); padding: 3px 2px; }
.w-thought-head { color: var(--faint); }
.w-thought-head:hover { color: var(--ink); }
.w-live-think { display: flex; align-items: baseline; gap: 8px; padding: 6px 2px 2px; font-size: 13.5px; }
.w-live-think .secs { color: var(--faint); font-family: var(--mono); font-size: 12px; }
.w-shimmer { background: linear-gradient(90deg, var(--faint) 0%, var(--ink) 45%, var(--faint) 90%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .w-shimmer { animation: none; color: var(--muted); background: none; } }
body.reduced-motion .w-shimmer { animation: none; color: var(--muted); background: none; }
details.w-refusal { margin: 4px 0; font-size: 13px; color: var(--faint); }
details.w-refusal > summary { cursor: pointer; padding: 3px 2px; list-style: none; }
details.w-refusal > summary::-webkit-details-marker { display: none; }
details.w-refusal > summary:hover { color: var(--ink); }
/* Work's turn has no face or name: only "Working" and its clock while it runs, a word when it stopped */
.turn-who.plain { gap: 0; min-height: 0; }
.turn-who.plain.empty { display: none; }
.turn-who.plain .w-pill { margin: 0 0 6px; }
/* A friend at work in Chat (Grok's "Eval & Bugs is working" as the picture): its face and one shimmering line, what it
   is doing in its own plain words beneath - nothing technical, no clock, no money. */
.bot-working { display: flex; align-items: center; gap: 12px; padding: 6px 0 4px; }
.bot-working-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bot-working-text .w-shimmer { font-size: 16.5px; line-height: 1.35; letter-spacing: .005em; }
.bot-doing { font-size: 13.5px; color: var(--faint); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62ch;
  animation: drop-in .35s ease; }
.bot-doing.empty { display: none; }
/* a Work project's machine is its workspace: a plain screen mark, not a bot's face */
.machine-head .ws-mark { display: inline-flex; color: var(--faint); }
.machine-head .ws-mark .i { width: 16px; height: 16px; }
/* the starting card while a machine with no kept screen comes up: one quiet line and a spinner, never a stock picture */
.machine-note.starting { display: inline-flex; align-items: center; gap: 10px; }
.machine-note.starting .spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(236, 238, 242, .25); border-top-color: #eceef1; animation: spin .8s linear infinite; }

/* The model picker (2026-10-01): one solid card of a fixed size - it never moves or resizes under the pointer (a detail
   pane of another height moved the card, the row under the pointer changed, and it shook). The person's OpenRouter
   models on the left, each with its maker, window and price beneath its name; the one under the pointer described on
   the right with its Effort, Context and Fast. */
.popover.models-pop { display: grid; grid-template-columns: minmax(0, 1fr) 248px; padding: 0; gap: 0; max-width: none; overflow: hidden;
  width: min(640px, calc(100vw - 16px)); height: min(452px, calc(100vh - 120px)); max-height: none;
  background: var(--surface); border: 1px solid var(--hairline-strong, var(--line)); border-radius: 14px; box-shadow: var(--shadow-lg);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-theme="obsidian"] .popover.models-pop { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
.models-pop .models-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--hairline); }
.models-pop .ms-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); color: var(--faint); flex: none; }
.models-pop .ms-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 14px/1.4 var(--sans); padding: 2px 0; }
.models-pop .ms-search input::placeholder { color: var(--faint); }
.models-pop .models-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.models-pop .ms-section { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.models-pop .ms-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 9px; color: var(--ink); min-height: 50px; }
.models-pop .ms-row:hover, .models-pop .ms-row.kbd { background: var(--press, var(--bg-hover)); }
.models-pop .ms-row.on { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.models-pop .ms-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.models-pop .ms-row-name { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.models-pop .ms-row-sub { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.models-pop .ms-tag { font-size: 10.5px; font-weight: 500; color: var(--muted); border: 1px solid var(--hairline-strong, var(--line)); border-radius: 999px; padding: 0 6px; line-height: 16px; }
.models-pop .ms-effort { flex: none; font-size: 12px; color: var(--faint); }
.models-pop .ms-row .i { flex: none; color: var(--ink); }
.models-pop .ms-plus .i { color: var(--faint); }
.models-pop .ms-empty { padding: 18px 12px; font-size: 13px; color: var(--faint); text-align: center; }
.models-pop .models-side { min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--surface-muted) 55%, var(--surface)); }
.models-pop .ms-head { padding-bottom: 6px; }
.models-pop .ms-name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.models-pop .ms-maker { font-size: 12px; color: var(--faint); margin-top: 2px; }
.models-pop .ms-specs { display: flex; flex-direction: column; gap: 3px; padding: 6px 0 8px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.models-pop .ms-spec { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.models-pop .ms-spec b { font-weight: 500; color: var(--ink); text-align: right; }
.models-pop .ms-label { font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); padding: 8px 2px 3px; }
.models-pop .ms-opts { display: flex; flex-direction: column; gap: 1px; }
.models-pop .ms-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 5px 8px; border-radius: 7px; font-size: 13px; color: var(--muted); text-align: left; }
.models-pop .ms-opt:hover { background: var(--press, var(--bg-hover)); color: var(--ink); }
.models-pop .ms-opt.on { color: var(--ink); font-weight: 500; }
.models-pop .ms-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px; margin-top: 6px; border-radius: 7px; font-size: 13px; color: var(--ink); text-align: left; }
.models-pop .ms-toggle:hover { background: var(--press, var(--bg-hover)); }
.models-pop .ms-toggle .ms-sub { flex: 1; font-size: 12px; color: var(--faint); }
.models-pop .ms-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hairline); }
.models-pop .ms-actions button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ink);
  border: 1px solid var(--hairline-strong, var(--line)); background: var(--surface); }
.models-pop .ms-actions button:hover { border-color: var(--ink-4, var(--faint)); }
.models-pop .ms-actions button.quiet { border-color: transparent; color: var(--faint); background: transparent; }
.models-pop .ms-actions button.quiet:hover { color: var(--danger, #cf222e); }
.models-pop .ms-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 8px 12px; border-radius: 9px;
  font-size: 13px; font-weight: 500; color: var(--paper); background: var(--ink); }
.composer-bar .model-sel .model-effort { margin-left: 4px; color: var(--ink-4, var(--faint)); }
/* the composer's buttons keep their words on one line: in a narrow pane "GPT-6.1 Sol" broke over three lines beside
   its effort (2026-10-02); the model's name gives way last, cut with an ellipsis, and the effort goes first */
.composer-bar { container-type: inline-size; }
.composer-bar .sel { white-space: nowrap; flex: none; }
.composer-bar .model-sel { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; }
.composer-bar .model-sel > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.composer-bar .model-sel .model-effort { flex: none; }
@container (max-width: 430px) { .composer-bar .model-sel .model-effort { display: none; } }
@media (max-width: 560px) {
  .popover.models-pop { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: min(560px, calc(100vh - 100px)); }
  .models-pop .models-main { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .models-pop .models-side { max-height: 210px; }
}

/* Work's first page: the project by name, one line on what Work does, three ways to start */
.work-welcome { max-width: 560px; margin: 16vh auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; }
.work-welcome .ww-mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--muted);
  background: var(--surface-muted); border: 1px solid var(--hairline); }
.work-welcome .ww-mark .i { width: 20px; height: 20px; }
.work-welcome h2 { margin: 4px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.work-welcome p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.work-welcome .ww-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.work-welcome .ww-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hairline-strong, var(--line)); background: var(--surface);
  font-size: 13px; color: var(--ink); }
.work-welcome .ww-chip:hover { border-color: var(--ink-4, var(--faint)); background: var(--surface-muted); }
/* the Browser tab: an address box for the workspace's own browser */
.browser-start .browser-says { font-size: 12.5px; color: var(--faint); margin: 8px 2px 14px; line-height: 1.5; }
/* the product carrying the work on by itself: a quiet divider in the column, never a bubble on the person's side */
.turn-divider { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 12.5px; color: var(--faint); }
.turn-divider::before, .turn-divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
/* a link inside an answer reads as part of the sentence: the text's own colour, a fine underline that firms up on
   hover - not an orange word in the middle of a reply (the owner, 2026-10-01, picture 19) */
.turn .answer a[href] { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .15s; }
.turn .answer a[href]:hover { text-decoration-color: currentColor; }
.machine-chip.calm { color: var(--muted); border-color: var(--hairline); background: transparent; }
/* Stop: the ink disc with a small square, as the chat apps people know - never a salmon-red alarm under the work
   (the owner, 2026-10-01, picture 16); it inverts with the theme */
.composer-bar .send.stop { background: var(--ink); color: var(--ink-invert); box-shadow: none; }
.composer-bar .send.stop:hover { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); }
.composer-bar .send.stop .i { width: 11px; height: 11px; }
/* the machine's header says its state in a word a person uses - "Ready" with a small green dot, "Working" while a turn
   runs - not "awake" in grey (the owner, 2026-10-01, pictures 17-18) */
.machine-head .state { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 999px;
  background: var(--surface-muted); color: var(--muted); font-size: 12px; line-height: 18px; }
.machine-head .state:not(.live)::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success, #2f9e5b); }
.machine-head .state.live { padding: 0 2px; border-radius: 0; }
/* a running chat in the list: one live mark in the row's margin, where nothing else is - not an orange dot pressed
   against a time cut to its first letter (the owner, 2026-10-01, picture 11); green, the theme's own green in each
   theme, with a soft ring going out from it (note 49, 2026-10-02: the muted dot read as nothing) */
.session-row.running .meta { display: none; }
.session-row.running::before { content: ''; position: absolute; left: 15px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--success); animation: live-ring 1.8s ease-out infinite; }
@keyframes live-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); }
  80%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .session-row.running::before { animation: none; box-shadow: 0 0 0 3px var(--success-soft); } }
/* a made file's card: pressed it opens; its two small doors - save a copy, show in folder - sit at its right edge */
.file-chip { cursor: pointer; }
.file-chip .fc-text { flex: 1; }
.file-chip .fc-acts { display: inline-flex; gap: 2px; margin-left: auto; flex: none; opacity: 0; transition: opacity .12s ease; }
.file-chip:hover .fc-acts, .file-chip:focus-within .fc-acts { opacity: 1; }
@media (hover: none) { .file-chip .fc-acts { opacity: 1; } }
.file-chip .fc-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px;
  color: var(--muted); background: transparent; border: 0; }
.file-chip .fc-act:hover { background: var(--press); color: var(--ink); }
.file-chip .fc-act:focus-visible, .file-chip.in-app:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
a.file-chip .fc-act { pointer-events: none; }
/* the model list: a mark and a name per row, generous and calm; the chosen one tinted with a check (the owner,
   2026-10-01: names only on the left, "super attractive") */
.models-pop .ms-row { min-height: 42px; padding: 7px 10px; gap: 12px; }
.models-pop .ms-row.on { background: color-mix(in srgb, var(--signal) 9%, transparent); }
.models-pop .ms-row.on .i { color: var(--signal-ink, var(--signal)); }
.models-pop .ms-row-name { font-size: 14px; font-weight: 500; letter-spacing: -.005em; }
.models-pop .ms-mark { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center;
  font: 600 12.5px/1 var(--sans, system-ui); color: hsl(var(--h) 48% 30%); background: hsl(var(--h) 62% 93%);
  box-shadow: inset 0 0 0 1px hsl(var(--h) 40% 84%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="obsidian"]) .models-pop .ms-mark {
  color: hsl(var(--h) 70% 80%); background: hsl(var(--h) 30% 19%); box-shadow: inset 0 0 0 1px hsl(var(--h) 30% 27%); } }
:root[data-theme="dark"] .models-pop .ms-mark, :root[data-theme="obsidian"] .models-pop .ms-mark {
  color: hsl(var(--h) 70% 80%); background: hsl(var(--h) 30% 19%); box-shadow: inset 0 0 0 1px hsl(var(--h) 30% 27%); }
.models-pop .ms-tag { font-size: 10.5px; font-weight: 500; padding: 2px 6px; border-radius: 999px; color: var(--muted);
  background: var(--surface-muted); letter-spacing: .02em; }
/* the schedule card (note 8): a mark, a title, how often, one sentence, and the door to every schedule */
.w-sched.card { display: grid; gap: 12px; width: min(460px, 100%); margin: 10px 0; padding: 16px; border-radius: 16px;
  border: 1px solid var(--hairline); background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.w-sched.card .sched-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.w-sched.card .sched-mark { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--signal-ink, var(--ink)); background: color-mix(in srgb, var(--signal) 12%, var(--surface)); }
.w-sched.card .sched-badge { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 2.5px var(--hairline); }
.w-sched.card .sched-badge .i { width: 11px; height: 11px; }
.w-sched.card .sched-titles { display: grid; gap: 2px; min-width: 0; }
.w-sched.card .sched-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.w-sched.card .sched-sub { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; }
.w-sched.card .sched-keeper { display: inline-flex; align-items: center; gap: 4px; }
.w-sched.card .sched-says { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2, var(--ink)); }
.w-sched.card .sched-open { display: block; text-align: center; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  color: var(--ink); text-decoration: none; background: var(--surface-muted); border: 1px solid var(--hairline); }
.w-sched.card .sched-open:hover { background: var(--press); }
.w-sched.card.bad .sched-mark { color: var(--muted); background: var(--surface-muted); }
/* Work's first page, v2: the project as it stands and where to start - left-aligned, quiet, specific */
.work-welcome.v2 { width: min(640px, 100%); max-width: none; margin: 0 auto; padding: clamp(28px, 12vh, 120px) 4px 24px; display: grid; gap: 14px;
  text-align: left; align-content: start; align-items: stretch; justify-items: stretch; }
.work-welcome.v2 .ww-title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); text-wrap: balance; }
.work-welcome.v2 .ww-name { color: var(--ink); }
.work-welcome.v2 .ww-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); min-height: 20px; }
.work-welcome.v2 .ww-fact { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.work-welcome.v2 .ww-fact .i { color: var(--faint); flex: none; }
.work-welcome.v2 .ww-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; color: var(--ink-2, var(--ink)); }
.work-welcome.v2 .ww-dim { color: var(--faint); }
.work-welcome.v2 .ww-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 22px; }
.work-welcome.v2 .ww-cols.one { grid-template-columns: minmax(0, 380px); }
.work-welcome.v2 .ww-col { display: grid; gap: 6px; align-content: start; min-width: 0; }
.work-welcome.v2 .ww-label { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); padding: 0 12px 2px; }
.work-welcome.v2 .ww-list { display: grid; gap: 2px; }
.work-welcome.v2 .ww-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 10px; font-size: 14px;
  text-align: left; font-size: 14px; color: var(--ink); background: transparent; border: 0; cursor: pointer; }
.work-welcome.v2 .ww-row > span:not(.ww-dot):not(.ww-when) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-welcome.v2 .ww-row .i { flex: none; color: var(--muted); }
.work-welcome.v2 .ww-row .ww-go { opacity: 0; transition: opacity .15s; }
.work-welcome.v2 .ww-row:hover { background: var(--press); }
.work-welcome.v2 .ww-row:hover .ww-go { opacity: 1; }
.work-welcome.v2 .ww-row:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.work-welcome.v2 .ww-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hairline-strong, var(--faint)); }
.work-welcome.v2 .ww-dot.live { background: var(--signal); animation: pulse 1.4s ease-in-out infinite; }
.work-welcome.v2 .ww-when { flex: none; font-size: 12px; }
@media (max-width: 720px) { .work-welcome.v2 .ww-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
/* the mode picker (note 11): three everyday modes as one control, a sentence for the one in focus, the focused kinds below */
.popover.mode-pop { width: 320px; padding: 12px; display: grid; gap: 8px; }
.mode-pop .mode-label { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 2px 2px 0; }
.mode-pop .mode-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-muted); }
.mode-pop .mode-opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 8px; border: 0;
  background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.mode-pop .mode-opt:hover { color: var(--ink); }
.mode-pop .mode-opt.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--hairline); }
.mode-pop .mode-say { min-height: 36px; font-size: 12.5px; line-height: 1.45; color: var(--muted); padding: 0 2px; }
.mode-pop .mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mode-pop .mode-tile { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 9px; border: 0; background: transparent;
  color: var(--ink); font-size: 13.5px; text-align: left; cursor: pointer; }
.mode-pop .mode-tile .i { color: var(--muted); flex: none; }
.mode-pop .mode-tile:hover { background: var(--press); }
.mode-pop .mode-tile.on { background: color-mix(in srgb, var(--signal) 10%, transparent); }
.mode-pop .mode-opt:focus-visible, .mode-pop .mode-tile:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
/* the project picker (note 34): two-line projects, one search, three plain actions */
.popover.repo-pop { width: 380px; max-width: calc(100vw - 32px); padding: 6px; }
.repo-pop .rp-body { display: grid; gap: 1px; max-height: min(460px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding-top: 4px; }
.repo-pop .rp-label { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 8px 10px 4px; }
.repo-pop .rp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 9px; border: 0; background: transparent;
  text-align: left; color: var(--ink); cursor: pointer; }
.repo-pop .rp-row:hover, .repo-pop .rp-row:focus-visible { background: var(--press); outline: none; }
.repo-pop .rp-row .i { flex: none; color: var(--muted); }
.repo-pop .rp-text { display: grid; min-width: 0; }
.repo-pop .rp-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo-pop .rp-sub { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.repo-pop .rp-empty { padding: 12px 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.repo-pop .rp-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 4px 4px; margin-top: 6px; border-top: 1px solid var(--hairline); }
.repo-pop .rp-actions.one { grid-template-columns: minmax(0, 1fr); border-top: 0; }
.repo-pop .rp-act { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink); font-size: 12.5px; cursor: pointer; }
.repo-pop .rp-actions.one .rp-act { flex-direction: row; justify-content: center; }
.repo-pop .rp-act .i { color: var(--muted); }
.repo-pop .rp-act:hover { background: var(--press); }
.repo-pop .rp-none { justify-self: center; margin: 4px 0 2px; padding: 4px 8px; border: 0; background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer; border-radius: 6px; }
.repo-pop .rp-none:hover { color: var(--ink); }
.repo-pop .rp-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; border-radius: 8px; }
.repo-pop .rp-back:hover { color: var(--ink); background: var(--press); }
/* the strip's end (notes 6 and 20): two controls as one small group, and in the app a clear gap and a hairline before
   the window's own buttons, so the two rows of controls never read as one */
.panel-tabs .panel-ends { display: inline-flex; align-items: center; gap: 2px; flex: none; }
html.in-app .panel-tabs, html.in-app #app.no-panel .topbar { padding-right: 148px; position: relative; }
html.in-app .panel-tabs::after, html.in-app #app.no-panel .topbar::after { content: ''; position: absolute; right: 136px; top: 50%;
  width: 1px; height: 18px; margin-top: -9px; background: var(--hairline); }
/* the picker's actions in a footer that never scrolls away; the list above it shorter, so the whole card fits */
.repo-pop .rp-body { max-height: min(340px, 44vh); }
.repo-pop .rp-foot { display: grid; gap: 2px; }
.repo-pop .rp-foot:empty { display: none; }
.repo-pop .rp-foot .rp-actions { margin-top: 4px; }

/* ---- Chat as a conversation with a friend (the owner's note 4, 2026-10-01: "complete bogus bots results ... it
   should look like something high-end, user friendly, top UI ... build better than that, just for chat mode").
   Everything here is the Chat surface's alone: Work stays the engineer's view. ---- */
.chat.friend { --friend: var(--signal); --friend-bubble: var(--signal); --friend-ink: var(--ink-invert);
  --bubble: color-mix(in srgb, var(--ink) 6.5%, var(--paper)); }
.chat.friend .friend-head { display: grid; justify-items: center; gap: 6px; padding: 28px 16px 10px; text-align: center; }
.chat.friend .friend-head .sigil-wrap { filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--friend) 30%, transparent)); }
.chat.friend .friend-head .fh-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.chat.friend .friend-head .fh-title { font-size: 13px; color: var(--muted); max-width: 46ch; }

/* the person's words: the friend's colour, on the right, the corner by the person tucked in */
.chat.friend .msg-user { background: var(--friend-bubble); color: var(--friend-ink); border: 0; box-shadow: none;
  border-radius: 22px 22px 6px 22px; padding: 10px 16px; max-width: 76%; margin: 10px 0 14px auto; }
.chat.friend .msg-user .text { color: inherit; }
.chat.friend .msg-user a { color: inherit; text-decoration: underline; }
.chat.friend .msg-user .fold-btn { color: inherit; opacity: .8; }

/* the friend's words: a soft bubble on the left, the corner by the friend tucked in; lists and cards breathe inside */
.chat.friend .turn .answer { width: fit-content; max-width: 86%; background: var(--bubble); color: var(--ink);
  border-radius: 22px 22px 22px 6px; padding: 12px 17px; margin: 6px 0 0; line-height: 1.55; }
.chat.friend .turn .answer > :first-child { margin-top: 0; }
.chat.friend .turn .answer > :last-child { margin-bottom: 0; }
.chat.friend .turn .answer ul, .chat.friend .turn .answer ol { padding-left: 20px; margin: 8px 0; }
.chat.friend .turn .answer li + li { margin-top: 4px; }
/* the bot's answer to what the person wrote while it worked: a bubble of its own, under their words */
.chat.friend .turn .answer.w-reply { margin-top: 6px; margin-bottom: 12px; }
.chat.friend .turn .w-sched.card, .chat.friend .turn .file-chips { margin-top: 10px; }

/* times and reactions wait for the pointer: the conversation reads as one */
.chat.friend .turn-foot { opacity: 0; transition: opacity .15s ease; }
.chat.friend .turn:hover .turn-foot, .chat.friend .turn:focus-within .turn-foot { opacity: 1; }
@media (hover: none) { .chat.friend .turn-foot { opacity: 1; } }

/* while it works: its face, breathing, and what it is doing in its own words, shimmering - no bubble and no dots (the
   owner, 2026-10-03: "why that dots coming rather than bot avatar"; note 53 before it: never two separate things) */
.chat.friend .bot-working { align-items: center; gap: 10px; padding: 8px 0 4px; }
.chat.friend .bot-working-text { flex-direction: row; align-items: center; width: fit-content; max-width: min(560px, 100%); padding: 0; background: none; }
.chat.friend .bot-doing { padding-left: 0; font-size: 14.5px; line-height: 1.45; white-space: normal; max-width: none; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* the composer: a soft pill; its send button the same ink as everywhere - a button is never the friend's colour (the
   owner, 2026-10-02: "change these from orange") */
.composer-wrap.friend { --friend: var(--signal); --friend-bubble: var(--signal); --friend-ink: var(--ink-invert); }
.composer-wrap.friend .composer { border-radius: 26px; }

/* ---- The machine's frame (the owner's note 38, 2026-10-02: "2 different screening sizes ... changing placements",
   pictures 31 and 32). One size and one place for both machines, in every state, from the first frame: under the
   pane's header an area, and in its middle the frame - the screen's own shape (both machines are 16:10), as large as
   the area allows - with a slot of its own under it for the line of what the bot is doing, there whether or not a
   line shows, so nothing moves when one comes or goes. Only the frame is the screen's dark bezel (one colour in every
   state, 2026-09-26); round it is the pane's own paper, so a tall pane shows a screen with room above and below it,
   never a black band (note 12). The live screen, the kept last picture and the starting card all fill the same frame. ---- */
.machine-head { min-height: 44px; box-sizing: border-box; flex: none; }
.machine-area { flex: 1; min-height: 0; container-type: size; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 14px 16px 10px; background: transparent; }
.machine-area > .machine-stage { flex: none; position: relative; overflow: hidden; border-radius: 10px;
  width: min(100cqw, calc((100cqh - 44px) * var(--screen-ratio, 1.6))); aspect-ratio: var(--screen-ratio, 1.6); height: auto; min-height: 0;
  box-shadow: 0 0 0 1px var(--hairline-strong), 0 14px 40px rgba(0, 0, 0, .16); }
/* the screen runs a pixel past the frame's right and bottom edges, clipped by its rounded corners: a frame of the screen's
   shape is a fraction of a pixel off whole pixels, and that fraction showed the dark bezel as a thin line (note 44) */
/* (an iframe is not stretched by its edges the way a box is: with its width left to "auto" it took its own 300 x 150 and
   the screen sat small in the frame's corner - 1.136.17; so its size is said outright) */
.machine-area > .machine-stage > iframe { position: absolute; top: 0; left: 0; width: calc(100% + 1px); height: calc(100% + 1px); }
.machine-area > .machine-stage.live::after { border-radius: 10px; }
.machine-area > .machine-stage .machine-note { max-width: min(440px, 86%); }
.machine-under { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.machine-cap-slot { flex: none; height: 34px; width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.machine-cap-slot .machine-caption { position: static; transform: none; max-width: 100%; }

/* the makers' own logos in the model list (note 40): on a quiet neutral tile, the same in every theme's ink */
.models-pop .ms-mark.logo, :root[data-theme="dark"] .models-pop .ms-mark.logo, :root[data-theme="obsidian"] .models-pop .ms-mark.logo {
  color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="obsidian"]) .models-pop .ms-mark.logo {
  color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-strong); } }
.models-pop .ms-mark.logo svg { width: 15px; height: 15px; display: block; }

/* the composer's + menu: its mark and its name on one line - no explanation, no box round the mark (the owner,
   2026-10-03: "no need to give explanation ... give best modern icons") */
.popover.attach-pop { width: min(248px, calc(100vw - 32px)); padding: 6px; }
.attach-pop .attach-opt { display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.attach-pop .attach-opt:hover, .attach-pop .attach-opt:focus-visible { background: var(--press); outline: none; }
.attach-pop .ao-mark { flex: none; display: grid; place-items: center; width: 20px; color: var(--ink); }
.attach-pop .ao-mark .i { width: 18px; height: 18px; stroke-width: 1.8; }
.attach-pop .ao-title { font-size: 14px; font-weight: 500; letter-spacing: -.005em; }

/* a chat's own last Windows picture (note 43): full brightness, its line at the foot of the frame, out of the work's way */
.machine-stage.kept { background: #141414; }
.machine-rest.kept { top: auto; bottom: 14px; transform: translateX(-50%); animation: none; }

/* a schedule opened from its card (note 45): marked for a moment where it is in the list */
.sched.focus { box-shadow: 0 0 0 2px var(--ink); animation: sched-focus 2.4s ease-out 1 forwards; }
@keyframes sched-focus { 0%, 60% { box-shadow: 0 0 0 2px var(--ink); } 100% { box-shadow: 0 0 0 1px var(--hairline-strong); } }
@media (prefers-reduced-motion: reduce) { .sched.focus { animation: none; } }

/* the spending cap as a card (the owner's note 48): what the chat has spent, the cap as a meter, amounts to pick, a
   field of one's own without spinners, Set and Remove, one plain line of what happens at the cap */
.popover.cap-pop { width: min(312px, calc(100vw - 32px)); padding: 14px; display: grid; gap: 12px; }
.cap-pop .cap-head { display: grid; gap: 3px; }
.cap-pop .cap-title { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.cap-pop .cap-spent { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cap-pop .cap-meter { display: grid; gap: 6px; }
.cap-pop .cap-track { height: 6px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; }
.cap-pop .cap-track i { display: block; height: 100%; border-radius: inherit; background: var(--success); transition: width .2s ease; }
.cap-pop .cap-meter.near .cap-track i { background: var(--warning); }
.cap-pop .cap-meter.over .cap-track i { background: var(--danger); }
.cap-pop .cap-of { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cap-pop .cap-amts { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 6px; }
.cap-pop .cap-amt { height: 32px; border-radius: 9px; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.cap-pop .cap-amt:hover { background: var(--press); }
.cap-pop .cap-amt.on { background: var(--send); border-color: var(--send); color: var(--send-ink); }
.cap-pop .cap-field { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--hairline-strong); background: var(--surface); cursor: text; }
.cap-pop .cap-field:focus-within { border-color: var(--ink-4, var(--muted)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }
.cap-pop .cap-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px;
  font-variant-numeric: tabular-nums; padding: 0; box-shadow: none; }
.cap-pop .cap-cur, .cap-pop .cap-unit { color: var(--muted); font-size: 14px; }
.cap-pop .cap-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cap-pop .cap-set { min-width: 96px; }
.cap-pop .cap-set:disabled { opacity: .4; cursor: default; }
.cap-pop .cap-remove { border: 0; background: transparent; color: var(--muted); padding-left: 0; }
.cap-pop .cap-remove:hover { color: var(--danger-ink); background: transparent; }
.cap-pop .cap-note { font-size: 12px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--hairline); padding-top: 10px; }

/* the composer's model button carries the chosen model's maker's own mark (the owner's note 46), small and without a tile */
.composer-bar .model-sel .ms-mark { flex: none; width: 16px; height: 16px; display: inline-grid; place-items: center; color: var(--ink);
  font: 600 10px/1 var(--sans, system-ui); border-radius: 4px; }
.composer-bar .model-sel .ms-mark.logo svg { width: 14px; height: 14px; display: block; }
.composer-bar .model-sel .ms-mark:not(.logo) { background: var(--surface-muted); }

/* code anywhere in the page in the page's own ink: the editor's webview sets `code` to ITS theme's preformat colour, so
   with the page dark and the editor light the answer's code was grey 59 on grey 36 - unreadable (2026-10-02) */
.answer code, .says code, .w-cmd code, .w-chip-body code, .file-chip code, .w-sched code { color: var(--ink); }
.answer code, .says code { background: var(--surface-muted); border: 1px solid var(--hairline); border-radius: 6px; padding: 1px 6px; }

/* a friend's waiting message (the owner's note 52): the person's own bubble, a little quieter, with a quiet line under it */
.chat .queued .bubble, .chat .queued .msg-user-text { opacity: .72; }
.chat .queued .queued-note { margin-top: 4px; font-size: 12px; color: var(--faint); text-align: right; }

/* the one thing the work needs from the person (the owner's note 58): a calm card in the page's own surface - no clay
   tint, no orange edge, no timer - who asks, the question, each option a full-width row, "Something else" a field */
.w-question.ask { margin: 12px 0; padding: 16px; max-width: 640px; border: 1px solid var(--hairline-strong); border-radius: 16px;
  background: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent); }
.w-question.ask .q-head { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .01em; }
.w-question.ask .q-head b { font-weight: 600; color: var(--muted); }
.w-question.ask .q-text { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.w-question.ask .q-options { display: grid; gap: 6px; }
.w-question.ask .q-option { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--hairline);
  border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer; }
.w-question.ask .q-option:hover:not(:disabled) { background: var(--press); border-color: var(--hairline-strong); }
.w-question.ask .q-option:disabled { opacity: .55; cursor: default; }
.w-question.ask .q-key { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--surface-muted); color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.w-question.ask .q-words { flex: 1; min-width: 0; padding-top: 1px; }
.w-question.ask .q-rec { flex: none; align-self: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px;
  color: var(--success-ink, var(--success)); background: var(--success-soft); }
.w-question.ask .q-option.other { color: var(--muted); }
.w-question.ask .q-field { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--hairline-strong);
  border-radius: 12px; background: var(--surface); }
.w-question.ask .q-field:focus-within { border-color: var(--ink-4, var(--muted)); }
.w-question.ask .q-field input { flex: 1; min-width: 0; padding: 6px 0; border: 0; outline: 0; box-shadow: none; background: transparent;
  color: var(--ink); font: inherit; font-size: 14px; }
.w-question.ask .q-send { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--send); color: var(--send-ink); cursor: pointer; }
.w-question.ask .q-send:disabled { opacity: .5; cursor: default; }

/* -- what a step found, as a card: places on a map, and where the person is (2026-10-02) ----------------------------
   The whole list and a place's facts open in one overlay: a drawer on a wide screen, a sheet from the bottom on a narrow
   one; the page's own surfaces and ink in both themes. */
.pw-sheet-back { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; pointer-events: auto; background: rgba(10, 10, 12, .30); animation: fade .12s; }
:root[data-theme="dark"] .pw-sheet-back { background: rgba(0, 0, 0, .55); }
.pw-sheet { width: min(560px, 94vw); height: 100%; display: flex; flex-direction: column; background: var(--paper); border-left: 1px solid var(--hairline-strong); box-shadow: var(--shadow-lg); animation: pw-in .16s ease-out; }
@keyframes pw-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes pw-up { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.pw-grab { display: none; }
.pw-sheet-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.pw-sheet-head h3 { margin: 0; text-align: center; font: 600 15px/1.3 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-round { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.pw-round:hover { background: var(--surface-muted); }
.pw-sheet-body { flex: 1; overflow: auto; padding: 4px 18px 28px; display: grid; gap: 16px; align-content: start; }
@media (max-width: 720px) {
  .pw-sheet-back { align-items: flex-end; justify-content: stretch; }
  .pw-sheet { width: 100%; height: 88vh; border-left: 0; border-top: 1px solid var(--hairline-strong); border-radius: 22px 22px 0 0; animation-name: pw-up; }
  .pw-grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--hairline-strong); margin: 8px auto 0; }
}
.pw-sec { display: grid; gap: 8px; min-width: 0; }
.pw-label { font: 500 12.5px/1.3 var(--sans); color: var(--muted); }
.pw-copy { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0; }
.pw-copy:hover { color: var(--ink); background: var(--surface-muted); }
.pw-dim { color: var(--muted); font-size: 13px; }
.pw-pad { padding: 6px 2px; }
/* cards: what a step found, drawn under the words that asked for it */
.pw-card { margin: 6px 0 12px; max-width: 680px; border: 1px solid var(--hairline-strong); border-radius: 16px; background: var(--surface); overflow: hidden; }
.pw-card-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; font: 500 14px/1.3 var(--sans); color: var(--ink); border-bottom: 1px solid var(--hairline); }
.pw-source { color: var(--muted); font-size: 12px; }
.pw-map { position: relative; height: 240px; background: var(--surface-muted); z-index: 0; }
.pw-map.small { height: 190px; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.pw-map.none { display: none; }
.pw-map .leaflet-control-attribution { font-size: 10px; background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--muted); }
.pw-map .leaflet-control-attribution a { color: var(--muted); }
.pw-open.yes { color: var(--success-ink, var(--success)); }
.pw-open.no { color: var(--danger-ink, var(--danger)); }
.pw-plist { display: grid; gap: 4px; }
.pw-prow { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--hairline); background: transparent; text-align: left; color: var(--ink); cursor: pointer; }
.pw-prow.on, .pw-prow:hover { background: var(--surface-muted); }
.pw-rank { font: 600 13px/1 var(--sans); color: var(--muted); text-align: center; }
.pw-thumb { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; }
.pw-prow-t { display: grid; gap: 3px; min-width: 0; }
.pw-prow-t b { font: 600 14.5px/1.3 var(--sans); }
.pw-prow-t span, .pw-prow-t small { color: var(--muted); font-size: 12.5px; }
.pw-place { display: grid; gap: 10px; }
.pw-hero { width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--radius-md); }
.pw-place-t { display: grid; gap: 4px; }
.pw-place-t b { font: 600 18px/1.3 var(--sans); color: var(--ink); }
.pw-place-t span { color: var(--muted); font-size: 13.5px; }
.pw-fact { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink); }
.pw-fact > .i { color: var(--muted); }
.pw-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px 14px; }
.pw-sheet .pw-actions { padding: 6px 0 0; }
.pw-actions .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pw-ask { margin: 12px 14px 0; color: var(--ink); font-size: 14px; line-height: 1.5; }
.pw-loc-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; }
.pw-loc-where { display: grid; gap: 2px; min-width: 0; }
.pw-loc-where b { color: var(--ink); font-weight: 600; }
.pw-loc-where small { color: var(--muted); font-size: 12.5px; }
/* pins: the place's rating on a white tag, as a map app pins it; the one looked at in ink */
.pw-pin-wrap, .pw-you-wrap { background: none; border: 0; }
.pw-pin { display: inline-flex; align-items: center; transform: translate(-50%, -50%); padding: 5px 8px; border-radius: 8px; background: #ffffff;
  color: #1f2328; border: 0; box-shadow: 0 1px 2px rgb(0 0 0 / .22), 0 6px 14px -6px rgb(0 0 0 / .35); font: 600 12.5px/1 var(--sans);
  white-space: nowrap; cursor: pointer; }
.pw-pin-wrap.on .pw-pin { background: #1f2328; color: #ffffff; }
/* MapLibre places a pin by its own anchor: no shift of ours on top of it */
.pw-pin-wrap.gl .pw-pin, .pw-you-wrap.gl .pw-you { transform: none; }
.pw-pin-wrap.gl, .pw-you-wrap.gl { cursor: pointer; }
.pw-map .maplibregl-ctrl-group { border: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.pw-map .maplibregl-ctrl-attrib { font-size: 10px; }

/* places, as a map app shows them (the owner, 2026-10-03: "see the difference between them vs us"): how many were found
   above, the map with each rating pinned, and over its right side the list - the search as its title, each place's
   picture, name, rating and reviews, kind, price or hours. A narrow card puts the list under the map. */
.pw-card.pw-places { container-type: inline-size; max-width: 780px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.pw-found { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 8px 2px; padding: 0; border: 0; background: none;
  color: var(--faint); font: 400 13.5px/1.3 var(--sans); cursor: pointer; }
.pw-found:hover { color: var(--ink); }
.pw-stage { position: relative; isolation: isolate; border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; background: var(--surface-muted); }
/* (isolate: the list's z-index stays inside the card - it drew over the New bot and New group dialogs, 2026-10-03) */
.pw-places .pw-map { height: 450px; }
.pw-panel { position: absolute; z-index: 500; top: 8px; right: 8px; bottom: 8px; width: 284px; overflow-y: auto; padding: 16px 6px 6px;
  border-radius: 12px; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 14px 34px -14px rgb(0 0 0 / .32);
  scrollbar-width: thin; }
.pw-panel-title { padding: 0 10px 12px; font: 500 21px/1.22 var(--sans); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.pw-panel .pw-prow { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px; border: 0; border-top: 1px solid var(--hairline);
  border-radius: 0; background: transparent; }
.pw-panel .pw-prow:hover, .pw-panel .pw-prow.on { background: var(--surface-muted); border-radius: 10px; border-top-color: transparent; }
.pw-panel .pw-prow:hover + .pw-prow, .pw-panel .pw-prow.on + .pw-prow { border-top-color: transparent; }
.pw-panel .pw-thumb { flex: none; width: 56px; height: 56px; border-radius: 9px; object-fit: cover; background: var(--surface-muted);
  display: grid; place-items: center; color: var(--muted); }
.pw-panel .pw-prow-t { gap: 2px; }
.pw-panel .pw-prow-t b { font: 500 14.5px/1.3 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-stars { color: var(--ink); font-weight: 500; }
.pw-panel .pw-prow-t small { font-size: 12.5px; line-height: 1.35; color: var(--faint); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.pw-places .leaflet-control-zoom { margin: 0 0 12px 12px; border: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
@container (max-width: 600px) {
  .pw-places .pw-map { height: 300px; }
  .pw-panel { position: static; width: auto; max-height: 380px; padding-top: 12px; border-radius: 0; border-top: 1px solid var(--hairline); box-shadow: none; }
}
.pw-you { display: inline-flex; align-items: center; gap: 8px; transform: translate(-9px, -9px); }
.pw-you i { width: 18px; height: 18px; border-radius: 999px; background: #2f7cf6; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47, 124, 246, .25); }
.pw-you b { padding: 4px 9px; border-radius: 999px; background: var(--paper); color: var(--ink); border: 1px solid var(--hairline-strong); font: 600 12px/1 var(--sans); white-space: nowrap; }
.pw-acc { fill: #2f7cf6; fill-opacity: .12; stroke: #2f7cf6; stroke-opacity: .5; stroke-width: 1; }

/* ---- Radium (the owner, 2026-10-02, five pictures): a purple-pink, never orange - orange is the bots' own (their
   faces, the person's bubbles in their chats). Radium is for the two places asked for: a switch that is on, and the
   chosen model in the picker. Everything else is ink (2026-10-03: "i dont [want] that radium purple in everywhere"):
   a chat waiting on the person, a question answered, the person's step on the bot's screen, the app's notes. ---- */

/* a switch that is on: radium, lit */
.toggle.on { background: var(--radium); box-shadow: 0 0 0 1px color-mix(in srgb, var(--radium-solid) 30%, transparent), 0 2px 10px -2px var(--radium-glow); }
.toggle { transition: background .18s ease, box-shadow .18s ease; }

/* the model picker's search: a rounded field in the card's head - no ring drawn round the words inside it */
.models-pop .ms-search { padding: 10px 10px 8px; border-bottom: 1px solid var(--hairline); }
.models-pop .ms-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 12px; border-radius: 11px;
  background: var(--surface-muted); border: 1px solid transparent; color: var(--faint); cursor: text;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.models-pop .ms-field:hover { border-color: var(--hairline-strong); }
.models-pop .ms-field:focus-within { background: var(--surface); border-color: color-mix(in srgb, var(--signal) 55%, var(--hairline-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 13%, transparent); color: var(--signal-ink); }
.models-pop .ms-field input, .models-pop .ms-field input:focus-visible { flex: 1; min-width: 0; border: 0; outline: 0; box-shadow: none;
  background: transparent; color: var(--ink); font: 14px/1.4 var(--sans); padding: 0; }
.models-pop .ms-clear { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: var(--press); color: var(--muted); flex: none; }
.models-pop .ms-clear:hover { color: var(--ink); }

/* the chosen model: a radium wash with a bar of radium at its edge, its tick radium */
.models-pop .ms-row.on { position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, #7c3aed 11%, transparent), color-mix(in srgb, #e8399a 7%, transparent)); }
.models-pop .ms-row.on::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--radium); }
.models-pop .ms-row.on .i, .models-pop .ms-opt.on .i { color: var(--radium-solid); }
.models-pop .ms-opt.on { background: color-mix(in srgb, var(--radium-solid) 8%, transparent); color: var(--ink); }

/* a chat waiting on the person: a small pill in its head, one dot in the list - no "needs you" */
.state-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap; }
.state-pill.waiting { color: var(--signal-ink); background: var(--signal-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 22%, transparent); }
/* in the pill's own row: the step rows' .dot (absolute, centred on its row) took it out to the sidebar's edge (2026-10-04) */
.state-pill .dot { position: static; transform: none; display: inline-block; flex: none; border: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 0 transparent;
  animation: waiting-breath 2.4s ease-in-out infinite; }
/* a bot that needs the person: an ink dot on its face's corner, ringed in the page so it reads on any face (was amber) */
.sigil .badge { fill: var(--ink); stroke: var(--paper); stroke-width: 1.6; }
@keyframes waiting-breath { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 14%, transparent); } }
.needs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin-right: 6px;
  vertical-align: middle; }
.chat-row .last.needs { color: var(--signal-ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .state-pill .dot { animation: none; } }

/* a question answered: the bot's bubble with an ink tick on its corner, the person's answer in their own bubble */
.qa { display: grid; gap: 4px; margin: 10px 0 14px; }
.qa-ask { position: relative; width: fit-content; max-width: min(86%, 560px); padding: 11px 16px; border-radius: 22px 22px 22px 6px;
  background: var(--bubble, var(--surface-muted)); color: var(--ink); font-size: 15px; line-height: 1.5; }
.qa-ask .qa-kind { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 12px; font-weight: 500; color: var(--faint); }
.qa-ask .qa-words { display: block; }
.qa-ask .qa-mark { position: absolute; right: -7px; bottom: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; background: var(--ink); color: var(--ink-invert); box-shadow: 0 0 0 3px var(--paper); }
.qa-ask .qa-mark .i { width: 12px; height: 12px; stroke-width: 2.6; }
.qa-you { justify-self: end; width: fit-content; max-width: 76%; margin-top: 6px; padding: 9px 16px; border-radius: 22px 22px 6px 22px;
  background: var(--friend-bubble, var(--surface-muted)); color: var(--friend-ink, var(--ink)); font-size: 15px; line-height: 1.45; }
.qa-none { padding: 2px 6px; font-size: 12.5px; color: var(--faint); }

/* the person's step on the bot's screen: what to do, that the bot cannot see it, Done / I can't / the screen */
.your-turn { position: relative; width: min(560px, 100%); margin: 10px 0 14px; padding: 16px 18px 16px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--hairline-strong);
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 28px -14px rgb(0 0 0 / .18); overflow: hidden; }
.your-turn::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ink); }
.your-turn .yt-head { display: flex; align-items: center; gap: 12px; }
.your-turn .yt-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: var(--ink); color: var(--ink-invert); }
.your-turn .yt-mark .i { width: 18px; height: 18px; }
.your-turn .yt-titles { display: grid; gap: 1px; min-width: 0; }
.your-turn .yt-titles b { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.your-turn .yt-titles span { font-size: 12.5px; color: var(--faint); }
.your-turn .yt-text { margin: 12px 0 8px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.your-turn .yt-note { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); }
.your-turn .yt-note .i { flex: none; width: 13px; height: 13px; color: var(--faint); }
.your-turn .yt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.your-turn .yt-actions button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 999px;
  font: 500 13.5px/1 var(--sans); cursor: pointer; transition: transform .12s ease, filter .15s ease, background .15s ease, border-color .15s ease; }
.your-turn .yt-done { border: 0; color: var(--send-ink); background: var(--send); }
.your-turn .yt-done:hover { filter: brightness(1.07); }
.your-turn .yt-cant { border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); }
.your-turn .yt-cant:hover { background: var(--press); }
.your-turn .yt-show { margin-left: auto; border: 0; background: transparent; color: var(--signal-ink); padding: 0 6px; }
.your-turn .yt-show:hover { text-decoration: underline; }
.your-turn .yt-actions button:active { transform: scale(.97); }
.your-turn .yt-actions button:disabled { opacity: .55; cursor: default; transform: none; }
@media (max-width: 520px) { .your-turn .yt-show { margin-left: 0; } }

/* what the person said while the bot worked: their own bubble in the chat's colour, "Seen" under it once it was read */
.chat.friend .w-person { margin: 10px 0 14px; }
.chat.friend .w-person .bubble { background: var(--friend-bubble); color: var(--friend-ink); border-radius: 22px 22px 6px 22px;
  padding: 10px 16px; max-width: 76%; font-size: 15px; line-height: 1.45; box-shadow: none; border: 0; }
.w-person .seen { display: inline-flex; align-items: center; gap: 4px; }
.w-person .seen .i { width: 12px; height: 12px; stroke-width: 2.4; }
.w-person.read .seen { color: var(--signal-ink); }

/* the app's words to the person: a light card at the top of the window, a small ink mark, in and out */
#toasts { top: 58px; bottom: auto; align-items: center; gap: 8px; }
.toast { display: inline-flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px)); padding: 9px 15px 9px 10px;
  border-radius: 12px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); font-size: 13.5px; line-height: 1.35;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 12px 32px -12px rgb(0 0 0 / .22); animation: toast-in .22s cubic-bezier(.2, .8, .2, 1); }
.toast .toast-mark { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--signal-soft); }
.toast .toast-mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.toast.error, :root[data-theme] .toast.error { background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 12px 32px -12px rgb(0 0 0 / .22); }
.toast.error .toast-mark { background: var(--danger); color: #fff; }
.toast.error .toast-mark .i { width: 11px; height: 11px; stroke-width: 2.6; }
.toast.leaving { animation: toast-out .2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.leaving { animation: none; } }

/* the stop button while the turn stops: a ring turning round it */
.composer-bar .send.stopping { position: relative; opacity: 1; cursor: default; }
.composer-bar .send.stopping::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent;
  border-top-color: var(--signal); border-right-color: color-mix(in srgb, var(--signal) 45%, transparent); animation: spin .8s linear infinite; }

/* A step's mark, at the size of its words and in ink: at 12 px in the faint grey it could not be seen (the owner,
   2026-10-03: "symbols are not at all visible") */
svg.i.w-glyph { width: 15px; height: 15px; stroke-width: 1.85; color: var(--muted); margin-right: 2px; }


/* -- Voice (app.js "Voice"; docs/voice.md) ---------------------------------------------------------------------------
   The app's own question before the microphone is ever opened, the mic while it dictates, and voice mode's bar where
   the box was: the bot's face moving with the voice, what is being said, mute and End. Ink throughout. */
.perm-veil { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 16px;
  background: rgb(10 10 10 / .32); backdrop-filter: blur(3px); animation: perm-in .14s ease-out; }
.perm-card { width: min(400px, 100%); box-sizing: border-box; padding: 24px 24px 18px; border-radius: 18px; background: var(--surface);
  box-shadow: var(--shadow-lg); color: var(--ink); }
.perm-card .perm-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--press); margin-bottom: 14px; }
.perm-card .perm-mark .i { width: 22px; height: 22px; stroke-width: 1.8; }
.perm-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.perm-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.perm-card .perm-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.perm-card .perm-acts .btn { min-width: 88px; height: 36px; border-radius: 10px; font-size: 14px; }
@keyframes perm-in { from { opacity: 0; } to { opacity: 1; } }

.composer-bar .icon-btn.mic.on { background: var(--ink); color: var(--surface); }
.composer-bar .icon-btn.mic.on.hearing { animation: mic-hear 1s ease-in-out infinite; }
@keyframes mic-hear { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 14%, transparent); } }

.composer.talking { padding: 0; }
.talk-bar { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; min-height: 64px; box-sizing: border-box; --lvl: 0; }
.talk-bar .tb-face { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.talk-bar .tb-face .sigil-wrap { position: relative; z-index: 1; }
.talk-bar .tb-ring { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 9%, transparent);
  transform: scale(calc(.82 + var(--lvl) * .5)); transition: transform 70ms linear; }
.talk-bar.thinking .tb-ring, .talk-bar.working .tb-ring { animation: tb-breathe 1.6s ease-in-out infinite; transition: none; }
.talk-bar.muted .tb-ring { transform: scale(.82); background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
@keyframes tb-breathe { 0%, 100% { transform: scale(.86); } 50% { transform: scale(1.06); } }
.talk-bar .tb-words { flex: 1; min-width: 0; }
.talk-bar .tb-state { font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.talk-bar .tb-caption { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink); overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.talk-bar .tb-caption.dim { color: var(--faint); }
.talk-bar .tb-btn { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0;
  background: transparent; color: var(--ink); cursor: pointer; }
.talk-bar .tb-btn:hover { background: var(--press); }
.talk-bar .tb-btn.on { background: var(--ink); color: var(--surface); }
.talk-bar .tb-end { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px 0 13px; flex: none; border: 0; border-radius: 19px;
  background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 500; cursor: pointer; }
.talk-bar .tb-end:hover { opacity: .88; }
.talk-bar button:focus-visible, .perm-card .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* -- A video the bot made: it plays where it was made (app.js videoCard) ---------------------------------------------- */
.video-card { margin: 12px 0 4px; max-width: 560px; }
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #0b0b0b; object-fit: contain; }
.video-card figcaption { margin-top: 6px; max-width: 360px; }
.models-pop .ms-row.video .ms-vmark { display: grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--ink); }
.models-pop .ms-row .ms-price { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.models-pop .ms-note { margin-top: 12px; font-size: 12.5px; color: var(--faint); }
/* the model list as a tree: a branch for each kind of model, a section for each maker within it */
.models-pop .ms-branches { display: flex; gap: 4px; padding: 10px 10px 2px; }
.models-pop .ms-branch { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 15px;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.models-pop .ms-branch:hover { background: var(--press); color: var(--ink); }
.models-pop .ms-branch.on { background: var(--ink); color: var(--surface); }
.models-pop .ms-hint { margin: 8px 12px 2px; font-size: 12.5px; color: var(--muted); }

/* the video branch's pane: the maker's mark beside the name, the price large, a usual clip's cost, what it makes */
.models-pop .vs-head { display: flex; align-items: center; gap: 10px; }
.models-pop .vs-head .ms-mark { width: 30px; height: 30px; flex: none; }
.models-pop .vs-price { margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
.models-pop .vs-price b { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.models-pop .vs-clips { display: flex; gap: 6px; margin-bottom: 12px; }
.models-pop .vs-clip { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--press); }
.models-pop .vs-clip span { font-size: 11.5px; color: var(--faint); }
.models-pop .vs-clip b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.models-pop .vs-actions { margin: 0 0 12px; }
.models-pop .vs-chosen { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--ink); }
.models-pop .vs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.models-pop .vs-chip { padding: 3px 9px; border-radius: 999px; background: var(--press); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.models-pop .vs-about { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }



/* -- the conversation lines up with the composer (2026-10-04) ---------------------------------------------------------
   The scroll area keeps its 10px gutter on both sides, so what is centred in it is centred in the window as the composer
   is, and its inner box is the composer's box at every width (the composer's 828 less both gutters; its 24px of padding
   less a gutter). In Work the reading column sits in the middle of it - polish.css's `.turn { margin: 0 0 34px }` had
   pinned it 51px left of the composer's middle; in a chat the bot's bubbles start at the composer's left edge and the
   person's end at its right edge (they ended 66px short of it). */
.chat { scrollbar-gutter: stable both-edges; }
.chat-inner { max-width: 808px; padding-left: 14px; padding-right: 14px; }
.chat:not(.friend) .turn { margin-left: auto; margin-right: auto; }
.chat.friend .turn, .chat.friend .user-turn { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
/* a long settings tab grew a scrollbar and the whole page moved 5px sideways between tabs: the gutter is kept */
.page { scrollbar-gutter: stable; }
/* a card's head button keeps its words on one line ("Add / provider" wrapped in two) */
.card > .head > .btn { white-space: nowrap; flex: none; }
.seats-field { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--muted); font-size: 13px; }
/* the plans' blurbs keep two lines' room, so every card's price sits on one line across (Pro+'s two-line blurb was 39px
   against a 36px floor: its price and list sat 4px low); the lead never leaves one word on its last line ("low.") */
.plan-card .blurb { line-height: 1.5; min-height: 3em; }
.pricing-head p { text-wrap: pretty; }
/* a checkbox's hint reads under its own words (the page's centred .hint, 18px down, floated it off to the right) */
label.field.check .hint { text-align: left; margin-top: 2px; }

/* -- Work's steps, calm (2026-10-04, beside Codex's working view) -------------------------------------------------------
   Every step keeps its own row, in order, the command as typed (the owner, 2026-10-03) - drawn as a line, not a box:
   its icon, what it did, its time, and the chevron when the pointer is on it. The step at work reads in the present
   tense and shimmers, with no spinner. Narration, steps, thoughts and the answer share one left edge. */
.chat:not(.friend) .w-chip { margin: 1px 0; }
.chat:not(.friend) .w-chip-head { border: 0; background: transparent; padding: 4px 6px 4px 2px; border-radius: 8px; gap: 6px;
  font-size: 13.5px; color: var(--muted); }
.chat:not(.friend) .w-chip-head:hover { background: var(--press); color: var(--ink); }
.chat:not(.friend) .w-chip-head .label { color: var(--muted); }
.chat:not(.friend) .w-chip-head:hover .label, .chat:not(.friend) .w-chip.open > .w-chip-head .label { color: var(--ink); }
.chat:not(.friend) .w-chip-head .chev { opacity: 0; transition: opacity .12s, transform .15s; }
.chat:not(.friend) .w-chip-head:hover .chev, .chat:not(.friend) .w-chip.open > .w-chip-head .chev { opacity: .75; }
.chat:not(.friend) .w-chip.running .w-spin { display: none; }
.chat:not(.friend) .w-chip.running > .w-chip-head .label { background: linear-gradient(90deg, var(--faint) 0%, var(--ink) 45%, var(--faint) 90%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .chat:not(.friend) .w-chip.running > .w-chip-head .label { animation: none; background: none; color: var(--ink); } }
body.reduced-motion .chat:not(.friend) .w-chip.running > .w-chip-head .label { animation: none; background: none; color: var(--ink); }
.chat:not(.friend) .turn > .answer { padding-left: 2px; padding-right: 0; }
.chat:not(.friend) .w-status { gap: 6px; padding: 4px 2px; }
.chat:not(.friend) .w-thought-head .chev, .chat:not(.friend) .w-read-head .chev { opacity: 0; transition: opacity .12s, transform .15s; }
.chat:not(.friend) .w-thought-head:hover .chev, .chat:not(.friend) .w-thought.open > .w-thought-head .chev,
.chat:not(.friend) .w-read-head:hover .chev, .chat:not(.friend) .w-read.open > .w-read-head .chev { opacity: .75; }

/* -- Work's turn as a story (2026-10-05; the owner, the best agent tools' working views beside ours: "I need a brief
   after something ran") ---------------------------------------------------------------------------------------------
   The turn's clock on a line of its own over the work, a hairline under it; what the agent says in ink; each stretch
   of steps between its words ONE quiet line - "Read 3 files, ran 2 commands" - its chevron beside the words when the
   pointer is on it, opened to every step; and the one live line under it all, the step at work in the present tense. */
.w-clockline { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 2px 2px 10px; margin: 0 0 8px;
  font-size: 13px; color: var(--faint); border-bottom: 1px solid var(--hairline); border-radius: 0; letter-spacing: .012em; }
.w-clockline .secs { font-variant-numeric: tabular-nums; }
button.w-clockline:hover { color: var(--ink); }
.work .w-clockline .chev { margin-left: 0; opacity: 0; transition: opacity .12s, transform .15s; }
.work button.w-clockline:hover .chev, .work.shut > .w-clockline .chev { opacity: .75; }
.work:not(.shut) > .w-clockline .chev { transform: rotate(90deg); }
.work.shut > :not(.w-clockline) { display: none; }
.work.shut > .w-clockline { border-bottom-color: transparent; padding-bottom: 2px; margin-bottom: 2px; }
.chat:not(.friend) .w-group { margin: 1px 0; }
.chat:not(.friend) .w-group-head { gap: 6px; }
.chat:not(.friend) .w-group-head .w-group-text { color: var(--muted); }
.chat:not(.friend) .w-group-head:hover .w-group-text, .chat:not(.friend) .w-group.open > .w-group-head .w-group-text { color: var(--ink); }
.chat:not(.friend) .w-group-head .chev { margin-left: 0; opacity: 0; transition: opacity .12s, transform .15s; }
.chat:not(.friend) .w-group-head:hover .chev, .chat:not(.friend) .w-group.open > .w-group-head .chev { opacity: .75; }
.w-group-head .w-peek { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-group-head .meta { flex: none; color: var(--faint); font-size: 12px; font-family: var(--mono); white-space: nowrap; }
.w-group-head .w-counts { flex: none; }
.w-group-head .w-tag { margin-left: 4px; flex: none; }
.w-group.one > .w-group-body > .w-chip-body { display: block; margin-top: 2px; }
.w-group-body .shots { margin-left: 0; }
.w-loose { margin: 1px 0; }
.work > .w-said { margin: 10px 0 8px 2px; }
.work > .w-clockline + .w-said { margin-top: 4px; }
.w-live-think.now { padding-top: 8px; }