@font-face { font-family: "Symbols Nerd Font"; src: url("symbols.woff2") format("woff2"); font-display: block; }
:root {
  --bg: #111317;
  --panel: #171a1f;
  --raise: #1e2228;
  --line: #262b33;
  --fg: #e6e8ec;
  --muted: #8a919c;
  --accent: #5aa9ff;
  --working: #3fcf8e;
  --blocked: #ff5d5d;
  --idle: #6b7280;
  --warn: #e5b454;
  --claude: #e8915b;
  --gpt: #b392f0;
  /* The symbols font fills in prompt glyphs (powerline, Nerd Font icons) the phone lacks. */
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, "Symbols Nerd Font", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Symbols Nerd Font", sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

.screen { display: flex; flex-direction: column; height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
.bar { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { font-weight: 650; letter-spacing: .02em; }
/* The desktop brand doubles as the sidebar's minimize button: the word and « share one grid cell, so the
   box keeps the word's size. On hover or keyboard focus the letters fold away to the left, last one first,
   and « slides in after them, its leading chevron first; leaving plays it back in reverse. The rail's
   expand button (.expand) runs it backwards: » rests there and, hovered, shoots off to the right while
   "tern" unfolds from the left, first letter first. */
.brand-toggle { display: inline-grid; padding: 0; border: 0; background: none; font-size: inherit; line-height: inherit; }
.brand-toggle > * { grid-area: 1 / 1; }
.brand-text > span { display: inline-block; transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .16s; transition-delay: calc(90ms + var(--i) * 30ms); }
.brand-arrow { width: 20px; height: 20px; align-self: center; justify-self: center; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.brand-arrow path { opacity: 0; transform: translateX(6px); transition: transform .22s cubic-bezier(.3,1.5,.5,1), opacity .15s; }
.brand-arrow path + path { transition-delay: 40ms; }
.brand-toggle:is(:hover, :focus-visible) .brand-text > span { opacity: 0; transform: translateX(-.7em) scaleX(.4); transition-delay: calc((3 - var(--i)) * 30ms); }
.brand-toggle:is(:hover, :focus-visible) .brand-arrow path { opacity: 1; transform: none; transition-delay: 110ms; }
.brand-toggle:is(:hover, :focus-visible) .brand-arrow path + path { transition-delay: 160ms; }
.brand-toggle.expand .brand-text > span { opacity: 0; transform: translateX(-.7em) scaleX(.4); transition-delay: calc((3 - var(--i)) * 30ms); }
.brand-toggle.expand .brand-arrow path { opacity: 1; transform: none; transition-delay: 160ms; }
.brand-toggle.expand .brand-arrow path + path { transition-delay: 110ms; }
.brand-toggle.expand:is(:hover, :focus-visible) .brand-text > span { opacity: 1; transform: none; transition-delay: calc(90ms + var(--i) * 30ms); }
.brand-toggle.expand:is(:hover, :focus-visible) .brand-arrow path { opacity: 0; transform: translateX(6px); transition-delay: 40ms; }
.brand-toggle.expand:is(:hover, :focus-visible) .brand-arrow path + path { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .brand-text > span, .brand-arrow path { transition: opacity .12s; transition-delay: 0s !important; transform: none !important; }
}
/* A subagent's prompt (written by its parent agent) renders as Markdown inside the prompt rail. */
.msg.user.sub-prompt { white-space: normal; }
.sub-prompt .user-text { flex: 1; }
.sub-prompt .md > :first-child { margin-top: 0; }
.sub-prompt .md > :last-child { margin-bottom: 0; }
.bar .net { flex: none; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.net { width: 7px; height: 7px; border-radius: 50%; }
.net.on { background: var(--working); }
.net.off { background: var(--blocked); }
.counts { display: flex; gap: 10px; font-size: 13px; }
.c-working { color: var(--working); }
.c-blocked { color: var(--blocked); font-weight: 600; }
/* Header counts: the rows' status dot, smaller and still, then the number. */
.count { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.count .dot { width: 8px; height: 8px; animation: none; }

.search { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.search input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; outline: none; }
.search input:focus { border-color: var(--accent); }

.list { flex: 1; overflow-y: auto; padding-bottom: 24px; }
section h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 14px 6px; font-size: 13px; font-weight: 650; }
.ghost { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; color: var(--muted); font-size: 13px; }
.ghost:active { background: var(--raise); }

.row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-left: 3px solid transparent; }
.row:active { background: var(--raise); }
.row.st-working { background: color-mix(in srgb, var(--working) 7%, transparent); border-left-color: var(--working); }
.row.st-blocked { background: color-mix(in srgb, var(--blocked) 10%, transparent); border-left-color: var(--blocked); }
.row.stale { opacity: .5; }
.row-main { flex: 1; min-width: 0; }
.row-title { display: flex; gap: 7px; align-items: baseline; min-width: 0; }
.nf { font-family: "Symbols Nerd Font"; font-size: 15px; color: var(--muted); flex: none; width: 1.1em; text-align: center; }
.st-working .nf { color: var(--working); }
.st-blocked .nf { color: var(--blocked); }
/* Unseen updates, as Tern colors a tab's icon: finished green, waiting on you red. */
.unseen-done .nf { color: var(--working); }
.unseen-blocked .nf { color: var(--blocked); }
.unseen-done .title, .unseen-blocked .title { font-weight: 600; }
.nf.pi { font-family: ui-serif, Georgia, serif; font-weight: 700; font-size: 16px; }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); flex: none; }
.title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; padding-left: calc(1.1em + 7px); }
.row-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; }
.age { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; align-self: flex-start; padding-top: 2px; }
.age-hot { color: var(--working); }

.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--idle); }
.dot-working { background: var(--working); border-color: var(--working); animation: pulse 1.6s ease-out infinite; }
.dot-blocked { background: var(--blocked); border-color: var(--blocked); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.dot-untracked { background: var(--accent); border-color: var(--accent); }
.dot-shell { border-style: dashed; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--working) 60%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }

.session-bar { gap: 8px; }
.back { font-size: 28px; line-height: 1; padding: 0 8px 4px 0; color: var(--accent); }
.session-title { flex: 1; min-width: 0; }
.session-title .title { font-weight: 600; }
.raw-note { align-self: center; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--raise); color: var(--muted); font-size: 12px; }
.keys button.on { color: var(--fg); border-color: var(--accent); }

/* Rhythm: tight inside a turn, air before each prompt (below), a closing footer per turn. */
.scroll { flex: 1; overflow-y: auto; padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; line-height: 1.5; }
/* The chat's ↑/↓ prompt jumps float over its bottom right corner. */
.scroll-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.turn-jump { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.turn-jump button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--raise); color: var(--muted); box-shadow: 0 2px 10px rgb(0 0 0 / .35); }
.turn-jump svg { width: 18px; height: 18px; }
.turn-jump button:hover, .turn-jump button:active { color: var(--fg); }
/* Swiping sideways to the next session or subagent: the screen follows the finger over the
   neighbour's name, which waits at the edge it comes in from; the count sits over the header. */
.swipe { position: relative; overflow: clip; height: 100dvh; }
/* No z-index: a stacking context here would put the sidebar over the image view on the desktop. DOM order paints it over the peek. */
.swipe-page { position: relative; height: 100%; background: var(--bg); }
.swipe-peek { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 18px; background: var(--panel); }
.swipe-peek.to-next { justify-content: flex-end; text-align: right; }
.swipe-label { max-width: 60%; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.swipe-peek.to-next .swipe-label :is(.row-title, .row-meta) { justify-content: flex-end; }
/* The wheel: every sibling in the gap the screen leaves (62% of the width, WHEEL_SHARE in swipe.tsx),
   the highlighted one framed at mid-height, ▲/▼ at the edges where a held finger keeps stepping. */
.swipe-wheel { position: absolute; top: 0; bottom: 0; width: 62%; text-align: left; overflow: hidden; }
.swipe-peek.to-next .swipe-wheel { right: 0; }
.swipe-peek.to-prev .swipe-wheel { left: 0; }
.swipe-wheel-list { position: absolute; top: 50%; left: 0; right: 0; transition: transform .12s ease-out; }
.swipe-wheel-row { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 0 14px; }
.swipe-wheel-row .row-title { justify-content: flex-start; }
/* The open session: lifting on it cancels. A rail, since a suffix would vanish in the title's ellipsis. */
.swipe-wheel-row.here { box-shadow: inset 3px 0 var(--muted); }
.swipe-wheel-frame { position: absolute; top: 50%; left: 6px; right: 6px; border: 2px solid var(--accent); border-radius: 10px; pointer-events: none; }
.swipe-edge { position: absolute; left: 0; right: 0; display: grid; place-items: center; height: 64px; color: var(--muted); font-size: 13px; }
.swipe-edge.up { top: 0; }
.swipe-edge.down { bottom: 0; }
.swipe-edge.on { color: var(--accent); }
.swipe-count { position: absolute; top: calc(6px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); color: var(--muted); font-size: 12px; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .swipe-in-next { animation: swipe-in-next .18s ease-out; }
  .swipe-in-prev { animation: swipe-in-prev .18s ease-out; }
}
@keyframes swipe-in-next { from { transform: translateX(30%); opacity: .5; } }
@keyframes swipe-in-prev { from { transform: translateX(-30%); opacity: .5; } }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }
.msg { max-width: 100%; overflow-wrap: anywhere; }
/* Tern-style prompt: full width, accent rail and chevron, no bubble. */
.msg.user { display: flex; gap: 8px; margin-top: 22px; padding: 8px 12px 8px 10px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.msg.user:first-child, .welcome + .msg.user { margin-top: 0; }
.msg.user + * { margin-top: 4px; }
.user-mark { color: var(--accent); font-weight: 700; flex: none; }
.user-text { min-width: 0; }
/* omp's per-prompt actions, over the prompt's right end: on hover, or after a tap on touch screens. */
.msg.user { position: relative; }
.user-acts, .reply-acts { position: absolute; display: none; gap: 2px; align-items: center; padding: 2px 4px 2px 8px; border-radius: 7px; background: var(--raise); border: 1px solid var(--line); font: 12px var(--mono); white-space: nowrap; }
.user-acts { top: 4px; right: 6px; }
.user-acts button, .reply-acts button { border: 0; background: none; color: var(--muted); font: inherit; padding: 3px 7px; border-radius: 5px; }
.user-acts button:hover, .reply-acts button:hover { color: var(--fg); background: var(--panel); }
.msg.user.acts-open .user-acts { display: flex; }
@media (hover: hover) { .msg.user:hover .user-acts { display: flex; } }
/* A reply's Copy, the same way, over its bottom right end. */
.reply { position: relative; }
.reply-acts { bottom: -6px; right: 0; padding-left: 4px; }
.reply.acts-open .reply-acts { display: flex; }
@media (hover: hover) { .reply:hover .reply-acts { display: flex; } }
.turn { font: 11px var(--mono); color: var(--muted); opacity: .55; text-align: right; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
/* omp's idle recap, as the terminal prints it: ※ and italic, under the turn it sums up. */
.chat-recap { display: flex; gap: 8px; align-items: baseline; margin: -2px 0 12px; color: var(--muted); font-style: italic; font-size: 14px; }
.chat-recap-mark { flex: none; font-style: normal; color: var(--accent); opacity: .8; }
.chat-recap .md { min-width: 0; }
.chat-recap .md p { margin: 0; }
/* omp's cache-miss marker: a quiet mono line over the reply that resent its prompt. */
.cache-miss { display: flex; gap: 6px; align-items: center; margin: 2px 0 8px; font: 12px var(--mono); color: var(--muted); }
.cache-miss svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; }
/* Body text a step below white so bold reads as emphasis; hyphenation follows each message's lang. */
.msg.md { font-size: 14.5px; line-height: 1.62; color: #cfd3da; hyphens: auto; -webkit-hyphens: auto; }
.md strong, .md b { color: var(--fg); font-weight: 600; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .7em; }
.md ul, .md ol { margin: .4em 0 .7em; padding-left: 1.3em; }
.md li + li { margin-top: .25em; }
.md code { font: 12.5px var(--mono); background: color-mix(in srgb, var(--raise) 70%, transparent); color: #d8dce3; padding: 1px 4px; border-radius: 4px; hyphens: none; }
/* Code blocks as cards; fenced ones show their language in the corner. */
.md pre { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-x: auto; }
.md pre[data-lang] { padding-top: 22px; }
.md pre[data-lang]::before { content: attr(data-lang); position: absolute; top: 5px; left: 12px; font: 10.5px var(--mono); color: var(--muted); }
.md pre code { background: none; padding: 0; color: inherit; }
/* Copy on each code block and quote (Markdown in chat.tsx). The label is CSS, so a copied quote
   doesn't carry it; the code card holds the button still while its code scrolls sideways. */
.block-copy { border: 0; border-radius: 5px; background: none; color: var(--muted); font: 10.5px var(--mono); padding: 3px 7px; }
.block-copy::after { content: "Copy"; }
.block-copy.copied::after { content: "Copied"; }
.block-copy:hover, .block-copy:active { color: var(--fg); background: var(--raise); }
.code-card { position: relative; margin: 1em 0; }
.code-card > pre { margin: 0; padding-top: 22px; }
.code-card > .block-copy { position: absolute; top: 2px; right: 3px; }
.md blockquote > .block-copy { float: right; margin: 0 0 2px 8px; }
/* Tables as cards: no inner grid, row rules, small caps header, faint zebra; wide ones scroll. */
.md table { border-collapse: separate; border-spacing: 0; display: block; width: max-content; max-width: 100%; overflow-x: auto; font-size: 13px; line-height: 1.4; margin: .5em 0 .8em; border: 1px solid var(--line); border-radius: 10px; hyphens: manual; }
.md th, .md td { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 7px 10px; min-width: 7ch; vertical-align: top; text-align: left; }
.md tr:last-child td { border-bottom: 0; }
.md th { background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.md tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--raise) 35%, transparent); }
.md a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* Stretchtext (omp's stretch.ts): a short form to tap open is plain accent text, dotted underline
   on hover only, unlike a real link; « after an opened long form closes it. */
.md a[href^="#stretch/open/"] { text-decoration: none; }
.md a[href^="#stretch/open/"]:hover { text-decoration: underline dotted; text-decoration-thickness: 1.5px; }
.md a[href^="#stretch/close/"] { text-decoration: none; padding: 0 3px; opacity: .75; }
/* ✦ asks the pane's model for more on a fully open stretch: bold, not underlined, a wide tap target. */
.md a[href^="#stretch/deepen/"] { text-decoration: none; font-weight: bold; padding: 0 4px; }
.md h1, .md h2, .md h3 { color: var(--fg); font-size: 15.5px; letter-spacing: .01em; margin: 1.1em 0 .35em; }

/* Faded text only: opacity on .tools itself would also fade its thumbnails and their full-screen view. */
.tools { font: 12px var(--mono); color: var(--muted); margin: -2px 0; }
.tools-head, .tools ul { opacity: .85; }
.tools-head { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.tools-last { overflow: hidden; text-overflow: ellipsis; opacity: .75; margin-left: 4px; }
.tools ul { list-style: none; margin: 6px 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.tool-name { color: var(--fg); }
.err { color: var(--blocked); }
.ask { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 14px; padding: 12px; background: var(--panel); display: flex; flex-direction: column; gap: 12px; }
.ask.sent { opacity: .7; }
.ask.done { border-color: var(--line); background: none; gap: 2px; padding: 8px 12px; font-size: 13px; }
.ask.done .ask-q { font-weight: 500; color: var(--muted); }
.ask-answer { white-space: pre-wrap; }
.ask-q { font-weight: 600; }
/* omp's form as the model wrote it: option labels become tap rows, inputs take the full width. */
.ask-form { border: 0; margin: 0; padding: 0; min-width: 0; }
.ask-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ask-body fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ask-body legend, .ask-body h1, .ask-body h2, .ask-body h3, .ask-body h4 { font-weight: 600; font-size: inherit; margin: 0 0 2px; padding: 0; }
.ask-body p, .ask-body ul, .ask-body ol, .ask-body pre { margin: 0; }
.ask-body pre { overflow-x: auto; font-size: 12.5px; }
.ask-body img, .ask-body svg { max-width: 100%; height: auto; }
.ask-body table { border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.ask-body th, .ask-body td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.ask-body label { display: flex; flex-direction: column; gap: 4px; }
.ask-body label:has(> input[type=radio], > input[type=checkbox]) { flex-direction: row; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--raise); }
.ask-body label:has(> input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--raise)); }
.ask-body input[type=radio], .ask-body input[type=checkbox] { flex: none; margin: 2px 0 0; accent-color: var(--accent); width: 16px; height: 16px; }
.ask-body input:not([type=radio], [type=checkbox]), .ask-body select, .ask-body textarea, .other-input { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; min-width: 0; }
.ask-body :is(input, select, textarea):focus-visible, .other-input:focus-visible { border-color: var(--accent); outline: none; }
.ask-form:disabled { opacity: .6; }
.primary { align-self: flex-end; padding: 8px 16px; border-radius: 10px; border: 0; background: var(--accent); color: #0b0d10; font-weight: 600; }
.primary:disabled { opacity: .45; }
.working { color: var(--working); font-size: 12px; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .4; } }
/* omp's working row: spinner, running time, and the current tool's intent swept by a highlight.
   An unfinished todo list adds its progress at the end, a chip leading to the list; the intent
   keeps what the chip leaves, so the row stays one line on a phone. */
.working-row { display: flex; gap: 7px; align-items: baseline; min-width: 0; font: 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.working-row .spinner { flex: none; width: 1em; color: var(--working); }
.working-row .spinner::before { content: "⠋"; animation: spin-frames .8s steps(1) infinite; }
.working-time { flex: none; font-variant-numeric: tabular-nums; }
.working-intent { --base: color-mix(in srgb, var(--fg) 55%, var(--muted)); --hint: #62b8dc; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, var(--base) 0 28%, var(--hint) 42% 58%, var(--base) 72% 100%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.6s linear infinite; }
.working-todo { flex: 0 1 auto; max-width: 55%; min-width: 0; display: flex; gap: 5px; align-items: baseline; margin: -2px 0; padding: 2px 7px; border: 0; border-radius: 6px; background: var(--raise); color: var(--muted); font: inherit; white-space: nowrap; }
.working-todo:hover, .working-todo:active { color: var(--fg); }
.working-todo-count { flex: none; color: var(--accent); font-variant-numeric: tabular-nums; }
.working-todo-task { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
@keyframes spin-frames { 0% { content: "⠋"; } 10% { content: "⠙"; } 20% { content: "⠹"; } 30% { content: "⠸"; } 40% { content: "⠼"; } 50% { content: "⠴"; } 60% { content: "⠦"; } 70% { content: "⠧"; } 80% { content: "⠇"; } 90% { content: "⠏"; } }
@keyframes shimmer { to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .working-row .spinner::before, .working-intent { animation: none; }
}
.term { margin: 0; font: 11.5px/1.35 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Syntax colors (highlight.js classes) for opened files and their fenced code. */
.hljs-comment, .hljs-quote { color: #7d8590; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-meta .hljs-keyword, .hljs-template-tag { color: #ff7b72; }
.hljs-string, .hljs-regexp, .hljs-meta .hljs-string, .hljs-addition { color: #a5d6ff; }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-variable.constant_ { color: #79c0ff; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #d2a8ff; }
.hljs-title.class_, .hljs-type, .hljs-built_in, .hljs-selector-class, .hljs-selector-id { color: #ffa657; }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-params, .hljs-variable, .hljs-template-variable { color: #79c0ff; }
.hljs-name, .hljs-tag, .hljs-selector-attr, .hljs-selector-pseudo { color: #7ee787; }
.hljs-meta, .hljs-link { color: #8b949e; }
.hljs-deletion { color: #ffa198; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

.composer-wrap { padding: 12px 10px 10px; background: var(--bg); }
.keys { display: flex; gap: 6px; padding: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
.keys button { flex: none; min-width: 42px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--raise); font: 13px var(--mono); }
.keys button:active { background: var(--line); }
.error { background: var(--blocked); color: #fff; font-size: 13px; padding: 6px 12px; border-radius: 8px; margin-bottom: 6px; }
/* t3code-style card: text on top, pickers and actions in the footer. */
.composer { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 -4px 18px rgb(0 0 0 / .25); }
.composer:focus-within { border-color: color-mix(in srgb, var(--fg) 22%, var(--line)); }
.composer textarea { resize: none; max-height: 180px; min-height: 44px; padding: 13px 16px 4px; border: 0; background: none; color: var(--fg); font: inherit; outline: none; }
.composer textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.composer-foot { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px 8px; }
.pick { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--fg); font-size: 14px; opacity: .85; }
.pick:active { background: var(--raise); }
.pick-sub { color: var(--muted); padding-left: 8px; border-left: 1px solid var(--line); }
.caret { width: 12px; height: 12px; color: var(--muted); }
.sync { width: 6px; height: 6px; border-radius: 50%; background: var(--working); opacity: .8; margin-left: 2px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.on { color: var(--fg); background: var(--raise); }
.send { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: #2f5fd0; color: #fff; transition: background .15s, opacity .15s; }
.send svg { width: 18px; height: 18px; }
.send.idle { background: var(--raise); color: var(--muted); }
/* The image button's menu on phones: two rows above the button; a tap anywhere else closes it. */
.image-btn { position: relative; }
.menu-scrim { position: fixed; inset: 0; z-index: 10; }
.image-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 11; display: flex; flex-direction: column; min-width: 200px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 28px rgb(0 0 0 / .45); }
.image-menu .sheet-row { color: var(--fg); font-size: 15px; white-space: nowrap; }
.image-menu .sheet-row:active { background: var(--raise); }
.send:disabled { opacity: .5; }

.sheet-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .5); display: flex; align-items: flex-end; z-index: 10; }
.sheet { width: 100%; background: var(--panel); border-radius: 16px 16px 0 0; padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px 10px; font-weight: 600; }
.sheet-note { padding: 0 10px 8px; }
.sheet-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 10px; border: 0; border-radius: 10px; background: none; text-align: left; }
.sheet-row.on { background: var(--raise); }
.sheet-row.on .role { color: var(--accent); }
.role { font-weight: 600; }

.thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Like Tern: the whole image at its own aspect ratio, capped in height, never upscaled or cropped. */
.thumb { display: block; width: auto; height: auto; max-width: min(100%, 480px); max-height: 180px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: var(--raise); }
/* In a prompt the images come first, as Tern draws them, then the text. */
.user-text > .thumbs:first-child { margin: 0 0 8px; }
/* Opaque, in the app's own colour: a see-through backdrop let the chat show through the photo. */
.lightbox { position: fixed; inset: 0; z-index: 20; background: var(--bg); }
/* One image per page; touch swipes snap page by page, desktop pages with ‹ › and the arrow keys. */
.lightbox-strip { height: 100%; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.lightbox-strip::-webkit-scrollbar { display: none; }
.lightbox-page { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; padding: 12px; }
.lightbox-page img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 10px; background: var(--panel); color: var(--fg); font-size: 28px; opacity: .8; cursor: pointer; }
.lightbox-nav.prev { left: 10px; }
.lightbox-nav.next { right: 10px; }
.lightbox-nav:disabled { opacity: .25; cursor: default; }
.lightbox-count { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 13px; pointer-events: none; }
/* Touch screens swipe; the buttons would only cover the image. */
@media (hover: none) { .lightbox-nav { display: none; } }
.doc { font-size: 15px; }
.term pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; background: none !important; }
.sheet.tall { max-height: 82dvh; }
.sheet-filter { margin: 0 6px 6px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; outline: none; }
.sheet-list { overflow-y: auto; display: flex; flex-direction: column; }
/* The new-omp sheet's tabs, and its Closed rows: a tap on the text resumes, × dismisses. */
.sheet-head .seg { align-self: center; }
.closed-row { display: flex; align-items: flex-start; gap: 2px; }
.closed-main { flex: 1; min-width: 0; padding: 10px; border: 0; border-radius: 10px; background: none; color: var(--fg); font: inherit; text-align: left; }
.closed-main:active, .closed-main:hover { background: var(--raise); }
.closed-meta { font-size: 12px; }
.closed-project { color: var(--accent); }
.nf.agent-claude, .closed-meta .agent-claude { color: var(--claude); }
.nf.agent-codex, .closed-meta .agent-codex { color: var(--gpt); }
.closed-dismiss { flex: none; margin-top: 4px; font-size: 20px; }
.btw-history .sheet-list { min-height: 0; }
.btw-history .sheet-row { align-items: flex-start; }
.btw-history .sheet-row .role { min-width: 0; overflow-wrap: anywhere; }
.btw-history .sheet-row .small { flex: none; max-width: 40%; }
.btw-history-turn { padding: 10px; overflow-wrap: anywhere; }
.btw-history-turn + .btw-history-turn { border-top: 1px solid var(--line); }
.age-blocked { color: var(--blocked); font-weight: 600; }
.icon-btn.danger:hover, .icon-btn.danger:active { color: var(--blocked); background: color-mix(in srgb, var(--blocked) 14%, transparent); }
.session-bar .icon-btn:not(.danger):active { background: var(--raise); }
/* "+ omp": a plus and omp's π mark, borderless like the header icons. */
.new-omp { display: inline-grid; place-items: center; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--muted); }
.new-omp:active { background: var(--raise); color: var(--fg); }
.new-omp:disabled { opacity: .5; }
.new-omp .omp-logo { width: 25px; height: 12px; }
.group-head .new-omp { height: 26px; }
/* Hovered, π finishes its shaded foot and stomps it, and the stomp sets off a short wiggle. */
.omp-logo, .omp-foot { transform-box: fill-box; transform-origin: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .new-omp:hover:not(:disabled) { color: var(--fg); }
  .omp-play:hover:not(:disabled) .omp-foot { animation: omp-kick .45s ease-out forwards; }
  .omp-play:hover:not(:disabled) .omp-logo { animation: omp-wiggle .35s ease-in-out .3s; }
}
@media (prefers-reduced-motion: no-preference) {
  .omp-play.tap .omp-foot { animation: omp-kick .45s ease-out forwards; }
  .omp-play.tap .omp-logo { animation: omp-wiggle .35s ease-in-out .3s; }
}
@keyframes omp-kick { 0% { opacity: .4; } 45% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translateY(60%); } 100% { opacity: 1; transform: none; } }
@keyframes omp-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } }
/* omp's welcome mark at the head of an omp session's chat, as its pane shows it in Tern. */
.welcome { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 40px 0 12px; color: var(--fg); user-select: none; }
.welcome .omp-play { display: grid; }
.welcome .omp-logo { width: 54px; height: 45px; }
.welcome-name { font: 400 44px/1 var(--mono); letter-spacing: .01em; }
.row-sub.recap { font-style: italic; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; padding: 9px 16px; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); color: var(--fg); font-size: 14px; box-shadow: 0 4px 18px rgb(0 0 0 / .4); white-space: nowrap; }
/* The gauge lies on the straight part of the top border: the border itself is the unused part,
   the fill paints over it, and the labels cut it like a fieldset legend. */
.ctx { position: absolute; top: -0.5px; left: 18px; right: 18px; height: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.ctx-scale { position: relative; flex: 1; align-self: stretch; }
/* The used part in omp's grey, brightening toward its end; red past the window. */
.ctx-fill { position: absolute; left: 0; top: -1px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--fg) 22%, transparent), color-mix(in srgb, var(--fg) 62%, transparent)); transition: width .3s; }
.ctx-label { font: 11px/1 var(--mono); padding: 0 4px; font-variant-numeric: tabular-nums; background: linear-gradient(var(--bg) 50%, var(--panel) 50%); }
.ctx-pct { position: absolute; z-index: 1; top: 0; transform: translateY(-50%); margin-left: 2px; color: color-mix(in srgb, var(--fg) 70%, var(--muted)); transition: left .3s, color .25s ease-out; }
.ctx-window { color: var(--muted); }
.ctx-over .ctx-pct { color: var(--blocked); }
.ctx-over .ctx-fill { background: var(--blocked); }
/* Hovered or tapped, the used part lightens, as in omp: a brighter copy fades in over it
   (gradients don't transition themselves). */
.ctx-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .25s ease-out;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fg) 50%, transparent), var(--fg)); }
.ctx-over .ctx-fill::after { background: color-mix(in srgb, var(--blocked) 65%, var(--fg)); }
/* The remaining part is the composer's border; a lighter line fades in over it the same way. */
.ctx-scale::before { content: ""; position: absolute; left: 0; right: 0; top: -0.5px; height: 1px; opacity: 0; transition: opacity .25s ease-out; background: color-mix(in srgb, var(--fg) 28%, transparent); }
.ctx.tip-open .ctx-fill::after, .ctx.tip-open .ctx-scale::before { opacity: 1; }
.ctx.tip-open:not(.ctx-over) .ctx-pct { color: var(--fg); }
@media (hover: hover) {
  .ctx-hit:hover ~ .ctx-scale .ctx-fill::after, .ctx-hit:hover ~ .ctx-scale::before { opacity: 1; }
  .ctx:not(.ctx-over) .ctx-hit:hover ~ .ctx-scale .ctx-pct { color: var(--fg); }
}
.hints { display: flex; flex-direction: column; max-height: 38dvh; overflow-y: auto; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.hint { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.hint:last-child { border-bottom: 0; }
.hint:active { background: var(--raise); }
.hint-label { font: 13.5px var(--mono); color: var(--fg); }
.hint-desc { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Where auto-compaction fires: a fine, faint tick, as omp draws it. */
.ctx-mark { position: absolute; top: -1.5px; width: 1px; height: 3px; margin-left: -.5px; background: color-mix(in srgb, var(--fg) 40%, transparent); }
/* While the agent works, a soft glint runs along the gauge from its 0 point, as in omp. */
.ctx-glint { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.ctx-glint::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 22%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 55%, transparent), transparent); animation: ctx-glint 2.8s ease-in-out infinite; }
@keyframes ctx-glint { from { transform: translateX(-100%); } to { transform: translateX(455%); } }
@media (prefers-reduced-motion: reduce) { .ctx-glint { display: none; } }
/* The gauge's hover/tap target: a thin strip over the border (the gauge itself takes no pointer). */
.ctx-hit { position: absolute; left: 0; right: 0; top: -10px; height: 16px; padding: 0; border: 0; background: none; pointer-events: auto; cursor: default; }
/* Its details, as omp shows them: fade in after 600 ms of hover, or at once on a tap. */
.ctx-tip { position: absolute; bottom: 12px; z-index: 6; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--raise); box-shadow: 0 4px 16px rgb(0 0 0 / .4); color: var(--muted); font-size: 13px; line-height: 1.35; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility 0s .15s; }
.ctx-tip strong { color: var(--fg); font-weight: 600; }
.ctx.tip-open .ctx-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s, transform .15s; }
@media (hover: hover) {
  .ctx-hit:hover ~ .ctx-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s .6s, transform .15s .6s, visibility 0s .6s; }
}
.send.stop { background: var(--fg); color: var(--bg); }
.btw { margin-bottom: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: var(--panel); max-height: 40dvh; overflow-y: auto; font-size: 14px; }
.btw-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.btw-tag { font: 11px var(--mono); color: var(--accent); flex: none; }
.btw-q { flex: 1; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btw-x { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 2px; }
.btw.streaming .btw-tag { animation: blink 1.6s ease-in-out infinite; }
.voice { margin-bottom: 8px; padding: 8px 10px 10px 12px; border: 1px solid color-mix(in srgb, var(--working) 45%, var(--line)); border-radius: 12px; background: var(--panel); font-size: 14px; }
.voice-head { display: flex; gap: 8px; align-items: center; }
.voice-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--working); }
.voice-listening .voice-dot, .voice-connecting .voice-dot { animation: pulse 1.6s ease-out infinite; }
.voice-working .voice-dot { background: var(--accent); }
.voice-muted .voice-dot { background: var(--muted); }
.voice-error .voice-dot { background: var(--blocked); }
.voice-phase { font-weight: 600; }
.voice-elsewhere { color: var(--muted); font-size: 12px; }
.voice-end { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--blocked); color: #fff; }
.voice-end svg { width: 20px; height: 20px; }
.voice-line { margin-top: 4px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.voice-user { color: var(--fg); }
/* Pocket mode: pure black (OLED pixels off) over everything, touches kept from the page; the hint fades out. */
.pocket { position: fixed; inset: 0; z-index: 40; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; display: grid; place-items: center; }
.pocket-hint { color: #555; font-size: 14px; text-align: center; line-height: 1.6; opacity: 0; transition: opacity .6s; }
.pocket-hint.on { opacity: 1; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .voice-dot { animation: none !important; } }
.branch { font: 12px var(--mono); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* omp figures: svg blocks paint with these theme variables; mermaid brings its own dark theme. */
.figure { --border: var(--line); --surface: var(--raise); --success: var(--working); --warning: #e0a43a; --error: var(--blocked);
  --c1: #5aa9ff; --c2: #3fcf8e; --c3: #e0a43a; --c4: #b392f0; --c5: #ff7b72; --c6: #56d4dd;
  margin: .6em 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow-x: auto; color: var(--fg); }
.figure svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.figure.mermaid-src { min-height: 60px; }
.figure pre { margin: 0; border: 0; padding: 0; }
.advisor { font-size: 13px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 10px; padding: 8px 10px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); display: flex; flex-direction: column; gap: 6px; }
.advisor-head { display: flex; gap: 6px; align-items: baseline; font-weight: 600; color: var(--accent); }
.advisor-line { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.advisor-key { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.advisor-body p { margin: 4px 0; overflow-wrap: anywhere; }
/* A note without Key: its own text, folded to two lines. */
.advisor-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.advisor-text > * { margin: 0; }
.advisor-text > * + * { margin-top: 4px; }
.advisor-text.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.advisor-by { margin-top: -2px; }
/* Injected rules: quiet mono lines like Tern's, no card. */
.rule { font: 12px/1.5 var(--mono); color: var(--muted); opacity: .85; }
.rule-line, .rule-gist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-tag { color: color-mix(in srgb, #b5d16a 70%, var(--muted)); }
.rule-name { color: var(--fg); opacity: .8; }
.rule-body { margin: 2px 0 6px; overflow-wrap: anywhere; white-space: normal; }
.rule-body > :first-child { margin-top: 0; }
.sev { flex: none; font: 10.5px/1.6 var(--mono); text-transform: uppercase; padding: 0 5px; border-radius: 4px; background: var(--raise); color: var(--muted); }
.sev-blocker { background: color-mix(in srgb, var(--blocked) 22%, transparent); color: var(--blocked); }
.sev-concern { background: color-mix(in srgb, #e0a43a 22%, transparent); color: #e0a43a; }
.new-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); align-self: flex-start; margin-top: 6px; }
.new-blocked { background: var(--blocked); }

/* Desktop browsers (≥1000px): the list in a left sidebar, the session in a centered column.
   Phones never match this; everything above stays the mobile layout. */
@media (min-width: 1000px) {
  .desk { display: grid; grid-template-columns: 360px 1fr; height: 100dvh; }
  .desk-side { border-right: 1px solid var(--line); min-width: 0; overflow: hidden; }
  .desk-main { --reading-width: 1100px; min-width: 0; overflow: hidden; }
  .desk-empty { padding-top: 30vh; }
  .desk .session-bar .back { display: none; }
  /* A subagent screen's ‹ leads to its session, which the sidebar doesn't show. */
  .desk .sub-bar .back { display: block; }
  .desk-main .list .row { padding-inline: max(14px, calc((100% - var(--reading-width)) / 2)); }
  .desk .row { cursor: pointer; }
  .desk .row:hover { background: var(--raise); }
  .desk .row.selected { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-left-color: var(--accent); }
  /* One reading column for the transcript, the composer and the header text. */
  .desk-main .scroll { padding-inline: max(24px, calc((100% - var(--reading-width)) / 2)); }
  .desk-main .composer-wrap { padding-inline: max(16px, calc((100% - var(--reading-width) - 24px) / 2)); }
  .desk-main .session-bar { padding-inline: max(16px, calc((100% - var(--reading-width) - 24px) / 2)); }
  .desk-main .ext-session { margin-inline: max(12px, calc((100% - var(--reading-width)) / 2)); }
  /* The sidebar minimized to a rail (Ctrl+\): one icon per session, ringed in its status colour. */
  .desk.rail { grid-template-columns: 56px 1fr; }
  .rail-head .brand-toggle { flex: none; padding: 6px 2px; }
  .side-rail { align-items: center; padding-bottom: 8px; }
  .rail-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; width: 100%; border-bottom: 1px solid var(--line); background: var(--panel); }
  .rail-list { width: 100%; display: flex; flex-direction: column; align-items: center; scrollbar-width: none; padding-bottom: 8px; }
  .rail-group { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 4px; }
  .rail-group + .rail-group { border-top: 1px solid var(--line); }
  .rail-project { position: relative; border: 0; background: none; padding: 0 2px; color: var(--muted); font-size: 9.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
  .rail-project:hover { color: var(--fg); }
  .rail-project .group-hot { margin-left: 2px; color: var(--working); }
  .rail-item { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); background: var(--raise); }
  .rail-item:hover { border-color: var(--muted); }
  .rail-item.st-working { border-color: var(--working); }
  .rail-item.st-blocked { border-color: var(--blocked); background: color-mix(in srgb, var(--blocked) 15%, var(--raise)); }
  .rail-item.stale { opacity: .5; }
  /* The open session: an accent bar at the rail's left edge, as the full row's left border. */
  .rail-item.selected::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
  .rail-glyph { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--fg); }
  .rail-glyph.nf { width: auto; font-size: 16px; color: var(--fg); }
  .rail-item .new-dot { position: absolute; top: -2px; right: -2px; margin: 0; border: 2px solid var(--bg); width: 11px; height: 11px; }
  .rail-new { width: 36px; height: 36px; padding: 0; font-size: 18px; border-radius: 50%; }
}

/* Images pasted into the composer, waiting to be sent. */
.pasted { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 2px 6px; }
.pasted-item { position: relative; width: 64px; height: 64px; }
.pasted-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--raise); }
.pasted-item button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--raise); color: var(--fg); font-size: 13px; line-height: 1; padding: 0; }

/* Everything that reacts to a click shows the hand (desktop browsers); images zoom. */
a[href], button, label, summary, select, input[type="checkbox"], input[type="radio"], .advisor, .rule, .tools, .error, .raw-note { cursor: pointer; }
button:disabled { cursor: default; }
.thumb { cursor: zoom-in; }
.lightbox { cursor: zoom-out; }

/* A prompt omp holds until the running turn takes it, like Tern's steering band. */
.queued { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 13.5px; }
.queued-mark { color: var(--accent); flex: none; }
.queued-text { overflow-wrap: anywhere; white-space: pre-wrap; }

/* Charts under tables (web/charts.ts), like omp's in the terminal: a panel per measure, scaled on its own. */
.chart { --k0: #5aa9ff; --k1: #e8873a; --k2: #3fcf8e; --k3: #b392f0; --k4: #ff7b72; --k5: #56d4dd;
  margin: -.2em 0 .9em; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font: 11px/1.3 var(--mono); color: var(--muted); hyphens: manual; }
.chart-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.chart-title { color: var(--fg); font-weight: 600; font-size: 12.5px; }
.chart-title:empty { display: none; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 10px; }
.chart-key { display: inline-flex; align-items: center; gap: 5px; }
.chart-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.chart-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 18px; }
.chart-name { color: var(--fg); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-row { display: flex; align-items: center; gap: 5px; height: 15px; white-space: nowrap; }
.chart-bar { flex: none; min-width: 3px; height: 9px; border-radius: 3px; background: var(--k); }
.chart-val.best { color: var(--fg); font-weight: 600; }
.chart-best { color: var(--working); font-size: 10px; }
.k0 { --k: var(--k0); } .k1 { --k: var(--k1); } .k2 { --k: var(--k2); } .k3 { --k: var(--k3); } .k4 { --k: var(--k4); } .k5 { --k: var(--k5); }
.icon-btn.follow { font-size: 18px; line-height: 1; color: var(--accent); }

/* omp's todo list under the tool line that changed it. */
.todo { margin-top: 5px; padding: 6px 9px; border-left: 2px solid var(--line); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--raise) 45%, transparent); cursor: pointer; }
.todo-head { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.todo-count { color: var(--accent); }
.todo-count, .todo-head .todo-blocked { flex: none; white-space: nowrap; }
.todo-current { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-phase { margin-top: 6px; }
.todo-phase-name { color: var(--fg); font-weight: 600; margin-bottom: 2px; }
.todo-task { display: flex; gap: 7px; align-items: baseline; padding: 1px 0; white-space: normal; overflow-wrap: anywhere; }
.todo-mark { flex: none; width: 1em; text-align: center; }
.todo-task.st-completed { opacity: .6; }
.todo-task.st-completed .todo-mark { color: var(--working); }
.todo-task.st-in_progress { color: var(--fg); }
.todo-task.st-in_progress .todo-mark { color: var(--accent); }
.todo-task.st-blocked .todo-mark, .todo-blocked { color: var(--blocked); }
.todo-blocker { color: var(--muted); opacity: .8; }

/* Background jobs of a session: subagents and backgrounded shells. A running subagent opens its
   chat; "Subagents (N)" lists them all. */
.row-jobs { font: 11px var(--mono); color: var(--working); margin-top: 2px; padding-left: calc(12.5px * 1.1 + 7px); }
.jobs { display: flex; flex-direction: column; gap: 3px; font: 12px var(--mono); color: var(--muted); }
.job { display: flex; gap: 7px; align-items: baseline; min-width: 0; white-space: nowrap; }
.job-mark { flex: none; width: 1em; text-align: center; }
.job-agent .job-mark { color: var(--working); animation: blink 1.6s ease-in-out infinite; }
.job-name { color: var(--fg); flex: none; }
.job-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.job-age { margin-left: auto; flex: none; }
a.job, .subagents-link { margin: 0 -6px; padding: 2px 6px; border-radius: 6px; }
a.job:hover, .subagents-link:hover { background: var(--raise); }
.job-go { flex: none; color: var(--muted); }
.subagents-link { display: flex; gap: 7px; align-items: baseline; color: var(--accent); }
.subagents-link .job-go { margin-left: auto; }
.sub-mark { flex: none; color: var(--muted); }
.sub-parent { overflow: hidden; text-overflow: ellipsis; }

/* Project headers fold their sessions away; the choice is remembered per device. */
.group-head { cursor: pointer; user-select: none; }
.group-head .chev { color: var(--muted); width: 1em; flex: none; }
.group-hot { color: var(--working); font-weight: 500; font-size: 12px; }

/* The bell: slashed off, pulsing while it subscribes or checks, a green dot once the server has it,
   slashed red when Android took notifications away from the installed app. */
.icon-btn.push-pending { animation: blink 1.2s ease-in-out infinite; }
.icon-btn.push-pending:disabled { cursor: progress; }
.icon-btn.push-stopped { color: var(--blocked); }

.icon-btn { position: relative; }
/* Hide-old toggle: an eye; while hiding, a lit pill with the hidden count beside the eye. */
.icon-btn.hide-old { width: auto; min-width: 30px; padding: 0 7px; gap: 4px; grid-auto-flow: column; border-radius: 7px; }
.hidden-count { font-size: 13px; font-variant-numeric: tabular-nums; }
/* The list header's icons sized to its 13 px counts: 16 px glyphs in 30 px buttons. */
.list-bar .icon-btn { width: 30px; height: 30px; }
.list-bar .icon-btn.hide-old { width: auto; }
.list-bar .icon-btn svg { width: 16px; height: 16px; }

/* The extension doesn't match the server: a banner on the list, a notice under a session's header,
   a chip in the list header counting such sessions and a mark on their rows. */
.ext-note { margin: 10px 12px 2px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--warn) 8%, var(--panel)); font-size: 13px; line-height: 1.4; }
.ext-note p { margin: 0; }
.ext-session { margin: 8px 12px 0; }
.ext-cmd { display: flex; align-items: flex-start; gap: 8px; margin-top: 7px; }
/* Wraps rather than scrolls, so the whole command shows on a phone; one tap selects all of it. */
.ext-cmd code { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; padding: 6px 8px; border-radius: 6px; background: var(--bg); font: 12px/1.4 var(--mono); user-select: all; }
.ext-cmd button, .ext-reload { flex: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; background: var(--raise); color: var(--fg); font-size: 12.5px; }
.ext-reload { display: block; margin-top: 8px; border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); color: var(--warn); }
.ext-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); font-weight: 600; font-variant-numeric: tabular-nums; }
.ext-chip b { font: 700 11px/1 var(--mono); }
.ext-mark { flex: none; align-self: flex-start; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); font: 700 10px/1 var(--mono); }
.parked-mark { flex: none; align-self: flex-start; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 2px; border: 1.3px solid var(--muted); border-radius: 4px; color: var(--muted); font: 700 10px/1 var(--mono); }

/* Sheets: a bottom sheet on phones, capped in width and height everywhere so a desktop window
   gets a panel, not a full-width strip. */
.sheet { max-width: 560px; margin: 0 auto; max-height: 85dvh; }
@media (min-width: 1000px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 14px; max-height: 78vh; padding-bottom: 12px; box-shadow: 0 18px 60px rgb(0 0 0 / .45); border: 1px solid var(--line); }
}

/* The model picker. */
.mp .sheet-list { flex: 1; min-height: 0; overflow-y: auto; }
.mp-head { display: flex; align-items: baseline; gap: 8px; padding: 6px 6px 8px 10px; min-width: 0; }
.mp-head .icon-btn { font-size: 20px; align-self: center; }
.mp-title { font-weight: 600; white-space: nowrap; }
.mp-head .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.mp-opt { display: flex; align-items: center; gap: 10px; padding: 4px 10px; }
.mp-label { width: 58px; flex: none; color: var(--muted); font-size: 12px; }
.seg { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--raise); overflow-x: auto; scrollbar-width: none; }
.seg button { border: 0; background: none; color: var(--muted); font: 13px/1 inherit; padding: 7px 10px; border-radius: 7px; white-space: nowrap; }
.seg button.on { background: var(--panel); color: var(--fg); box-shadow: 0 0 0 1px var(--line); }
.mp .sheet-filter { margin-top: 8px; }
.mp-section { padding: 12px 10px 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.mp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--fg); text-align: left; }
.mp-row:hover { background: var(--raise); }
.mp-row.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mp-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-role { color: var(--accent); font-weight: 600; margin-right: 2px; }
.mp-facts { font: 11px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-check { color: var(--accent); flex: none; margin-left: auto; }
.mp-provider { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--fg); font: 13px var(--mono); text-align: left; }
.mp-provider:hover { background: var(--raise); }
.mp-provider .chev { color: var(--muted); width: 1em; }
.pick-tier { color: var(--working); }
/* Phones: the effort row shares the width evenly instead of scrolling. */
.mp-opt .seg { flex: 1; min-width: 0; max-width: 420px; }
.mp-opt .seg button { flex: 1 1 auto; padding: 7px 6px; font-size: 13px; }
@media (max-width: 480px) { .mp-label { width: 48px; } .mp-opt .seg button { font-size: 12.5px; padding: 7px 3px; } }

/* Files and notes have no run state: keep the dot's space for alignment, drop the ring. */
.doc-row .dot { visibility: hidden; }
/* An opened document reads as a page: real heading sizes, a rule under the top levels. */
.doc h1 { font-size: 22px; margin: .3em 0 .5em; }
.doc h2 { font-size: 18px; margin-top: 1.5em; padding-bottom: .25em; border-bottom: 1px solid var(--line); }
.doc h3 { font-size: 16px; }
.doc h1 + p, .doc h2 + p { margin-top: .4em; }