/* ════════════════════════════════════════════════════════════════
   gmux-phone v2 — layout (theme-agnostic; vars come from themes.css)
   ════════════════════════════════════════════════════════════════ */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --t-fast: 0.15s;
  --t-page: 0.32s;
  --t-curve: cubic-bezier(0.34, 1.20, 0.64, 1);
  --stripe-width: 8px;             /* v3: thicker state stripe */
  --agents-visible: 4;             /* v3: how many cards fit on screen */
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  touch-action: manipulation;
  user-select: none;
  overscroll-behavior: none;
}
body { background: var(--bg-grad); background-attachment: fixed; }

button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }
input, select { font-family: inherit; }
ul { list-style: none; }
.hidden { display: none !important; }

/* Chrome hint hairline — see "CHROME LOAD BAR (v4)" section below */

/* Corner connection status pip (always visible) */
.corner-status {
  position: fixed;
  right: 10px;
  bottom: calc(8px + var(--sab));
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 6px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-family: var(--font-mono);
  z-index: 70;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cs-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
.corner-status.connected .cs-dot { background: var(--c-working); }
.corner-status.connecting .cs-dot { background: var(--c-permission); animation: pulse 1.2s infinite; }

/* ════════════════════════════════════════════════════════════════
   Page stack
   ════════════════════════════════════════════════════════════════ */
#page-stack {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-grad);
  background-attachment: fixed;
  transition: transform var(--t-page) var(--t-curve), opacity var(--t-page);
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  z-index: 1;
}
.page-detail   { transform: translateX(100%); }
.page-settings { transform: translateX(-100%); }
.page.active { transform: translate(0, 0); z-index: 2; }
.page.dragging { transition: none; }

/* ════════════════════════════════════════════════════════════════
   CARD STACK (page-session main)
   v3: card height auto-computed from --agents-visible
   ════════════════════════════════════════════════════════════════ */
.card-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px calc(40px + var(--sab));
  overflow-y: auto;
  scrollbar-width: none;
}
.card-stack::-webkit-scrollbar { display: none; }

/* ════════════════════════════════════════════════════════════════
   "Vertical-rotated" orientation = LANDSCAPE-OPTIMISED mode (v0.7.1)
   ──────────────────────────────────────────────────────────────────
   Mental model:
     The user is holding the phone in LANDSCAPE.
     We rotate the whole card stack -90deg so it visually appears
     as a normal vertical column of horizontal cards when the phone
     is turned sideways.
   How:
     1. The card-stack is a vertical flex column of normal horizontal
        cards (same DOM as portrait mode).
     2. The stack itself is transformed: rotate(-90deg), then
        translated and resized so its rotated bounding box exactly
        fills the screen.
     3. The width/height are swapped via a CSS trick — the unrotated
        size is "tall and narrow" but post-rotation it appears
        "short and wide" filling the landscape viewport.
     4. Cards inside look exactly like portrait-mode horizontal cards.
   ──────────────────────────────────────────────────────────────────
*/
.card-stack[data-orient="vertical-rotated"] {
  /* Pre-rotation size: a tall narrow rectangle (height = phone width,
     width = phone height). After -90deg rotation, it becomes the right
     shape for landscape. */
  position: absolute;
  top: 50%;
  left: 50%;
  width:  calc(100vh - var(--sat) - var(--sab) - 20px);
  height: 100vw;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;

  /* The content reads top-to-bottom in the rotated frame, which the
     user perceives as left-to-right in landscape. */
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  overflow-y: auto;
  overflow-x: hidden;
}
.card-stack[data-orient="vertical-rotated"]::-webkit-scrollbar { display: none; }

/* Cards keep their normal horizontal layout — the rotation is on the
   parent stack, so each card is visually a familiar horizontal card
   when the phone is held landscape. */
.card-stack[data-orient="vertical-rotated"] .h-card {
  /* Override the portrait max-height calc (which divides by N visible);
     in landscape we want cards to size to their content. */
  max-height: 160px;
  min-height: 80px;
  flex: 1 1 auto;
}

/* Floating PTT button needs to also rotate so the mic icon faces the
   user correctly when phone is landscape. Place it in the "bottom-right"
   of the landscape view = top-right of the rotated portrait frame. */
.page-session.landscape-mode .session-ptt {
  transform: rotate(-90deg);
}

/* Hint banner when in landscape mode — tells user how to interact */
.card-stack[data-orient="vertical-rotated"]::before {
  content: '↻ landscape mode · turn phone sideways';
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  pointer-events: none;
  z-index: 50;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════
   HORIZONTAL CARD — v3
   ── Thicker (8px) state stripe replaces emoji circle
   ── Dedicated todo bar row
   ── Card height responds to --agents-visible
   ════════════════════════════════════════════════════════════════ */
.h-card {
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--border);
  border-left: var(--stripe-width) solid var(--state-color, var(--accent));
  border-radius: var(--card-radius);
  padding: 10px 14px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s var(--t-curve),
              background 0.2s,
              border-color 0.2s,
              box-shadow 0.2s;
  will-change: transform;
  /* Height auto-computes from agents-visible */
  flex: 1 0 auto;
  min-height: 60px;
  max-height: calc((100vh - var(--sat) - var(--sab) - 80px) / var(--agents-visible) - 8px);
}

/* Soft glow extending inward from the state stripe */
.h-card::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(var(--stripe-width) + 12px);
  background: var(--state-color, transparent);
  filter: blur(10px);
  opacity: 0.30;
  pointer-events: none;
}

/* Selected — FULL CARD LIGHT WASH */
.h-card.selected {
  background:
    linear-gradient(0deg, var(--selected-wash) 0%, var(--selected-wash) 100%),
    var(--card-bg);
  border-color: var(--accent);
  /* state stripe stays! (this was the v2 fix) */
  border-left-color: var(--state-color, var(--accent));
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow),
    inset 0 0 24px var(--selected-wash);
  transform: scale(1.01);
}

.h-card.dragging-x { transition: none; z-index: 5; }

.h-card.recording {
  border-color: var(--c-waiting);
  border-left-color: var(--state-color, var(--accent));
  box-shadow:
    0 0 0 1px var(--c-waiting),
    0 0 28px rgba(239,68,68,0.5);
  animation: rec-pulse 1.4s infinite;
}

/* ── row 1: head (name + type + state label + window) ─────────── */
.h-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.h-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  font-family: var(--font-display);
}
.h-name.renaming {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  color: var(--text);
}

.h-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.h-state-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--state-color, var(--accent));
  flex-shrink: 0;
  font-family: var(--font-mono);
  background: rgba(0,0,0,0.25);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}

/* ── row 2: meta (cwd · todo count · uptime) ─────────────────── */
.h-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.h-cwd {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.h-cwd::before {
  content: '⌂  ';
  color: var(--dim);
}
.h-todo-count {
  font-weight: 700;
  color: var(--accent-2);
  flex-shrink: 0;
}
.h-uptime {
  color: var(--dim);
  flex-shrink: 0;
}
.h-sep {
  color: var(--dim);
  opacity: 0.5;
}

/* ── row 3: todo bar (dedicated full-width row) ───────────────── */
.h-todo-bar {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.h-todo-fill {
  display: block;
  height: 100%;
  width: 0%;                          /* set inline via style="width:X%" */
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  transition: width 0.6s var(--t-curve);
  box-shadow: 0 0 6px var(--accent-glow);
  min-width: 0;
}
.h-card[data-no-todos="1"] .h-todo-bar { display: none; }

/* ── row 4: output (or transcript or permission buttons) ──────── */
.h-output {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  min-height: 0;
  flex: 1 1 auto;
}
.h-output::before { content: '›  '; color: var(--accent-2); }
.h-output.empty { color: var(--muted); font-style: italic; }
.h-output.empty::before { content: '·  '; color: var(--dim); }

/* Live transcript */
.h-transcript {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-waiting);
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.30);
  border-radius: var(--r-s);
  padding: 4px 8px;
  display: none;
}
.h-card.recording .h-transcript { display: block; }
.h-card.recording .h-output { display: none; }

/* ── INLINE PERMISSION row (v3) ───────────────────────────────── */
.h-perm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.h-perm-text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--c-permission);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-perm-text::before { content: '⏸  '; color: var(--c-permission); }

.h-perm-btn {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.1s, opacity var(--t-fast);
  font-family: var(--font-mono);
  line-height: 1.2;
}
.h-perm-btn:active { transform: scale(0.94); }
.h-perm-allow  { background: var(--c-working);    color: #000; }
.h-perm-always { background: var(--c-done);       color: #000; }
.h-perm-deny   {
  background: rgba(239,68,68,0.20);
  color: var(--c-waiting);
  border: 1px solid var(--c-waiting);
  padding: 3px 8px;
}
html[data-theme="default"] .h-perm-allow,
html[data-theme="paper"] .h-perm-allow,
html[data-theme="default"] .h-perm-always,
html[data-theme="paper"] .h-perm-always {
  color: #fff;
}

/* ── + new agent inline tile ────────────────────────────────── */
.add-agent-row {
  border: 1.5px dashed var(--border-2);
  border-radius: var(--card-radius);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  background: rgba(124,92,255,0.03);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  transition: all var(--t-fast);
}
.add-agent-row .plus {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 300;
}
.add-agent-row:active {
  background: rgba(124,92,255,0.10);
  border-color: var(--accent);
  color: var(--accent-2);
  transform: scale(0.99);
}

/* ════════════════════════════════════════════════════════════════
   CHROME PANEL (slides down from top on swipe-up-and-hold)
   ════════════════════════════════════════════════════════════════ */
.chrome-panel {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
}
.chrome-panel:not(.hidden) { pointer-events: auto; }

.cp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s;
}
.chrome-panel:not(.hidden) .cp-backdrop { opacity: 1; }

.cp-sheet {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  padding: calc(10px + var(--sat)) 18px 18px;
  transform: translateY(-110%);
  transition: transform 0.28s var(--t-curve);
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.cp-sheet::-webkit-scrollbar { display: none; }
.chrome-panel:not(.hidden) .cp-sheet { transform: translateY(0); }

.cp-handle {
  width: 40px; height: 4px;
  background: var(--border-2);
  border-radius: 999px;
  margin: 0 auto 14px;
  opacity: 0.6;
}

.cp-section { margin-bottom: 14px; }
.cp-section:last-child { margin-bottom: 0; }

.cp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cp-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.cp-section-action {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(124,92,255,0.08);
  cursor: pointer;
}

.cp-session-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  transition: all var(--t-fast);
  cursor: pointer;
}
.session-row.current {
  border-color: var(--accent);
  background:
    linear-gradient(0deg, var(--selected-wash), var(--selected-wash)),
    var(--card);
}
.session-row:active { transform: scale(0.99); }

.sr-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
html[data-theme="nerv"] .sr-icon { background: var(--accent); color: #000; border-radius: 0; }
html[data-theme="terminal"] .sr-icon { background: var(--accent); color: #000; }

.sr-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
}

.sr-pips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  flex-shrink: 0;
}
.sr-pip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.sr-pip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.sr-pip-num { color: var(--muted); }
.sr-pip-num.has { color: var(--text); }

.sr-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 4px;
}

/* Options grid in chrome panel */
.cp-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cp-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  text-align: left;
  transition: all var(--t-fast);
}
.cp-opt:active { transform: scale(0.97); background: var(--card-2); }
.cp-opt-icon { font-size: 16px; line-height: 1; }
.cp-opt-label { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.cp-opt-value {
  font-size: 11px;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   DETAIL PAGE (mostly unchanged from v1, theme-aware)
   ════════════════════════════════════════════════════════════════ */
.detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  flex-shrink: 0;
  position: relative;
}
.detail-header::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
}

.hdr-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.hdr-btn:active { transform: scale(0.92); }
.hdr-btn.placeholder { background: transparent; border-color: transparent; pointer-events: none; }

.detail-name {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
}
.detail-caret {
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
  pointer-events: none;
}
.detail-rename-btn {
  font-size: 14px;
  color: var(--accent-2);
}
.detail-name.renaming {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 8px;
}
.detail-name.renaming input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  width: 100%;
}
.detail-edit-hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.detail-name:active .detail-edit-hint { opacity: 1; color: var(--accent-2); }

.detail-type-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 7px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* Segmented control wrap for many-options (theme picker) */
.seg-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
}
.seg-wrap button {
  background: var(--bg);
  border: 1px solid var(--border);
}

/* Change-agent modal */
.modal-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}
.agent-type-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  max-height: 50vh;
  overflow-y: auto;
}
.agent-type-list li {
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  transition: all var(--t-fast);
  cursor: pointer;
}
.agent-type-list li:active {
  background: var(--card-2);
  transform: scale(0.99);
}
.agent-type-list li.current {
  border-color: var(--accent);
  background:
    linear-gradient(0deg, var(--selected-wash), var(--selected-wash)),
    var(--card);
  color: var(--accent-2);
}

/* Quick-agent button variant in new-agent modal */
.modal-quick {
  background: linear-gradient(135deg, var(--c-permission), #d97706);
  color: #000;
}
html[data-theme="default"] .modal-quick,
html[data-theme="paper"] .modal-quick { color: #fff; }

.win-badge {
  background: var(--surface);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
}

.detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 8px;
  scrollbar-width: thin;
}
.detail-scroll::-webkit-scrollbar { width: 4px; }
.detail-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }

.d-section { margin-bottom: 14px; }
.d-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.d-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.d-section-meta {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--accent-2);
  font-weight: 700;
}

.todo-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.todo-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  transition: width 0.6s var(--t-curve);
  box-shadow: 0 0 8px var(--accent-glow);
}
.todo-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: 4px 0;
}
.todo-list li {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--hairline);
}
.todo-list li:last-child { border-bottom: none; }
.todo-list li .t-mark { font-size: 14px; line-height: 1.4; flex-shrink: 0; }
.todo-list li.completed { color: var(--muted); text-decoration: line-through; }
.todo-list li.completed .t-mark { color: var(--c-working); }
.todo-list li.in_progress .t-mark { color: var(--c-permission); animation: pulse 1.2s infinite; }
.todo-list li.pending .t-mark { color: var(--dim); }

.output-stream {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.perm-section { background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.3); border-radius: var(--r-m); padding: 12px; }
.perm-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  padding: 8px 12px;
  margin-bottom: 10px;
  word-break: break-word;
}
.perm-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.perm-btn {
  padding: 12px 6px;
  border-radius: var(--r-m);
  font-weight: 700;
  font-size: 13px;
  transition: transform 0.1s;
}
.perm-btn:active { transform: scale(0.96); }
.perm-accept { background: linear-gradient(180deg, var(--c-working), #16a34a); color: #fff; }
.perm-always { background: linear-gradient(180deg, var(--c-done), #2563eb); color: #fff; }
.perm-deny   { background: linear-gradient(180deg, #ef4444, #b91c1c); color: #fff; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.qa-btn {
  padding: 12px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all var(--t-fast);
}
.qa-btn:active { background: var(--card); transform: scale(0.95); }
.qa-btn span { font-size: 18px; line-height: 1; }
.qa-btn small { font-size: 10px; letter-spacing: 0.04em; }

.d-meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 9px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
}
.meta-chip .mc-key { color: var(--dim); }
.meta-chip .mc-val { color: var(--text-2); }

.detail-input-bar {
  flex-shrink: 0;
  padding: 10px 14px calc(12px + var(--sab));
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 30%, var(--bg) 100%);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.text-row { display: flex; gap: 8px; align-items: center; }
#d-text-input {
  flex: 1;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  color: var(--text);
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
}
#d-text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
#d-send-btn {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-radius: var(--r-m);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px var(--accent-glow);
}
html[data-theme="nerv"] #d-send-btn { background: var(--accent); color: #000; border-radius: 0; }

/* v0.8.5 (gmux v7): 🎯 steer-mode toggle next to the send button. Muted by
   default; glows amber when armed (next → sends mid-run guidance). */
#d-steer-btn {
  width: 44px; height: 44px;
  background: var(--surface);
  color: var(--text-dim, #8b93a7);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  font-size: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, box-shadow .15s, transform .1s;
}
#d-steer-btn:active { transform: scale(.94); }
#d-steer-btn.armed {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .25), 0 4px 14px rgba(245, 158, 11, .35);
}
html[data-theme="nerv"] #d-steer-btn.armed { background: #f59e0b; color: #000; border-radius: 0; }

.ptt-btn {
  padding: 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-l);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all var(--t-fast);
}
.ptt-btn.ready {
  border-color: var(--accent);
  color: var(--accent-2);
  background: var(--selected-wash);
}
.ptt-btn.recording {
  background: rgba(239,68,68,0.18);
  border-color: var(--c-waiting);
  color: var(--c-waiting);
  animation: rec-pulse 1.4s infinite;
}

/* ════════════════════════════════════════════════════════════════
   SETTINGS PAGE
   ════════════════════════════════════════════════════════════════ */
.overview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  flex-shrink: 0;
  position: relative;
}
.overview-header::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
}
.overview-title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  font-family: var(--font-display);
  color: var(--text);
}

.settings-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: calc(20px + var(--sab));
}

.settings-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 14px;
}
.sg-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  margin-bottom: 12px;
  font-family: var(--font-mono);
}
.sg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.sg-row:last-child { border-bottom: none; }
.sg-label { font-size: 14px; color: var(--text); }

.seg {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px;
}
.seg button {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  border-radius: 8px;
  transition: all var(--t-fast);
}
.seg button.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px var(--accent-glow);
}
html[data-theme="nerv"] .seg button.active { background: var(--accent); color: #000; border-radius: 0; }

/* v0.7.5: clear ON/OFF visual differentiation.
   OFF = dark, dim, knob is muted; ON = full accent, glow, white knob. */
.toggle { position: relative; width: 48px; height: 26px; display: inline-block; }
.toggle input { opacity: 0; width: 0; height: 0; }
.t-track {
  position: absolute;
  inset: 0;
  background: var(--bg);                    /* OFF: dark background */
  border: 1.5px solid var(--dim);           /* OFF: dim border */
  border-radius: 999px;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  box-sizing: border-box;
}
.t-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 19px; height: 19px;
  background: var(--dim);                   /* OFF: dim knob, matches the border */
  border-radius: 50%;
  transition: transform var(--t-fast) var(--t-curve), background var(--t-fast);
}
/* Subtle "off" symbol behind the knob — '○' on the right side */
.t-track::before {
  content: '';
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border: 1.5px solid var(--dim);
  border-radius: 50%;
  transition: opacity var(--t-fast);
}
.toggle input:checked + .t-track {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.toggle input:checked + .t-track::after {
  transform: translateX(22px);
  background: #fff;
}
.toggle input:checked + .t-track::before {
  opacity: 0;     /* hide the "off" dot when on */
}

.select, .text-field {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  -webkit-appearance: none;
  min-width: 120px;
}
.text-field.small { min-width: 70px; max-width: 90px; }

.range {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 4px;
  background: var(--border-2);
  border-radius: 2px;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 2px 6px var(--accent-glow);
}

.btn-test {
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--t-fast);
}
.btn-test:active { background: var(--accent); color: #fff; }

.sg-about { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.reset-btn {
  align-self: flex-start;
  margin-top: 8px;
  padding: 8px 14px;
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 8px;
  color: var(--c-waiting);
  font-size: 13px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in 0.2s;
}
.modal-sheet {
  position: relative;
  width: 100%;
  background: var(--surface-2);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 8px 18px calc(20px + var(--sab));
  animation: slide-up 0.28s var(--t-curve);
}
html[data-theme="nerv"] .modal-sheet { border-radius: 0; }

.modal-handle {
  width: 40px; height: 4px;
  background: var(--border-2);
  border-radius: 999px;
  margin: 0 auto 14px;
  opacity: 0.6;
}
.modal-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text);
  font-family: var(--font-display);
}
.modal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.modal-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.modal-row input, .modal-row select {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  color: var(--text);
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
}
.modal-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-cancel, .modal-confirm {
  flex: 1;
  padding: 14px;
  border-radius: var(--r-m);
  font-size: 15px;
  font-weight: 700;
}
.modal-cancel { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.modal-confirm { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
html[data-theme="nerv"] .modal-confirm { background: var(--accent); color: #000; border-radius: 0; }

/* Theme gallery */
.theme-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.theme-tile {
  padding: 14px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  text-align: center;
  transition: all var(--t-fast);
}
.theme-tile.current {
  border-color: var(--accent);
  background:
    linear-gradient(0deg, var(--selected-wash), var(--selected-wash)),
    var(--card);
  box-shadow: 0 0 16px var(--accent-glow);
}
.tt-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  font-family: var(--font-display);
}
.tt-desc {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════
   FLOATING PTT BUTTON on session view (v4)
   ════════════════════════════════════════════════════════════════ */
.session-ptt {
  position: fixed;
  right: 14px;
  bottom: calc(20px + var(--sab));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.4);
  z-index: 60;
  transition: transform 0.1s, background 0.15s;
  -webkit-user-select: none;
  user-select: none;
}
.session-ptt:active { transform: scale(0.93); }
.session-ptt.recording {
  background: linear-gradient(135deg, var(--c-waiting), #b91c1c);
  animation: rec-pulse 1.2s infinite;
}
.session-ptt .ptt-mic { font-size: 24px; line-height: 1; pointer-events: none; }
html[data-theme="nerv"] .session-ptt,
html[data-theme="nerv-muted"] .session-ptt,
html[data-theme="nerv-blue"] .session-ptt,
html[data-theme="terminal"] .session-ptt {
  border-radius: 6px;
  background: var(--accent);
  color: #000;
}

/* ════════════════════════════════════════════════════════════════
   CHROME LOAD BAR (v4) — horizontal line at the top, radiates
   from the centre outward to both edges over the hold duration.
   ════════════════════════════════════════════════════════════════ */
.chrome-loadbar {
  position: fixed;
  top: var(--sat);
  left: 0; right: 0;
  height: 5px;
  z-index: 199;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: rgba(0,0,0,0.0);
}
.chrome-loadbar.armed {
  background: rgba(0,0,0,0.35);
}
.chrome-loadbar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent-2) 50%, var(--accent) 70%, transparent 100%);
  box-shadow: 0 0 14px var(--accent-glow), 0 0 28px var(--accent-glow);
  transition: width var(--load-duration, 450ms) cubic-bezier(0.3, 0.7, 0.4, 1);
  /* The fill grows from centre because the container is flex-justify-center */
  align-self: stretch;
  border-radius: 2px;
}
.chrome-loadbar.armed .chrome-loadbar-fill {
  width: 100%;
}
.chrome-loadbar.collapsing .chrome-loadbar-fill {
  transition: width 0.18s ease-in;
  width: 0;
}

/* Pulse beacon at the very centre — visible even before arming */
.chrome-loadbar-centre {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--accent-glow), 0 0 16px var(--accent-glow);
  opacity: 0.55;
}
.chrome-loadbar.armed .chrome-loadbar-centre {
  animation: load-beacon var(--load-duration, 450ms) ease-out forwards;
}
@keyframes load-beacon {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  50%  { transform: translate(-50%, -50%) scale(2.2); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(3);   opacity: 0; }
}

/* The persistent top chrome-hint is now also the static thin marker
   that shows where the loadbar will appear. */
.chrome-hint {
  position: fixed;
  top: var(--sat);
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  background: var(--accent);
  opacity: 0.30;
  border-radius: 0 0 4px 4px;
  z-index: 80;
  transition: opacity 0.15s, width 0.18s;
}
.chrome-hint.active {
  opacity: 0.95;
  width: 120px;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ════════════════════════════════════════════════════════════════
   TRANSCRIPT OVERLAY + TOAST
   ════════════════════════════════════════════════════════════════ */
#transcript-overlay {
  position: fixed;
  top: calc(var(--sat) + 12px);
  left: 14px;
  right: 14px;
  z-index: 150;
  pointer-events: none;
  animation: slide-in-top 0.24s var(--t-curve);
}
.t-overlay-inner {
  background: rgba(239,68,68,0.95);
  color: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 30px rgba(239,68,68,0.5);
}
html[data-theme="nerv"] .t-overlay-inner { border-radius: 0; background: var(--c-waiting); }
.t-overlay-mic { font-size: 18px; animation: pulse 1.2s infinite; }
#t-overlay-text {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  font-family: var(--font-display);
}

#toast {
  position: fixed;
  bottom: calc(140px + var(--sab));
  left: 50%;
  transform: translateX(-50%) translateY(20px) scale(0.95);
  background: var(--accent);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: all 0.2s var(--t-curve);
  pointer-events: none;
  white-space: nowrap;
  z-index: 250;
  box-shadow: 0 8px 24px var(--accent-glow);
}
html[data-theme="nerv"] #toast { border-radius: 0; color: #000; }
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ════════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════════ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4), 0 0 0 1px var(--c-waiting); }
  50%      { box-shadow: 0 0 0 10px rgba(239,68,68,0), 0 0 0 1px var(--c-waiting); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes slide-in-top {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   v5: PAIRING SECTION (settings)
   ════════════════════════════════════════════════════════════════ */
.settings-group-pair {
  border-color: var(--accent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 5%, var(--surface)),
    var(--surface));
}

.pair-status {
  margin-bottom: 14px;
}
.pair-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.pair-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
}
.pair-dot.connected {
  background: var(--c-working);
  box-shadow: 0 0 8px var(--c-working);
}
.pair-status-host {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  padding-left: 18px;
  letter-spacing: 0.02em;
}

.pair-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.pair-btn {
  padding: 12px 14px;
  border-radius: var(--r-m);
  font-size: 14px;
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  transition: transform 0.1s, background 0.15s;
  text-align: left;
}
.pair-btn:active { transform: scale(0.99); background: var(--card-2); }
.pair-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px var(--accent-glow);
}
html[data-theme="nerv"] .pair-btn-primary,
html[data-theme="nerv-muted"] .pair-btn-primary,
html[data-theme="nerv-blue"] .pair-btn-primary,
html[data-theme="terminal"] .pair-btn-primary { color: #000; }
.pair-btn-danger {
  color: var(--c-waiting);
  border-color: rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.06);
}

.pair-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.pair-hint code {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-2);
}
.pair-hint a {
  color: var(--accent-2);
  text-decoration: underline;
}

.sg-row-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  padding-top: 4px;
}
.sg-num {
  font-family: var(--font-mono);
  color: var(--accent-2);
  font-weight: 700;
  font-size: 12px;
  margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════════
   v5: QR SCANNER MODAL
   ════════════════════════════════════════════════════════════════ */
.qr-sheet { padding-bottom: 20px; }

.qr-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 60vh;
  background: #000;
  border-radius: var(--r-l);
  overflow: hidden;
  margin-bottom: 12px;
}
html[data-theme="nerv"] .qr-viewport,
html[data-theme="nerv-muted"] .qr-viewport,
html[data-theme="nerv-blue"] .qr-viewport,
html[data-theme="terminal"] .qr-viewport { border-radius: 0; }

#qr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-crosshair {
  position: absolute;
  top: 50%; left: 50%;
  width: 65%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 2px solid var(--accent);
  border-radius: 12px;
  pointer-events: none;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,0.45),
    inset 0 0 12px var(--accent-glow);
  animation: qr-pulse 2s infinite;
}
@keyframes qr-pulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.45), inset 0 0 12px var(--accent-glow); }
  50%      { box-shadow: 0 0 0 9999px rgba(0,0,0,0.45), inset 0 0 24px var(--accent-glow); }
}
html[data-theme="nerv"] .qr-crosshair,
html[data-theme="nerv-muted"] .qr-crosshair,
html[data-theme="nerv-blue"] .qr-crosshair,
html[data-theme="terminal"] .qr-crosshair { border-radius: 0; }

.qr-status {
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  background: rgba(0,0,0,0.75);
  color: var(--accent-2);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.qr-hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 6px;
}
.qr-hint code {
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  color: var(--accent-2);
}

/* ════════════════════════════════════════════════════════════════
   v5: TUTORIAL OVERLAY (first launch)
   ════════════════════════════════════════════════════════════════ */
.tutorial {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg-grad);
  background-attachment: fixed;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
}

.tutorial-slide {
  display: none;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 28px 28px 40px;
  text-align: center;
  animation: tut-in 0.3s var(--t-curve);
}
.tutorial-slide.active { display: flex; }
@keyframes tut-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tut-emoji {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 18px var(--accent-glow));
}

.tut-h {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
  background: linear-gradient(180deg, var(--text), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tut-p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 420px;
  margin-bottom: 10px;
}
.tut-p.tut-sub { color: var(--muted); font-size: 13px; }

.tut-list {
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 420px;
  padding-left: 18px;
}
.tut-list li { margin-bottom: 8px; }
.tut-list b { color: var(--accent-2); }
.tut-list code {
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-2);
  border: 1px solid var(--border);
}
.tut-list a {
  color: var(--accent-2);
  font-weight: 700;
  text-decoration: underline;
}

.tut-actions {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  width: 100%;
  max-width: 420px;
}
.tut-skip, .tut-next, .tut-back {
  flex: 1;
  padding: 14px 18px;
  border-radius: var(--r-l);
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.1s;
}
.tut-skip, .tut-back {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.tut-back:active { transform: scale(0.97); }
.tut-p.tut-link {
  margin-top: -4px;
  margin-bottom: 16px;
}
.tut-p.tut-link a {
  color: var(--accent-2);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-2);
  padding-bottom: 2px;
}
.tut-next {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
}
html[data-theme="nerv"] .tut-next,
html[data-theme="nerv-muted"] .tut-next,
html[data-theme="nerv-blue"] .tut-next,
html[data-theme="terminal"] .tut-next { color: #000; border-radius: 0; }
html[data-theme="nerv"] .tut-skip,
html[data-theme="nerv-muted"] .tut-skip,
html[data-theme="nerv-blue"] .tut-skip,
html[data-theme="terminal"] .tut-skip { border-radius: 0; }
.tut-skip:active, .tut-next:active { transform: scale(0.97); }

.tut-finish {
  background: linear-gradient(135deg, var(--c-working), #16a34a);
  color: #fff;
  border: none;
  flex: 1;
}

.tut-dots {
  display: flex;
  gap: 6px;
  margin-top: 22px;
}
.tut-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dim);
  transition: all var(--t-fast);
}
.tut-dot.active {
  background: var(--accent);
  width: 26px;
  border-radius: 4px;
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ── Tutorial theme-picker grid (slide 2) ──────────────────────── */
.tut-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin: 14px 0 18px;
}
.tut-theme-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 11px;
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.tut-theme-tile:active { transform: scale(0.96); }
.tut-theme-tile.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow);
}
.tut-tt-swatch {
  width: 44px;
  height: 44px;
  border-radius: var(--r-s);
  border: 1px solid var(--border);
  display: block;
}
.tut-tt-name {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════
   v6: OUTPUT STREAM with Markdown rendering + separate theme
   ════════════════════════════════════════════════════════════════ */
.output-stream.md {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  padding: 14px;
}
.output-stream.md h1, .output-stream.md h2, .output-stream.md h3,
.output-stream.md h4, .output-stream.md h5, .output-stream.md h6 {
  font-family: var(--font-display);
  margin: 12px 0 6px 0;
  letter-spacing: -0.01em;
}
.output-stream.md h1 { font-size: 17px; font-weight: 700; }
.output-stream.md h2 { font-size: 15px; font-weight: 700; }
.output-stream.md h3 { font-size: 14px; font-weight: 700; }
.output-stream.md h4 { font-size: 13px; font-weight: 700; }
.output-stream.md h1:first-child, .output-stream.md h2:first-child,
.output-stream.md h3:first-child { margin-top: 0; }

.output-stream.md p { margin: 0 0 8px 0; }
.output-stream.md p:last-child { margin-bottom: 0; }
.output-stream.md strong { font-weight: 700; }
.output-stream.md em { font-style: italic; }
.output-stream.md ul, .output-stream.md ol { padding-left: 22px; margin: 6px 0 10px 0; }
.output-stream.md li { margin-bottom: 2px; }

.output-stream.md hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}
.output-stream.md blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin: 8px 0;
  color: var(--text-2);
}
.output-stream.md a { color: var(--accent-2); }

.output-stream.md code.inline {
  background: rgba(255,255,255,0.07);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.92em;
}
.output-stream.md pre.codeblock {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
  overflow-x: auto;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--code-fg);
}
.output-stream.md pre.codeblock code { background: none; padding: 0; }

/* ── Output theme: GRUVBOX (the default, beloved) ── */
.output-stream[data-output-theme="gruvbox"] {
  background: #282828;        /* gruvbox bg */
  color: #ebdbb2;              /* gruvbox fg */
  border-color: #3c3836;
  --code-bg: #1d2021;
  --code-border: #3c3836;
  --code-fg:  #ebdbb2;
}
.output-stream[data-output-theme="gruvbox"] h1,
.output-stream[data-output-theme="gruvbox"] h2,
.output-stream[data-output-theme="gruvbox"] h3,
.output-stream[data-output-theme="gruvbox"] h4 { color: #fabd2f; }
.output-stream[data-output-theme="gruvbox"] strong { color: #fb4934; }
.output-stream[data-output-theme="gruvbox"] em     { color: #d3869b; }
.output-stream[data-output-theme="gruvbox"] code.inline {
  background: #3c3836;
  color: #8ec07c;
}
.output-stream[data-output-theme="gruvbox"] a { color: #83a598; }
.output-stream[data-output-theme="gruvbox"] blockquote { border-left-color: #fabd2f; }
.output-stream[data-output-theme="gruvbox"] hr { border-color: #504945; }

/* ── Output theme: MONO (plain monospace, theme-coloured) ── */
.output-stream[data-output-theme="mono"] {
  background: var(--bg);
  color: var(--text-2);
  border-color: var(--border);
  --code-bg: var(--surface);
  --code-border: var(--border);
  --code-fg:  var(--text);
}

/* ── Output theme: MATCH (inherits card theme — default behaviour) ── */
.output-stream[data-output-theme="match"] {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border);
  --code-bg: var(--bg);
  --code-border: var(--border);
  --code-fg:  var(--text);
}
.output-stream[data-output-theme="match"] h1,
.output-stream[data-output-theme="match"] h2,
.output-stream[data-output-theme="match"] h3,
.output-stream[data-output-theme="match"] h4 { color: var(--accent-2); }
.output-stream[data-output-theme="match"] strong { color: var(--text); }
.output-stream[data-output-theme="match"] code.inline {
  background: var(--surface-2);
  color: var(--accent-2);
}
.output-stream[data-output-theme="match"] a { color: var(--accent-2); }
.output-stream[data-output-theme="match"] blockquote { border-left-color: var(--accent); }

/* Make the output stream bigger by default and scrollable */
.output-stream {
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.output-stream::-webkit-scrollbar { width: 5px; }
.output-stream::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }

/* ════════════════════════════════════════════════════════════════
   v0.6.1 — Full-screen Output Viewer
   Triggered: double-tap on the .output-stream inside the detail page.
   Behaviour: slides up from below, fills the screen, swipe-down or
   tap "←" to close. Defaults to gruvbox.
   ════════════════════════════════════════════════════════════════ */

.output-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), opacity 180ms;
}
.output-viewer.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.ov-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.ov-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast);
}
.ov-btn:active { transform: scale(0.94); background: var(--accent); color: #000; }
.ov-close { font-size: 20px; }
.ov-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-display);
}
.ov-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-meta {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.ov-tools { display: flex; gap: 6px; }
.ov-tool { font-size: 14px; }

.ov-theme-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  flex: 0 0 auto;
}
.ov-theme-label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ov-theme-seg {
  flex: 1;
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  overflow: hidden;
}
.ov-theme-seg button {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: 6px 8px;
  font-family: var(--font-display);
  font-size: 11px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.ov-theme-seg button.active {
  background: var(--accent);
  color: #000;
  font-weight: 700;
}

.ov-body {
  flex: 1;
  margin: 0;
  border: none;
  border-radius: 0;
  max-height: none;
  font-size: 13px;
  line-height: 1.55;
  padding: 16px 14px 24px;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ov-body.nowrap {
  white-space: pre;
  word-break: normal;
}
.ov-body.wrap {
  white-space: pre-wrap;
  word-break: break-word;
}
/* Markdown rendering inside the viewer — same .md selector */
.ov-body.md {
  white-space: normal;
}

/* Pulse for the freshly-streamed last line */
.ov-body .ov-fresh {
  background: var(--accent-glow);
  color: var(--accent-2);
  padding: 0 4px;
  border-radius: 2px;
  animation: ov-fresh-fade 1.4s ease-out forwards;
}
@keyframes ov-fresh-fade {
  from { background: var(--accent-glow); }
  to   { background: transparent; }
}

/* v0.7.1: explicit enlarge button on the detail Output section head */
#d-output { cursor: zoom-in; }

.d-output-enlarge {
  margin-left: 8px;
  width: 28px;
  height: 28px;
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.d-output-enlarge:active {
  background: var(--accent);
  color: var(--bg);
  transform: scale(0.92);
}


/* ── "More agents" row (v0.7) — shown when agentsVisible caps the slice ── */
.more-agents-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 4px 0;
  background: var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-s);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.more-agents-row:active {
  color: var(--accent);
  border-color: var(--accent);
}
.more-agents-row .more-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
.more-text { white-space: nowrap; }

/* In vertical-rotated mode, the "more agents" row goes alongside cards */
.card-stack[data-orient="vertical-rotated"] .more-agents-row {
  flex: 0 0 auto;
  width: 90px;
  height: 100%;
  flex-direction: column;
  text-align: center;
  font-size: 10px;
  white-space: normal;
  word-break: break-word;
}
.card-stack[data-orient="vertical-rotated"] .more-agents-row .more-text {
  white-space: normal;
  line-height: 1.3;
}

/* ── Accent swatch picker (v0.7 Appearance settings) ─────────────── */
.accent-swatch-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
  background: transparent;
  border: none;
}
.accent-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  padding: 0;
  flex-shrink: 0;
}
.accent-swatch:active { transform: scale(0.92); }
.accent-swatch.active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent), 0 0 12px var(--accent-glow);
  transform: scale(1.08);
}
.ac-amber       { background: linear-gradient(135deg, #ff7a00, #ffaa44); }
.ac-amber-muted { background: linear-gradient(135deg, #cc8030, #e6a050); }
.ac-blue        { background: linear-gradient(135deg, #4a90e2, #7ab0f0); }
.ac-green       { background: linear-gradient(135deg, #00cc55, #66ff99); }
.ac-red         { background: linear-gradient(135deg, #ff3030, #ff7060); }
.ac-purple      { background: linear-gradient(135deg, #7c5cff, #a78bfa); }
.ac-cyan        { background: linear-gradient(135deg, #00d4d4, #66f0f0); }
.ac-rose        { background: linear-gradient(135deg, #ff5e8c, #ff90b8); }

/* ── Settings: per-row test-sound button (v0.7.1) ─────────────── */
.btn-test-sound {
  margin-left: 6px;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-s);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-test-sound:active {
  background: var(--accent);
  color: var(--bg);
  transform: scale(0.92);
}

/* ── Output Viewer: floating pen-icon reply button (v0.7.1) ──────── */
.ov-pen {
  position: absolute;
  right: 22px;
  bottom: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  border: 2px solid var(--bg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), 0 0 24px var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0.55;             /* faded — explicit but unobtrusive */
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.ov-pen:hover { opacity: 1; }
.ov-pen:active {
  opacity: 1;
  transform: scale(0.92);
}
.ov-pen-icon {
  font-size: 24px;
  line-height: 1;
}
/* When viewer is freshly opened, fade the pen in slowly to make it
   feel ambient rather than a primary action. */
.output-viewer:not(.hidden) .ov-pen {
  animation: ov-pen-in 600ms ease-out 800ms backwards;
}
@keyframes ov-pen-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 0.55; transform: scale(1); }
}

/* Hide the pen when the reply bar is open so it doesn't overlap */
.output-viewer .ov-reply-bar:not(.hidden) ~ .ov-pen,
.output-viewer.replying .ov-pen {
  display: none;
}

/* ── Output Viewer: inline reply bar (v0.7.1) ──────────────────── */
.ov-reply-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(16px + var(--sab));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-l);
  box-shadow: 0 6px 22px rgba(0,0,0,0.5);
  z-index: 11;
  animation: ov-reply-in 220ms ease-out;
}
.ov-reply-bar.hidden { display: none; }
@keyframes ov-reply-in {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.ov-reply-bar input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-s);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  outline: none;
}
.ov-reply-bar input:focus { border-color: var(--accent); }
.ov-reply-mic, .ov-reply-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.ov-reply-send {
  background: var(--accent);
  color: var(--bg);
}
.ov-reply-mic.recording {
  background: var(--c-waiting);
  color: #fff;
  border-color: var(--c-waiting);
  animation: rec-pulse 1.2s infinite;
}

/* ── Card reorder arrows (v0.7.1) ─────────────────────────────────
   Two stacked ▲/▼ buttons clipped to the state-stripe "lip" on the
   left edge of each card. In vertical-rotated mode the stripe moves
   to the top edge — the arrows follow.
   ────────────────────────────────────────────────────────────── */
.h-reorder {
  position: absolute;
  top: 4px;
  left: calc(var(--stripe-width) + 2px);   /* sit just inside the stripe */
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 3;
  opacity: 0.45;
  transition: opacity var(--t-fast);
}
.h-card.selected .h-reorder { opacity: 0.85; }
.h-card:hover .h-reorder { opacity: 0.9; }

.h-reorder-btn {
  width: 18px;
  height: 14px;
  font-size: 10px;
  line-height: 1;
  color: var(--text-2);
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.h-reorder-btn:active {
  background: var(--accent);
  color: var(--bg);
  transform: scale(0.88);
}
.h-card[data-noTodos="1"] .h-reorder { /* same position regardless */ }

/* In vertical-rotated (= landscape) mode the lip is on top, so arrows
   go on the top-left horizontally (▲ left, ▼ right) instead of stacked */
.card-stack[data-orient="vertical-rotated"] .h-reorder {
  top: calc(var(--stripe-width) + 2px);
  left: 6px;
  flex-direction: row;
}

/* When the card content shifts left to make room for the arrows, push
   the head row over so the agent name doesn't sit under the arrows. */
.h-card .h-head {
  padding-left: 26px;
}
.card-stack[data-orient="vertical-rotated"] .h-card .h-head {
  padding-left: 0;
  padding-top: 22px;
}

/* ════════════════════════════════════════════════════════════════
   v0.7.4 — "vertical-text" orientation (REVISED)
   Cards stay in the normal horizontal-stacked column. Within each
   card, only the AGENT NAME + META is column-rotated (writing-mode
   vertical-rl). The "current summary" / last output line goes
   BELOW the name as a normal horizontal row — it doesn't share a
   second rotated column. Avoids the cramped wrap-everything-90deg
   look of v0.7.2.

   Default (horizontal) view is UNCHANGED.
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   v0.7.6 — "vertical-text" orientation (FINAL, per fivelidz feedback)

   Cards keep the SAME SIZE AND LAYOUT as horizontal mode. Nothing
   about the card's shape, geometry, or stack-flow changes. ONLY the
   TEXT direction inside the card is rotated 90° via writing-mode.

   The todo progress bar is ALSO flipped to vertical so the layout
   stays single-column (no awkward second-column split).

   Default (horizontal) view is COMPLETELY UNCHANGED — no rules below
   touch .card-stack itself, only .h-card descendants when data-orient
   is vertical-text.
   ════════════════════════════════════════════════════════════════ */

/* v0.7.10: rotate ALL internal card elements 90deg \u2014 not just text,
   the WHOLE inside of the card. Card BOX itself stays unchanged
   (horizontal, same size as horizontal mode).

   How: apply writing-mode: vertical-rl to the .h-card. This rotates
   the entire flex/text flow inside the card 90deg. Children stack
   right-to-left visually but each element's own text reads top-to-
   bottom \u2014 i.e. tilted 90deg as a whole, exactly what the user wants.

   The card BOX retains its width/height/border/shape because
   writing-mode doesn't change container dimensions; it just changes
   how content lays out inside. */

.card-stack[data-orient="vertical-text"] .h-card {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  overflow: hidden;
}

/* Drop the '\u203a ' prefix that looks awkward sideways */
.card-stack[data-orient="vertical-text"] .h-card .h-output::before {
  content: '';
}

/* Reorder arrows + permission buttons are UI controls, not text \u2014
   counter-rotate them so they stay tappable and readable. */
.card-stack[data-orient="vertical-text"] .h-card .h-reorder,
.card-stack[data-orient="vertical-text"] .h-card .h-perm-row {
  writing-mode: horizontal-tb;
}

/* ════════════════════════════════════════════════════════════════
   v0.7.2 — Pairing card at top of chrome panel
   First thing the user sees when they swipe up. Shows "Connected to
   <host>" if paired, "Tap to pair" otherwise. Quick actions below.
   ════════════════════════════════════════════════════════════════ */
.cp-pair-section {
  padding: 8px 0;
}
.cp-pair-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--c-idle);
  border-radius: var(--r-m);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cp-pair-card:active { transform: scale(0.99); }
/* Paired state — green stripe + glow */
.cp-pair-card[data-pair-state="paired"] {
  border-left-color: var(--c-working);
  box-shadow: 0 0 0 1px var(--c-working), 0 0 16px rgba(0,200,80,0.20);
}
/* Connecting state — yellow pulse */
.cp-pair-card[data-pair-state="connecting"] {
  border-left-color: var(--c-permission);
  animation: pulse 1.4s infinite;
}
/* Mock state — accent stripe */
.cp-pair-card[data-pair-state="mock"] {
  border-left-color: var(--accent);
}

.cp-pair-icon {
  font-size: 22px;
  color: var(--accent);
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.cp-pair-text {
  flex: 1;
  min-width: 0;
}
.cp-pair-status {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cp-pair-host {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-pair-action {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--r-s);
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.cp-pair-action:active { transform: scale(0.94); }
/* When paired, action button shows "Disconnect" with muted style */
.cp-pair-card[data-pair-state="paired"] .cp-pair-action {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}

.cp-pair-quick {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.cp-pair-quick-btn {
  padding: 8px 6px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-s);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.cp-pair-quick-btn:active {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Version chip in Settings header (v0.7.2) ──────────────────── */
.version-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
  margin-right: 4px;
}

/* ── Version label at top of chrome panel (v0.7.2) ─────────────── */
.cp-version {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 8px;
  letter-spacing: 0.06em;
}
.cp-version strong {
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════
   v0.7.4 — Tutorial "Volume keys" slide diagram
   ════════════════════════════════════════════════════════════════ */
.tut-volkeys {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
  width: 100%;
  max-width: 360px;
}
.tut-vk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
}
.tut-vk-row.tut-vk-hold {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.tut-vk-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--r-s);
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tut-vk-dot {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
  color: var(--c-waiting);
  animation: tut-vk-pulse 1.4s infinite;
}
@keyframes tut-vk-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1.0; }
}
.tut-vk-action {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.tut-vk-action b {
  color: var(--accent-2);
  font-weight: 700;
}
.tut-vk-sub {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Settings group title with link to tech stack (v0.7.5) ─────── */
.sg-title-link {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  margin-left: 10px;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: color var(--t-fast), border-color var(--t-fast);
  vertical-align: middle;
}
.sg-title-link:hover,
.sg-title-link:active {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Tech stack modal (v0.7.5) ─────────────────────────────────── */
.tech-stack-modal {
  position: fixed; inset: 0; z-index: 2100;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.tech-stack-modal.hidden { display: none; }
.tsm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
.tsm-sheet {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: 80vh;
  background: var(--surface);
  border-top: 1px solid var(--accent);
  border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  pointer-events: auto;
  animation: tsm-slide-in 280ms cubic-bezier(.2,.7,.2,1);
}
@keyframes tsm-slide-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.tsm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--accent-2);
  border-bottom: 1px solid var(--hairline);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tsm-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: var(--r-s);
  font-size: 18px;
  cursor: pointer;
}
.tsm-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px calc(20px + var(--sab));
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.tsm-body h4 {
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 14px 0 6px;
}
.tsm-body ul {
  margin: 0 0 8px 0;
  padding-left: 18px;
}
.tsm-body li {
  margin-bottom: 4px;
}
.tsm-body code {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--accent);
}
.tsm-tldr {
  background: var(--bg);
  border-left: 3px solid var(--accent);
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}

/* ════════════════════════════════════════════════════════════════
   v0.7.6 — Output Viewer slide transition when swapping agents
   ════════════════════════════════════════════════════════════════ */
.ov-slide-out-up {
  animation: ov-slide-out-up 160ms ease-in forwards;
}
.ov-slide-out-down {
  animation: ov-slide-out-down 160ms ease-in forwards;
}
.ov-slide-in-from-below {
  animation: ov-slide-in-from-below 220ms cubic-bezier(.2,.7,.2,1);
}
.ov-slide-in-from-above {
  animation: ov-slide-in-from-above 220ms cubic-bezier(.2,.7,.2,1);
}
@keyframes ov-slide-out-up {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(-30%); opacity: 0; }
}
@keyframes ov-slide-out-down {
  from { transform: translateY(0);   opacity: 1; }
  to   { transform: translateY(30%); opacity: 0; }
}
@keyframes ov-slide-in-from-below {
  from { transform: translateY(30%);  opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes ov-slide-in-from-above {
  from { transform: translateY(-30%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── v0.7.6: Detail header name button (tap=change, hold=rename) ── */
.detail-name-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--r-s);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  text-align: left;
  transition: background var(--t-fast);
}
.detail-name-btn:active {
  background: var(--surface-2);
}
.detail-name-btn .detail-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-name-btn .detail-caret {
  color: var(--accent);
  font-size: 12px;
  flex-shrink: 0;
}

/* v0.7.8: textarea for detail page text input — paragraph-sized by
   default, scrollable when full. Enter inserts a newline. Auto-grows
   from min-height (~4 lines) up to max-height (~10 lines), then
   scrolls internally. */
#d-text-input {
  resize: none;
  min-height: 88px;          /* ~4 lines visible by default */
  max-height: 220px;         /* caps before overlapping the PTT button */
  overflow-y: auto;
  line-height: 1.45;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  outline: none;
  flex: 1;
}
#d-text-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* v0.7.6: small settings inline link (e.g. 'Show all voices') */
.sg-link {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  border-bottom: 1px dotted var(--accent);
}
.sg-link:hover,
.sg-link:active {
  color: var(--accent-2);
}

/* v0.7.8 — Detail-page slide transition when cycling agents (Vol keys) */
.d-slide-out-up   { animation: d-slide-out-up   160ms ease-in forwards; }
.d-slide-out-down { animation: d-slide-out-down 160ms ease-in forwards; }
.d-slide-in-from-below { animation: d-slide-in-from-below 220ms cubic-bezier(.2,.7,.2,1); }
.d-slide-in-from-above { animation: d-slide-in-from-above 220ms cubic-bezier(.2,.7,.2,1); }
@keyframes d-slide-out-up   { from { transform: translateY(0);    opacity: 1; } to { transform: translateY(-15%); opacity: 0; } }
@keyframes d-slide-out-down { from { transform: translateY(0);    opacity: 1; } to { transform: translateY(15%);  opacity: 0; } }
@keyframes d-slide-in-from-below { from { transform: translateY(15%);  opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes d-slide-in-from-above { from { transform: translateY(-15%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ════════════════════════════════════════════════════════════════
   v0.7.9 — Detail header: SEPARATE rename + change-agent buttons
   ════════════════════════════════════════════════════════════════ */
.detail-name-btn {
  /* The title text — tap to RENAME */
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: var(--r-s);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  text-align: left;
  transition: background var(--t-fast);
  touch-action: manipulation;
}
.detail-name-btn:active { background: var(--surface-2); }
.detail-name-btn .detail-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-type-btn {
  /* The type chip rectangle — tap to CHANGE AGENT TYPE */
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 8px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  transition: background var(--t-fast), color var(--t-fast);
  touch-action: manipulation;
}
.detail-type-btn:active {
  background: var(--accent);
  color: var(--bg);
}
.detail-type-btn .detail-type-chip {
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
}
.detail-type-btn .detail-caret {
  font-size: 10px;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════
   v0.7.9 — Session-position dot row (under the detail header)
   ════════════════════════════════════════════════════════════════ */
.detail-position-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.dp-dot {
  /* base — small filled circle for non-current agents */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dp-color, var(--c-idle));
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--t-fast);
  position: relative;
}
.dp-dot:active { transform: scale(0.85); }
.dp-dot-current {
  /* Current agent — bigger, with a ring around it */
  width: 14px;
  height: 14px;
  box-shadow:
    0 0 0 2px var(--bg),                   /* gap between dot and ring */
    0 0 0 4px var(--dp-color, var(--accent));
}

/* ════════════════════════════════════════════════════════════════ */
/* v0.8 — gmux-terminal-backend profile picker + session recovery     */
/* ════════════════════════════════════════════════════════════════ */

.sg-row-spacer { height: 6px; }
.sg-label-sub  {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 8px 0 4px;
}

.sg-input {
  width: 100%;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.sg-input:focus {
  outline: none;
  border-color: var(--accent);
}

.sg-action-btn {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.sg-action-btn:active { opacity: 0.7; }
.sg-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sg-status-line {
  margin-top: 8px;
  padding: 8px 11px;
  background: var(--surface);
  border-left: 3px solid var(--hairline);
  border-radius: 4px;
  font-size: 13px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-dim);
}

/* Profile picker — three icon+label buttons in a row */
.backend-profile-picker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 4px;
}
.backend-profile-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.backend-profile-btn .bp-icon { font-size: 18px; line-height: 1; }
.backend-profile-btn .bp-label { font-size: 11px; line-height: 1.2; text-align: center; }
.backend-profile-btn:active { transform: scale(0.96); }
.backend-profile-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text);
}

/* Session recovery list */
.backend-sessions {
  margin-top: 12px;
}
.bs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 2px;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bs-count {
  background: var(--accent);
  color: var(--bg);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.bs-empty {
  padding: 12px;
  background: var(--surface);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}
.bs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bs-item {
  padding: 9px 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-radius: 5px;
  font-size: 12px;
}
.bs-item-running  { border-left-color: var(--c-working, #2ea043); }
.bs-item-ended    { border-left-color: var(--text-dim); opacity: 0.75; }
.bs-item-exited   { border-left-color: var(--c-error, #f85149); }

.bs-row1 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}
.bs-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.bs-badge-running { background: var(--c-working, #2ea043); color: var(--bg); }
.bs-badge-ended   { background: var(--text-dim); color: var(--bg); }
.bs-badge-exited  { background: var(--c-error, #f85149); color: var(--bg); }
.bs-agent { font-weight: 600; color: var(--text); }
.bs-target { color: var(--text-dim); font-size: 11px; }
.bs-row2 {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-row3 {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bs-cwd { font-family: var(--font-mono, ui-monospace, monospace); }
.bs-actions {
  display: flex;
  gap: 6px;
}
.bs-btn {
  flex: 1;
  padding: 7px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.bs-btn:active { background: var(--hairline); }
.bs-btn-rejoin { border-color: var(--accent); color: var(--accent); }
.bs-btn-kill   { border-color: var(--c-error, #f85149); color: var(--c-error, #f85149); }

/* ════════════════════════════════════════════════════════════════ */
/* v0.8.3 — Chrome panel backend picker (under Pair/Connection)        */
/* ════════════════════════════════════════════════════════════════ */

.cp-backend-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.cp-backend-status-pip {
  font-size: 12px;
  margin-left: auto;
}
.cp-backend-picker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;  /* 3 backends + mock */
  gap: 6px;
  margin: 8px 0;
}
.cp-backend-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--text-dim);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.cp-backend-btn .cp-bb-icon {
  font-size: 18px;
  line-height: 1;
}
.cp-backend-btn .cp-bb-label {
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-backend-btn:active { transform: scale(0.94); }
.cp-backend-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--text);
}
.cp-backend-btn.no-token {
  opacity: 0.55;
}
.cp-backend-btn.no-token::after {
  content: "🔒";
  position: absolute;
  font-size: 9px;
  margin-top: -2px;
}
.cp-backend-mock {
  /* slightly different — it's a fallback, not a real backend */
  border-style: dashed;
}
.cp-backend-status-line {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono, ui-monospace, monospace);
  padding: 4px 8px;
  background: var(--surface);
  border-left: 2px solid var(--hairline);
  border-radius: 3px;
  margin-top: 4px;
}