mobux 0.25.1

/* Vendored monospace fonts from @kattebak/sterk (full TUI coverage:
   Latin + box-drawing + dingbats + geometric shapes). The
   SterkTUISymbols fallback is declared under the same family names
   with unicode-range so the browser fetches it once and uses it for
   the dingbat/symbol ranges no general-purpose mono ships. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/vendor/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/vendor/fonts/SterkTUISymbols.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2500-257F, U+2580-259F, U+25A0-25FF, U+2600-26FF, U+2700-27BF, U+2190-21FF;
}
/* Vendored proportional font for the reader's plain-output text (issue
   #218). Command/prompt lines and code stay monospace — see --mono above —
   because their alignment depends on fixed-width columns; plain output has
   no such constraint and reads better proportional on a phone screen. */
@font-face {
  font-family: 'Inter';
  src: url('/static/vendor/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f1115;
  --panel: #16181e;
  --text: #c8ccd4;
  --muted: #636a7a;
  --primary: #7a8a9e;
  --accent: #7a8a9e;
  --danger: #c45c5c;
  --border: #22262f;
  --mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Exit-status chip. Deliberately muted — no bright/saturated red or green —
     so it reads as a quiet affordance rather than an alert. Shared by the
     reader's .rb-command-status and read mode's .cv-exit so the two views
     say pass/fail in one visual language. */
  --exit-ok-bg: rgba(80, 150, 120, 0.16);
  --exit-ok-border: rgba(120, 190, 160, 0.4);
  --exit-ok-fg: #a9d0bd;
  --exit-fail-bg: rgba(170, 120, 80, 0.18);
  --exit-fail-border: rgba(205, 165, 120, 0.45);
  --exit-fail-fg: #d9c4a8;
  /* Inline link inside a dark panel — the reader's OSC 133 hint and read
     mode's empty state both point at /settings#shell-integration. */
  --panel-link: #7ec8ff;
}

* { box-sizing: border-box; }
/* The HTML `hidden` attribute hides via the UA `display:none` rule, which has
   the lowest priority and is silently overridden by author rules such as
   `.settings-row { display:flex }`. Without this, JS toggling `el.hidden`
   sets the attribute but the element stays visible. Make `hidden` win. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* ── Index page: mobile-native session list ───────────────────────── */
.app-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-header h1 {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}
.header-icon {
  color: var(--muted);
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 6px;
}
.header-icon:active { background: rgba(255,255,255,0.05); }
.header-back {
  color: var(--muted);
  text-decoration: none;
  font-size: 24px;
  line-height: 1;
  padding: 4px 10px 6px;
  margin-left: -6px;
}

.install-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.install-hint-link {
  flex: 1;
  color: var(--accent);
  text-decoration: none;
}
.install-hint-link:hover,
.install-hint-link:active { background: rgba(255,255,255,0.05); }
.install-hint-x {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
}
.install-hint-x:active { background: rgba(255,255,255,0.05); }

/* ── Settings page ─────────────────────────────────────────────────────────
   Native-mobile row list (issue #192): no card chrome, no left/right screen
   padding, hairline separators running the full row width. `.spa-main`
   (app.css) gives every other route a 1rem inset; settings breaks out of it
   with a negative margin so rows can run edge-to-edge, then each row re-adds
   its own 16px inset so text isn't glued to the glass.

   Row anatomy: a leading control (checkbox) or none, a `.settings-label`
   that grows to fill the row (title + optional `<small>` secondary line),
   and a trailing control docked to the right by virtue of the label eating
   the remaining flex space. `.settings-row--field` flips that for rows whose
   control is the point (a text field, a wide select) rather than the label. */
.settings-page {
  margin: -1rem -1rem 0;
  padding-bottom: 24px;
}
.settings-search-wrap {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.settings-search {
  display: block;
  width: 100%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
}
.settings-search:focus { border-color: var(--accent); outline: none; }
.settings-search::placeholder { color: var(--muted); }

.settings-group { padding-top: 22px; }
.settings-group:first-child { padding-top: 0; }
.settings-group[hidden] { display: none; }
.settings-group h2 {
  margin: 0;
  padding: 0 16px 2px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.settings-lede {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  padding: 2px 16px 10px;
}
.settings-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.settings-row[hidden] { display: none; }
/* Navigation rows are anchors — they wear the row look, not link chrome. */
a.settings-row {
  color: inherit;
  text-decoration: none;
}
a.settings-row:active { background: rgba(255,255,255,0.05); }
.settings-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.settings-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.settings-label small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.settings-label code {
  font-family: var(--mono);
  font-size: 11px;
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
}
/* Field rows (a short label, a control that needs the width): the label
   stops growing and the control takes the remaining space instead. */
.settings-row--field .settings-label {
  flex: 0 0 auto;
  max-width: 40%;
}
.settings-row--field .settings-select,
.settings-row--field .settings-input {
  flex: 1 1 auto;
}

.settings-select,
.settings-input {
  flex: 0 0 auto;
  margin-left: auto;
  background: rgba(255,255,255,0.06);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  min-width: 0;
}
.settings-select { min-width: 160px; }
.settings-row input[type="range"] {
  width: 120px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.settings-row-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.settings-row-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.settings-btn {
  flex-shrink: 0;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.settings-btn:active:not(:disabled) { background: rgba(255,255,255,0.08); }
.settings-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.settings-btn--danger { color: var(--danger); border-color: var(--danger); }

.settings-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}
.settings-actions button {
  padding: 6px 12px;
  font-size: 13px;
  font: inherit;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: inherit;
  cursor: pointer;
}
.settings-actions button:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
}
.settings-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.settings-status {
  padding: 0 16px 14px;
  font-size: 13px;
  color: var(--muted);
}
.settings-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.settings-value--new {
  color: var(--accent, #6ee7b7);
}
.settings-detail {
  margin: 0 16px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0,0,0,0.2);
}
.settings-detail summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 13px;
  user-select: none;
}
.settings-detail summary code {
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
}
.settings-snippet {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  white-space: pre;
  overflow-x: auto;
  background: transparent;
  color: #d8dde6;
}
.settings-foot {
  padding: 4px 16px 16px;
  font-size: 12px;
  color: var(--muted);
}
.shell-card {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}
.shell-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.shell-card-head code {
  font-size: 12px;
  color: var(--muted);
}
.shell-card-head .shell-state {
  margin-left: auto;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.shell-state--on { color: #6ee7b7; border-color: #234b3a; background: rgba(110,231,183,0.08); }
.shell-state--off { color: var(--muted); }
.shell-state--warn { color: #fbbf24; border-color: #553f17; background: rgba(251,191,36,0.08); }
.shell-state--missing { color: var(--muted); font-style: italic; }
.shell-card .settings-actions {
  padding: 10px 0 0;
  border-top: none;
}
.shell-card .settings-detail {
  margin: 10px 0 0;
}

.session-list {
  display: flex;
  flex-direction: column;
}

.hint { color: var(--muted); padding: 24px 16px; font-size: 14px; text-align: center; }

/* Swipe row container */
.swipe-row {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.session-item:active {
  background: var(--panel);
}

.session-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-name {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
}
.session-meta {
  font-size: 12px;
  color: var(--muted);
}
.session-arrow {
  font-size: 22px;
  color: var(--muted);
}

/* Swipe actions behind the row */
.swipe-action {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 0;
}
.swipe-left { left: 0; }
.swipe-right { right: 0; }

.swipe-btn {
  height: 100%;
  border: none;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}
.rename-btn { background: var(--accent); }
.kill-btn { background: var(--danger); }

/* FAB */
.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 50;
}
.fab:active { opacity: 0.8; }

/* New session dialog */
.session-dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  max-width: 320px;
  width: calc(100% - 32px);
}
.session-dialog::backdrop {
  background: rgba(0,0,0,0.6);
}
.session-dialog h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
  text-transform: none;
  letter-spacing: 0;
}
.session-dialog input {
  width: 100%;
  margin-bottom: 16px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--mono);
}
.session-dialog input:focus { border-color: var(--accent); outline: none; }
.dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.btn-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}
.btn-create {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}

.error {
  color: #ffd0d0;
  background: #2a1515;
  padding: 12px 16px;
  font-size: 14px;
}

h1, h2, h3 { margin: 0; }

.term-body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0f1115;
}

#terminal {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  /* No horizontal padding: sterk zeroes Ace's internal $padding and
     hides the scrollbar so col 0 sits flush at the viewport's left
     edge and the right-most column hugs the right edge. Adding any
     padding here re-creates the V8 "right-side clipping + left-side
     extra gutter" defect — the host's clientWidth is what cols/cellW
     is divided by, so anything we subtract here is also subtracted
     from the visible grid. */
  box-sizing: border-box;
}

#terminal .xterm {
  height: 100%;
}

#terminal .xterm-viewport {
  height: 100% !important;
}

/* ── ReaderView ──────────────────────────────────────────────── */
/* Synthetic scrolling: #reader is a fixed-size viewport with no
   overflow, .reader-inner is translated by JS based on touch deltas. */
#reader {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #d8dde6;
  background: #0f1115;
  touch-action: none;

  /* ANSI 16 palette — default xterm colours, theme-overridable. */
  --ansi-0:  #1e1e1e;  --ansi-1:  #cc6666;  --ansi-2:  #b5bd68;  --ansi-3:  #f0c674;
  --ansi-4:  #81a2be;  --ansi-5:  #b294bb;  --ansi-6:  #8abeb7;  --ansi-7:  #c5c8c6;
  --ansi-8:  #5c6370;  --ansi-9:  #e06c75;  --ansi-10: #98c379;  --ansi-11: #e5c07b;
  --ansi-12: #61afef;  --ansi-13: #c678dd;  --ansi-14: #56b6c2;  --ansi-15: #ffffff;
}
.reader-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 14px 24px;
  box-sizing: border-box;
  will-change: transform;
}
.reader-statusbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 0;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #d8dde6;
  pointer-events: none;
  z-index: 1;
}
.reader-statusbar.reader-statusbar--filled {
  padding: 4px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.reader-statusbar-inner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-statusbar-inner span { background: transparent !important; border: 0 !important; padding: 0 !important; }
.reader-osc-hint {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: rgba(20, 24, 32, 0.92);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #c8cdd6;
}
.reader-osc-hint a { color: var(--panel-link); }
.reader-osc-dismiss {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  margin-left: auto;
}
#reader.hidden { display: none; }
/* Before read mode's first mount the host carries no .cv-host class yet. */
#readmode.hidden { display: none; }
#terminal.hidden { display: none; }
#touchOverlay.hidden { display: none; }

/* Block container — every block gets a small vertical rhythm. */
.rb { margin: 0; }
.rb + .rb { margin-top: 2px; }

.rb-blank { min-height: 0.6em; }

.rb-rule {
  border: 0;
  border-top: 1px solid #2a2f3a;
  margin: 10px 0;
}

.rb-prompt {
  display: block;
  position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #8a93a6;
  margin-top: 8px;
  padding-right: 52px;
  padding-top: 42px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rb-header {
  font-weight: 700;
  color: #eef2fb;
  margin: 12px 0 4px;
  font-size: 17px;
}

/* Command block (issue #219): the OSC 133 C..D span grouped with the prompt
   that started it — one block per command, its output, and a muted
   pass/fail chip once the exit code is known (see rb-command-status below). */
.rb-command {
  margin-top: 8px;
}
.rb-command-line {
  display: block;
  position: relative;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #8a93a6;
  padding-right: 52px;
  padding-top: 42px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rb-command-output {
  display: block;
  position: relative;
  white-space: normal;
  padding-right: 52px;
  padding-top: 42px;
}
.rb-command-output .rb-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
}

/* Exit status chip. The muted pass/fail palette lives in :root as
   --exit-ok-* / --exit-fail-* so read mode's .cv-exit wears the same one. */
.rb-command-status {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
}
.rb-command-status.rb-status-ok {
  background: var(--exit-ok-bg);
  border-color: var(--exit-ok-border);
  color: var(--exit-ok-fg);
}
.rb-command-status.rb-status-fail {
  background: var(--exit-fail-bg);
  border-color: var(--exit-fail-border);
  color: var(--exit-fail-fg);
}

.rb-text {
  display: block;
  position: relative;
  white-space: normal;
  padding-right: 52px;
  padding-top: 42px;
}
.rb-text .rb-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
}

.rb-code {
  margin: 8px 0;
  padding: 10px 12px;
  background: #161a22;
  border: 1px solid #232936;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
}
.rb-code .rb-codeline {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 1.4em;
}

/* Backgrounded runs render as inline-block chips so the fill, border
   and rounded corners read as one contiguous block rather than a
   tight per-glyph highlight. */
.rb-chip {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1.25;
  margin: 0 1px;
}

/* Bubble: when consecutive lines share a single background colour,
   they fuse into one chat-bubble container with a 1px lighter border.
   Lines inside lose their own chip styling so the bubble's outline
   is the sole visible boundary. */
.rb-bubble {
  display: block;
  position: relative;
  margin: 6px 0;
  padding: 42px 52px 8px 12px;
  border-radius: 10px;
  border: 1px solid;
  max-width: 100%;
  box-sizing: border-box;
}
.rb-bubble .rb-bubble-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  display: block;
  font-size: 13px;
  line-height: 1.4;
}
/* A bubble is a run of consecutive same-background lines fused into one
   chat-bubble container (see appendLinesWithBubbles in reader.js). Bubbles
   can occur inside either a text block or a code block, so the font choice
   follows the same rule as the unbubbled lines: proportional for plain
   output, monospace for code. */
.rb-text .rb-bubble-line {
  font-family: var(--sans);
}
.rb-code .rb-bubble-line {
  font-family: var(--mono);
}

.rb-speaker {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 32px;
  min-height: 32px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}

.rb-speaker:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* Muted teal accent for the speaking state — picked to read across all
   four themes (Tomorrow Night Soft, Gruvbox Dark Soft, Nord, Solarized
   Dark) without clashing. Avoids red (too hot for a night/phone palette,
   per project preference) and any saturated hue. Soft alpha background
   plus a thin outline so the state reads at a glance but never glares. */
.rb-speaker.rb-speaking {
  background: rgba(80, 160, 160, 0.22);
  border-color: rgba(140, 200, 200, 0.55);
  color: #d8eaea;
}

.rb-code .rb-speaker {
  display: none;
}

/* ── Read mode ────────────────────────────────────────────────
   The recorded conversation as a dialogue: what you typed on the left,
   what came back on the right. Synthetic scrolling as in the reader —
   the host is a fixed-size viewport with no overflow and .cv-inner is
   translated by JS. */
.cv-host {
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  color: var(--text);
  background: var(--bg);
  touch-action: none;
}
.cv-host.hidden { display: none; }
.cv-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 14px 24px;
  box-sizing: border-box;
  will-change: transform;
}

.cv-turn {
  display: flex;
  flex-direction: column;
  margin: 0 0 14px;
}
.cv-cmd {
  align-self: flex-start;
  max-width: 88%;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  color: #c8ccd4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* The prompt prefix stays on screen but steps back, so the typed command
   is what the eye lands on. */
.cv-cmd-prompt {
  color: var(--muted);
  font-size: 0.85em;
}
.cv-cmd--empty {
  color: var(--muted);
  font-style: italic;
}

.cv-out {
  align-self: flex-end;
  max-width: 88%;
  margin-top: 4px;
}
.cv-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
}
.cv-trunc {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  color: var(--muted);
}

.cv-exit {
  align-self: flex-end;
  display: inline-block;
  max-width: 88%;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
}
.cv-exit.cv-exit--ok {
  background: var(--exit-ok-bg);
  border-color: var(--exit-ok-border);
  color: var(--exit-ok-fg);
}
.cv-exit.cv-exit--fail {
  background: var(--exit-fail-bg);
  border-color: var(--exit-fail-border);
  color: var(--exit-fail-fg);
}

/* Unattributed bytes: full width, no dialogue side, no exit chip. */
.cv-raw {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}
.cv-empty-text { margin: 0; }
.cv-empty-link { color: var(--panel-link); }

/* A failed poll keeps the turns it already drew and says so here. Pinned to
   the host's bottom edge rather than the translated content box, so it stays
   put wherever the conversation is scrolled to. */
.cv-error {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

#touchOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  touch-action: none;
  /* transparent to mouse so wheel/click go straight to xterm */
  pointer-events: none;
}

#loadquote {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--muted);
  font-size: 16px;
  padding: 24px;
  text-align: center;
  gap: 8px;
  transition: opacity 0.3s;
}
#loadquote q { font-style: italic; color: var(--text); max-width: 500px; line-height: 1.5; }
#loadquote cite { color: var(--primary); font-size: 14px; }

#paneIndicator {
  display: none;
}

.term-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  height: 40px;
  flex-shrink: 0;
  touch-action: manipulation;
}

.tb-btn {
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  background: var(--bg);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tb-btn:active {
  background: var(--border);
}

.tb-exit {
  margin-left: auto;
  border-color: #6e3030;
  color: #ffb8b8;
}

.tb-label {
  color: var(--muted);
  font-size: 13px;
  min-width: 40px;
  text-align: center;
}

/* ── Command pick list (tmux tool menu) ───────────────────────────
   A plain bottom sheet: monospaced text labels, muted palette, no
   emoji, no decorative icon column. Triggered by long-press on the
   terminal or a swipe-up from the bottom edge. */
#cmdOverlayBg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0,0,0,0.35);
}
#cmdOverlayBg.visible { display: block; }

#cmdPickList {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--panel);
  border-top: 1px solid var(--border);
  max-height: 70dvh;
  overflow-y: auto;
  padding: 4px 0 env(safe-area-inset-bottom, 8px);
  font-family: var(--mono);
}
#cmdPickList.visible { display: block; }

.cmd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.cmd-header h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: var(--mono);
}
.cmd-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
  cursor: pointer;
  padding: 4px 10px;
  touch-action: manipulation;
}
.cmd-close:active {
  color: var(--text);
  border-color: var(--muted);
}

.cmd-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
  text-align: left;
}
.cmd-item:active {
  background: var(--bg);
  color: var(--text);
}
.cmd-separator {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

@media (max-width: 620px) {
  .container { padding: 12px; }
}

/* ── Mobile input bar ──────────────────────────────────────────────── */
/* The bar is a flex item inside `.term-body` so #terminal and #reader
   shrink to the remaining space. Previously it was `position: fixed`
   and lifted via a JS `translateY` to clear the keyboard, which left
   the host elements rendering BEHIND the bar — Ace's terminal painted
   its bottom rows under an opaque black ribbon. As a flex sibling the
   bar takes its own row in the column and the content area is bounded
   above it. Keyboard tracking just shrinks `body` to `vv.height`; the
   bar moves with the body bottom automatically — no transform. */
.input-bar {
  flex-shrink: 0;
  z-index: 100;
  background: #1a1d23;
  border-top: 1px solid #333;
  display: flex;
  flex-direction: column;
}
.input-bar.hidden {
  display: none;
}

.input-ribbon {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid #2a2d33;
  flex-shrink: 0;
}
.input-ribbon::-webkit-scrollbar { display: none; }

.input-ribbon button {
  flex-shrink: 0;
  min-width: 38px;
  height: 30px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #2a2d33;
  color: #ccc;
  font-size: 13px;
  font-family: monospace;
  padding: 0 8px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.input-ribbon button:active {
  background: #444;
  color: #fff;
}

/* Mic / dictation states. Recording pulses red; the countdown digit lives in
   the button label. Error flashes amber briefly. */
#micBtn.mic-recording {
  background: #c0392b;
  color: #fff;
  border-color: #e74c3c;
  animation: mic-pulse 1s ease-in-out infinite;
}
#micBtn.mic-error {
  background: #6b5500;
  color: #ffd54a;
  border-color: #b8860b;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6); }
  50%      { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0); }
}

/* Failure state for the attach button — clearly noticeable tint. */
#uploadBtn.rec-error {
  border-color: #ff6b6b;
  background: #5a1f1f;
  color: #ffd2d2;
  animation: recErrorFlash 0.5s ease-in-out 2;
}
@keyframes recErrorFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 80, 80, 0.0); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 80, 80, 0.55); }
}

.input-row {
  display: flex;
  padding: 4px 6px 6px;
  gap: 6px;
}

.input-row input {
  flex: 1;
  height: 36px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #0f1115;
  color: #e0e0e0;
  font-size: 16px; /* ≥16px prevents iOS zoom on focus */
  font-family: monospace;
  padding: 0 10px;
  outline: none;
}
.input-row input:focus {
  border-color: #6a9;
}

.input-send {
  width: 44px;
  height: 36px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #2a5a3a;
  color: #fff;
  font-size: 18px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.input-send:active {
  background: #3a7a4a;
}

/* ── /install page ────────────────────────────────────────────────── */
.install-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.install-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.install-card h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}
.install-lede {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 16px;
}
.install-hint {
  color: var(--text);
  font-size: 14px;
  margin: 0;
}
.install-hint code {
  font-family: var(--mono);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
}
.install-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.install-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
}
.install-btn:active {
  opacity: 0.8;
}
.install-qr {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  line-height: 0;
}
.install-qr svg {
  display: block;
  width: 220px;
  height: 220px;
}
.install-steps {
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.listen-value {
  min-width: 32px;
  text-align: right;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.listen-unavailable {
  color: var(--muted);
  font-size: 13px;
  padding: 4px 16px 14px;
}