/* Pocket Code — warm ink workbench (see DESIGN.md) */
* { box-sizing: border-box; margin: 0; }
:root {
  --bg: #131110; --surface: #1D1A18; --raised: #272322; --line: #2E2A27;
  --text: #EDE7E0; --dim: #A99E93; --faint: #aa9c91;
  --clay: #D97757; --clay-deep: #3A241C; --ok: #7FB069; --err: #E87568; --warn: #D9A94E;
  --ice: #9FD4F0; /* 1.28.1: prompt cache gone cold */
  color-scheme: dark;
  --on-accent: #1A0F09; --on-warn: #1A0F09; --bubble-text: #F3E5DD;
  --accent-hover: color-mix(in srgb, var(--clay) 86%, white);
  --scrim: rgba(0,0,0,.55); --shadow-float: 0 6px 18px rgba(0,0,0,.45);
  --shadow-dialog: 0 24px 64px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
  --shadow-menu: 0 -6px 24px rgba(0,0,0,.4); --swatch-border: rgba(255,255,255,.25);
  --accent-orange: #D97757; --accent-blue: #709FF8; --accent-purple: #BEABFF;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
/* Light is warm paper, with darker accents and status colours for readable small text.
   Accent foregrounds and fills form pairs; a colour used for a link cannot blindly
   reuse the same button foreground in both modes. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FAF8F5; --surface: #F2EEE8; --raised: #E8E2DA; --line: #CFC5B9;
  --text: #28221E; --dim: #61564D; --faint: #695E55;
  --clay: #9B3F23; --clay-deep: #F4E3DA; --ok: #37622A; --err: #A52F26; --warn: #805B13; --ice: #1C6389;
  --on-accent: #FFFFFF; --on-warn: #FFFFFF; --bubble-text: #38281F;
  --accent-hover: color-mix(in srgb, var(--clay) 90%, black);
  --scrim: rgba(32,24,18,.3); --shadow-float: 0 6px 18px rgba(32,24,18,.16);
  --shadow-dialog: 0 24px 64px rgba(32,24,18,.18), 0 2px 10px rgba(32,24,18,.1);
  --shadow-menu: 0 -6px 24px rgba(32,24,18,.12); --swatch-border: rgba(0,0,0,.2);
  --accent-orange: #9B3F23; --accent-blue: #245CC0; --accent-purple: #6740AC;
}
:root[data-accent="blue"] { --clay: var(--accent-blue); --clay-deep: #15254A; }
:root[data-accent="purple"] { --clay: var(--accent-purple); --clay-deep: #2B203F; }
:root[data-theme="light"][data-accent="blue"] { --clay-deep: #DFE9FC; --bubble-text: #1D3155; }
:root[data-theme="light"][data-accent="purple"] { --clay-deep: #EBE2F7; --bubble-text: #37244F; }
html { height: 100%; overflow: hidden; }
body {
  height: var(--app-height, 100%); overflow: hidden; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
}
#app { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.split { flex: 1; display: flex; min-height: 0; min-width: 0; }
.chatcol { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chatcol > main.scroll { min-height: 0; }
.chatcol > .composerwrap { flex: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, .row:focus-visible {
  outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 6px;
}
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- header ---------- */
header.bar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--sat)) 14px 10px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  flex: none; min-height: 54px;
}
header.bar h1 { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; flex: 1; min-width: 0; }
header.bar h1 .one { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.bar .tag { font-size: 13px; color: var(--dim); font-weight: 400; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.bar button.icon { padding: 8px; margin: -8px -2px -8px -8px; color: var(--dim); }

/* ---------- ember (the one motion identity) ---------- */
.ember { width: 10px; height: 10px; border-radius: 50%; background: var(--clay); flex: none;
  animation: breathe 1.6s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(1); opacity: .55; } to { transform: scale(1.28); opacity: 1; } }
/* 1.64: the same ember in the dim ink and a slower breath means work is still running in the background
   (a job or a subagent) while the reply is done and the box is free. Clay keeps meaning a live turn. */
.ember.dim { background: var(--dim); animation-duration: 2.6s; }
@media (prefers-reduced-motion: reduce) { .ember { animation: none; } .enter { animation: none !important; } }
.enter { animation: rise .18s ease-out; }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- session list ---------- */
main.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.row {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 15px 16px; border-bottom: 1px solid var(--line);
}
.row:active { background: var(--raised); }
.row .body { flex: 1; min-width: 0; }
.row .title {
  font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row .meta { margin-top: 5px; font-size: 13.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta .proj { color: var(--dim); }
.row .ember { margin-top: 7px; }
.empty { padding: 48px 24px; text-align: center; color: var(--dim); font-size: 16px; }

.fab {
  position: fixed; right: 18px; bottom: calc(22px + var(--sab)); width: 58px; height: 58px;
  border-radius: 50%; background: var(--clay); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-float);
}
.fab svg.i { width: 26px; height: 26px; stroke-width: 2.1; }
.fab:active { transform: scale(.94); }
/* With side conversations open, the window's bottom-right corner belongs to a pane's composer:
   anchor the button to the main column instead so it never covers that pane's Send. */
body.has-panes #app { position: relative; }
body.has-panes .fab { position: absolute; }

/* ---------- chat ---------- */
.msgs { padding: 18px 16px calc(16px + var(--sab)); display: flex; flex-direction: column; gap: 18px; }
.m-user,.m-asst { font-size:var(--chat-text-size,17px); }
.m-user {
  align-self: flex-end; max-width: 85%;
  background: var(--clay-deep); color: var(--bubble-text);
  padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.m-asst { max-width: 100%; overflow-wrap: break-word; }
.m-user.pending, .m-files.pending { opacity: .72; }
.stale-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + var(--sab)); z-index: 60; max-width: min(92vw, 560px); padding: 10px 14px; border-radius: 12px; background: var(--clay); color: var(--on-accent); font-size: 14.5px; font-weight: 500; box-shadow: var(--shadow-float); text-align: left; }
.m-asst p { margin: 0 0 10px; } .m-asst p:last-child { margin-bottom: 0; }
.m-asst h2, .m-asst h3 { font-size: 17px; font-weight: 650; margin: 14px 0 6px; }
.m-asst ul, .m-asst ol { margin: 0 0 10px; padding-left: 22px; }
.m-asst li { margin: 3px 0; }
.m-asst a { color: var(--clay); text-decoration-thickness: 1px; }
.m-asst code, .ledger { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; }
.m-asst code { font-size: 14.5px; background: var(--raised); padding: 1px 5px; border-radius: 5px; }
.m-asst pre { background: var(--raised); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; overflow-x: auto; margin: 0 0 10px; }
.m-asst pre code { background: none; padding: 0; font-size: 13.5px; line-height: 1.5; display: block; }
.m-asst strong { font-weight: 650; }

.ledger { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--faint);
  padding: 1px 0; min-width: 0; }
.ledger svg.i { width: 14px; height: 14px; stroke-width: 1.6; color: var(--faint); }
.ledger .name { color: var(--dim); font-weight: 500; flex: none; }
.ledger .det { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledgerwrap { display: block; }
.ledgerwrap > summary { list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: center; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12.5px; color: var(--faint); padding: 2px 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledgerwrap > summary::-webkit-details-marker { display: none; }
.ledgerwrap > summary::before { content: '▸'; flex: none; }
.ledgerwrap[open] > summary::before { content: '▾'; }
.ledgerwrap > summary:hover { color: var(--dim); }
.ledgerwrap > summary .tc-count { flex: none; color: var(--dim); }
.ledgerwrap > summary .tc-last { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledgerwrap > summary .tc-last::before { content: '·'; margin: 0 6px 0 0; color: var(--faint); }
.ledgerlist { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 2px 14px; }
/* 1.59 plain steps: the step reads in the UI font ("Saved Proposal.pdf"); the raw call stays beside it in the ledger
   font when it adds something (a full path, a command). html.raw-steps (Settings > Describe steps in plain words off)
   brings back the pre-1.59 tool name and detail. */
.ledger.step .say { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: var(--dim); flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger.step .name { display: none; }
.ledger.step .det { font-size: 12px; color: var(--faint); min-width: 0; }
.ledger.step.same .det { display: none; }
html.raw-steps .ledger.step .say { display: none; }
html.raw-steps .ledger.step .name { display: inline; }
html.raw-steps .ledger.step.same .det { display: inline; }
html.raw-steps .ledger.step .det { font-size: inherit; color: inherit; }
html:not(.raw-steps) .ledgerwrap > summary { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; }
.ledgerwrap > summary .tc-raw { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12px; color: var(--faint); margin-left: 8px; }

/* Reply suggestions (1.11): your-side material (clay-deep, like your own messages) so a tap reads as "send this". */
.choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 2px; }
.choices[hidden] { display: none; }
.choice { min-height: 44px; max-width: 100%; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--clay);
  background: var(--clay-deep); color: var(--text); font-size: 15px; line-height: 1.35; text-align: left; overflow-wrap: anywhere; }
.choice:hover { background: var(--raised); }
/* The agent's recommended pick (1.17): the app's primary-action material (clay fill, ink text, like Send) with
   a small "Recommended" tag beneath the label, so the pick reads at a glance and is announced by name. */
.choice-rec { background: var(--clay); border-color: var(--clay); color: var(--on-accent); font-weight: 600;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding-top: 7px; padding-bottom: 7px; }
.choice-rec:hover { background: var(--accent-hover); }
.choice-rec .choice-tag { font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: var(--on-accent); opacity: .9; }
.choice-x { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; color: var(--dim); }
.choice-x:hover { color: var(--text); background: var(--raised); }
.choice:focus-visible, .choice-x:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.turn-err { color: var(--err); font-size: 14.5px; border: 1px solid var(--err); border-radius: 10px;
  padding: 10px 12px; overflow-wrap: break-word; }

/* ---------- copy affordances (touch text-selection is miserable) ---------- */
.codewrap { position: relative; }
.copybtn { position: absolute; top: 6px; right: 6px; padding: 6px; border-radius: 8px; color: var(--faint);
  background: var(--surface); border: 1px solid var(--line); opacity: .8; }
.copybtn svg.i { width: 15px; height: 15px; }
.copybtn:active { background: var(--raised); }
.copybtn.ok { color: var(--ok); border-color: var(--ok); opacity: 1; }
/* floated, not absolute — prose wraps around it instead of being overlapped */
.copybtn.msgcopy { position: static; float: right; margin: -2px -2px 4px 10px;
  background: none; border-color: transparent; opacity: .8; }
.copybtn.msgcopy.ok { opacity: 1; }

/* ---------- the plan, as a checklist (TodoWrite) ---------- */
details.todo { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
details.todo > summary { list-style: none; cursor: pointer; padding: 9px 12px; display: flex; gap: 8px;
  align-items: center; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12.5px;
  color: var(--dim); }
details.todo > summary .thead { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.todo > summary::-webkit-details-marker { display: none; }
details.todo > summary::before { content: '▸'; color: var(--faint); flex: none; }
details.todo[open] > summary::before { content: '▾'; }
details.todo ul { list-style: none; margin: 0; padding: 0 12px 11px; display: flex; flex-direction: column; gap: 7px; }
details.todo li { display: flex; gap: 9px; align-items: flex-start; margin: 0; font-size: 14.5px; color: var(--dim); }
details.todo .tbox { width: 16px; height: 16px; flex: none; margin-top: 3px; border: 1.5px solid var(--faint);
  border-radius: 5px; display: flex; align-items: center; justify-content: center; }
details.todo .tbox svg.i { width: 12px; height: 12px; stroke-width: 2.6; color: var(--ok); }
details.todo li.t-completed { color: var(--faint); }
details.todo li.t-completed .tbox { border-color: var(--ok); }
details.todo li.t-in_progress { color: var(--text); }
details.todo li.t-in_progress .tbox { border-color: var(--clay); background: var(--clay-deep); }

/* ---------- find in conversation ---------- */
.findbar { display: flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.findbar[hidden] { display: none; }
.findbar input { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.findbar input::placeholder { color: var(--faint); }
.findbar .fcount { flex: none; min-width: 46px; text-align: right; font-size: 12.5px; color: var(--faint);
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; }
.findbar button.icon { padding: 6px; color: var(--dim); }
mark.fmark { background: color-mix(in srgb, var(--clay) 28%, transparent); color: var(--text); border-radius: 3px; } /* 1.59: full text colour, so a match in dim snippet text still passes AA */
mark.fmark.cur { background: var(--clay); color: var(--on-accent); }

/* ---------- composer ---------- */
.composer {
  flex: none; display: flex; gap: 10px; align-items: flex-end;
  padding: 10px 12px calc(10px + var(--sab));
  background: var(--surface); border-top: 1px solid var(--line);
}
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--line); background: var(--bg); color: var(--text);
  border-radius: 14px; padding: 11px 14px; font: inherit; max-height: 40vh; min-height: 46px;
}
.composer textarea::placeholder { color: var(--faint); }
.composer textarea:placeholder-shown { white-space: nowrap; overflow: hidden; }
.composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer .send {
  width: 46px; height: 46px; border-radius: 50%; background: var(--clay); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.composer .send:disabled { background: var(--raised); color: var(--faint); }
.working { display: flex; align-items: center; gap: 10px; flex: 1; color: var(--dim);
  font-size: 15.5px; padding: 12px 4px; }

/* ---------- new session / login ---------- */
.pane { padding: 20px 16px calc(24px + var(--sab)); display: flex; flex-direction: column; gap: 22px; }
.pane .h { font-size: 13.5px; font-weight: 600; color: var(--dim); text-transform: uppercase;
  letter-spacing: .06em; display: block; margin-bottom: 8px; }
.projlist { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.projlist .row { padding: 13px 14px; gap: 10px; align-items: center; }
.projlist .row:last-child { border-bottom: 0; }
.projlist .row.sel { background: var(--raised); }
.projlist .workspace-locked { display: flex; cursor: default; } /* 1.55: a locked Pocket's one folder */
.projlist .workspace-locked .workspace-note { color: var(--dim); font-size: 13px; flex: none; }
.projlist .row .p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; }
.projlist .row .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--faint); flex: none; }
.projlist .row.sel .dot { border-color: var(--clay); background: radial-gradient(circle, var(--clay) 45%, transparent 50%); }
.pane input[type=text], .pane input[type=password], .pane textarea {
  width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 14px; padding: 13px 14px; font: inherit;
}
.pane textarea { min-height: 110px; resize: vertical; }
.primary {
  background: var(--clay); color: var(--on-accent); font-weight: 650; font-size: 17px;
  border-radius: 14px; padding: 15px; width: 100%;
}
.primary:disabled { background: var(--raised); color: var(--faint); }
.login { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 28px; gap: 18px; max-width: 420px; width: 100%; margin: 0 auto; }
.login h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.login .sub { color: var(--dim); margin-top: -8px; }
.login .err { color: var(--err); min-height: 26px; }

#toast { position: fixed; left: 50%; bottom: calc(90px + var(--sab)); transform: translateX(-50%) translateY(20px);
  background: var(--raised); border: 1px solid var(--line); color: var(--text); font-size: 15px;
  padding: 10px 18px; border-radius: 12px; opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out; max-width: 88vw; }
#toast.show { opacity: 1; transform: translateX(-50%); }


/* The message field and its buttons are one unit. A percentage flex-basis on the textarea
   (the old flex: 1 1 100%) let iOS push that row below the screen, leaving only the chips. */
.composer-entry { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; width: 100%; min-width: 0; }
.composer-entry textarea { flex: 1 1 auto; width: auto; min-width: 0; min-height: 46px; }
/* Narrow screens and narrow panes: the message box gets its own full-width row and the icons (settings,
   headset, mic, send; Steer now / After this turn while working) sit on a row beneath it, so the box is never squeezed. */
@media (max-width: 600px) {
  .composer-entry textarea { flex: 0 0 auto; width: 100%; order: -1; min-height: 46px; }
  .composer-entry .composer-actions, .composer-entry .send-mode, .composer-entry .voice-mic, .composer-entry .send { order: 0; }
  .composer-entry .composer-actions { margin-right: auto; }
  .composer-entry .send-mode { flex: 1 1 auto; min-width: 0; margin: 0; gap: 6px; }
  .composer-entry .send-mode button { flex: 0 1 auto; min-width: 0; padding: 8px 7px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* ---------- composer toolbar (attach / model / effort) ---------- */
.composer { flex-wrap: wrap; }
.toolbar { display: flex; gap: 8px; width: 100%; align-items: center; min-height: 30px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--bg);
}
.chip svg.i { width: 15px; height: 15px; stroke-width: 1.7; }
.chip.set { color: var(--clay); border-color: var(--clay-deep); }
.attachrow { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.afile {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text);
  background: var(--raised); border-radius: 8px; padding: 4px 6px 4px 10px; max-width: 70vw;
}
.afile .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afile button { display: flex; padding: 2px; color: var(--faint); }
.afile button svg.i { width: 14px; height: 14px; }
.send.stop { background: var(--raised); color: var(--err); }

/* attachment ledger under a user chip */
.m-files { align-self: flex-end; display: flex; flex-direction: column; gap: 3px; margin-top: -12px; }
.m-files .ledger { justify-content: flex-end; }

/* per-turn meta line */
.turnmeta { font-size: 12.5px; color: var(--faint); font-family: ui-monospace, Menlo, monospace; }

/* ---------- V3: search, bell, queue row, streaming, images ---------- */
.searchrow {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line); flex: none;
  color: var(--faint);
}
.searchrow input {
  flex: 1; background: none; border: 0; color: var(--text); font: inherit; font-size: 16px;
}
.searchrow input::placeholder { color: var(--faint); }
.searchrow svg.i { width: 18px; height: 18px; }
header.bar button.bell { margin: -8px -4px -8px 0; padding: 8px; color: var(--faint); }
header.bar button.bell.on { color: var(--clay); }
.workrow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  color: var(--dim); font-size: 14.5px; min-height: 34px;
}
.workrow span:nth-child(2) { flex: 1; }
.stopchip { color: var(--err); border-color: var(--err); gap: 5px; }
.m-asst.live { color: var(--dim); white-space: pre-wrap; overflow-wrap: break-word; }
.genimg { max-width: 100%; max-height: 55vh; border-radius: 10px; border: 1px solid var(--line);
  display: block; margin: 4px 0; }

/* ---------- bottom sheet ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--surface); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
  padding: 14px 10px calc(16px + var(--sab)); max-width: 560px; margin: 0 auto;
  animation: rise .18s ease-out;
}
.sheet h2 { font-size: 13.5px; font-weight: 600; color: var(--dim); text-transform: uppercase;
  letter-spacing: .06em; padding: 4px 14px 10px; }
.sheet .opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px; border-radius: 12px; font-size: 16.5px;
}
.sheet .opt .sub { font-size: 13.5px; color: var(--faint); display: block; margin-top: 2px; }
.sheet .sheet-name { font-size: 16px; font-weight: 500; color: var(--text); padding: 0 14px 12px; overflow-wrap: anywhere; }
.sheet .opt.sel { background: var(--raised); }
.sheet .opt .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--faint); flex: none; }
.sheet .opt.sel .dot { border-color: var(--clay); background: radial-gradient(circle, var(--clay) 45%, transparent 50%); }
.sheet a.opt, .sheet a.opt:visited { color: inherit; text-decoration: none; } /* a link row looks like every other row */
.sheet .opt .sub { overflow-wrap: anywhere; }
a.chip, a.chip:visited { text-decoration: none; }
/* 1.31: on a desktop a sheet is a dialog in the middle of the window, not a drawer rising from the bottom edge. */
@media (min-width: 900px) {
  .sheet { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(var(--sheet-w, 560px), calc(100vw - 48px)); max-width: none;
    max-height: calc(100dvh - 48px); border: 1px solid var(--line); border-radius: 16px; padding-bottom: 16px; box-shadow: var(--shadow-dialog); animation: dialog .16s ease-out; }
  .sheet.results-sheet { --sheet-w: 760px; }
  @keyframes dialog { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
}

/* ---------- slash suggestions ---------- */
.slash {
  position: absolute; left: 10px; right: 10px; bottom: 100%; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  max-height: 42vh; overflow-y: auto; box-shadow: var(--shadow-menu); z-index: 30;
}
.slash button { display: block; width: 100%; text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--line); }
.slash button:last-child { border-bottom: 0; }
.slash .cmd { font-family: ui-monospace, Menlo, monospace; font-size: 14.5px; color: var(--clay); }
.slash .d { font-size: 13px; color: var(--faint); display: block; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composerwrap { position: relative; }

/* ---------- V9: settings sheet (version / update check / toggles) ---------- */
.about { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 9px;
  border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.arow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 14px; color: var(--dim); }
.arow b { font-weight: 500; color: var(--text); font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.arow.ok b { color: var(--ok); }
.about .primary { margin-top: 4px; padding: 12px; font-size: 15px; }
.sheet .opt .dot.on { border-color: var(--clay); background: radial-gradient(circle, var(--clay) 45%, transparent 50%); }

/* ---------- V8: upload thumbnails + per-session mute + steering ---------- */
.athumb { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; flex: none;
  border: 1px solid var(--line); }
.athumb.big { width: auto; height: auto; max-width: 140px; max-height: 140px; display: block;
  border-radius: 10px; margin: 2px 0; }
.m-files a { display: block; }
.workrow button.wbell { padding: 6px; color: var(--faint); }
.workrow button.wbell.on { color: var(--clay); }

/* ---------- V7: changed-files view + full-transcript search ---------- */
.overlay { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; }
.overlay main.scroll { padding-bottom: var(--sab); }

details.chg { border-bottom: 1px solid var(--line); }
details.chg > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; gap: 10px;
  align-items: baseline; min-width: 0; }
details.chg > summary::-webkit-details-marker { display: none; }
details.chg > summary::before { content: '▸'; color: var(--faint); flex: none; }
details.chg[open] > summary::before { content: '▾'; }
details.chg .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 14px; color: var(--text); direction: rtl; text-align: left; }
details.chg .fmeta { flex: none; font-size: 12.5px; color: var(--faint); }
.diff { padding: 0 16px 14px; }
.diff .dhead { font-size: 12px; color: var(--faint); font-family: ui-monospace, Menlo, monospace; padding: 2px 0 6px; }
.diff pre { background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; overflow-x: auto; margin: 0;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.5; }
.diff pre span { display: block; white-space: pre; min-width: max-content; }
.diff .da { color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); }
.diff .dd { color: var(--err); background: color-mix(in srgb, var(--err) 9%, transparent); }
.diff .dx { color: var(--faint); }
.chgnote { padding: 14px 16px; font-size: 13px; color: var(--faint); }

.fmore { flex: none; background: var(--surface); border-bottom: 1px solid var(--line); }
.fmore[hidden] { display: none; }
.fmore button { display: block; width: 100%; text-align: left; padding: 9px 16px;
  font-size: 13.5px; color: var(--clay); }
.srlist .srow { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex;
  flex-direction: column; gap: 5px; }
.srlist .smeta { font-size: 12.5px; color: var(--faint); font-family: ui-monospace, Menlo, monospace; }
.srlist .stext { font-size: 14.5px; color: var(--dim); line-height: 1.55; overflow-wrap: break-word; }

/* wider screens (Fold open / tablet): keep chat readable, centered */
@media (min-width: 700px) {
  .msgs, .composer { max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto; }
  .pane { max-width: 860px; width: 100%; margin-inline: auto; }
  .composer { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* header buttons hidden on mobile, shown on desktop */
.desk { display: none !important; }
header.bar button#newchat { padding: 8px; margin: -8px -8px -8px 0; color: var(--dim); }

/* desktop: session rail beside the chat */
@media (min-width: 900px) {
  .split { flex: 1; display: flex; min-height: 0; }
  .desk { display: flex !important; }
  .rail { width: 320px; flex: none; background: var(--surface); overflow-y: auto; }
  .railgrip { width: 5px; flex: none; cursor: col-resize; background: var(--line); }
  .railgrip:hover, .railgrip:active { background: var(--clay-deep); }
  .railhead { display: flex; align-items: center; justify-content: space-between;
    font-size: 13.5px; font-weight: 600; color: var(--dim); text-transform: uppercase;
    letter-spacing: .06em; padding: 14px 10px 8px 16px; }
  .railhead button.icon { color: var(--dim); padding: 6px; margin: -6px 0; }
  .rail .row { padding: 12px 14px; }
  .rail .row .title { font-size: 14.5px; -webkit-line-clamp: 2; }
  .rail .row .meta { font-size: 12.5px; }
  .rail .row.cur { background: var(--raised); }
  .chatcol { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .chatcol header.bar button#back { display: none; }
  .chatcol .composerwrap { position: relative; }
}

/* ---------- V10 (v12 assets): pin + rename ---------- */
.row .pinmark .i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; color: var(--clay); opacity: .8; }
header.bar h1.tappable { cursor: pointer; }
.sheet input.rename {
  display: block; width: calc(100% - 28px); margin: 2px 14px 12px; padding: 12px 14px;
  font-size: 16.5px; color: var(--text); background: var(--raised);
  border: 1px solid var(--line); border-radius: 12px;
}
.sheet > .primary { display: block; width: calc(100% - 28px); margin: 0 14px; padding: 13px; font-size: 16px; }

/* provider tag: which agent owns this session. Ledger voice — mono, faint, small. */
.prov {
  font: 500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--clay); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 4px; margin-right: 7px;
}

/* settings sheet: what's new in this version */
.whatsnew { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.whatsnew .arow span { font-weight: 600; color: var(--text); }
.whatsnew ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.4; color: var(--dim); }

/* Session workspace: readable state, visible actions, shared phone/desktop list. */
/* The shared palette owns faint text in both modes. */
body { height: var(--app-height, 100dvh); } /* visual viewport wins, so the home indicator cannot cover the message box */
button:disabled { cursor: default; opacity: .55; }
.session-home { padding-bottom: calc(96px + var(--sab)); }
.session-home-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 18px 0; }
.session-home-head h2 { font-size: 24px; line-height: 1.3; font-weight: 650; }
.session-panel { min-width: 0; }
.session-summary { color: var(--dim); font-size: 14px; padding: 12px 18px; }
.session-search { display: flex; align-items: center; gap: 10px; margin: 0 18px 12px; padding: 0 12px; min-height: 46px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--dim); }
.session-search input { min-width: 0; width: 100%; padding: 11px 0; color: var(--text); background: none; border: 0; font: inherit; font-size: 16px; }
.session-search input::placeholder { color: var(--faint); }
.session-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 14px 14px; }
.session-filters button { display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--dim); }
.session-filters button[aria-pressed="true"] { color: var(--text); background: var(--clay-deep); }
.session-filters button span { font-size: 12px; font-variant-numeric: tabular-nums; }
.review-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 18px 4px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--dim); font-size: 14px; }
.review-bar span { min-width: 0; }
.review-bar .chip { flex: none; color: var(--text); }
.rail .review-bar { margin-inline: 12px; }
.session-group h2 { display: flex; gap: 10px; padding: 18px 18px 8px; font-size: 15px; font-weight: 650; }
.session-group h2 span { color: var(--dim); font-weight: 400; }
.session-item { position: relative; display: flex; align-items: flex-start; border-bottom: 1px solid var(--line); }
.session-item .row { min-width: 0; flex: 1; border: 0; padding: 12px 8px 14px 18px; }
.session-item .body { min-width: 0; }
.session-more { width: 44px; height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; margin: 7px 6px 0 0; border-radius: 10px; color: var(--dim); }
.session-more:hover, .session-item:hover { background: var(--surface); }
.session-item.cur { background: var(--raised); }
.session-item.pinned .row .title { color: var(--clay); }
.pin-divider { height: 2px; margin: 6px 18px; border-radius: 2px; background: var(--clay); opacity: .85; }
.rail .pin-divider { margin: 4px 14px; }
.session-status { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px; font-size: 13px; color: var(--dim); }
.state-running { color: var(--clay); }.state-failed { color: var(--err); }.state-finished { color: var(--ok); }
.state-observed { color: var(--text); }
.state-background { color: var(--text); }
.session-status .ember { width: 7px; height: 7px; margin: 0; }
.activity-detail { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--faint); }
.unread { color: var(--text); font-size: 12px; font-weight: 650; }
.session-warning { color: var(--err); margin: 0 18px 12px; font-size: 14px; }
.session-footnote { max-width: 72ch; color: var(--dim); font-size: 12px; line-height: 1.6; padding: 18px; }
.chat-statebar { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--dim); }
.session-switch { min-height: 44px; min-width: 44px; text-align: left; font-size: 13px; color: var(--clay); flex: 1; }
#chat-state { text-align: right; }
.connection-state { padding: 8px 16px; color: var(--err); font-size: 14px; background: var(--surface); }
.delivery-status { max-width: 720px; margin: 0 auto; padding: 8px 16px; font-size: 13px; color: var(--dim); }
.delivery-problem { color: var(--err); background: var(--surface); border-top: 1px solid var(--line); }
.delivery-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sheet-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--dim); }
.sheet h2 { padding-right: 60px; min-height: 36px; }
.sheet.session-switcher { max-height: 85dvh; padding-bottom: var(--sab); }
.session-switcher > h2 { margin-bottom: 0; }
.session-switcher .session-panel { overflow: auto; }
.skip-chat { position: absolute; left: -10000px; }
.skip-chat:focus { position: static; display: block; padding: 12px; color: var(--text); background: var(--clay-deep); }
.chip { min-height: 44px; }
.toolbar { flex-wrap: wrap; gap: 4px 8px; }
header.bar button.icon, header.bar button.bell { min-width: 44px; min-height: 44px; margin: 0; padding: 8px; }
header.bar { gap: 2px; padding-inline: 8px; }
.prov { font-size: 12px; }
.sheet { max-height: 85dvh; overflow-y: auto; }
@media (min-width: 700px) {
  .session-home { width: 100%; max-width: 960px; align-self: center; }
  .session-home-head { padding-top: 30px; }
}
@media (min-width: 900px) {
  .rail .session-summary { padding: 8px 14px; }
  .rail .session-search { margin-inline: 12px; }
  .rail .session-filters { padding-inline: 8px; gap: 0; }
  .rail .session-filters button { padding-inline: 9px; font-size: 13px; }
  .rail .session-group h2 { padding-inline: 14px; }
  .rail .session-item .row { padding-left: 14px; }
  .railhead button.icon { min-height: 44px; min-width: 44px; }
}

/* Reports read like documents, with wide data contained inside the message. */
.m-asst h1 { font-size: 1.529412em; line-height: 1.25; margin: 22px 0 12px; }
.m-asst h2 { font-size: 1.294118em; line-height: 1.3; margin: 20px 0 10px; }
.m-asst h3 { font-size: 1.117647em; line-height: 1.35; margin: 18px 0 8px; }
.m-asst h4,.m-asst h5,.m-asst h6 { font-size: 1em; margin: 16px 0 8px; }
.m-asst blockquote { margin: 14px 0; padding: 12px 16px; background: var(--surface); color: var(--dim); border-radius: 8px; }
.m-asst hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.m-asst li > ul,.m-asst li > ol { margin: 6px 0; }
.m-asst input[type=checkbox] { accent-color: var(--clay); margin-right: 8px; }
.report-table { overflow-x: auto; max-width: 100%; margin: 16px 0; border: 1px solid var(--line); border-radius: 8px; overscroll-behavior-x: contain; }
.report-table:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.report-table table { border-collapse: collapse; min-width: 100%; font-size: max(13px,.882353em); line-height: 1.5; }
.report-table th,.report-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 110px; max-width: 360px; overflow-wrap: anywhere; }
.report-table th { background: var(--surface); font-weight: 650; vertical-align: bottom; }
.report-table tr:last-child td { border-bottom: 0; }
.report-table [align=right] { text-align: right; font-variant-numeric: tabular-nums; }
.report-table [align=center] { text-align: center; }
.codewrap .copybtn { min-height: 36px; min-width: 44px; font-size: 13px; }
.sheet-help { color: var(--dim); font-size: 14px; margin: 8px 0 16px; line-height: 1.5; }
.results-sheet { max-width: 760px; }
.results-tools { display: flex; gap: 10px; margin-bottom: 14px; }
.results-tools input,.skill-search { min-width: 0; flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 10px 12px; font: inherit; font-size: 16px; }
.result-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.result-row > a { flex: 1; min-width: 0; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.result-row > a:hover { color: var(--clay); }
.result-name { display: block; font-weight: 550; }
.result-detail { display: block; color: var(--dim); font-size: 13px; margin-top: 4px; }
.result-copy { flex: none; }
.chat-statebar { flex-wrap: wrap; }
#chat-state { margin-left: auto; }
@media (max-width: 600px) { .results-sheet { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); } .result-row { align-items: flex-start; } .result-copy { padding: 8px; font-size: 12px; } }

.send-mode { grid-column: 1/-1; display: flex; gap: 8px; margin: 0 0 6px; }
.send-mode button { font-size: 14px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.send-mode button[aria-pressed=true] { color: var(--clay); background: var(--clay-deep); border-color: var(--clay); }
.queue-sheet { max-width: 680px; }
.queue-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.queue-item p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.queue-actions { display: flex; gap: 10px; margin: 8px 0; }
.queue-editor { display: block; width: 100%; min-height: 120px; padding: 12px; font: inherit; font-size: 16px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
#queue-start { margin-top: 18px; }

.task-pane { gap: 14px; }
.task-heading { display: block; font-size: 23px; line-height: 1.3; font-weight: 600; margin-bottom: 16px; }
.task-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.task-actions[hidden] { display: none; }
.task-context { color: var(--dim); font-size: 14px; }
.task-pane details { border-top: 1px solid var(--line); padding-top: 12px; }
.task-pane summary { cursor: pointer; min-height: 44px; padding: 8px 0; color: var(--dim); }
.setup-fields { display: flex; flex-direction: column; gap: 20px; padding: 12px 0; }
.workspace-path { display: block; color: var(--dim); font-size: 13px; overflow-wrap: anywhere; }
.skills-sheet { max-width: 720px; }
.skill-search { display: block; width: 100%; margin: 12px 0; }
.skill-choice { display: block; width: 100%; text-align: left; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.skill-choice:hover { color: var(--clay); }
.skill-description { display: block; color: var(--dim); font-size: 14px; line-height: 1.5; margin-top: 5px; }

/* Keep the mobile session controls on one readable row. */
.chat-statebar { flex-wrap: nowrap; }
#session-switch { flex-grow: 2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#results-open,#queue-open { flex: none; padding: 0 7px; }
@media (max-width: 600px) { #chat-state { display: none; } }
@media (prefers-reduced-motion: reduce) { .sheet,.scrim { animation: none !important; } }

/* Daily workspace: phone sheets, optional desktop tools beside the conversation. */
.workspace-filters { display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:8px;padding:0 16px 10px; }
.workspace-filters label { font-size:12px;color:var(--dim);min-width:0; }
.workspace-filters select { display:block;width:100%;min-height:44px;margin-top:4px;font:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px; }
.session-filters { flex-wrap:wrap; }
.open-sessions { display:flex;flex:none;overflow-x:auto;gap:4px;padding:6px 8px;background:var(--surface);border-bottom:1px solid var(--line);min-width:0; }
.open-sessions:empty { display:none; }
.open-session { display:flex;flex:none;align-items:center;max-width:220px;border-radius:10px; }
.open-session.current { background:var(--raised); }
.open-session a { color:var(--dim);text-decoration:none;min-height:44px;padding:12px 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.open-session.current a { color:var(--text); }
.open-session button { display:grid;place-items:center;min-height:44px;min-width:44px;color:var(--dim);background:none;border:0;cursor:pointer; }
.open-session button .i { width:16px;height:16px; }
/* Desktop chrome yields space to the conversation and the session list. */
.density-toggle { display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:44px;padding:4px 8px;font-size:13px;color:var(--dim);border-radius:6px; }
.density-toggle .i { width:16px;height:16px; }
.chat-text-settings { padding:12px 14px;border-bottom:1px solid var(--line); }
.chat-text-label { font-size:15px;font-weight:600; }
.chat-text-controls { display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-block:8px; }
.chat-text-controls button { min-height:44px;min-width:44px;padding:8px;border:1px solid var(--line);border-radius:8px;font-size:14px; }
.chat-text-controls button:hover:not(:disabled) { background:var(--raised); }
.chat-text-controls output { min-width:44px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums;color:var(--dim); }
.chat-text-preview { font-size:var(--chat-text-size,17px);line-height:1.6;margin-block:12px; }
.chat-text-help { color:var(--dim);font-size:13px;line-height:1.5; }
.accent-controls button { display:inline-flex;align-items:center;gap:8px; }
.accent-controls button[aria-pressed="true"] { border-color:var(--clay);box-shadow:inset 0 0 0 1px var(--clay); }
.accent-dot { width:16px;height:16px;border-radius:50%;border:1px solid var(--swatch-border);flex:none; }
/* 1.68.1: Mode (Developer / Assistant) in Appearance: the same row as Highlight colour, the chosen option outlined in the accent. */
.mode-settings { padding:12px 14px;border-bottom:1px solid var(--line); }
.mode-controls button[aria-pressed="true"] { border-color:var(--clay);box-shadow:inset 0 0 0 1px var(--clay); }
.mode-controls button[aria-disabled="true"] { opacity:.55;cursor:not-allowed; }
.approvals-sheet { max-width:880px;padding:16px; }
.approvals-sheet h2 { padding-left:0; }
.approvals-sheet .sheet-help { max-width:70ch; }
.approval-card { padding-block:20px;border-bottom:1px solid var(--line); }
.approval-card:last-child { border-bottom:0; }
.approval-card h3 { font-size:18px;line-height:1.4;overflow-wrap:anywhere; }
.approval-where { color:var(--dim);font-size:15px;margin-top:6px;overflow-wrap:anywhere; }
.approval-card pre.approval-what { max-height:30dvh; }
.approval-more { margin-top:10px; }
.approval-more > summary { cursor:pointer;color:var(--dim);font-size:15px;min-height:44px;display:flex;align-items:center; }
.approval-more > summary:hover { color:var(--text); }
.approval-card pre { max-height:40dvh;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,monospace;background:var(--bg);padding:12px;margin-block:12px;border-radius:8px; }
.approval-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:12px; }
.approval-allow { color:var(--text);background:var(--clay-deep); }
.approval-error { color:var(--err);font-size:14px; }
.approval-outcome { color:var(--dim);font-size:14px;overflow-wrap:anywhere; }
.rail-filter-summary { display:flex;align-items:center;gap:8px;padding:0 12px 4px;font-size:12px;color:var(--dim); }
.rail-filter-summary[hidden] { display:none; }
.rail-filter-summary span { flex:1;min-width:0;overflow-wrap:anywhere; }
.rail-filter-summary button { flex:none;min-height:44px;padding:4px;color:var(--clay); }
@media (min-width:900px) {
  .chatcol { min-height:0; }
  .chatcol > main.scroll { min-height:0; }
  .chatcol > .composerwrap { flex:none; }
  .chatcol > header.bar { padding-block:4px;min-height:52px; }
  .chatcol .chat-statebar { padding-inline:8px;gap:4px; }
  .chatcol #git-open { flex:none;padding-inline:7px; }
  .open-sessions { padding:2px 8px; }
  .open-session a { display:flex;align-items:center;padding-block:4px; }
  .compact-header #open-sessions,.compact-header #cproj { display:none; }
  .railhead { gap:4px;padding:4px 8px 4px 12px; }
  .railhead > span { flex:1; }
  .railhead button.icon { margin:0;padding:8px; }
  .rail .session-search { margin:0 12px 4px;min-height:44px; }
  .rail .session-search input { padding-block:8px; }
  .rail .session-summary { padding:4px 12px;font-size:12px; }
  .rail .workspace-filters { padding:0 12px 4px;grid-template-columns:minmax(0,1fr) 104px; }
  .rail .workspace-filters select { margin-top:2px;padding:4px; }
  .rail .session-filters { padding:0 8px 4px; }
  .rail .session-filters button { padding:4px 8px; }
  .rail .session-group h2 { padding:8px 12px 4px; }
  .rail .session-item .row { padding:8px 8px 8px 12px; }
  .rail .session-status { margin-top:4px; }
  .rail .activity-detail { margin-top:0; }
}
.workspace-dock { flex:0 0 350px;min-width:0;overflow:auto;background:var(--surface);border-left:1px solid var(--line);padding:16px; }
.workspace-dock h2,.git-sheet h2 { font-size:17px;font-weight:650;line-height:1.4;margin:8px 0 12px; }
.dock-tabs { display:flex;gap:6px;align-items:center;margin-bottom:20px; }
.dock-tabs [data-close-dock] { margin-left:auto; }
.dock-tabs [aria-pressed=true],.git-scopes [aria-pressed=true] { color:var(--clay);background:var(--raised); }
.workspace-dock .result-row { display:block; }
.workspace-dock .result-row .result-copy { margin-top:8px; }
.workspace-dock .results-tools { flex-wrap:wrap; }
.workspace-dock .results-tools input { width:100%;min-width:0; }
.git-sheet { max-width:1000px; }
[data-git-status] { margin:16px 0;color:var(--dim);font-size:14px; }
.git-file { width:100%;display:flex;gap:10px;text-align:left;align-items:flex-start;min-height:44px;padding:12px 4px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);cursor:pointer;font:inherit;font-size:14px; }
.git-file span { overflow-wrap:anywhere; }
.git-file code { color:var(--clay);white-space:pre; }
.git-file:disabled { color:var(--dim);cursor:default;opacity:1; }
.git-file:hover:not(:disabled) { background:var(--raised); }
[data-git-diff] h3 { font:600 14px/1.5 ui-monospace,monospace;overflow-wrap:anywhere;margin:24px 0 12px; }
[data-git-diff] pre { font:13px/1.6 ui-monospace,monospace;white-space:pre;overflow:auto;max-height:60vh;padding:12px;background:var(--bg);border-radius:10px; }
.git-scopes { display:flex;gap:8px;margin:12px 0; }
.shortcut-list { display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:14px; }
.shortcut-list dt { color:var(--text); }.shortcut-list dd { color:var(--dim);margin:0; }
@media(min-width:1280px) { .split:has(.workspace-dock) .rail { max-width:300px; } }
@media(max-width:1279px) { .workspace-dock { display:none; } }
@media(max-width:899px) { .rail,.railgrip,.open-sessions { display:none; } }
.question-banner { flex:none;margin:8px 16px;padding:12px;text-align:left;min-height:44px;border:1px solid var(--clay);border-radius:10px;background:var(--clay-deep);color:var(--text);font:600 14px/1.5 system-ui;cursor:pointer; }
.question-banner[hidden] { display:none; }.state-input { color:var(--warn); }
.question-sheet { max-width:680px; }
.question-form fieldset { border:0;padding:0;margin:0 0 24px;min-width:0; }
.question-form legend { font-size:17px;font-weight:600;margin-bottom:12px; }
.question-option { display:flex;align-items:flex-start;gap:12px;padding:12px 0;min-height:44px;font-size:15px;cursor:pointer; }
.question-option input { margin-top:5px;accent-color:var(--clay); }.question-option small { display:block;color:var(--dim);font-size:14px;margin-top:4px; }
.question-custom { display:block;font-size:14px;color:var(--dim);margin-top:12px; }
.question-custom input { display:block;width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);padding:10px;font:16px system-ui;margin-top:6px; }
.question-error { color:var(--err);font-size:14px; }.question-form .primary { min-height:44px;padding:12px 18px; }
.provider-account { padding:16px 0;border-bottom:1px solid var(--line); }.provider-account h3 { font-size:16px;margin-bottom:8px; }.provider-account p { overflow-wrap:anywhere; }
.provider-actions { display:flex;flex-wrap:wrap;gap:8px; }
.provider-account .sheet-help { margin-bottom:8px; }
.chip.claude-stop { color:var(--err);border-color:color-mix(in srgb,var(--err) 55%,transparent); }
.chip.claude-stop:disabled { opacity:1;color:var(--dim);border-color:var(--line); }
.connector-list { list-style:none;margin:0 0 12px;padding:0; }
.connector-row { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 0;font-size:15.5px; }
.connector-state { display:block;font-size:14px;color:var(--dim); }
.connector-state.is-connected { color:var(--ok); }.connector-state.is-needs-auth { color:var(--warn); }.connector-state.is-failed { color:var(--err); }
.claude-stop-confirm { margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--raised); }
.claude-stop-confirm[hidden] { display:none; }
.claude-stop-confirm p { margin:0 0 12px;font-size:14px;line-height:1.5; }
.claude-login-sheet { padding:16px 16px max(16px,env(safe-area-inset-bottom)); }
.claude-login-sheet .login-actions { display:flex;flex-wrap:wrap;gap:8px;margin:16px 0; }
.claude-login-sheet a.chip { display:inline-flex;align-items:center;text-decoration:none; }
.claude-login-sheet form { margin:24px 0 16px; }
.claude-login-sheet label { display:block;margin-bottom:8px;font-size:16px; }
.claude-login-sheet input { width:100%;min-height:48px;padding:12px;font-size:16px;color:var(--text);background:var(--raised);border:1px solid var(--dim);border-radius:10px; }
.claude-login-sheet .primary { min-height:44px;padding:12px 18px;margin:8px 8px 8px 0; }
.claude-login-sheet .login-account { overflow-wrap:anywhere;font-weight:600; }
.resume-last { display:block;min-height:44px;margin:0 16px 8px;padding:10px 0;color:var(--clay);font-size:14px;overflow-wrap:anywhere;text-underline-offset:3px; }

/* Resize the existing conversation in place, including Fold and keyboard changes. */
.composer textarea { min-width: 0; max-height: min(25dvh, 180px); }
.attachrow:empty { display: none; }
.toolbar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.toolbar > .chip { flex: none; min-height: 44px; white-space: nowrap; }
.compact-header #open-sessions, .compact-header #cproj { display: none; }
.chatcol > header.bar { padding-block: 4px; min-height: 52px; gap: 6px; }
.chatcol > header.bar button.icon { min-width: 44px; min-height: 44px; margin: 0; padding: 8px; }
@media (max-width: 899px) {
  .chatcol > header.bar { padding-inline: 6px; gap: 2px; }
  .chatcol > header.bar h1 { font-size: 16px; }
  #chgb { display: none; }
  .compact-header #findb, .compact-header .chat-statebar { display: none; }
  .composer { padding: 6px 10px calc(6px + var(--sab)); gap: 6px; }
}
@media (max-height: 500px) {
  .composer textarea { max-height: 90px; }
}
.upload-status { width: 100%; font-size: 13px; color: var(--dim); }

/* Always visible, including when both navigation headers are collapsed. */
.run-confirmation { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 12px; min-height: 28px; font-size: 12px; line-height: 1.5; color: var(--dim); border-bottom: 1px solid var(--line); }
#run-confirmed-state { font-weight: 600; }
#run-confirmed-at { white-space: nowrap; font-variant-numeric: tabular-nums; }
.run-confirmation[data-state=running] #run-confirmed-state { color: var(--ok); }
.run-confirmation[data-state=waiting] #run-confirmed-state { color: var(--clay); }
.run-confirmation[data-state=background] #run-confirmed-state { color: var(--text); }
/* Amber means waiting on you (1.27.1): list label, tab mark and status bar; clay stays for work in progress. */
.run-confirmation[data-state=input] #run-confirmed-state { color: var(--warn); }
.run-confirmation[data-state=failed] #run-confirmed-state { color: var(--err); }

/* Split view (1.6): sessions side by side on desktop, each pane a framed Pocket window */
.frame { height: 100%; display: flex; min-height: 0; }
.frame > #app { flex: 1 1 0; min-width: 0; }
#panes { display: contents; }
#panes[hidden] { display: none; }
.split-pane { flex: 1 1 0; min-width: 320px; display: flex; min-height: 0; }
.split-pane iframe { flex: 1; display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
.pane-grip { width: 5px; flex: none; cursor: col-resize; background: var(--line); }
.pane-grip:hover, .pane-grip:active, .pane-grip:focus-visible { background: var(--clay-deep); outline-offset: -2px; }
.pane-resizing { cursor: col-resize; user-select: none; }
.pane-resizing iframe { pointer-events: none; }
@media (max-width: 899px) { #panes { display: none; } .frame > #app { flex-basis: auto !important; min-width: 0 !important; } }

/* Tooltips: hover (mouse) or keyboard focus only */
.tip {
  position: fixed; z-index: 1000; max-width: 280px; padding: 6px 10px; pointer-events: none;
  background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px; line-height: 1.4;
}

/* Session focus controls work at every width; live status stays in the slim bar. */
.compact-header #chgb, .compact-header #findb,
.compact-header .chat-statebar { display: none; }
.compact-header header.bar .run-confirmation { padding: 0; min-height: 18px; border: 0; font-size: 12px; line-height: 1.5; font-weight: 400; letter-spacing: normal; }
.compact-header #run-confirmed-at { display: none; }
.compact-header #run-confirmed-state { font-weight: 400; }
.composer-actions { display: flex; align-items: center; flex: none; gap: 2px; }
.composer-actions .icon { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; color: var(--dim); border-radius: 8px; }
.composer-actions .icon:hover { background: var(--raised); }
#composer-toggle[aria-expanded=true] { color: var(--clay); }
.compact-composer #tbar { display: none; }

/* ---------- 1.7: usage visibility (context meter + plan-usage panel) ---------- */
/* Context ring (1.13): fills with the session's context use; amber at 70%, red at 90% (plus the % in the tip). */
.ctx-ring { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border-radius: 10px; color: var(--dim); }
.ctx-ring:hover { background: var(--raised); }
.ctx-ring:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.ctx-ring svg { width: 22px; height: 22px; }
.ctx-ring .ctx-track { fill: none; stroke: color-mix(in srgb, var(--dim) 38%, transparent); stroke-width: 3; }
.ctx-ring .ctx-fill { fill: none; stroke: var(--clay); stroke-width: 3; stroke-linecap: round; }
.ctx-ring[data-level="amber"] .ctx-fill { stroke: var(--warn); }
.ctx-ring[data-level="red"] .ctx-fill { stroke: var(--err); }
.workrow .ctx-ring { margin-left: auto; }
.ctx-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.ctx-facts dt { font-size: 12px; color: var(--dim); }
.ctx-facts dd { margin: 2px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.usage-sheet .usage-body { padding: 0 14px 14px; }
.usage-block { padding: 10px 0 14px; border-bottom: 1px solid var(--line); }
.usage-block:last-child { border-bottom: 0; padding-bottom: 2px; }
.usage-block h3 { font-size: 13.5px; font-weight: 600; color: var(--dim); margin-bottom: 8px; }
.usage-row { margin-bottom: 12px; }
.usage-row-head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; color: var(--dim); margin-bottom: 6px; }
.usage-pct { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--text); }
.usage-pct[data-level="amber"] { color: var(--warn); }
.usage-pct[data-level="red"] { color: var(--err); }
.meter { height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 4px; background: var(--clay); }
.meter-fill[data-level="amber"] { background: var(--warn); }
.meter-fill[data-level="red"] { background: var(--err); }
.usage-reset { font-size: 12.5px; color: var(--faint); margin-top: 5px; }
.usage-asof { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.usage-empty { color: var(--faint); font-size: 14px; padding: 4px 0; }

/* UI/UX repair pass (1.7.1): preserve the workbench, make hidden state explicit. */
.settings-details { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; }
.settings-details > summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--dim); }
.settings-details > summary .summary-meta:not(:empty)::before { content: ' · '; }
.settings-details > summary .summary-meta { color: var(--faint); }
.settings-details .about { margin: 8px 0; }
.settings-details .chip { margin-top: 8px; }
.settings-details [hidden],.settings-sheet > [hidden] { display: none; }
#s-version-state,#s-notes-body { font-size: 14px; color: var(--dim); }
.feedback { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 12px; font-size: 14px; line-height: 1.45; color: var(--dim); }
.feedback p { margin: 0; }
.feedback p a { color: var(--clay); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.feedback-links { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback a.chip { text-decoration: none; color: var(--text); min-height: 36px; padding: 6px 14px; }
.feedback a.chip:hover { border-color: var(--clay-deep); }
.feedback a.chip:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
#s-notes-body ul { padding-left: 22px; }
.session-more-filters { margin: 0 18px 8px; }
.session-more-filters > summary { min-height: 44px; padding: 8px 0; cursor: pointer; color: var(--dim); font-size: 14px; overflow-wrap: anywhere; }
.session-more-filters .workspace-filters,.session-more-filters .session-filters { padding-inline: 0; }
.clear-more-filters { margin: 0 18px 8px; }
.clear-more-filters[hidden] { display: none; }
.toolbar-scroll { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; grid-column: 1 / -1; }
.toolbar-scroll .toolbar { flex: 1; min-width: 0; }
.toolbar-scroll > .icon { flex: 0 0 44px; color: var(--dim); }
.toolbar-scroll > .icon[hidden] { display: none; }
.toolbar-scroll > .icon:disabled { opacity: .45; cursor: default; }
.toolbar-next svg { transform: rotate(180deg); }
.compact-composer .toolbar-scroll { display: none; }
.split-pane { min-width: 380px; }
.split-pane[hidden],.pane-grip[hidden],.split-notice[hidden] { display: none; }
.split-notice { font-size: 12px; line-height: 1.5; color: var(--dim); background: var(--surface); padding: 4px 12px; flex: none; }
.conversation-controls { display: flex; flex-direction: column; flex: none; min-width: 0; }
.rail-resize-region { display: flex; flex: none; }
@media(max-width:899px) { .rail-resize-region { display: none; } }

/* ---------- voice mode (1.8): mic beside Send, one status strip, Settings → Voice ---------- */
.composer .voice-mic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%;
  color: var(--dim); background: var(--bg); border: 1px solid var(--line); touch-action: none; -webkit-user-select: none; user-select: none; }
.composer .voice-mic:hover { color: var(--text); background: var(--raised); }
.composer .voice-mic.on { color: var(--clay); background: var(--clay-deep); border-color: var(--clay); }
.composer .voice-mic:disabled { color: var(--faint); }
.composer .voice-mic:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.composer .voice-mic[hidden] { display: none; }
.composer .voice-hf.drafting { display: none; }
@media (max-width: 600px) { .composer .voice-mic { width: 44px; height: 44px; } }  /* the narrow composer's control row: 44px targets */
@media (max-width: 380px) { .send-mode .sm-x { display: none; } }  /* closed Fold / small phones: "Steer" and "After turn"; full names stay in aria-label */
.voice-strip { display: flex; align-items: center; gap: 10px; max-width: 720px; margin: 0 auto; padding: 6px 16px; min-height: 40px;
  font-size: 13px; line-height: 1.4; color: var(--dim); }
.voice-strip[hidden] { display: none; }
.voice-strip .voice-label { min-width: 0; overflow-wrap: anywhere; }
.voice-strip .chip { margin-left: auto; min-height: 36px; padding: 4px 14px; }
/* Hands-free send confirmation: the instruction read back with Send / Edit / Cancel (1.13). */
.voice-strip:has(.voice-confirm) { flex-wrap: wrap; }
.voice-strip .voice-confirm { margin-left: auto; display: flex; gap: 6px; }
.voice-strip .voice-confirm .chip { margin-left: 0; min-height: 44px; }
.voice-strip .voice-confirm .voice-send { color: var(--clay); border-color: var(--clay); }
.voice-strip .voice-pending { color: var(--dim); }
.voice-strip[data-state="listening"] .voice-label, .voice-strip[data-state="holding"] .voice-label { color: var(--text); }
/* The level meter is feedback that the mic hears you, so it tracks input even with reduced motion (no easing then). */
.voice-level { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.voice-level i { width: 3px; height: 14px; border-radius: 2px; background: var(--clay); transform-origin: bottom;
  transform: scaleY(calc(.2 + .8 * var(--lvl, 0))); transition: transform 80ms linear; }
.voice-level i:nth-child(2) { transform: scaleY(calc(.2 + .8 * min(1, var(--lvl, 0) * 1.4))); }
.voice-level i:nth-child(3) { transform: scaleY(calc(.2 + .8 * var(--lvl, 0) * .7)); }
@media (prefers-reduced-motion: reduce) { .voice-level i { transition: none; } }
.voice-settings { display: flex; flex-direction: column; gap: 8px; padding: 4px 6px 12px; /* 16px from the sheet edge */ font-size: 14px; line-height: 1.45; color: var(--dim); }
.voice-settings p { margin: 0; }
.voice-settings p.sub { font-size: 13px; }
.voice-settings .opt:disabled { opacity: .55; }
.voice-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--dim); }
.voice-field select, .voice-field input { min-height: 44px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.voice-field select:focus-visible, .voice-field input:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }

/* Subagents use the existing sheet and ledger language, including in compact view. */
.agents-open { flex: none; min-height: 44px; padding: 8px 16px; text-align: left; color: var(--clay); font-size: 13px; border-bottom: 1px solid var(--line); }
.agents-open[hidden] { display: none; }
.agents-open:hover { background: var(--raised); }
.agents-sheet { overflow-y: auto; padding-inline: 16px; }
.agents-retry[hidden], .agents-limit[hidden] { display: none; }
.agent-row { border-top: 1px solid var(--line); }
.agent-row summary { min-height: 52px; padding: 12px 0; cursor: pointer; display: flex; align-items: baseline; gap: 12px; }
.agent-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 16px; }
.agent-name::before { content: '+'; display: inline-block; width: 20px; color: var(--dim); }
.agent-row[open] .agent-name::before { content: '−'; }
.agent-state { flex: none; max-width: 40%; font-size: 13px; color: var(--dim); }
.agent-state[data-state=running], .agent-state[data-state=pending] { color: var(--clay); }
.agent-state[data-state=failed] { color: var(--err); }
.agent-detail { padding: 0 0 20px 20px; }
.agent-detail h3 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
.agent-copy { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; }
.agent-meta { color: var(--dim); font-size: 13px; overflow-wrap: anywhere; margin-top: 12px; }
.agents-retry { min-height: 44px; }

/* ---------- 1.18: pinned tabs and pin order, quick voice mute ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.open-session.pinned a, .open-session.pinned.current a { color: var(--clay); }
.open-session .pinmark .i { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; color: var(--clay); }
/* Tab status: the rail row's state as a 7px mark before the title. Running reuses the ember. */
.open-session .tab-state { display: inline-block; width: 7px; height: 7px; margin: 0 6px 0 0; border-radius: 50%; vertical-align: 1px; flex: none; }
.open-session .tab-input { background: var(--warn); }
.open-session .tab-failed { background: var(--err); }
.open-session .tab-finished { background: var(--ok); }
.open-session :is(.tab-observed,.tab-waiting) { box-sizing: border-box; border: 1.5px solid var(--dim); }
.pin-grip { display: none; width: 44px; height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; margin: 7px 0 0; border-radius: 10px; color: var(--faint); cursor: grab; touch-action: none; }
.pin-grip .i { width: 18px; height: 18px; }
.pin-grip:hover { color: var(--dim); background: var(--surface); }
.pin-grip:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
@media (min-width: 900px) { .pin-grip { display: flex; } }
.session-item.dragging { opacity: .55; }
.session-item.dragging .pin-grip { cursor: grabbing; }
.session-item.drop-before { box-shadow: inset 0 2px 0 var(--clay); }
.session-item.drop-after { box-shadow: inset 0 -2px 0 var(--clay); }
.workrow button.voice-mute { padding: 6px; color: var(--faint); }
.workrow button.voice-mute.on { color: var(--clay); }

/* ---------- 1.19: UI/UX audit fixes ---------- */
/* Reading measure: prose keeps a comfortable line length on wide screens; tables, code and the composer
   still use the full conversation width. ch follows the chat text size setting. */
@media (min-width: 700px) {
  .m-asst :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6):not(.report-table *), .m-asst.live, .turn-failure { max-width: 68ch; }
  .m-user { max-width: min(85%, 60ch); }
}
/* Phones and narrow panes: the run status shares the title bar's second line with the project name. */
.status-in-header header.bar .run-confirmation { padding: 0; min-height: 18px; border: 0; font-size: 12px; line-height: 1.5; font-weight: 400; letter-spacing: normal; }
.status-in-header #run-confirmed-at { display: none; }
.status-in-header #run-confirmed-state { font-weight: 400; }
.status-in-header:not(.compact-header) header.bar h1 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.status-in-header:not(.compact-header) header.bar h1 .one { flex: 1 0 100%; }
.status-in-header:not(.compact-header) header.bar h1 .tag { flex: 0 1 auto; min-width: 0; max-width: 55%; }
.status-in-header:not(.compact-header) header.bar h1 .run-confirmation { display: block; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-in-header:not(.compact-header) header.bar h1 .tag:not(:empty) + .run-confirmation::before { content: '·'; margin-right: 6px; color: var(--faint); }
/* Scheduled runs: one collapsed group at the end of All. */
.automated-group > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding-right: 18px; }
.automated-group > summary::-webkit-details-marker { display: none; }
.automated-group > summary h2 { padding-right: 0; }
.automated-group > summary h2::before { content: '▸'; color: var(--faint); font-weight: 400; }
.automated-group[open] > summary h2::before { content: '▾'; }
.automated-group > summary:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; border-radius: 6px; }
.automated-note { font-size: 13px; color: var(--dim); }
/* Session options: groups separated by hairlines; display settings last. */
.sheet .opt-group + .opt-group { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.opt-group .chat-text-settings { border-bottom: 0; }
/* A failed last turn, at the end of the conversation, with its reason and a retry. */
.turn-failure { border: 1px solid var(--err); border-radius: 10px; padding: 10px 12px 8px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.turn-failure p { margin: 0 0 8px; color: var(--err); }
.turn-failure-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.turn-failure-actions .chip { color: var(--text); }
.turn-failure-actions [hidden] { display: none; }
/* New session: the reason Start did nothing, next to Start. */
.start-hint { max-width: 720px; margin: 0 auto; padding: 8px 16px; color: var(--err); font-size: 14px; } /* 1.58: above the New session composer, like a delivery problem */
.start-hint[hidden] { display: none; }

/* ---------- 1.20: generated session titles in Settings (existing toggle row + native select) ---------- */
.title-settings { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 12px 50px; font-size: 14px; color: var(--dim); }
.title-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--dim); }
.title-note:empty { display: none; }

/* ---------- 1.20.1: audit polish ---------- */
/* Message settings: a soft fade at an edge that scrolls, so a chip never looks cut off; short permission words on phones. */
.toolbar.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.toolbar.fade-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.toolbar.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
#c-approval .label-short { display: none; }
@media (max-width: 600px) { #c-approval .label-full { display: none; } #c-approval .label-short { display: inline; } }
/* Context ring: a dotted track reads as a gauge, not an empty radio button. */
.ctx-ring .ctx-track { stroke-dasharray: 1.4 2.6; stroke-width: 2.4; }
/* 44px targets: the per-message copy control and the toolbar scroll arrows. */
.copybtn.msgcopy { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; margin: -10px -12px 0 4px; }
.toolbar-scroll > .icon { min-height: 44px; }
/* Settings disclosures: 16px from the sheet edge, like the other sheets. */
.whatsnew, .feedback { padding-inline: 6px; }
/* Reply suggestions: options wrap among themselves; the dismiss X stays at the end of the first line. */
.choices { flex-wrap: nowrap; align-items: flex-start; }
.choice-opts { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }

/* ---------- 1.21: While you were away ---------- */
.away-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 -4px; color: var(--clay); font-size: 13px; font-weight: 600; }
.away-divider::before, .away-divider::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--clay) 55%, transparent); }
.away-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; font-size: 15px; line-height: 1.5; }
.away-label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--dim); }
/* 1.25: the card sits at the end of the conversation, above the latest reply's suggested replies. Its label is the
   divider's clay "New since" line, so the one accent still means "new to you"; Read from there jumps to the divider. */
.away-end { margin: 14px 0 2px; }
.away-end .away-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; color: var(--clay); }
.away-end .away-label + .away-body { margin-top: 8px; }
.away-jump { flex: none; min-height: 36px; margin: -6px -8px -6px 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--dim); }
.away-jump:hover { color: var(--text); background: var(--raised); }
.away-jump:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.away-body { color: var(--text); }
.away-body ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.away-source { margin: 8px 0 0; font-size: 12.5px; color: var(--dim); }
@media (min-width: 700px) { .away-card { max-width: 68ch; } }

/* ---------- 1.22: search inside conversations (session-row language; the snippet reads like a quote) ---------- */
.convo-note { padding: 0 18px 8px; font-size: 13px; line-height: 1.5; color: var(--dim); }
.rail .convo-note { padding-inline: 12px; }
.convo-retry { margin: 0 18px 12px; }
.convo-item .row { padding-right: 18px; }
.convo-snippet { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--dim); }
.convo-who { color: var(--text); font-weight: 600; }
.title-empty { padding-top: 4px; }

/* ---------- 1.23: saved prompts and recent starts (chips, rows and sheets already in the app) ---------- */
.starters { display: flex; flex-direction: column; gap: 8px; margin: -6px 0 12px; }
.starters[hidden] { display: none; }
.starter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.starter-chips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.starter-chips .chip[aria-pressed="true"] { color: var(--clay); border-color: var(--clay); background: var(--clay-deep); }
.starter-manage { color: var(--dim); border-style: dashed; }
.recent-starts > summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--dim); font-size: 14px; }
.recent-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.recent-start { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; min-height: 44px; border-bottom: 1px solid var(--line); }
.recent-start:last-child { border-bottom: 0; }
.recent-start:hover { background: var(--raised); }
.recent-text { font-size: 15px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.recent-meta { font-size: 12.5px; color: var(--dim); }
.prompt-sheet .prompt-field { display: block; padding: 0 14px; font-size: 13px; color: var(--dim); }
.prompt-sheet .prompt-field .rename { width: 100%; margin: 6px 0 10px; }
.prompt-summary { padding: 0 14px 8px; font-size: 13.5px; color: var(--dim); }
.prompt-text { margin: 0 14px 10px; padding: 10px 12px; max-height: 30dvh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; color: var(--dim); background: var(--bg); border-radius: 10px; }
.prompt-error { padding: 0 14px 8px; color: var(--err); font-size: 14px; }
.prompt-error[hidden] { display: none; }
.prompts-sheet { padding-inline: 16px; }
.prompts-sheet h2 { padding-left: 0; }
.prompt-rows { list-style: none; margin: 0; padding: 0; }
.prompt-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.prompt-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prompt-row-name { font-size: 16px; font-weight: 500; }
.prompt-row-meta { font-size: 12.5px; color: var(--dim); }
.prompt-row-text { font-size: 14px; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.prompt-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prompt-row-actions .icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--dim); border-radius: 10px; }
.prompt-row-actions .icon:disabled { opacity: .35; }
.prompt-delete.confirm { color: var(--err); border-color: var(--err); }

/* ---------- 1.24: message times and day dividers ---------- */
/* The day divider is the quiet sibling of the clay "New since" line: hairline rules in --line, label in --dim.
   Times are drawn from data-time so they never enter copied text or Find. Same mono ledger voice as .turnmeta. */
.day-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0 -6px; color: var(--dim); font-size: 12.5px; font-weight: 600; }
.day-divider::before, .day-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.m-asst[data-time]::before { content: attr(data-time); display: block; margin: 0 0 4px; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12px; line-height: 1.3; color: var(--dim); white-space: nowrap; }
.m-asst.live::before { content: none; }
.m-user[data-time]::after { content: attr(data-time); display: block; margin-top: 4px; text-align: right; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12px; line-height: 1.3; color: color-mix(in srgb, var(--bubble-text) 80%, var(--clay-deep)); white-space: nowrap; }
.msgs.times-off .day-divider, .msgs.times-off .m-asst[data-time]::before, .msgs.times-off .m-user[data-time]::after { display: none; }

/* ---------- 1.28: prompt-cache warmth ----------
   The ring carries a mono companion label: minutes left while warm, amber in the last stretch, "cold" once
   expired. Tabs flag only large sessions that are expiring (hourglass) or expired (snowflake), in --dim. */
.ctx-ring { grid-auto-flow: column; gap: 5px; }
.ctx-ring[data-cache] { padding-inline: 6px 8px; }
.ctx-ring .ctx-cache { font: 12px/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--dim); }
.ctx-ring .ctx-cache:empty { display: none; }
.ctx-ring[data-cache="cooling"] .ctx-cache, .cache-state[data-cache="cooling"] { color: var(--warn); }
/* 1.28.1: a cold cache turns the whole ring ice blue (track, fill and label), over the context level colour,
   since the next turn's cost is the thing to notice; the fill length still shows how full the context is. */
.ctx-ring[data-cache="cold"] .ctx-cache, .cache-state[data-cache="cold"] { color: var(--ice); }
.ctx-ring[data-cache="cold"] .ctx-fill { stroke: var(--ice); }
.ctx-ring[data-cache="cold"] .ctx-track { stroke: color-mix(in srgb, var(--ice) 65%, transparent); }
.cache-state { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--text); }
.open-session .tab-cache { display: inline-flex; flex: none; margin-right: 5px; color: var(--dim); }
.open-session .tab-cache .i { width: 13px; height: 13px; stroke-width: 1.9; }

/* ---------- 1.29: projects ----------
   Cards and lists keep the session-row voice: .session-item rows, .session-status lines, the ledger for facts.
   State is a word (Active, Waiting, Done); due-ness is the existing amber; the rail switch is the only new control. */
.rail-switch { display: flex; gap: 2px; flex: none; }
.rail-switch button { min-height: 36px; padding: 6px 9px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--dim); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.railhead:has(.rail-switch) .density-toggle { font-size: 0; gap: 0; padding-inline: 6px; margin-left: auto; }
.density-toggle[hidden] { display: none; } /* icon only beside the switch; its label stays in aria-label */
.chip.due { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.rail-switch button[aria-pressed="true"] { color: var(--text); background: var(--raised); }
.rail-switch button:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
/* 1.34: a light pipe between Sessions | Projects | Files, centred in the gap; decorative, so pointer-transparent. */
.rail-switch { gap: 4px; }
.rail-switch button { position: relative; }
.rail-switch button + button::before { content: ""; position: absolute; left: -2.5px; top: 50%; width: 1px; height: 14px; transform: translateY(-50%); background: color-mix(in srgb, var(--faint) 55%, transparent); pointer-events: none; }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11.5px; font-weight: 650; color: var(--on-warn); background: var(--warn); }
.badge[hidden] { display: none; }
.project-head-actions, .rail-project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rail-project-actions { padding: 10px 14px 4px; }
.rail-open-library { display: flex; flex-wrap: wrap; gap: 6px; }
.rail-open-library .chip { padding-inline: 10px; } /* 1.35: the two Open buttons wrap together, never one alone */
.rail-done-link { display: block; min-height: 44px; padding: 12px 18px; color: var(--dim); font-size: 13.5px; }
.projects-view { padding-bottom: calc(24px + var(--sab)); }
.projects-view > .sheet-help { padding-inline: 18px; }
.session-home-head { flex-wrap: wrap; row-gap: 10px; } /* 1.29: the Projects chip beside Refresh wraps under the title on a phone */
.projects-view .session-group h2 { padding-top: 14px; }
.project-item .row, .reminder-item .row, .linked-session .row, .document-item .row { display: block; min-width: 0; flex: 1; padding: 12px 8px 14px 18px; text-decoration: none; color: inherit; }
.project-item .row .meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-marks { display: inline-flex; gap: 4px; align-items: center; }
.project-marks .tab-state, .linked-session .tab-state { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; vertical-align: 1px; margin-right: 6px; }
.project-marks .tab-state { margin-right: 0; }
.project-marks .tab-input, .linked-session .tab-input { background: var(--warn); }
.project-marks .tab-finished, .linked-session .tab-finished { background: var(--ok); }
.project-marks .tab-failed, .linked-session .tab-failed { background: var(--err); }
.project-marks .tab-observed, .project-marks .tab-waiting, .linked-session .tab-observed, .linked-session .tab-waiting { border: 1.5px solid var(--dim); }
.due-label { color: var(--warn); font-weight: 600; }
.reminder-item.due .title, .reminder.due .reminder-title { color: var(--text); }
.project-group summary { list-style: none; cursor: pointer; }
.project-group summary::-webkit-details-marker { display: none; }
.project-group summary h2::after { content: '▸'; color: var(--faint); font-weight: 400; }
.project-group[open] summary h2::after { content: '▾'; }
.project-card { padding: 4px 18px 24px; max-width: 760px; }
.project-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0 6px; }
.project-status { font-size: 12px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; }
.project-status.status-active { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.project-status.status-waiting { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.project-meta { font-size: 12.5px; color: var(--faint); font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; }
.project-field, .project-tasks, .project-reminders, .project-sessions, .project-notes { padding: 12px 0; border-bottom: 1px solid var(--line); }
.project-field h2, .project-tasks h2, .project-reminders h2, .project-sessions h2 { display: flex; gap: 8px; align-items: baseline; margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); }
.project-field h2 span, .project-tasks h2 span, .project-sessions h2 span { color: var(--faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.project-field p { font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.project-empty { color: var(--faint); font-size: 14px; line-height: 1.5; }
.project-links { display: flex; flex-direction: column; gap: 6px; }
.project-links a.ledger { text-decoration: none; min-height: 44px; }
.project-links a.ledger .det { color: var(--clay); }
.project-sessions .session-item { border-bottom: 0; }
.project-sessions .linked-session .row { padding-left: 0; }
.task-list { list-style: none; margin: 0; padding: 0; }
.task-row { display: flex; align-items: flex-start; gap: 6px; min-height: 44px; border-bottom: 1px solid var(--line); }
.task-row:last-child { border-bottom: 0; }
.task-label { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; font-size: 16px; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; }
.task-label input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--clay); flex: none; }
.task-row.completed .task-label span { color: var(--faint); text-decoration: line-through; }
.task-meta { align-self: center; flex: none; font-size: 12.5px; color: var(--dim); }
@media (max-width: 600px) { .task-row { flex-wrap: wrap; } .task-row .task-meta { order: 3; flex-basis: 100%; padding: 0 0 10px 32px; margin-top: -8px; } } /* the date goes under the step on a phone */
.task-more { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--dim); border-radius: 10px; }
.task-more:hover { background: var(--raised); }
.task-add { display: flex; gap: 8px; margin-top: 8px; }
.task-add input { flex: 1; min-width: 0; min-height: 44px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.task-add input:focus-visible, .project-form textarea:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.reminder { padding: 8px 0; border-bottom: 1px solid var(--line); }
.reminder:last-child { border-bottom: 0; }
.reminder-title { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.reminder-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.project-history { padding-inline: 0; }
.project-history ul { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.project-history .ledger { align-items: flex-start; }
.project-history .ledger .det { white-space: normal; overflow-wrap: anywhere; }
.project-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.project-form { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
.project-form textarea { min-height: 44px; font: inherit; font-size: 14px; line-height: 1.4; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; resize: vertical; }
.project-form .primary { margin: 4px 0 0; width: 100%; padding: 13px; font-size: 16px; }
.reminder-form { padding-top: 6px; }
.open-session .tab-state.tab-due { background: var(--warn); }
.sheet h2.settings-group { padding-top: 8px; }

/* ---------- 1.30: documents ----------
   Library rows keep the session-row voice with a small mono kind tag; the viewer is a frame under Pocket's bar
   with a row of chips above it. No new colour: a shared document says so in words. */
.doc-kind { display: inline-block; min-width: 34px; margin-right: 8px; padding: 1px 5px; border-radius: 5px; font: 600 11px/1.5 ui-monospace, "Cascadia Mono", Menlo, monospace; letter-spacing: .04em; color: var(--dim); background: var(--raised); vertical-align: 2px; text-align: center; }
.document-item .row .title { display: flex; align-items: baseline; min-width: 0; }
.document-item .row .title .doc-kind { flex: none; }
.doc-shared { color: var(--text); }
.doc-vis { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; font-size: 11px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; line-height: 1.5; color: var(--dim); }
.doc-vis.vis-link, .doc-vis.vis-public { color: var(--clay); border-color: var(--clay-deep); }
.doc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 18px 10px; }
.doc-filters .chip { min-height: 36px; }
.doc-filters .chip span { color: var(--faint); font-variant-numeric: tabular-nums; }
.doc-filters .chip[aria-pressed="true"] { color: var(--clay); border-color: var(--clay); background: var(--clay-deep); }
.doc-filters .chip[aria-pressed="true"] span { color: var(--text); }
.doc-kind-filter { flex: 0 1 200px; }
.rail-doc-search { margin: 4px 12px 6px; min-height: 42px; }
.rail-doc-search input { font-size: 15px; padding: 9px 0; }
.share-url .chip { flex: none; }
.chip.ok { color: var(--ok); border-color: var(--ok); }
.share-url input:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.share-note { padding-inline: 14px; margin-top: 0; }
.document-options .opt-group:first-of-type { margin-top: 0; }
/* 1.32: the library as a grid of previews. A card is a picture with the row's words under it; the picture comes from
   /thumb when this install can make one, else the kind stands in. Actions sit on the picture and show on hover or focus. */
.doc-layout { display: none; gap: 4px; }
@media (min-width: 700px) { .doc-layout { display: inline-flex; } }
.in-pane .doc-layout { display: inline-flex; }
.doc-layout button { width: 40px; height: 40px; border-radius: 10px; color: var(--dim); display: grid; place-items: center; border: 1px solid var(--line); }
.doc-layout button[aria-pressed="true"] { color: var(--text); background: var(--raised); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 4px 18px 8px; }
.in-pane .doc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } /* two columns in a 380px pane */
.doc-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.doc-card:hover, .doc-card:focus-within { border-color: var(--clay-deep); }
.doc-card.cur { border-color: var(--clay); }
.doc-card-link { display: flex; flex-direction: column; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.doc-card-link:focus-visible { outline-offset: -2px; border-radius: 12px; }
.doc-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--raised); border-bottom: 1px solid var(--line); overflow: hidden; }
.doc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .2s ease-out; }
.doc-thumb.loaded img { opacity: 1; }
.doc-thumb-kind { position: absolute; inset: 0; display: grid; place-items: center; }
.doc-thumb-kind .doc-kind { font-size: 13px; padding: 4px 10px; margin: 0; background: var(--bg); }
.doc-thumb.loaded .doc-thumb-kind { display: none; }
.doc-card-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; min-width: 0; }
.doc-card-title { font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.doc-card-meta { font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-card .session-status { margin-top: 2px; }
.doc-card-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s ease-out; }
.doc-card:hover .doc-card-actions, .doc-card:focus-within .doc-card-actions { opacity: 1; }
@media (hover: none) { .doc-card-actions { opacity: 1; } }
.doc-card-actions .session-more { width: 40px; height: 40px; flex-basis: 40px; margin: 0; color: var(--text); background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line); }
.doc-card-actions .session-more:hover { background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .doc-thumb img, .doc-card-actions { transition: none; } }
.documents-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 4px 18px 8px; }
.documents-tools .session-search { flex: 1 1 260px; margin: 0; }
.doc-project-filter { flex: 0 1 220px; }
.documents-view { padding-bottom: calc(24px + var(--sab)); }
.documents-view[data-kind="doc"] { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.doc-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex: none; }
.doc-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }
.doc-media-wrap { flex: 1; overflow: auto; padding: 16px; display: grid; place-items: start center; }
.doc-media { max-width: 100%; height: auto; border-radius: 10px; }
video.doc-media { width: 100%; max-height: 70vh; background: #000; }
.doc-text { flex: 1; overflow: auto; padding: 16px 18px calc(24px + var(--sab)); }
.doc-md { max-width: 760px; }
.doc-pre { font: 13.5px/1.5 ui-monospace, "Cascadia Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-table-wrap { overflow: auto; }
.doc-table { border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.doc-table th, .doc-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.doc-table th { color: var(--dim); font-weight: 600; position: sticky; top: 0; background: var(--bg); }
.doc-note { padding: 16px 18px; }
.share-url { display: flex; gap: 8px; padding: 6px 14px 10px; }
.share-url input { flex: 1; min-width: 0; min-height: 44px; font: 13px/1.4 ui-monospace, Menlo, monospace; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.share-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 0 14px 12px; }
.share-controls .sheet-help { flex-basis: 100%; margin: 4px 0 0; }
.result-keep { margin-right: 6px; }
.project-documents { padding: 12px 0; border-bottom: 1px solid var(--line); }
.project-documents h2 { display: flex; gap: 8px; align-items: baseline; margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); }
.project-documents h2 span { color: var(--faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.project-documents .session-item { border-bottom: 0; }
.project-documents .linked-session .row { padding-left: 0; }
.rail-switch button { padding: 6px 8px; }

/* 1.33: one navigation and control language across the workspace. */
.settings-index .opt { justify-content: space-between; min-height: 72px; }
.settings-index .opt > .i { transform: rotate(180deg); flex: none; color: var(--dim); }
.settings-scope { color: var(--dim); font-size: 13px; font-weight: 500; margin: 20px 0 8px; }
.sheet-back { margin: 0 48px 16px 0; min-height: 44px; }
.library-error { padding: 16px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; }
.library-error p { margin: 0 0 12px; color: var(--dim); }
.library-error .chip + .chip { margin-left: 8px; }
.conversation-project[hidden] { display: none; }
.chip.conversation-project span { max-width: 16em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-project.linked { color: var(--clay); }
.chip.conversation-project.linked { border-color: var(--clay-deep); } /* a linked project reads as the conversation's home */
.workrow button.wbell, .doc-filters .chip, .doc-layout .icon, .doc-card-actions .icon { min-width: 44px; min-height: 44px; }
#new-setup { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 10px; }
#new-setup > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px; cursor: pointer; list-style: none; }
#new-setup > summary::-webkit-details-marker { display: none; }
#new-setup .task-context { display: grid; gap: 3px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
#new-setup .task-context strong { font-weight: 500; color: var(--text); margin-right: 6px; }
#new-setup .setup-edit { color: var(--clay); flex: none; font-size: 13px; }
#new-setup .setup-fields { padding: 0 14px 16px; }
.split-picker .session-search { margin: 0 0 16px; }
.split-picker h3 { font-size: 13px; color: var(--dim); font-weight: 500; margin: 20px 0 6px; }
.split-picker .opt { min-height: 60px; }
.table-scroll-frame { position: relative; display: flow-root; }
.table-scroll-frame .report-table { margin-bottom: 24px; }
.table-scroll-hint { position: absolute; bottom: 0; right: 0; color: var(--dim); font-size: 12px; margin: 8px 0 0; }
@media (max-width: 600px) {
 .chat-statebar { gap: 2px; }
 #session-switch { flex: 1; min-width: 82px; }
 .workrow { flex-wrap: wrap; }
}

/* Size the rail header against its resizable column, including scrollbar space.
   Keep every action reachable; at the minimum width the action group wraps. */
@media (min-width: 900px) {
  .rail { container-type: inline-size; }
  .railhead { flex-wrap: wrap; gap: 0 2px; padding-inline: 6px; }
  .rail-switch { flex: 1 0 auto; gap: 4px; }
  .rail-switch button {
    min-height: 44px;
    font-size: clamp(12px, calc(2cqi + 6px), 14px);
    padding-inline: clamp(2px, calc(5cqi - 13px), 8px);
    gap: 2px;
  }
  .rail-actions { display: flex; flex: none; margin-left: auto; }
  .rail-actions > button { flex: none; min-width: 44px; min-height: 44px; }
  .railhead .rail-actions button.icon { padding: 8px; }
}
@media (min-width: 900px) and (pointer: fine), (min-width: 900px) and (pointer: none) {
  .railhead .rail-actions > button {
    min-width: clamp(32px, calc(10cqi + 2px), 44px);
    width: clamp(32px, calc(10cqi + 2px), 44px);
  }
}

/* 1.35: one conversation header. Title, then a subtitle line with project · run status · check age;
   the session links (Sessions, Results, Queue, Git) sit in the same bar. A wide header keeps one row;
   a narrow one wraps the links onto a second line inside the header, never a separate bordered strip. */
.chatcol > header.bar { container: chathead / inline-size; flex-wrap: wrap; row-gap: 0; }
header.bar .chat-statebar { border: 0; background: none; padding: 0; order: 10; flex: 1 0 100%; min-width: 0; }
.status-in-header:not(.compact-header) #run-confirmed-at { display: inline; }
.status-in-header:not(.compact-header) #run-confirmed-at:not(:empty)::before { content: '·'; margin: 0 6px; color: var(--faint); }
@container chathead (min-width: 720px) {
  header.bar .chat-statebar { order: 0; flex: 0 1 auto; gap: 2px; }
  header.bar .chat-statebar .session-switch { flex: none; padding-inline: 8px; }
  header.bar #session-switch { flex: 0 1 auto; max-width: 13.5em; } /* the title keeps its room; the Sessions link shortens first */
}
@container chathead (max-width: 599px) {
  .status-in-header:not(.compact-header) #run-confirmed-at { display: none; }
}

/* ---------- 1.50: the due list and notification settings ----------
   A project reminder in the Tasks list keeps the task row: the hourglass takes the check's 44px slot and opens the reminder's
   options; the row is a link to the card. The notification kinds sit under their switch as ordinary option rows, indented
   like a setting's field; the email form reuses the Vault's field-and-chips arrangement. No new colour. */
.task-item.reminder-item .row { text-decoration: none; padding-left: 4px; }
.task-item.reminder-item .task-check .i { width: 18px; height: 18px; }
.push-kinds { gap: 0; padding: 0 0 6px 24px; }
.push-kinds .opt { margin: 0; padding: 10px 14px; font-size: 15.5px; }
.push-kinds .opt:disabled { opacity: .55; cursor: default; }
.email-form { display: flex; flex-direction: column; gap: 8px; }
.email-form .voice-field { margin: 0; }
.settings-sheet #s-ahead:disabled, .settings-sheet #s-badge:disabled { opacity: .55; cursor: default; }
/* 1.52: Settings → Agents & instance → Claude models in the picker. The catalog as the same option rows the
   notification kinds use; a model this computer's Claude Code policy blocks keeps its row, with a dashed ring and
   the reason in place of its description, so a missing picker entry is explained rather than hidden. No new colour. */
.model-offer { gap: 4px; padding: 10px 0 12px; }
.model-offer > .vault-set-head, .model-offer > .title-note, .model-offer > .vault-set-actions { margin-left: 14px; margin-right: 14px; }
.model-offer > .vault-set-head { margin-bottom: 2px; }
.model-offer .chip[hidden] { display: none; }
.model-offer-list { display: flex; flex-direction: column; }
.model-offer-list .opt { margin: 0; padding: 10px 14px; font-size: 15.5px; }
.model-offer-list .opt[aria-disabled="true"] { cursor: default; color: var(--dim); }
.model-offer-list .opt[aria-disabled="true"] .dot { border-style: dashed; }
.model-offer-list .opt[aria-disabled="true"] .sub { color: var(--dim); }
.model-offer-list[aria-busy="true"] { pointer-events: none; }
.model-offer-list[aria-busy="true"] .opt .dot { border-style: solid; } /* loading, not blocked */
/* 1.56: Settings → Agents & instance → Actions that run without asking. The models block's head, notes and chips;
   each rule a row of its own text (monospace: it is a command) with Remove, then the field-and-chip of the email
   setting. The server's reason for a refused rule sits under the field in the error colour. No new colour. */
.trusted-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.trusted-list[aria-busy="true"] { min-height: 52px; }
.trusted-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 14px; }
.trusted-row + .trusted-row { border-top: 1px solid var(--line); }
.trusted-row code { flex: 1; min-width: 0; font: 14px/1.45 ui-monospace, "Cascadia Mono", Menlo, monospace; color: var(--text); overflow-wrap: anywhere; }
.trusted-row .chip { flex: none; min-height: 44px; }
.trusted-row .chip:disabled, .trusted-add .chip:disabled { opacity: .55; cursor: default; }
.trusted-empty { padding: 10px 14px; font-size: 14.5px; color: var(--dim); }
.trusted-add { display: flex; flex-direction: column; gap: 6px; margin: 10px 14px 4px; }
.trusted-label { font-size: 13px; color: var(--dim); }
.trusted-add-row { display: flex; gap: 8px; align-items: center; }
.trusted-add-row input { flex: 1; min-width: 0; min-height: 44px; font: 14px/1.4 ui-monospace, "Cascadia Mono", Menlo, monospace; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.trusted-add-row input::placeholder { color: var(--dim); }
.trusted-add-row input:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.trusted-add-row input[aria-invalid="true"] { border-color: var(--err); }
.trusted-add-row .chip { flex: none; min-height: 44px; padding-inline: 16px; }
.trusted-add .title-note, .trusted-add .vault-field-error { margin: 0; }

/* ---------- 1.36: tasks ----------
   Rows keep the session-row voice; the check is a 44px target on the left; a due task reads amber like a due reminder. */
.task-item { align-items: stretch; }
.task-item .task-check { flex: none; width: 44px; min-height: 44px; display: grid; place-items: center; color: var(--dim); background: none; border: 0; cursor: pointer; border-radius: 10px; }
.task-item .task-check:hover { color: var(--text); background: var(--raised); }
.task-item .task-check .i { width: 18px; height: 18px; }
.task-item .row { display: block; min-width: 0; flex: 1; padding: 12px 8px 14px 4px; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.task-item .row .title { white-space: normal; overflow-wrap: anywhere; }
.task-item.finished .row .title { color: var(--faint); text-decoration: line-through; }
.task-item.due .row .title { color: var(--text); }
.task-item .row .meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* a long session title stays two lines */
.rail .task-item .row { padding-left: 2px; }
.task-sheet .task-text { font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; margin: 0 14px 6px; }
.task-sheet .task-facts { margin: 0 14px 10px; color: var(--dim); font-size: 13.5px; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
.task-sheet .task-facts .due-label { color: var(--warn); }
.task-sheet .task-summary { margin: 0 14px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-sheet .task-summary h3 { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); }
.task-form .task-due-row { display: flex; gap: 8px; align-items: flex-end; }
.task-form .task-due-row label { flex: 1; min-width: 0; }
.task-form .task-due-row .chip { flex: none; min-height: 44px; }
.task-form .opt { margin: 0; }
.task-form .task-writing { color: var(--dim); font-size: 13.5px; }
.task-form .task-writing[hidden] { display: none; }
.conversation-task[hidden] { display: none; }

/* ---------- 1.39: vault ----------
   The Tasks library's rows and sheet, with the kind drawn where a task has its check. Names and commands are
   identifiers an agent types, so they are set in monospace; a request reads like an action approval. Tokens only. */
.vault-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.vault-name, .vault-cmd, .vault-key, .vault-value.shown { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
.vault-item { align-items: stretch; }
.vault-item .vault-kind { flex: none; width: 44px; min-height: 44px; display: grid; place-items: center; align-self: flex-start; margin-top: 4px; color: var(--dim); }
.vault-item .vault-kind .i { width: 18px; height: 18px; }
.vault-item .row { display: block; min-width: 0; flex: 1; padding: 12px 8px 14px 4px; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.vault-item .row .title.vault-name { font-size: 15px; font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
.vault-item.finished .row { cursor: default; }
.vault-item.finished .row .title { color: var(--faint); }
.vault-item .vault-restore { flex: none; align-self: center; margin-right: 12px; }
.rail .vault-item .row { padding-left: 2px; }
.vault-requests-help { margin: 0 18px 8px; font-size: 13.5px; max-width: 60ch; }
.vault-requests h2[tabindex="-1"]:focus { outline: none; } /* focused only to bring a push's reader to the requests */
.vault-history-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.vault-request { padding: 12px 18px 14px; border-bottom: 1px solid var(--line); }
.vault-request h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.vault-request-when { font-family: inherit; font-size: 13px; font-weight: 400; color: var(--dim); }
.vault-cmd { display: block; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.vault-request .vault-cmd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* a long command stays two lines; its title carries the rest */
.vault-request .vault-cmd:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.vault-request-where { display: flex; flex-wrap: wrap; gap: 4px 7px; margin: 8px 0 0; font-size: 13px; color: var(--dim); overflow-wrap: anywhere; }
.vault-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.vault-request-actions { margin-top: 10px; }
.vault-request-actions .chip { min-height: 44px; padding-inline: 16px; font-size: 14px; color: var(--text); }
@media (max-width: 600px) { .vault-request-actions .chip { flex: 1 1 auto; justify-content: center; } } /* three answers share the row, then wrap */
.rail .vault-request { padding-inline: 14px; }
.rail .vault-request-actions .chip { flex: 1 1 auto; justify-content: center; padding-inline: 10px; }
.vault-sheet .vault-name { overflow-wrap: anywhere; }
.vault-sheet .task-facts a { color: var(--clay); text-decoration-thickness: 1px; }
.vault-section { margin: 0 14px 14px; }
.vault-section h3, .vault-sheet .task-summary h3 { display: flex; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); }
.vault-section h3 span { color: var(--faint); font-weight: 400; }
.vault-sheet .task-summary { margin-inline: 14px; }
.vault-field { display: grid; grid-template-columns: minmax(5.5em, auto) 1fr auto; align-items: center; gap: 4px 12px; min-height: 52px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.vault-field:last-child { border-bottom: 0; }
.vault-field-label { font-size: 14px; color: var(--dim); }
.vault-value { min-width: 0; color: var(--faint); letter-spacing: .12em; overflow-wrap: anywhere; }
.vault-value.shown { color: var(--text); letter-spacing: 0; user-select: all; white-space: pre-wrap; } /* a pasted line break shows as one */
.vault-field-actions { display: flex; gap: 6px; }
.vault-field-actions .chip[hidden] { display: none; }
@media (max-width: 460px) { .vault-field { grid-template-columns: 1fr auto; } .vault-field .vault-value { grid-column: 1 / -1; grid-row: 2; padding-bottom: 6px; } } /* a long value gets the full width under its label */
.vault-policy { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.vault-policy strong { color: var(--text); font-weight: 600; }
.vault-policy-note { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--dim); } /* 1.41: the item overrides Agent access */
.vault-recipes, .vault-history-list { list-style: none; margin: 0; padding: 0; }
.vault-recipes li { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.vault-recipe-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vault-recipe-remove { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--dim); border-radius: 10px; }
.vault-recipe-remove:hover { color: var(--text); background: var(--raised); }
.vault-history-list li { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vault-history-list li:last-child { border-bottom: 0; }
.vault-history-what { font-size: 13.5px; color: var(--dim); line-height: 1.45; overflow-wrap: anywhere; }
.vault-history .vault-cmd { padding: 4px 8px; font-size: 12.5px; }
.vault-history .project-empty, .vault-section .project-empty { margin: 0; }
.vault-editor-help { margin: 0 14px 12px; }
.vault-form .vault-hint { margin: -6px 0 0; font-size: 13px; line-height: 1.45; color: var(--dim); }
.vault-form .vault-hint:empty { display: none; }
.vault-form .vault-name-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.vault-form .vault-name-input[aria-invalid="true"] { border-color: var(--err); }
.vault-form .vault-secrets { display: flex; flex-direction: column; gap: 12px; }
.vault-form .vault-secret { display: flex; flex-direction: column; gap: 4px; }
.vault-form .vault-secret-input { display: flex; gap: 8px; align-items: flex-start; }
.vault-form .vault-secret-input input, .vault-form .vault-secret-input textarea { flex: 1; min-width: 0; min-height: 44px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.vault-form .vault-secret-input input:focus-visible, .vault-form .vault-secret-input textarea:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.vault-form .vault-secret-input textarea { resize: vertical; line-height: 1.45; overflow-wrap: anywhere; }
.vault-form .vault-secret-input [aria-invalid="true"] { border-color: var(--err); }
.vault-form .vault-secret-input .chip { flex: none; }
.vault-form .vault-masked { -webkit-text-security: disc; }
.vault-form select:disabled { color: var(--dim); }
.vault-reveal[aria-pressed="true"] { color: var(--clay); border-color: var(--clay-deep); }
.vault-reveal[hidden] { display: none; }
.vault-form .task-due-row { display: flex; gap: 8px; align-items: flex-end; }
.vault-form .task-due-row label { flex: 1; min-width: 0; }
.vault-form .task-due-row .chip { flex: none; }
.vault-form-error { margin: 0; color: var(--err); font-size: 14px; }
.vault-form-error:empty { display: none; }
/* Custom fields: a fixed name with a masked value, or a name and value being added. */
.vault-form .vault-secrets:empty, .vault-custom-rows:empty, .vault-field-error:empty { display: none; }
.vault-custom { display: flex; flex-direction: column; gap: 10px; }
.vault-custom-head { margin: 4px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); }
.vault-form .vault-custom .vault-hint { margin: -4px 0 0; }
.vault-custom-rows { display: flex; flex-direction: column; }
.vault-custom-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vault-custom-row:first-child { padding-top: 0; }
.vault-custom-name { grid-column: 1 / -1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.vault-custom-row .vault-secret, .vault-custom-row .vault-removing, .vault-custom-row .vault-field-error { grid-column: 1 / -1; }
.vault-custom-row:has(textarea) { align-items: start; } /* a loaded value with a line break: Show and Remove stay at its top */
.vault-custom-row.removing .vault-custom-name { color: var(--faint); text-decoration: line-through; }
.vault-custom-row.removing input { opacity: .55; }
.vault-field-remove { min-width: 5.6em; justify-content: center; }
.vault-field-remove[aria-pressed="true"] { color: var(--clay); border-color: var(--clay-deep); }
.vault-field-drop { width: 44px; height: 44px; display: grid; place-items: center; color: var(--dim); border-radius: 10px; }
.vault-field-drop:hover { color: var(--text); background: var(--raised); }
.vault-custom-key input[aria-invalid="true"], .vault-custom-row .vault-secret-input input[aria-invalid="true"] { border-color: var(--err); }
.vault-field-error { margin: 0; color: var(--err); font-size: 13.5px; line-height: 1.45; }
.vault-add-field { align-self: flex-start; }
.vault-field-label.vault-field-custom { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; }
.vault-use { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.vault-use .vault-path { color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
/* 1.44: the recovery key sheet. The key sits in a read-only field, selected whole on focus. */
.vault-key-sheet .sheet-help { margin-inline: 14px; }
.vault-key-sheet .vault-key-note { margin: 0 14px 10px; font-size: 14px; line-height: 1.5; color: var(--warn); font-weight: 600; }
.vault-key-sheet .vault-key-label { display: block; margin: 4px 14px 6px; font-size: 13px; font-weight: 600; color: var(--dim); }
.vault-key-sheet .vault-key { display: block; box-sizing: border-box; width: calc(100% - 28px); margin: 0 14px 14px; padding: 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; word-break: break-all; resize: none; field-sizing: content; }
.vault-key-sheet .vault-key:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.vault-key-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0 14px; }
.vault-key-actions .primary { flex: 1 1 8em; padding: 12px; font-size: 16px; }
.title-settings[hidden] { display: none; }
.vault-settings .chip { align-self: flex-start; }
.vault-settings .vault-warning { color: var(--warn); }
/* 1.40: Settings → Vault: Protection (mode, its actions, Lock after) and Export and import. */
.vault-settings { gap: 16px; }
.vault-set { display: flex; flex-direction: column; gap: 6px; }
.vault-set-head { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--dim); }
.vault-mode { margin: 0; font-size: 14.5px; color: var(--text); }
.vault-set-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.vault-settings .chip[hidden], .vault-settings .voice-field[hidden], .vault-settings .title-note[hidden] { display: none; }
.vault-settings .chip:disabled { opacity: .55; }
.vault-settings .voice-field { margin-top: 6px; max-width: 22em; }
/* 1.41: Agent access, first in the block: its head labels the select directly under it. */
.vault-settings label.vault-set-head + .voice-field { margin-top: 0; }
/* The locked Vault: the list's place, plain, with one action. */
.vault-locked { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 18px 28px; max-width: 60ch; }
.vault-locked h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 600; color: var(--text); }
.vault-locked h3 .vault-lock-glyph { color: var(--clay); }
.vault-locked h3 .i { width: 20px; height: 20px; }
.vault-locked p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.vault-locked .primary { width: auto; min-height: 44px; margin-top: 6px; padding: 11px 28px; font-size: 15px; }
.rail .vault-locked { padding: 14px 14px 18px; }
.rail .vault-locked h3 { font-size: 15.5px; }
.rail .vault-locked p { font-size: 13.5px; }
.vault-lock-glyph { display: inline-flex; align-items: center; }
.vault-lock-glyph .i { width: 13px; height: 13px; stroke-width: 1.9; }
.chip .vault-lock-glyph .i { width: 13px; height: 13px; }
[data-vault-home] .vault-lock-glyph, [data-rail-view="vault"] .vault-lock-glyph { margin-left: -2px; color: var(--dim); }
/* Passphrase sheets: unlock, set or change, remove, export, import. */
.vault-pass-sheet .vault-pass-help { margin: 0 14px 12px; max-width: 60ch; }
.vault-pass-sheet .vault-secret .vault-hint { margin: 0; }
.vault-pass-warn { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--warn); }
.vault-pass-sheet input[aria-invalid="true"] { border-color: var(--err); }
.vault-pass-result { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.vault-pass-result:empty { display: none; }
.vault-form .vault-file { min-height: 44px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; max-width: 100%; }
.vault-form .vault-file::file-selector-button { margin-right: 10px; font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.vault-form .vault-file:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }

/* Accent previews show the palette belonging to the current colour mode. */
button[data-accent="clay"] .accent-dot { background: var(--accent-orange); }
button[data-accent="blue"] .accent-dot { background: var(--accent-blue); }
button[data-accent="purple"] .accent-dot { background: var(--accent-purple); }
/* Documents retain their own canvas and colour preference inside the viewer. */
.doc-frame { color-scheme: light; }
/* 1.42: That looks like a secret. The paste and send sheets in the Vault's form voice: what was found and its length
   (never a character of it), one Name and Kind row per secret, Store as the one primary action, and the two other
   choices as option rows that say what they do. Over the queue editor's dialog the sheet stacks above it. */
.secret-sheet .secret-what { margin: 0 14px 4px; font-size: 16px; line-height: 1.45; color: var(--text); max-width: 60ch; }
.secret-sheet .secret-help { margin: 4px 14px 14px; max-width: 60ch; }
.secret-sheet .secret-hint { margin: -6px 14px 12px; font-size: 13.5px; line-height: 1.45; color: var(--dim); }
.secret-form .secret-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8.5em, auto); gap: 6px 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.secret-form .secret-row:last-of-type { padding-bottom: 0; border-bottom: 0; }
.secret-form .secret-row-head { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.secret-form .secret-row .vault-field-error { grid-column: 1 / -1; }
.secret-form .secret-stored { color: var(--ok); font-weight: 500; }
.secret-form .secret-row.stored input, .secret-form .secret-row.stored select { opacity: .6; }
.secret-form .vault-hint { margin: 0; }
.secret-form .vault-name-input[aria-invalid="true"] { border-color: var(--err); }
.secret-sheet .secret-alt { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 340px) { .secret-form .secret-row { grid-template-columns: minmax(0, 1fr); } }
.scrim.scrim-over { z-index: 42; }
.sheet.sheet-over { z-index: 43; }
/* 1.45: select mode and deleting from the trash. A picked row takes the selected-row surface, a picked card the clay
   border; the bar holds the count and the actions at the foot of the library while selecting. Delete forever and
   Empty trash are the only destructive controls, in --err like a saved prompt's Delete for good. */
#doc-select[aria-pressed="true"] { color: var(--clay); border-color: var(--clay); background: var(--clay-deep); }
.doc-pickable .row { cursor: pointer; }
.doc-pick-box { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--clay); cursor: pointer; }
.document-item.picked, .document-item.picked:hover { background: var(--raised); }
.doc-card.doc-pickable { cursor: pointer; }
.doc-card.picked { border-color: var(--clay); }
.doc-card-pick { position: absolute; top: 6px; left: 6px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line); }
.doc-card-pick .doc-pick-box { margin: 0; }
.doc-selectbar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
.doc-selectcount { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.doc-selectactions { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-selectbar .chip { color: var(--text); }
.doc-selectbar .chip:disabled { color: var(--faint); cursor: default; }
.doc-trash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 18px 8px; }
.doc-trash-head .sheet-help { margin: 0; max-width: 65ch; }
.doc-trash-head .chip { flex: none; margin-top: 0; }
.doc-trash .document-item { align-items: center; }
.doc-trash .doc-restore { flex: none; margin: 0 4px 0 0; }
.chip.doc-danger, .sheet .opt.doc-danger { color: var(--err); }
.chip.doc-danger { border-color: color-mix(in srgb, var(--err) 55%, transparent); }
@media (max-width: 600px) { .doc-trash-head { flex-direction: column; } }
.doc-pickable label.row { display: flex; align-items: flex-start; gap: 14px; }
/* The Trash opens like the other disclosures (▸/▾ beside its heading), not with a marker on a line of its own. */
.doc-trash > summary { display: flex; align-items: baseline; gap: 8px; padding-left: 18px; list-style: none; }
.doc-trash > summary::-webkit-details-marker { display: none; }
.doc-trash > summary::before { content: '▸'; color: var(--faint); flex: none; }
.doc-trash[open] > summary::before { content: '▾'; }
.doc-trash > summary h2 { padding: 8px 18px 4px 0; }

/* ---------- 1.60: Assistant mode ----------
   html.assistant (Settings, or POCKET_ASSISTANT_MODE). Pinned brief: variance 3, motion 2, density 3; existing
   tokens, no new colour. It hides developer controls and meters; nothing is restyled for the workbench. */
html.assistant #tbar,
html.assistant #composer-toggle,
html.assistant #ctx-ring,
html.assistant #choose-skill,
html.assistant #save-prompt,
html.assistant #muteb,
html.assistant .voice-mute,
html.assistant #project-open,
html.assistant #task-open,
html.assistant .send-mode,
html.assistant .turnmeta,
html.assistant #results-open,
html.assistant #queue-open,
html.assistant #git-open,
html.assistant #chgb,
html.assistant #splitb,
html.assistant #session-switch,
html.assistant .session-summary,
html.assistant .session-filters,
html.assistant .session-more-filters,
html.assistant [data-workspace-filters],
html.assistant .session-footnote,
html.assistant #rail-filter-toggle,
html.assistant #rail-filter-controls,
html.assistant #rail-filter-summary,
html.assistant #refresh-sessions,
html.assistant .ledger.step .det,
html.assistant .ledgerwrap > summary .tc-raw,
html.assistant .approval-card pre.approval-what,
html.assistant .row .meta .proj,
html.assistant .session-item .row .meta,
html.assistant .session-item .session-status.state-idle,
html.assistant #cproj,
html.assistant .run-confirmation[data-state=idle],
html.assistant .run-confirmation[data-state=unknown] { display: none !important; }
html.assistant #composer-actions:empty { display: none; }
html.assistant .settings-assistant-hidden { display: none !important; }
html.assistant .assistant-home .recent-starts { display: none; } /* the home's own Recent lists conversations */

/* Home: the first-run note, Waiting for you, Recent, then the way to Files, Tasks, Projects and the Vault. */
.assistant-home { gap: 22px; }
.assistant-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.assistant-intro p { flex: 1 1 240px; margin: 0; font-size: 15.5px; line-height: 1.5; }
.home-h { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.home-waiting { display: flex; flex-direction: column; gap: 8px; }
.home-waiting[hidden] { display: none; }
.home-card { display: flex; flex-direction: column; gap: 2px; min-height: 56px; justify-content: center; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line)); border-radius: 12px; color: var(--text); text-decoration: none; background: var(--surface); }
.home-card:hover, .home-card:focus-visible { background: var(--raised); }
.home-card-title { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-card-what { font-size: 14px; color: var(--dim); }
.home-recent[hidden] { display: none; }
.home-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.home-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 2px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.home-row:hover, .home-row:focus-visible { background: var(--raised); }
.home-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.home-row.state-input .home-dot { background: var(--warn); }
.home-row.state-running .home-dot { background: var(--ok); }
.home-row.state-failed .home-dot { background: var(--err); }
.home-row.state-ready .home-dot { background: var(--clay); }
.home-title { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-when { font-size: 13.5px; color: var(--dim); white-space: nowrap; }
.home-state { color: var(--text); }
.home-all { display: inline-flex; align-items: center; min-height: 44px; color: var(--clay); font-size: 15px; }
.home-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ---------- 1.61: files in the conversation ----------
   Operate refinement: variance 2, motion 1, density 5; existing tokens. A card is a quiet raised row under the reply
   that handed the file over: picture or type tile, name, type, then Keep in Files / In Files and Download. */
.file-cards { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; max-width: 640px; }
.file-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.m-asst a.file-card-main, .file-card-main { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; min-height: 56px; color: var(--text); text-decoration: none; border-radius: 8px; }
.file-card-main:hover .file-card-name, .file-card-main:focus-visible .file-card-name { text-decoration: underline; text-decoration-thickness: 1px; }
.file-card-thumb { position: relative; flex: none; width: 72px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--raised); border: 1px solid var(--line); display: grid; place-items: center; }
.file-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #fff; }
.file-card-ext { font: 600 12px/1 ui-monospace, "Cascadia Mono", Menlo, monospace; color: var(--dim); letter-spacing: .04em; }
.file-card-img + .file-card-ext { display: none; }
.file-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-card-name { color: var(--text); font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card-meta { font-size: 13.5px; color: var(--dim); }
.file-card-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.file-card-kept { font-size: 13.5px; color: var(--ok); padding: 0 6px; }

/* 1.62: Try harder, under the latest reply in Assistant mode */
#msgs > .try-harder { margin: 2px 0 8px; align-self: flex-start; }

/* 1.67: Settings → Agents & instance → Automatic model choice and One sign-in. Operate refinement: variance 2, motion 1,
   density 5; existing tokens. One row per level: name and what it is for, then Model and Effort side by side (stacked on
   a phone), then what it runs now. */
/* inside .model-offer, everything but the switch sits on the same 14px inset as the set head and notes */
.model-offer > .voice-field, .model-offer > .trusted-add, .model-offer > .router-levels, .model-offer > .access-form { margin-left: 14px; margin-right: 14px; }
.model-offer > #s-router-on { margin: 0; padding: 10px 14px; font-size: 15.5px; }
.router-levels { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid var(--line); }
.router-level { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.router-level-name { grid-column: 1 / -1; font-size: 15.5px; font-weight: 600; margin: 0; }
.router-level-name .sub { display: block; font-weight: 400; font-size: 13.5px; color: var(--dim); margin-top: 2px; }
.router-level .voice-field { margin: 0; }
.router-runs { grid-column: 1 / -1; margin: 2px 0 0; }
@media (max-width: 520px) { .router-level { grid-template-columns: minmax(0, 1fr); } }
.access-form { display: flex; flex-direction: column; gap: 6px; }
.access-form .voice-field input { width: 100%; }

/* 1.69: Inbox. The rail switch carries an icon per library; with five or more entries only the pressed one keeps its
   name (aria-label and title carry it for the rest). The list reuses the Tasks rows; a new entry has a clay dot. */
.rail-switch button .i { width: 18px; height: 18px; flex: none; }
.rail-switch.many button:not([aria-pressed="true"]) .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rail-switch.many { gap: 2px; }
.rail-switch.many button + button::before { left: -1.5px; }
/* A narrow rail does the same whatever the count, and the narrowest keeps icons only (the rail is an inline-size container). */
@container (max-width: 319px) { .rail-switch button:not([aria-pressed="true"]) .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rail-switch button { gap: 2px; } }
@container (max-width: 239px) { .rail-switch button[aria-pressed="true"] .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* With five or more entries a count sits on the icon's corner instead of beside it, so six entries with three counts
   fit beside the rail's buttons in a 320px rail (the head's container-query sizing does the rest). */
.rail-switch.many .badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10.5px; }
.rail-switch.many button[aria-pressed="true"] .badge { position: static; margin-left: 2px; min-width: 18px; height: 18px; font-size: 11.5px; }
.inbox-item .inbox-mark .inbox-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--clay); }
.inbox-item .inbox-text { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--dim); overflow-wrap: anywhere; }
.inbox-item.state-opened .row .title, .inbox-item.state-resolved .row .title, .inbox-item.state-not_useful .row .title, .inbox-item.state-dismissed .row .title { color: var(--dim); }
.inbox-item .inbox-x { color: var(--dim); }
.inbox-tools { padding: 4px 18px 8px; }
.inbox-search { width: 100%; min-height: 44px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.inbox-search:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.inbox-stale { margin-top: 8px; color: var(--warn); }
.inbox-body { font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.inbox-body a { color: var(--clay); }
.inbox-card .home-card-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 1.70: Inbox Watch settings. The 1.67 settings blocks (set head, lead, router-level rows), with periods as rows of
   day chips and times, and a plain table of what each day cost. No new colour; the pressed day uses the filter-chip clay. */
.inbox-tools-row { display: flex; gap: 8px; align-items: center; }
.inbox-tools-row .inbox-search { flex: 1; min-width: 0; }
.inbox-tools-row .chip { flex: none; }
.watch-sheet { --sheet-w: 640px; }
.watch-body > .title-note, .watch-body > .vault-field-error { margin-left: 14px; margin-right: 14px; }
.watch-sheet .watch-status { margin-bottom: 6px; }
.watch-sheet #w-pause { margin: 0 0 4px; }
.watch-periods[hidden] { display: none; }
.watch-period { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.watch-period-head { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.watch-name { flex: 1; min-width: 0; min-height: 44px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.watch-name:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.watch-days { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 4px; margin: 2px 0; max-width: 420px; }
.watch-days .chip { justify-content: center; padding: 4px 0; font-weight: 600; }
.watch-days .chip[aria-pressed="true"] { color: var(--clay); border-color: var(--clay); background: var(--clay-deep); }
.watch-wide { grid-column: 1 / -1; }
.watch-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; margin: 6px 14px 0; }
.watch-pair .voice-field { margin: 0; }
.model-offer > .watch-pair + .title-note { margin-top: 4px; }
@media (max-width: 520px) { .watch-period { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
#w-usage { margin: 0 14px; }
.watch-usage { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.watch-usage th, .watch-usage td { padding: 9px 6px; text-align: right; border-bottom: 1px solid var(--line); font-weight: 400; }
.watch-usage th:first-child, .watch-usage td:first-child { text-align: left; padding-left: 0; }
.watch-usage thead th { font-size: 12px; font-weight: 600; color: var(--dim); }
.watch-usage tbody th { color: var(--text); white-space: nowrap; }
.watch-usage tfoot th, .watch-usage tfoot td { font-weight: 600; border-bottom: 0; }
.watch-usage .watch-unrecorded td[colspan] { text-align: left; color: var(--dim); }
.watch-sheet #w-usage .title-note { margin: 6px 0 0; }
.watch-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
@media (min-width: 600px) { .watch-period { grid-template-columns: repeat(3, minmax(0, 1fr)); } .watch-period .watch-wide { grid-column: auto; } }
.watch-sheet .title-note { text-wrap: pretty; max-width: 58ch; } /* ch is a digit; prose runs ~1.35 letters per ch */
.inbox-search::placeholder, .watch-name::placeholder { color: var(--dim); opacity: 1; }
/* 1.73: Your rules, a plain textarea in the settings' field style */
.watch-rules textarea { width: 100%; min-height: 200px; resize: vertical; font: inherit; font-size: 15px; line-height: 1.5; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.watch-rules textarea::placeholder { color: var(--dim); opacity: 1; }
.watch-rules textarea:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.model-offer > .watch-rules { margin: 6px 14px 0; }