:root {
  --bg: #f4f3f1;
  --card: #ffffff;
  --text: #1d1d1b;
  --muted: #8c8a85;
  --accent: #c96442;
  --accent-soft: #f3e7e2;
  --border: #e7e6e3;
  --user: #ecebe8;
  --green: #2e7d52;
  --icon-bg: #ece9f7;
  --shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --code-bg: #f3f1ee;
  /* Reading typography. Serif body (book feel), sans headings (clear structure),
     mono code. On-device faces — instant, offline-safe, no web-font flash. */
  --read-serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --read-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --read-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --read-size: 18px;      /* body text — book-sized */
  --read-leading: 1.6;    /* line-height — tightened a touch for closer sentence spacing */
  --read-measure: 38em;   /* cap line width (~68-72 chars) for readability */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
html { background: var(--bg); } /* fill any edge so no white can ever show */
body {
  background: var(--bg); color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Pinned to ALL FOUR edges of the viewport — no height number to come up short,
     so the body physically reaches the bottom and the grey page background can
     never show as a band beneath the composer. JS only overrides this (top+height)
     while the keyboard is open, to lift the composer above the keyboard. */
  position: fixed; inset: 0;
  overflow: hidden;
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background: var(--bg);
}
.topbar .title { flex: 1; text-align: center; font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-wrap { flex: 1; text-align: center; overflow: hidden; }
.title-wrap .title { font-size: 16px; }
.title-wrap .subtitle { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: none; background: #fff; color: var(--text); font-size: 18px;
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; position: relative;
}
.iconbtn.plus { background: var(--accent); color: #fff; font-size: 24px; line-height: 1; }
#backBtn { font-size: 26px; }
.iconbtn .count { position: absolute; top: -2px; right: -2px; background: var(--accent); color: #fff; font-size: 10px; min-width: 15px; height: 15px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.iconbtn .count:empty, .iconbtn .count[data-zero="1"] { display: none; }

.ram-strip { font-size: 12px; color: var(--muted); text-align: center; padding: 0 0 6px; }

/* ---------- list screen ---------- */
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 14px calc(env(safe-area-inset-bottom) + 20px); }
.sec { color: var(--muted); font-size: 13px; font-weight: 500; margin: 16px 4px 8px; }
.card {
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow);
  padding: 13px 14px; margin-bottom: 10px; display: flex; gap: 12px; align-items: flex-start;
}
.card .ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--icon-bg);
  display: flex; align-items: center; justify-content: center; color: #6b5bd1; font-size: 17px;
}
.card .ic.live { background: #e6f4ec; color: var(--green); }
.card .body { flex: 1; min-width: 0; }
.card .top { display: flex; align-items: baseline; gap: 8px; }
.card .name { font-weight: 600; font-size: 16px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .time { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.card .sub { font-size: 13px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .res { font-size: 12px; color: var(--accent); margin-top: 4px; }
/* Status tag (dot + short label) under each card title — the at-a-glance session state.
   Minimal & flat per Elias's request: a small soft dot + a muted label, no loud circles.
   Dot/label colors are set inline per-state from STATUS_TAGS (app.js). */
.card .status-tag { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.card .status-tag .status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.card .status-tag .status-label { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
/* The "Needs you" dot gently pulses so the one state that needs action draws the eye
   without being garish. Other states are static. Respects reduced-motion below. */
.card .status-needs .status-dot { animation: statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .card .status-needs .status-dot { animation: none; } }
.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 30px 12px; }

/* ---------- collapsible "System & test sessions" group ---------- */
.sysgroup { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 6px; }
.sysgroup-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 4px; cursor: pointer; user-select: none;
}
.sysgroup-chev { color: var(--muted); font-size: 12px; width: 12px; flex: 0 0 auto; }
.sysgroup-label { color: var(--muted); font-size: 13px; font-weight: 500; flex: 1; }
.sysgroup-del {
  flex: 0 0 auto; border: 1px solid var(--border); background: #fff; color: var(--accent);
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 11px;
}
.sysgroup-del:disabled { opacity: .55; }
.sysgroup-body { padding-top: 6px; }

/* ---------- conversation screen ---------- */
#messages { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 18px 14px; -webkit-overflow-scrolling: touch; }
.msg { margin: 18px 0; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { background: var(--user); border-radius: 16px; padding: 10px 14px; margin-left: 40px; }
.msg.asst { color: var(--text); }

/* ===== Book-quality reading typography for assistant prose ===== */
.msg.asst .text {
  font-family: var(--read-serif);
  font-size: var(--read-size);
  line-height: var(--read-leading);
  letter-spacing: .002em;
  max-width: var(--read-measure);   /* comfortable measure */
  white-space: normal;              /* rendered HTML now, not pre-wrap */
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Paragraph rhythm */
.msg.asst .text p { margin: 0 0 1.15em; }
.msg.asst .text > :first-child { margin-top: 0; }
.msg.asst .text > :last-child { margin-bottom: 0; }

/* Headings — clean bold SANS for clear structure against the serif body */
.msg.asst .text h1, .msg.asst .text h2, .msg.asst .text h3,
.msg.asst .text h4, .msg.asst .text h5, .msg.asst .text h6 {
  font-family: var(--read-sans);
  font-weight: 700; line-height: 1.3;
  margin: 1.5em 0 .5em; color: var(--text);
}
.msg.asst .text h1 { font-size: 1.5em; letter-spacing: -.01em; }
.msg.asst .text h2 { font-size: 1.3em; letter-spacing: -.005em; }
.msg.asst .text h3 { font-size: 1.13em; }
.msg.asst .text h4, .msg.asst .text h5, .msg.asst .text h6 { font-size: 1em; color: var(--muted); }

/* Real bullets + hanging indentation (wrapped lines align under the text) */
.msg.asst .text ul, .msg.asst .text ol { margin: .6em 0 .9em; padding-left: 1.4em; }
.msg.asst .text li { margin: .32em 0; padding-left: .15em; }
.msg.asst .text ul { list-style: none; }
.msg.asst .text ul > li { position: relative; }
.msg.asst .text ul > li::before {
  content: "•"; position: absolute; left: -1em;
  color: var(--accent); font-weight: 700;
}
.msg.asst .text ul ul > li::before { content: "◦"; color: var(--muted); }
.msg.asst .text ul ul ul > li::before { content: "‣"; }
.msg.asst .text ol { list-style: decimal; }
.msg.asst .text ol > li { padding-left: .25em; }
/* Nested lists tighten slightly */
.msg.asst .text li > ul, .msg.asst .text li > ol { margin: .3em 0 .35em; }

/* Bold / italic */
.msg.asst .text strong { font-weight: 700; }
.msg.asst .text em { font-style: italic; }

/* Inline code + code blocks */
.msg.asst .text code {
  font-family: var(--read-mono); font-size: .88em;
  background: var(--code-bg); border-radius: 5px; padding: .08em .35em;
}
.msg.asst .text pre {
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin: .8em 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.msg.asst .text pre code { background: none; padding: 0; font-size: .85em; line-height: 1.5; }

/* Blockquote — soft left rule, muted */
.msg.asst .text blockquote {
  margin: .8em 0; padding: .1em 0 .1em 1em;
  border-left: 3px solid var(--accent-soft); color: var(--muted); font-style: italic;
}

/* Links */
.msg.asst .text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Horizontal rule */
.msg.asst .text hr { border: none; border-top: 1px solid var(--border); margin: 1.4em 0; }
.msg.streaming { opacity: .75; }

/* Working/status line just above the composer (#statusBar). Its job is to signal that
   the session is actively processing (not frozen): it shows "Looming" while a turn
   runs and is hidden when idle. Muted, small, left-aligned to match the chat. */
.status-bar {
  /* Colour is a clear, darker green (per Elias) so the "looming" working indicator
     reads as a calm, alive "in progress" state without looking washed-out. Both the
     centre label and the flanking dot rows inherit this colour; the blink/ripple
     animations only vary opacity, not hue. */
  padding: 4px 16px 6px; font-size: 13px; color: #3cb043;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  overflow: hidden;   /* clip the long dot rows at both edges of the line */
}
/* "Looming" sits in the CENTRE; a dot row flanks it on each side. The label blinks
   gently — same colour, just breathing a little darker then lighter (opacity only,
   no colour change) — so the centre is alive too, not just the dots. */
.status-label { animation: statusblink 1.8s infinite ease-in-out; }
/* Min opacity raised .5 -> .75 (per Elias) so the label stays clearly solid, only
   breathing slightly rather than fading out. */
@keyframes statusblink { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }
/* Each side is a dot row that SPREADS OUTWARD from "Looming". The left row is
   right-aligned (flex-end) and the right row left-aligned (flex-start) so both rows
   start at the label and run toward the edges; each grows to fill its half of the line.
   Per-dot animation-delay (set inline in app.js, scaling with distance from centre)
   makes the fade ripple away from the label on both sides in mirror image. */
.status-dots { flex: 1; display: flex; overflow: hidden; letter-spacing: 3px; }
.status-dots.left  { justify-content: flex-end;   margin-right: 2px; }
.status-dots.right { justify-content: flex-start; margin-left: 2px; }
.status-dots span { animation: statusdot 1.8s infinite ease-in-out both; }
/* Resting dot opacity raised .15 -> .4 (per Elias) so the dots stay clearly visible
   and solid, not nearly-transparent, while the wave still ripples to full opacity. */
@keyframes statusdot { 0%, 70%, 100% { opacity: .4; } 35% { opacity: 1; } }
.msg .att { font-size: 12px; color: var(--muted); margin-top: 4px; }
.msg .row { margin-top: 6px; }
.msg .play { font-size: 13px; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; transition: transform .06s, background .12s, color .12s, border-color .12s; }
.msg .play:active { transform: scale(.92); }
/* Icon-only play/pause toggle: subtle by default, a soft green while playing. */
.msg .play.icon { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.msg .play.icon.playing { color: #1e8e3e; background: #e7f5ec; border-color: #6cc08b; }
.msg .play.icon.ok { color: #1e8e3e; border-color: #6cc08b; }
.msg .play.icon svg { display: block; }
.hint { color: var(--muted); font-size: 14px; text-align: center; padding: 30px 16px; }

/* ---------- live "what Claude is doing" (thinking + tool steps), terminal-style ---------- */
.msg.asst .think {
  color: var(--muted); font-size: 13.5px; font-style: italic; line-height: 1.4;
  border-left: 2px solid var(--border); padding: 2px 0 2px 10px; margin: 2px 0 8px;
  white-space: pre-wrap; word-wrap: break-word;
}
/* MECHANICS DRAWER — one collapsed <details> per assistant turn holding all the
   tool calls / command output / thinking. Sits above the turn's text; folded by
   default so the chat stays clean (Elias rarely needs the tool/command churn), one
   tap on the summary to expand, one to re-collapse. Kept small + muted so even when
   open it never shouts over Loom's actual answer. The ▸/▾ caret is drawn in CSS so
   it flips automatically with the open state. */
.msg.asst .mech { margin: 2px 0 9px; }
.msg.asst .mech-sum {
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  display: inline-flex; align-items: center;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); background: #faf9f7; border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 11px;
  transition: background .12s, color .12s, border-color .12s;
}
.msg.asst .mech-sum::-webkit-details-marker { display: none; }   /* hide native disclosure triangle */
.msg.asst .mech-sum::before { content: "\25B8\00a0"; }            /* our own caret: ▸ + nbsp when collapsed */
.msg.asst .mech[open] > .mech-sum::before { content: "\25BE\00a0"; } /* ▾ when expanded */
.msg.asst .mech[open] > .mech-sum { color: var(--text); }
.msg.asst .mech-sum:active { background: var(--border); }
.msg.asst .mech-body { margin-top: 9px; }

.msg.asst .step { margin: 6px 0; }
.msg.asst .step-act {
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent); word-break: break-word;
}
.msg.asst .step-out {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); background: #faf9f7; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 9px; margin: 4px 0 0 14px; max-height: 180px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.msg.asst .step-out.err { color: #b3261e; background: #fbeceb; border-color: #f3c9c5; }

#playerBar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.pp { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none; font-size: 16px; color: #fff; background: var(--accent); }
.pp.note { background: #fff; color: var(--text); box-shadow: var(--shadow); }
#scrub { -webkit-appearance: none; appearance: none; flex: 1; height: 30px; background: transparent; }
#scrub::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: var(--border); }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--accent); }
.time { font-size: 12px; color: var(--muted); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

#attachBar { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px 0; }
.chip { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; font-size: 13px; }
.chip .x { background: none; border: none; color: var(--muted); font-size: 14px; }

/* ---------- composer ---------- */
/* Bottom padding = JUST the home-indicator clearance (not stacked on extra px),
   so the input row sits close to the bottom edge instead of floating high. */
#composer { position: relative; padding: 6px 12px max(calc(env(safe-area-inset-bottom) / 2), 4px); background: var(--bg); }

/* Slash-command menu — floats just above the composer field, like Claude Code's
   "/" autocomplete. Tap a row to fill the command into the box. */
.slash-menu {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% - 2px);
  max-height: 44vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 6px; z-index: 40;
}
.slash-item { padding: 9px 12px; border-radius: 11px; cursor: pointer; }
.slash-item.active, .slash-item:active { background: var(--accent-soft); }
.slash-name { font-size: 15px; font-weight: 600; color: var(--accent); }
.slash-hint { font-weight: 400; color: var(--muted); font-size: 13px; }
.slash-desc { font-size: 13px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Floating "jump to latest" arrow — sits centered just above the composer.
   Shown only when the user has scrolled up away from the bottom. */
.jump {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 96px; z-index: 15;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
}
.jump[hidden] { display: none; }
.jump:active { transform: translateX(-50%) scale(.92); }
.composer-field { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; box-shadow: var(--shadow); }
#input { width: 100%; resize: none; max-height: 140px; border: none; outline: none; background: transparent; color: var(--text); font: inherit; padding: 4px 0; }
.composer-row { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 6px 4px 0; }
.composer-row .spacer { width: 8px; }
.round { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; font-size: 17px; color: var(--text); background: #fff; box-shadow: var(--shadow); }
.round.send { background: var(--accent); color: #fff; font-size: 19px; }
.round.send.stopping { background: #e5484d; font-size: 15px; }
.stopped-note { font-size: 12px; color: var(--muted); margin-top: 6px; font-style: italic; }

/* ---------- choice popup (option buttons — the app's AskUserQuestion) ---------- */
.options { margin: 10px 0 4px; background: var(--accent-soft); border: 1px solid #ecd9d2; border-radius: 16px; padding: 12px; }
.options .opt-q { font-weight: 600; font-size: 15px; margin: 0 2px 10px; color: var(--text); }
.options .opt-list { display: flex; flex-direction: column; gap: 8px; }
.options .opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 14px; box-shadow: var(--shadow); color: var(--text);
  transition: border-color .12s, background .12s, transform .06s;
}
.options .opt:active { transform: scale(.985); }
.options .opt .opt-label { font-weight: 600; font-size: 15px; }
.options .opt .opt-detail { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.options .opt.chosen { border-color: var(--accent); background: #fff; }
.options .opt.chosen .opt-label::after { content: " ✓"; color: var(--accent); }
.options.answered .opt:not(.chosen) { opacity: .5; }
.options .opt:disabled { cursor: default; }
.options .opt-other { font-size: 12px; color: var(--muted); margin: 10px 2px 0; }

/* ---------- REAL popup (AskUserQuestion) + permission prompt ---------- */
.ask { margin: 10px 0 4px; background: var(--accent-soft); border: 1px solid #ecd9d2; border-radius: 16px; padding: 12px; }
.ask-q + .ask-q { margin-top: 14px; padding-top: 14px; border-top: 1px solid #ecd9d2; }
.ask-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin: 0 2px 4px; }
.ask-title { font-weight: 600; font-size: 15px; margin: 0 2px 10px; color: var(--text); }
.ask-list { display: flex; flex-direction: column; gap: 8px; }
.ask-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 14px; box-shadow: var(--shadow); color: var(--text);
  transition: border-color .12s, background .12s, transform .06s;
}
.ask-opt:active { transform: scale(.985); }
.ask-opt .ask-label { font-weight: 600; font-size: 15px; }
.ask-opt .ask-desc { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.ask-opt.chosen { border-color: var(--accent); background: #fff; }
.ask-opt.chosen .ask-label::after { content: " ✓"; color: var(--accent); }
.ask.answered .ask-opt:not(.chosen) { opacity: .5; }
.ask-opt:disabled, .ask-other:disabled, .ask-submit:disabled { cursor: default; }
.ask-other { width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; background: #fff; color: var(--text); }
.ask-submit { margin-top: 12px; width: 100%; padding: 11px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity .12s; }
.ask-submit:disabled { opacity: .4; cursor: default; }
.ask.answered .ask-submit { display: none; }

.perm { margin: 10px 0 4px; background: #fff7f5; border: 1px solid #ecd9d2; border-radius: 14px; padding: 12px 14px; }
.perm-title { font-weight: 600; font-size: 15px; color: var(--text); }
.perm-sum { font-size: 13px; color: var(--muted); margin-top: 4px; font-family: ui-monospace, Menlo, monospace; word-break: break-word; }
.perm-row { display: flex; gap: 8px; margin-top: 12px; }
.perm-btn { flex: 1; padding: 10px; border-radius: 11px; font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); }
.perm-btn.allow { background: var(--accent); color: #fff; border-color: var(--accent); }
.perm-btn.deny { background: #fff; color: var(--text); }
.perm.answered { opacity: .6; }
.round.rec-on, .pp.note.rec-on { color: #fff; animation: recblink 0.95s steps(1, end) infinite; }
@keyframes recblink {
  0%, 49%   { background: #e5484d; box-shadow: 0 0 0 4px rgba(229,72,77,.45); }
  50%, 100% { background: #8f2a2d; box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}
#audioModeBtn[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
#effortBtn.set { background: var(--accent-soft); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ---------- effort / thinking sheet ---------- */
.effort-label { font-size: 12px; color: var(--muted); padding: 6px 10px 4px; }
.effort-opts { display: flex; gap: 6px; padding: 0 8px 6px; }
.effort-opt { flex: 1; padding: 12px 0; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); font-size: 15px; }
.effort-opt.chosen { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; }
.toggle-state { color: var(--muted); font-weight: 600; }
.toggle-row.on .toggle-state { color: var(--accent); }
/* A picker locked because Super mode is forcing its value: dimmed + non-interactive.
   The chosen value still shows (so the user sees the forced setting), but it can't be
   changed until they leave Super. */
.effort-opts.locked, .toggle-row.locked { opacity: .45; pointer-events: none; }
/* One-line explainer under the orchestration mode selector. */
.effort-hint { font-size: 11px; color: var(--muted); padding: 2px 10px 8px; line-height: 1.35; }

/* ---------- sheets ---------- */
#sheetBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 20; }
.sheet { position: fixed; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 8px); z-index: 21; background: #fff; border-radius: 18px; box-shadow: 0 8px 40px rgba(0,0,0,.18); padding: 8px; max-height: 80dvh; overflow-y: auto; }
.sheet-title { color: var(--muted); font-size: 13px; text-align: center; padding: 10px; }
.sheet-btn { width: 100%; border: none; background: #fff; color: var(--text); font-size: 17px; padding: 15px; border-top: 1px solid var(--border); }
.sheet-btn:first-of-type { border-top: none; }
.sheet-btn.danger { color: #e5484d; }
.sheet-btn.cancel { margin-top: 6px; border-top: none; font-weight: 600; }
.sheet-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 8px; }
.sheet-head .sub { color: var(--muted); font-size: 12px; flex: 1; }
.sheet-head .x { background: none; border: none; color: var(--muted); font-size: 18px; }
.noteRec { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--border); background: #faf9f7; color: var(--text); font-size: 15px; margin-bottom: 8px; }
.noteRec.rec-on { color: #fff; border-color: #e5484d; animation: recblink 0.95s steps(1, end) infinite; }
#notesList { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.note-item { background: #faf9f7; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; }
.note-item .nt { flex: 1; white-space: pre-wrap; word-wrap: break-word; font-size: 15px; }
.note-item .copy { flex: 0 0 auto; font-size: 12px; color: var(--accent); background: none; border: 1px solid var(--accent-soft); border-radius: 999px; padding: 4px 10px; }
.note-item .copy.done { color: #fff; background: var(--green); border-color: var(--green); }
.note-item .del { flex: 0 0 auto; background: none; border: none; color: var(--muted); font-size: 14px; }

/* ---------- Stitch feedback widget — NO local override (intentional) ----------
   Shuttle used to override the Stitch dot here (green #bfe3c6, 70% opacity, soft
   shadow, hidden 💬 glyph, hidden unread badge). That look is now the UNIVERSAL
   DEFAULT baked into the central widget itself (~/projects/stitch/public/stitch.js,
   the .stitch-btn / .stitch-badge rules) — so every app gets the same green dot
   from one source of truth, and changing it once changes it everywhere. The local
   override was removed on 2026-07-01 to make that centralization real (a duplicate
   here would just re-apply the same thing and mask future central changes).
   DO NOT re-add a .stitch-btn override here — change the central widget instead. */