mobux 0.42.2

/* 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.

   The url()s are relative to this stylesheet, which is served at
   <prefix>/static/style.css. Root-absolute, they would leave the mount a
   path-prefixing proxy publishes and the fonts would 404 there. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('vendor/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('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('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;
  /* Select mode's highlight: see-through, so the glyphs drawn under the
     transparent text layer stay readable. */
  --select-highlight: rgba(122, 138, 158, 0.45);
  /* Settings screens: an inset card one step above --bg, its pressed state,
     row hairlines, and the status colours. */
  --surface: #181b22;
  --surface-press: #20242d;
  --hairline: #2a2e38;
  --hairline-strong: #353a46;
  --switch-off: #3a3f4b;
  --on-accent: #0f1115;
  --ok: #86b39a;
  --warn: #c9a45c;
}

* { 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 ──────────────────────────────────────────────────────────────
   Native phone settings screens: inset grouped cards on the page background,
   hairlines between rows, rows at least 56px tall with the label on the left
   and the control, value or chevron on the right. The top level is a list of
   rows; each chevron row opens a sub-page at #/settings/<section>. */
.settings-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  min-height: 56px;
  padding: 4px 8px;
}
.settings-header h1 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
}
.settings-back {
  background: none;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  margin-left: 0;
  font-family: inherit;
  font-size: 30px;
  color: var(--text);
  border-radius: 999px;
}
.settings-back:active { background: var(--surface-press); }

.settings-page { padding-bottom: 32px; }
.settings-group { margin-top: 24px; }
.settings-page > .settings-group:first-child { margin-top: 8px; }
.settings-group > h2 {
  margin: 0 0 8px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.settings-card {
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
}
.settings-card > :not(:first-child),
.shell-card > :not(:first-child) {
  border-top: 1px solid var(--hairline);
}
.settings-lede {
  margin: 8px 16px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.settings-lede a { color: var(--panel-link); }
.settings-lede code {
  font-family: var(--mono);
  font-size: 12px;
}
.settings-note {
  margin: 8px 16px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.settings-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  margin: 0;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
}
.settings-row--nav,
.settings-row--select,
.settings-row--action,
label.settings-row { cursor: pointer; }
.settings-row--nav:active,
.settings-row--select:active,
.settings-row--action:active:not(:disabled) { background: var(--surface-press); }
.settings-row--action { color: var(--accent); }
.settings-row--action:disabled { opacity: 0.4; cursor: not-allowed; }
.settings-row--hint { color: var(--muted); font-size: 14px; }

.settings-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.settings-title { font-size: 16px; line-height: 1.3; }
.settings-label small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.settings-label code,
.settings-label small code {
  font-family: var(--mono);
  font-size: 12px;
}
.settings-trail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 55%;
  color: var(--muted);
}
.settings-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.settings-value--new { color: var(--ok); }
.settings-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}
.settings-chevron--down { transform: rotate(90deg); }

/* The native select covers the whole row, invisible, so a tap anywhere opens
   the platform picker while the row shows the current choice. */
.settings-row--select .settings-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}

/* Switch: a real checkbox, restyled. The ::after extends the hit area to
   44px tall; the whole row is its <label> anyway. */
.settings-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: var(--switch-off);
  cursor: pointer;
  transition: background-color 0.15s;
}
.settings-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.15s;
}
.settings-switch::after {
  content: "";
  position: absolute;
  inset: -8px 0;
}
.settings-switch:checked { background: var(--accent); }
.settings-switch:checked::before { transform: translateX(20px); background: var(--on-accent); }
.settings-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.settings-row--field .settings-label { flex: 0 0 auto; max-width: 40%; }
.settings-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: right;
}
.settings-input:focus { outline: none; }
.settings-input::placeholder { color: var(--muted); }
.settings-input:disabled { opacity: 0.4; }
#nodeTarget[readonly] { cursor: pointer; }

.settings-row--slider {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.settings-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.settings-range {
  width: 100%;
  min-height: 32px;
  margin: 0;
  accent-color: var(--accent);
}

/* One button system: primary (filled), secondary (outlined), danger. 48px
   tall; equal widths when several share a row, full width when alone. */
.settings-actions {
  display: flex;
  gap: 8px;
  padding: 16px 0 0;
}
.settings-card .settings-actions { padding: 12px 16px; }
.btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--hairline-strong); }
.btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn--danger[data-armed="true"] { background: var(--danger); color: var(--on-accent); }
.btn:active:not(:disabled) { filter: brightness(1.15); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--inline { flex: 0 0 auto; }

.settings-status {
  margin: 8px 16px 0;
  font-size: 13px;
  color: var(--muted);
  min-width: 0;
}
.settings-label .settings-status { margin: 0; }
.settings-status--ok { color: var(--ok); }
.settings-status--error { color: var(--danger); }
.settings-status--action {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-status--action .settings-status-line { flex: 1 1 auto; min-width: 0; }
.settings-status-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-status-details summary {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.settings-status-details summary::-webkit-details-marker { display: none; }
.settings-status-details summary .settings-status-line { flex: 1 1 auto; min-width: 0; }
.settings-status-more { flex: 0 0 auto; color: var(--text); text-decoration: underline; }
.settings-status-details[open] .settings-status-line { display: none; }
.settings-status-full {
  margin: 0 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.settings-detail summary {
  list-style: none;
  color: var(--accent);
}
.settings-detail summary::-webkit-details-marker { display: none; }
.settings-snippet {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  white-space: pre;
  overflow-x: auto;
  background: var(--bg);
  color: var(--text);
}
.shell-state {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  color: var(--muted);
}
.shell-state--on { color: var(--ok); border-color: var(--ok); }
.shell-state--off { color: var(--muted); }
.shell-state--warn { color: var(--warn); border-color: var(--warn); }
.shell-state--missing { color: var(--muted); font-style: italic; }

.node-row .node-name { font-family: var(--mono); }
.node-row .node-target { font-family: var(--mono); }


.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); }
/* Why nothing is being read. A speaker that goes quiet without a word is
   indistinguishable from a broken one. */
.reader-speech-notice {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 6px 10px;
  background: rgba(20, 24, 32, 0.94);
  border: 1px solid rgba(200, 140, 100, 0.45);
  border-radius: 6px;
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #e0d2c4;
}
.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;
}

/* A code block carries two: the speaker announces what it is, the second
   button reads it in full. The pair sits side by side, so the read-in-full
   one clears the width of the first. */
.rb-code .rb-speaker {
  top: 4px;
}

.rb-speaker-full {
  right: 44px;
}

/* ── Read mode ────────────────────────────────────────────────
   The recorded conversation as a conversation: one card per turn, the
   command in its header, what came back below it. Output splits by shape —
   lines whose alignment is the content stay monospace in their own block,
   everything else is prose in proportional type at a measure that stops
   before a line gets hard to track back to. No terminal chrome: read mode
   is not a picture of the terminal, and nothing here should imitate one.
   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: 10px 12px 28px;
  box-sizing: border-box;
  will-change: transform;
  /* Reading a conversation means copying out of it. The gesture recogniser
     owns dragging; long-press selection is the platform's and stays. */
  -webkit-user-select: text;
  user-select: text;
}

/* The strip above the oldest turn on screen: the control that reaches
   further back, or the fact that there is no further back. */
.cv-older {
  display: flex;
  justify-content: center;
  min-height: 0;
}
.cv-older:not(:empty) {
  padding: 2px 0 12px;
}
.cv-older-btn {
  appearance: none;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.3;
  touch-action: manipulation;
}
.cv-older-status,
.cv-older-start {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.cv-turn {
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}
/* The command and how it ended read as one line of header, so the eye
   picks out where each turn starts without a rule between every line. */
.cv-turn-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 6%, var(--panel));
}
.cv-turn-head:last-child {
  border-bottom: 0;
}
.cv-cmd {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  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 {
  padding: 10px 12px 12px;
}
/* Prose gets a measure. Past roughly this many characters the eye loses
   the start of the next line, which is the whole complaint about reading a
   terminal on a phone in the first place. */
.cv-prose {
  max-width: 62ch;
  margin: 0 0 10px;
}
.cv-prose:last-child,
.cv-code:last-child {
  margin-bottom: 0;
}
.cv-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}
.cv-code {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 5%, var(--bg));
  /* Wrapping, not scrolling: a horizontal scroller inside a synthetic
     vertical one is unreachable on a phone. */
  overflow: hidden;
}
.cv-codeline {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}
.cv-trunc {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 6px;
  color: var(--muted);
}

.cv-exit {
  flex: 0 0 auto;
  align-self: center;
  display: inline-block;
  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: no command, no exit chip, so no card either. */
.cv-raw {
  margin: 0 0 12px;
  padding: 0 2px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  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 sheet (tmux tool menu) ───────────────────────────────
   Stays mounted and slides in, so the open/close state is only the
   .visible class on the sheet and its backdrop. */
#cmdOverlayBg {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
#cmdOverlayBg.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease;
}

#cmdPickList {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-sizing: border-box;
  max-height: 80dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px max(12px, env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  font-family: var(--sans);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 240ms;
}
#cmdPickList.visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  #cmdOverlayBg,
  #cmdOverlayBg.visible,
  #cmdPickList,
  #cmdPickList.visible {
    transition: none;
  }
}

.cmd-handle {
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: var(--muted);
}

.cmd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}
.cmd-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--mono);
}
.cmd-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.cmd-close:active { color: var(--text); }
.cmd-close:focus-visible,
.cmd-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cmd-group { margin: 8px 0 12px; }
.cmd-group-title {
  margin: 0 0 6px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 0 4px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.cmd-item + .cmd-item { border-top: 1px solid var(--border); }
.cmd-item:active { background: var(--bg); }
.cmd-glyph {
  width: 20px;
  color: var(--muted);
  font-size: 18px;
  text-align: center;
}

/* ── Select mode (native-select.js) ───────────────────────────────
   The rows on screen as real text over the renderer's cell grid, above
   the touch overlay; the browser does the selecting. */
.select-layer {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 11;
  overflow: hidden;
  background: transparent;
  color: transparent;
  font-kerning: none;
  font-variant-ligatures: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: manipulation;
}
.select-layer.visible { display: block; }
#terminal.hidden ~ .select-layer { display: none; }
.select-row {
  position: absolute;
  left: 0;
  right: 0;
  white-space: pre;
}
.select-row a {
  color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--terminal-fg, var(--text));
}
.select-layer ::selection {
  color: transparent;
  background: var(--select-highlight);
}
.select-wide { display: inline-block; }
.select-probe { white-space: pre; }

@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;
}
button.install-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
button.install-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.install-build-row {
  margin-top: 16px;
}
.install-build-row .install-hint {
  flex: 1 1 200px;
}
.install-log {
  margin: 16px 0 0;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}
.install-error {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #c87e7e;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}
.install-error strong {
  color: #c87e7e;
}
.install-error p {
  margin: 6px 0 0;
  word-break: break-word;
}
.install-command {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
}
.install-command code {
  flex: 1 1 240px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-all;
  user-select: all;
}
.install-copy {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.install-copy:active {
  opacity: 0.8;
}
.install-apk-missing {
  background: #2a1515;
  border-radius: 8px;
  padding: 12px 16px;
}
.install-apk-missing-title {
  color: #ffd0d0;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}
.install-apk-missing .install-hint {
  margin: 0;
}