/* ── AXIOM tokens (vendored from axiom-styleguide/tokens/tokens.css) ─── */
:root {
  --axiom-ink-000: #080810;
  --axiom-ink-050: #0d0d1a;
  --axiom-ink-100: #0f0f1e;
  --axiom-ink-200: rgba(255,255,255,0.04);
  --axiom-ink-300: rgba(255,255,255,0.07);
  --axiom-ink-400: rgba(255,255,255,0.08);
  --axiom-paper-000: #e8e8f0;
  --axiom-paper-200: #7b7b99;
  --axiom-violet-500: #6c63ff;
  --axiom-violet-300: #a78bfa;
  --axiom-violet-glow: rgba(108,99,255,0.35);
  --axiom-violet-bg:   rgba(108,99,255,0.18);

  --bg: var(--axiom-ink-000);
  --bg-soft: var(--axiom-ink-050);
  --panel: var(--axiom-ink-200);
  --panel-hi: var(--axiom-ink-300);
  --border: var(--axiom-ink-400);
  --text: var(--axiom-paper-000);
  --dim: var(--axiom-paper-200);
  --accent: var(--axiom-violet-500);
  --accent-soft: var(--axiom-violet-300);
  --accent-glow: var(--axiom-violet-glow);
  --user-bg: var(--axiom-violet-bg);
  --ok: #3fb950;
  --warn: #d29922;
  --err: #f85149;
  --tool: var(--axiom-violet-500);
  --code-bg: var(--axiom-ink-100);
  --code-fg: #c9d1d9;

  /* ── v0.37.0 Design-Foundation tokens (additive, doesn't break existing usage) ── */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Geist", "Inter Display", "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* radii — v0.37.0 spec: 4 / 8 / 12 */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --radius-sm: 6px;   /* legacy */
  --radius-md: 10px;  /* legacy */
  --radius-lg: 14px;  /* legacy */

  /* spacing — v0.37.0 spec: 4 / 8 / 12 / 16 / 24 / 32 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* shadows */
  --shadow-1: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-3: 0 20px 56px rgba(0,0,0,0.65);
  --glow: 0 0 20px var(--accent-glow);

  /* transitions */
  --t-fast: 150ms ease-out;
  --t-base: 220ms ease-out;
  --t-slow: 320ms ease-out;

  /* touch + hit-area */
  --touch-min: 44px;

  /* mobile-safe insets */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ── v0.37.3 — z-index stack (single source of truth) ──
   * Every fixed/sticky/absolute layer in claudy MUST use one of these.
   * Magic numbers (z-index: 9, 30, 1000, ...) are forbidden going forward.
   *
   *   --z-base       (0)    : in-flow content, no stacking context needed
   *   --z-sticky     (50)   : in-page sticky elements (chat-head, sticky-divider)
   *   --z-topbar     (100)  : mobile top-bar (fixed, above page content)
   *   --z-sidebar    (200)  : left + right sidebars (slide-in drawers on mobile)
   *   --z-scrim      (250)  : full-viewport dim scrim behind drawer/overlay
   *   --z-overlay    (300)  : in-page overlays (dropdowns, popovers, tooltips,
   *                            hover-cards). Above sidebars on desktop where
   *                            sidebars are in-flow.
   *   --z-modal      (400)  : modal dialogs (usage, settings, etc.) + voice-mode
   *                            fullscreen
   *   --z-toast      (500)  : transient toasts / alerts (always on top)
   */
  --z-base: 0;
  --z-sticky: 50;
  --z-topbar: 100;
  --z-sidebar: 200;
  --z-scrim: 250;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* layout-heights (single source of truth, used by padding-flow contract) */
  --topbar-h: 48px;
  /* --composer-h is set by JS at runtime (wireComposerHeightVar) */
}

/* ─────────────────────────────────────────────────────────────────────────
 * v0.37.3 — VIEW HIERARCHY (mobile + desktop)
 * ─────────────────────────────────────────────────────────────────────────
 * Layer stack (bottom → top), each owns its z-index var + its safe-area pad.
 *
 *   [base]   body / #app / #chat-scroll        : scrollable in-flow content
 *                                                padding-top: --topbar-h + safe-top
 *                                                padding-bottom: --composer-h + safe-bottom
 *
 *   [sticky] .chat-head, sticky dividers       : z = --z-sticky
 *
 *   [topbar] #mobile-topbar                    : position fixed, top:0
 *                                                z = --z-topbar
 *                                                OPAQUE background, owns --topbar-h
 *                                                padding-top: safe-top
 *
 *   [sidebar] #sidebar, #right-panel           : position fixed (mobile drawer)
 *                                                z = --z-sidebar
 *                                                slide-in via transform
 *
 *   [scrim] #mobile-scrim                      : full-vp dim layer behind drawer
 *                                                z = --z-scrim
 *
 *   [overlay] dropdowns, hover-cards, ctx-menu : z = --z-overlay
 *
 *   [modal] .usage-modal, settings, ...        : z = --z-modal
 *           #voice-mode-fullscreen             : z = --z-modal (full viewport)
 *
 *   [toast] #toast-host, #connection-banner    : z = --z-toast
 *
 * Padding-flow contract:
 *   #chat-scroll padding-top    = --topbar-h (default 48px) + safe-top
 *   #chat-scroll padding-bottom = --composer-h (live from JS) + safe-bottom
 *   #mobile-topbar padding-top  = safe-top
 *   #composer-wrap padding-bottom = safe-bottom
 *
 * Ownership:
 *   --topbar-h   : set by CSS (48px default)
 *   --composer-h : published by JS (wireComposerHeightVar in app.js)
 *
 * Any new fixed/sticky layer MUST pick a z-index var and document its slot here.
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ── v0.37.0 self-hosted display font (Geist) — falls back gracefully ── */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local("Geist"), local("Geist-Regular");
}
* { box-sizing: border-box; }
/* Themed scrollbars — applied globally so the OS default ugly chrome never
   peeks through. Firefox uses scrollbar-width/color; WebKit + Chromium use
   the pseudo-elements. Both stay subtle, fade-in on hover. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, rgba(120,110,180,0.45)) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(140,130,200,0.35), rgba(108,99,255,0.30));
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 120ms ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(167,139,250,0.55), rgba(108,99,255,0.50));
  background-clip: padding-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(167,139,250,0.75), rgba(108,99,255,0.70));
  background-clip: padding-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-corner { background: transparent; }
html, body {
  margin: 0; height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(108,99,255,0.08), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(167,139,250,0.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  /* v0.37.4 Bug 6 — Mobile PWA safety net: ONE scroll container only.
     The viewport itself never scrolls (horizontal OR vertical) — all
     real scrolling happens inside #chat / #sidebar / #right-panel.
     overscroll-behavior:none kills iOS bounce that exposed a sporadic
     "second scroll area" perceived by users in v0.37.3. */
  overflow: hidden;
  overscroll-behavior: none;
  max-width: 100vw;
}
body {
  display: grid;
  /* sidebar | chat | right panel — the right panel collapses to 0 via CSS var */
  grid-template-columns: 280px 1fr var(--rp-w, 380px);
}
body.rp-collapsed { grid-template-columns: 280px 1fr 0; }
body.rp-collapsed #right-panel { display: none; }
/* v0.37.0 #1 — the floating #right-show overlay is retired; the top-bar
   slot (#topbar-rp-toggle) handles show/hide instead. Element kept in
   DOM for backwards-compat selectors but visually hidden. */
#right-show { display: none !important; }
/* Active-state for the top-bar toggle reflects "panel open". */
body:not(.rp-collapsed) #topbar-rp-toggle { color: var(--accent-soft); background: rgba(108,99,255,0.10); }

#sidebar {
  /* Solid bg-soft base (was var(--panel) which is 4% white over body bg —
     basically transparent and made the whole left rail bleed background
     gradients through, esp. ugly on mobile). Light violet tint sits on top
     to keep the AXIOM look. */
  background:
    linear-gradient(180deg, rgba(108,99,255,0.04), rgba(108,99,255,0.01)),
    var(--bg-soft);
  border-right: 1px solid var(--axiom-ink-300);
  display: flex; flex-direction: column; overflow-y: auto;
  /* v0.37.1 — consistent token padding (desktop: --sp-4 = 16px, mobile: --sp-3 = 12px). */
  padding: var(--sp-4) var(--sp-4);
  /* v0.37.1 Bug-4 — kill phantom horizontal scroll. Some descendants
     (long task titles, code-block previews, base-dir paths) were pushing
     the rail >4x viewport-wide. Classic flexbox-content-overflow pattern:
     hide overflow at the container + force min-width:0 on every child so
     ellipsis can actually engage. */
  overflow-x: hidden;
  max-width: 100%;
  min-width: 0;
}
#sidebar > *,
#sidebar * {
  min-width: 0;
  max-width: 100%;
}
/* Pre/code blocks anywhere in the sidebar must not blow it out. */
#sidebar pre, #sidebar code { max-width: 100%; overflow-x: auto; }
@media (max-width: 768px) {
  #sidebar { padding: var(--sp-3) var(--sp-3); }
}
.brand-row {
  display: flex; align-items: center; justify-content: space-between;
  /* v0.37.1 — proper vertical breathing room around the logo. */
  margin: 0 0 var(--sp-3); padding: var(--sp-1) 0;
  gap: var(--sp-2);
}
.brand-actions { display: inline-flex; align-items: center; gap: 2px; }
.brand-actions .cx-iconbtn { width: 30px; height: 30px; color: var(--dim); }
.brand-actions .cx-iconbtn:hover { color: var(--text); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  min-width: 0; flex: 1 1 auto; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; box-shadow: var(--glow); flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; font-weight: 600; font-size: 14px; letter-spacing: -0.2px; min-width: 0; }
.brand-sub { font-size: 9px; font-weight: 500; color: var(--dim); letter-spacing: 0.12em; }
.dim { color: var(--dim); }
.small { font-size: 12px; }
#cwd-display {
  /* v0.37.1 — single-line ellipsis instead of break-all. Full path on hover (title). */
  margin: 0 0 var(--sp-3); font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--dim);
}
.section-head { display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 6px; }
h3 { color: var(--dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; margin: 0; font-weight: 600; }
.icon-btn { background: transparent; border: 1px solid var(--border);
  color: var(--dim); border-radius: 4px; width: 22px; height: 22px;
  font-size: 12px; cursor: pointer; padding: 0; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.orch {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; user-select: none;
  background: rgba(47,129,247,0.08); border: 1px solid rgba(47,129,247,0.3);
  margin-bottom: 8px;
}
.orch.hidden { display: none; }
.orch:hover { background: rgba(47,129,247,0.16); }
.orch.active { background: rgba(47,129,247,0.22); border-color: var(--accent); }
.orch-icon { color: var(--accent); font-weight: 700; }
.orch-label { flex: 1; font-weight: 600; }
.orch-meta { color: var(--dim); font-size: 11px; }
.orch-chev { color: var(--dim); font-size: 10px; padding: 0 6px; cursor: pointer; }
.orch-chev:hover { color: var(--accent); }
#orchestrator-sublist { padding: 0 0 0 12px; margin: -4px 0 8px;
  border-left: 1px solid rgba(108,99,255,0.3); margin-left: 14px; }

/* Spawn map — live registry of sub-agent dispatches from the orchestrator. */
.spawn-map {
  margin: -2px 0 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(108,99,255,0.04);
  border: 1px solid rgba(108,99,255,0.18);
}
.spawn-map[hidden] { display: none; }
.spawn-map-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 2px 4px;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px;
}
.spawn-map-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.spawn-map-row {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.spawn-map-row:hover { background: rgba(255,255,255,0.06); border-color: rgba(108,99,255,0.4); }
.spawn-map-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); animation: spawn-pulse 1.6s ease-out infinite;
}
.spawn-map-pulse.failed { background: var(--err); animation: none; }
.spawn-map-pulse.done { background: var(--dim); animation: none; }
.spawn-map-pulse.aborted { background: var(--warn); animation: none; }
@keyframes spawn-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
.spawn-map-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.spawn-map-title {
  font-size: 12px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spawn-map-meta { font-size: 10px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spawn-map-cost { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }

.tree { list-style: none; padding: 0; margin: 0; flex: 1; }
.proj { margin-bottom: 4px; }
.proj > .proj-row {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 6px; border-radius: 4px; cursor: pointer;
  user-select: none;
}
.proj > .proj-row:hover { background: var(--panel-hi); }
.proj.active > .proj-row { background: rgba(47,129,247,0.1); }
.proj-disclosure { color: var(--dim); width: 14px; display: inline-block;
  text-align: center; font-size: 10px; }
.proj-name { flex: 1; font-weight: 500; }
.proj-actions { display: none; gap: 2px; }
.proj > .proj-row:hover .proj-actions { display: flex; }
.session-list { list-style: none; padding: 0 0 0 16px; margin: 2px 0 4px;
  border-left: 1px solid var(--border); margin-left: 10px; display: none; }
.proj.open .session-list { display: block; }
.session {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 4px; cursor: pointer;
  font-size: 12px; user-select: none;
}
.session:hover { background: var(--panel-hi); }
.session.active { background: rgba(47,129,247,0.18); }
.session.active .session-title { color: var(--accent); }
.session-title { flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.session-meta { color: var(--dim); font-size: 10px; }
.footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.live-pip { color: var(--ok); margin-right: 4px; }
.live-pip.disconnected { color: var(--err); }
.live-pip.connecting { color: var(--warn); }

main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100vh; overflow: hidden; }
#chat-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border);
  background: var(--panel);
  /* v0.37.1 — sticky + backdrop-blur so the head stays visible on scroll. */
  position: sticky; top: 0; z-index: var(--z-sticky);
  min-height: 52px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}
/* v0.37.2 Bug-5 — on mobile the chat-head MUST stay pinned to the top of
   the viewport (just below the mobile-topbar) regardless of scroll
   container behavior. We lock it with position:fixed + opaque solid bg
   (no color-mix translucency — fully readable over scrolling content).
   #chat below adds matching padding-top so the first message isn't
   covered. */
@media (max-width: 768px) {
  #chat-head {
    position: fixed !important;
    top: calc(var(--topbar-h, 48px) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    /* v0.37.3 Phase-3 — opaque solid bg (axiom-ink-050), nicht das transparente
       --panel-token. Gleicher Lesbarkeit-Fix wie der Composer in Phase 2. */
    background: var(--axiom-ink-050, #0d0d1a) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Push the scrollable chat below the fixed header + reserve space
     above the fixed composer (Bug 7). --composer-h is published by
     wireComposerAutoResize on mobile.
     v0.37.3 Phase-3: chat-head-h ≈ 44px (touch-min) — total topbar+head
     reservation = --topbar-h + 44 + safe-top. Single source via var. */
  #chat {
    padding-top: calc(var(--topbar-h, 48px) + 44px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--composer-h, 80px) + var(--sp-4));
  }
  /* update-banner (if shown) lives above chat-head — but on mobile we keep
     it static in flow and adjust chat-head top accordingly when needed.
     For now the banner is rare and not in scope for this hotfix. */
}
#session-title-row {
  display: flex; align-items: baseline; gap: var(--sp-2);
  min-width: 0; flex: 1 1 auto;
}
#session-title {
  margin: 0; font-size: 15px; font-weight: 500;
  /* v0.37.1 — prominent, never wraps, ellipsis on overflow. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 0 1 auto;
}
#session-meta {
  margin-left: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 0 1 auto;
}
.head-actions { display: flex; gap: var(--sp-2); align-items: center; flex: 0 0 auto; }
/* v0.37.1 — 44px touch floor on all interactive chat-head children (desktop
   keeps tight visual via padding; min-height ensures finger-friendly). */
.head-actions > button,
.head-actions > .mode-selector { min-height: 36px; }
@media (max-width: 768px) {
  .head-actions > button,
  .head-actions > .mode-selector { min-height: var(--touch-min, 44px); }
}
.mode-selector {
  display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
  padding: 2px; background: var(--panel);
}
.mode-opt {
  background: transparent; border: none; color: var(--dim); cursor: pointer;
  padding: 4px 12px; border-radius: 999px; font: inherit; font-size: 11px;
  font-weight: 500; letter-spacing: 0.02em; transition: color 0.15s, background 0.15s;
}
.mode-opt:hover { color: var(--text); }
.mode-opt.active[data-mode="cautious"] {
  background: rgba(125,133,144,0.15); color: var(--text);
}
.mode-opt.active[data-mode="fast"] {
  background: rgba(63,185,80,0.15); color: var(--ok);
}
.mode-opt.active[data-mode="trusted"] {
  background: rgba(210,153,34,0.18); color: var(--warn);
}
.session .auto-badge { color: var(--warn); margin-left: 4px; font-size: 10px; }
.session .mode-badge { font-size: 10px; margin-left: 4px; }
.session .mode-badge.fast { color: var(--ok); }
.session .mode-badge.trusted { color: var(--warn); }

#chat {
  flex: 1;
  overflow-y: auto;
  /* horizontal-overflow is contained per-element (pre/code have their
     own scroll); the chat column itself must never scroll sideways. */
  overflow-x: hidden;
  min-width: 0;
  padding: 24px;
  position: relative;
}
.follow-resume-chip {
  position: fixed; bottom: 130px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: white; border: none;
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12px;
  font-weight: 500; cursor: pointer; box-shadow: var(--glow);
  z-index: 20;
}
.follow-resume-chip:hover { filter: brightness(1.1); }
.msg {
  margin-bottom: 18px;
  /* clamp to readable column on desktop, but never exceed the chat
     container width (this is what fixes mobile horizontal overflow). */
  max-width: min(90ch, 100%);
  min-width: 0;
  position: relative;
}
.msg-body {
  white-space: pre-wrap;
  /* Break unbreakable runs (file paths, hashes, long URLs, IDs) so a
     single token can't push the message column wider than the viewport.
     overflow-wrap:anywhere is the right primitive: only kicks in when
     normal word-break would otherwise overflow. */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
.msg-body pre,
.msg-body pre.code { max-width: 100%; }

.msg.user .msg-head { color: var(--dim); font-weight: 600; margin-bottom: 4px; }
.msg.assistant .msg-head {
  color: var(--accent); font-weight: 600; margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 6px;
}
.msg.assistant .msg-head::before {
  content: ""; display: inline-block; width: 12px; height: 12px;
  background: linear-gradient(135deg, var(--axiom-violet-500), var(--axiom-violet-300));
  border-radius: 3px; box-shadow: var(--glow);
}
.msg-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
/* user bubble inherits a subtle violet wash so the conversation has rhythm */
.msg.user .msg-body {
  background: var(--user-bg);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border-left: 2px solid var(--accent);
}

.msg .copy-msg {
  position: absolute; top: 0; right: 0; display: none;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--dim); padding: 2px 6px; border-radius: 4px;
  font-size: 11px; cursor: pointer;
}
.msg:hover .copy-msg { display: block; }
.msg .copy-msg:hover { color: var(--accent); border-color: var(--accent); }

.tool-events { margin: 6px 0 0 4px; border-left: 2px solid var(--border);
  padding-left: 10px; font-size: 12px; color: var(--dim);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.tool-events .ok { color: var(--ok); }
.tool-events .err { color: var(--err); }
/* v0.35.0 Phase 2 — sub-agent-originated rows in the orchestrator chat
   are visually dimmed so the parent's own work stays the visual focus.
   Full detail is still in X-Ray + spawn map. */
.tool-events .sub-agent-row {
  opacity: 0.62;
  font-size: 11.5px;
  font-style: italic;
}
.tool-events .sub-agent-row:hover { opacity: 0.92; }
.tool-events .sub-agent-row[data-sub-agent]::before {
  content: attr(data-sub-agent);
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(108,99,255,0.18);
  color: var(--axiom-violet-200, #c4c0ff);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  vertical-align: 1px;
}

/* v0.33.1 — compact tool-pill (live render replaces per-row dump). */
.tool-events-pill { margin: 6px 0 0 4px; border-left: none; padding-left: 0; }
.tool-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-elev, #1a1d22);
  border: 1px solid var(--border, #2a2f37);
  font-size: 12px; color: var(--dim);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  max-width: 100%;
}
.tool-pill .tp-spin { display: inline-block; }
.tool-pill.running .tp-spin { animation: tp-spin 1.4s linear infinite; }
.tool-pill.done .tp-spin { color: var(--ok); }
.tool-pill .tp-label { color: var(--fg, #e6e9ee); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.tool-pill .tp-sep { opacity: 0.4; }
.tool-pill .tp-count { font-variant-numeric: tabular-nums; }
.tool-pill .tp-xray a { color: var(--accent, #6aa3ff); text-decoration: none; margin-left: 4px; }
.tool-pill .tp-xray a:hover { text-decoration: underline; }
@keyframes tp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.tool-row-carrier { display: none !important; }

.msg-body h1, .msg-body h2, .msg-body h3 { margin: 12px 0 6px; font-weight: 600; }
.msg-body h1 { font-size: 18px; }
.msg-body h2 { font-size: 16px; }
.msg-body h3 { font-size: 14px; }
.msg-body p { margin: 6px 0; }
.msg-body strong { font-weight: 600; }
.msg-body em { font-style: italic; }
.msg-body a { color: var(--accent); }
.msg-body ul, .msg-body ol { margin: 6px 0; padding-left: 24px; }
.msg-body li { margin: 2px 0; }
.msg-body code.inline {
  background: var(--code-bg); padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px;
  border: 1px solid var(--border); color: var(--code-fg);
}
.msg-body pre.code {
  background: var(--code-bg); border: 1px solid var(--border);
  border-radius: 6px; margin: 8px 0; padding: 0; position: relative;
  overflow: hidden;
}
.msg-body pre.code .code-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 10px; border-bottom: 1px solid var(--border);
  background: var(--panel); font-size: 11px; color: var(--dim);
  text-transform: lowercase;
}
.msg-body pre.code .copy-code {
  background: transparent; border: 1px solid var(--border);
  color: var(--dim); padding: 1px 6px; border-radius: 3px; cursor: pointer;
  font-size: 10px;
}
.msg-body pre.code .copy-code:hover { color: var(--accent); border-color: var(--accent); }
.msg-body pre.code code {
  display: block; padding: 10px 12px;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--code-fg); white-space: pre; overflow-x: auto;
}

.msg.hitl { background: rgba(210,153,34,0.08); border-left: 3px solid var(--warn);
  padding: 10px 14px; border-radius: 0 6px 6px 0; }
.msg.hitl .actions { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.msg.hitl .freetext { margin-top: 8px; display: flex; gap: 6px; }
.msg.hitl .freetext input { flex: 1; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); padding: 6px 8px; border-radius: 4px; font: inherit; }
.msg.hitl .freetext input:focus { outline: none; border-color: var(--accent); }
.msg.hitl button { padding: 5px 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font-size: 12px; }
.msg.hitl button:hover { border-color: var(--accent); }
.msg.hitl button.primary { border-color: var(--ok); color: var(--ok); }
.msg.hitl button.danger { border-color: var(--err); color: var(--err); }
.msg.hitl .fallback { margin-top: 8px; font-size: 11px; }
.msg.hitl .fallback a { color: var(--accent); }
.msg.hitl.collapsed {
  background: transparent; border-left: none; padding: 4px 0;
  border-radius: 0; font-size: 12px;
}
.hitl-resolved-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hitl-resolved-glyph { font-weight: bold; }
.hitl-resolved-line.approve .hitl-resolved-glyph,
.hitl-resolved-line.approve .hitl-resolved-choice { color: var(--ok); }
.hitl-resolved-line.deny .hitl-resolved-glyph,
.hitl-resolved-line.deny .hitl-resolved-choice { color: var(--err); }
.hitl-resolved-choice { font-weight: 600; }
.hitl-resolved-q { font-style: italic; }
.hitl-resolved-text { color: var(--text); }
.msg.error { color: var(--err); }
.msg.notice { color: var(--dim); font-style: italic; font-size: 12px; }

#status-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 24px; background: rgba(47,129,247,0.07);
  border-top: 1px solid var(--border); font-size: 12px; color: var(--accent);
  cursor: pointer; user-select: none; transition: background 0.15s;
  position: relative;
}
#status-bar:hover { background: rgba(108,99,255,0.10); }
#status-bar:hover .status-xray-hint { opacity: 1; }
#status-bar.hidden { display: none; }
.status-xray-hint {
  margin-left: 4px; opacity: 0.5; transition: opacity 0.15s;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px;
}

/* ── X-ray (right-panel tab, v0.33.0) — live "under the hood" view ────── */
.xray-pane {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 16px 16px; overflow-y: auto; overflow-x: hidden;
  height: 100%; min-width: 0;
}
.xray-pane > * { min-width: 0; max-width: 100%; }
.xray-pane-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.xray-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.xray-orb {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow);
  animation: xray-pulse 1.4s ease-out infinite;
}
@keyframes xray-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(108,99,255,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(108,99,255,0); }
  100% { box-shadow: 0 0 0 10px rgba(108,99,255,0); }
}
.xray-section { display: flex; flex-direction: column; gap: 6px; }
.xray-h {
  margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
}
.xray-tools { display: flex; flex-direction: column; gap: 3px; }
.xray-tool-row {
  display: grid; grid-template-columns: 16px 1fr auto auto;
  align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.05);
  font-size: 12px;
}
.xray-tool-row:last-child { border-bottom: none; }
.xray-tool-main { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; }
.xray-tool-icon { font-size: 11px; }
.xray-tool-row.pending .xray-tool-icon { color: var(--accent); animation: claudy-spin 1.2s linear infinite; display: inline-block; }
.xray-tool-row.ok .xray-tool-icon { color: var(--ok); }
.xray-tool-row.err .xray-tool-icon { color: var(--err); }
.xray-tool-row.cancelled { opacity: 0.55; }
.xray-tool-row.cancelled .xray-tool-icon { color: var(--warn, #c98a16); }
.xray-tool-name {
  color: var(--text); font-family: var(--font-mono); font-size: 11.5px;
  flex-shrink: 0; max-width: 60%;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.xray-tool-arg {
  color: var(--dim); font-family: var(--font-mono); font-size: 11px;
  flex: 1; min-width: 0;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.xray-tool-dur { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 11px; }
.xray-tool-cancel {
  font: 11px/1 var(--font-mono); padding: 3px 8px; border-radius: 6px;
  background: rgba(210,80,80,0.12); color: #e8a0a0;
  border: 1px solid rgba(210,80,80,0.35); cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.xray-tool-cancel:hover { background: rgba(210,80,80,0.22); color: #ffd1d1; }
.xray-tool-cancel:disabled { opacity: 0.6; cursor: progress; }
.xray-tool-cancelled-tag {
  font: 10px/1 var(--font-mono); color: var(--warn, #c98a16);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ── X-Ray detail drawer (v0.35.1 task E) ──────────────────────────── */
.xray-tool-row[data-tool-id] { cursor: pointer; }
.xray-tool-row[data-tool-id]:hover { background: rgba(255,255,255,0.025); }
.xray-tool-row.open { background: rgba(120,160,255,0.05); }
.xray-tool-drawer {
  background: rgba(0,0,0,0.32);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  max-height: 420px; overflow-y: auto;
  padding: 10px 12px 14px;
  font: 11.5px/1.5 var(--font-mono);
  color: var(--code-fg, #d4d4d4);
  animation: xtd-slide 0.16s ease-out;
}
@keyframes xtd-slide {
  from { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
  to   { max-height: 420px; opacity: 1; }
}
.xtd-header {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.xtd-name {
  font-weight: 600; font-family: var(--font-mono); font-size: 12.5px;
  color: var(--text); flex-shrink: 0;
}
.xtd-status {
  font-size: 10px; padding: 2px 7px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.xtd-status-ok { background: rgba(46,160,67,0.16); color: #5cd577; }
.xtd-status-error { background: rgba(248,81,73,0.16); color: #ff9e96; }
.xtd-status-pending { background: rgba(120,160,255,0.16); color: #9bbdff; }
.xtd-status-cancelled { background: rgba(201,138,22,0.16); color: #d4a957; }
.xtd-dur { font-size: 11px; color: var(--dim); font-family: var(--font-mono); }
.xtd-when { margin-left: auto; }
.xtd-close {
  background: transparent; border: none; color: var(--dim);
  cursor: pointer; font-size: 16px; padding: 0 4px; line-height: 1;
}
.xtd-close:hover { color: var(--text); }

.xtd-section {
  border-top: 1px dashed rgba(255,255,255,0.06);
  padding: 8px 0;
}
.xtd-section:first-of-type { border-top: none; padding-top: 4px; }
.xtd-section-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--dim); margin-bottom: 4px; font-family: var(--font-sans, system-ui);
}
.xtd-loading { padding: 8px 0; }

/* JSON tree colors */
.xtd-json { display: inline; }
.xtd-json-item { padding-left: 14px; }
.xtd-key { color: #9bbdff; }
.xtd-string { color: #b5e5a2; word-break: break-all; }
.xtd-number { color: #e4c275; }
.xtd-bool, .xtd-null { color: #9bbdff; }
.xtd-bracket { color: var(--dim); }
.xtd-show-more {
  background: transparent; border: none; color: var(--accent, #6cc);
  cursor: pointer; font: inherit; padding: 0 4px; text-decoration: underline dotted;
}
.xtd-show-more:hover { color: var(--text); }
.xtd-json details { display: inline; }
.xtd-json details summary { cursor: pointer; display: inline; list-style: none; }
.xtd-json details summary::marker { display: none; }
.xtd-json details summary::-webkit-details-marker { display: none; }
.xtd-json details summary::before { content: "▸ "; color: var(--dim); }
.xtd-json details[open] summary::before { content: "▾ "; }

.xtd-output-text { display: block; }
.xtd-mono {
  margin: 0; padding: 6px 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 4px;
  white-space: pre-wrap; word-break: break-word;
  max-height: 240px; overflow: auto;
  font: 11px/1.5 var(--font-mono);
}

.xtd-error-msg {
  color: #ff9e96; padding: 6px 8px;
  background: rgba(248,81,73,0.06);
  border-left: 3px solid #ff9e96; border-radius: 2px;
  margin-bottom: 6px;
}
.xtd-error-stack summary { cursor: pointer; color: var(--dim); }
.xtd-error-stack pre {
  margin: 4px 0 0; padding: 6px 8px;
  background: rgba(0,0,0,0.35); border-radius: 3px;
  font: 10.5px/1.45 var(--font-mono); color: var(--dim);
  max-height: 200px; overflow: auto;
}

.xtd-llm-row {
  display: flex; gap: 12px; padding: 3px 0;
  font: 11px/1.4 var(--font-mono);
}
.xtd-llm-model { color: var(--text); }
.xtd-llm-tokens { color: var(--dim); }
.xtd-llm-dur { color: var(--dim); margin-left: auto; }

.xtd-footer {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.06);
  font-size: 10.5px; color: var(--dim);
}
.xtd-foot-item { font-family: var(--font-mono); }
.xtd-tag {
  background: rgba(255,255,255,0.04); padding: 1px 6px;
  border-radius: 8px;
}

.xray-reasoning {
  background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 10px 12px; max-height: 280px; overflow-y: auto;
  font: 12px/1.55 var(--font-mono); color: var(--code-fg);
}
.xray-reasoning .dim { color: var(--dim); }
.xray-reasoning-text {
  margin: 0; font: inherit; color: inherit;
  white-space: pre-wrap; word-break: break-word;
}
.xray-stats-row { font-size: 11px; color: var(--dim); padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05); }
#status-bar .spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid var(--accent); border-top-color: transparent;
  border-radius: 50%; animation: claudy-spin 0.9s linear infinite;
}
@keyframes claudy-spin { to { transform: rotate(360deg); } }
#status-elapsed { color: var(--dim); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
#status-bar.stale { color: var(--warn); background: rgba(210,153,34,0.08); }
#status-bar.stale .spinner { border-color: var(--warn); border-top-color: transparent; }
#status-bar.error { color: var(--err); background: rgba(248,81,73,0.08); }
#status-bar.error .spinner { display: none; }
#status-detail { margin-left: auto; }

/* ── composer (input pod) ──────────────────────────────────────────────── */
#composer {
  display: flex; padding: 12px 24px 18px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(13,13,26,0) 0%, var(--bg-soft) 100%);
}
.composer-wrap {
  flex: 1;
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--panel) 0%, rgba(15,15,30,0.6) 100%);
  border: 1px solid var(--border);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  overflow: hidden;
}
.composer-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 12px 32px rgba(0,0,0,0.4);
}
.composer-wrap.voice-on { border-color: var(--accent); }
.composer-wrap.voice-listening {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(248,81,73,0.18), 0 12px 32px rgba(0,0,0,0.4);
}
.composer-wrap.voice-speaking { border-color: var(--ok); }
.composer-wrap.voice-thinking { border-color: var(--warn); }

#prompt {
  width: 100%; background: transparent; border: none; color: var(--text);
  padding: 14px 16px 6px; resize: none;
  font: 14.5px/1.55 var(--font-sans); min-height: 52px; max-height: 240px;
  display: block;
}
#prompt:focus { outline: none; }
#prompt::placeholder { color: var(--dim); }

.composer-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px 6px 16px; gap: 12px;
}
.composer-hint { font-size: 11px; color: var(--dim); letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.composer-hint kbd {
  font-family: var(--font-mono); font-size: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px; color: var(--text);
}
.composer-hint .hint-sep { color: rgba(255,255,255,0.18); }

.composer-actions { display: flex; gap: 6px; align-items: center; }

.composer-icon-btn {
  position: relative;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.1s;
}
.composer-icon-btn svg { display: block; transition: transform 0.2s; }
.composer-icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.composer-icon-btn:active { transform: scale(0.94); }
.composer-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* mic icon — multiple states */
.composer-icon-btn.voice .icon-mic-pulse {
  position: absolute; inset: 0; margin: auto;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.composer-icon-btn.voice.armed {
  color: var(--accent); border-color: var(--accent);
  background: var(--user-bg);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.12);
}
.composer-icon-btn.voice.listening {
  color: #ff7b72; border-color: rgba(248,81,73,0.6);
  background: rgba(248,81,73,0.08);
}
.composer-icon-btn.voice.listening .icon-mic-pulse {
  opacity: 0.6; transform: scale(1.1);
  animation: claudy-mic-pulse 1.6s ease-out infinite;
}
.composer-icon-btn.voice.speaking {
  color: var(--ok); border-color: rgba(63,185,80,0.6);
  background: rgba(63,185,80,0.08);
}
.composer-icon-btn.voice.thinking {
  color: var(--warn); border-color: rgba(210,153,34,0.6);
  background: rgba(210,153,34,0.08);
}
.composer-icon-btn.voice.thinking .icon-mic {
  animation: claudy-mic-bob 1s ease-in-out infinite;
}
/* v0.37.4 Bug 3 — Press-hold recording feedback. .ptt-recording is added
   on pointerdown+HOLD_MS, removed on pointerup/cancel/leave. */
.composer-icon-btn.voice.ptt-recording {
  color: var(--accent); border-color: rgba(108,99,255,0.7);
  background: rgba(108,99,255,0.18);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.18);
}
@keyframes claudy-mic-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.5); opacity: 0;   }
  100% { transform: scale(1.5); opacity: 0;   }
}
@keyframes claudy-mic-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* send / stop icon button */
.composer-icon-btn.send {
  background: linear-gradient(135deg, var(--axiom-violet-500), var(--axiom-violet-300));
  border-color: transparent; color: white;
  box-shadow: 0 4px 16px rgba(108,99,255,0.32);
}
.composer-icon-btn.send:hover { filter: brightness(1.1); color: white; background: linear-gradient(135deg, var(--axiom-violet-500), var(--axiom-violet-300)); }
.composer-icon-btn.send:disabled {
  opacity: 1; background: rgba(255,255,255,0.06); color: var(--dim); box-shadow: none;
}
.composer-icon-btn.send .icon-send { display: block; }
.composer-icon-btn.send .icon-stop { display: none; }
.composer-icon-btn.send.stop-mode {
  background: linear-gradient(135deg, #ff7b72, #ff4f4f);
  box-shadow: 0 0 0 3px rgba(248,81,73,0.18), 0 4px 16px rgba(248,81,73,0.32);
}
.composer-icon-btn.send.stop-mode .icon-send { display: none; }
.composer-icon-btn.send.stop-mode .icon-stop { display: block; }

/* v0.35.0 Phase 2 — input-queue UX. Send button stays Send-visual while a
   turn is running, but gets a small "+" badge meaning "submit will queue
   the next message". A separate small STOP button appears next to it. */
.composer-icon-btn.send .send-queue-badge {
  position: absolute;
  top: 2px; right: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--axiom-violet-300, #a09bff);
  color: white;
  font-size: 11px; line-height: 14px; text-align: center;
  font-weight: 700;
  display: none;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--panel, #1a1b22);
}
.composer-icon-btn.send.queue-mode { position: relative; }
.composer-icon-btn.send.queue-mode .send-queue-badge { display: block; }

.composer-icon-btn.stop-aux {
  width: 28px; height: 28px; padding: 0;
  background: rgba(248,81,73,0.16);
  border: 1px solid rgba(248,81,73,0.40);
  color: #ff7b72;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.composer-icon-btn.stop-aux:hover { background: rgba(248,81,73,0.28); }
.composer-icon-btn.stop-aux:active { transform: scale(0.94); }
.composer-icon-btn.stop-aux[hidden] { display: none !important; }

.queue-badge {
  margin: 4px 8px 0;
  padding: 4px 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  background: rgba(108,99,255,0.10);
  border: 1px solid rgba(108,99,255,0.28);
  border-radius: 8px;
  color: var(--dim, #aaa);
}
.queue-badge[hidden] { display: none !important; }
.queue-badge-icon { font-size: 13px; }
.queue-badge-text { font-weight: 500; color: var(--text, #eee); }
.queue-badge-preview {
  flex: 1; min-width: 0;
  color: var(--dim, #888);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-style: italic;
}
.queue-badge-discard {
  background: transparent; border: 0; color: var(--dim, #888);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
  border-radius: 4px;
}
.queue-badge-discard:hover { background: rgba(248,81,73,0.24); color: #ff7b72; }
.queue-badge.replaced { animation: queue-badge-flash 0.4s ease; }
@keyframes queue-badge-flash {
  0% { background: rgba(255,209,102,0.30); }
  100% { background: rgba(108,99,255,0.10); }
}

/* ── usage / cost dashboard ───────────────────────────────────────────── */
.usage-pill {
  margin: 6px 8px 0;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  display: flex; gap: 8px; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer;
  background: rgba(108,99,255,0.06);
}
.usage-pill:hover { background: rgba(108,99,255,0.12); }
.usage-pill .usage-amount { font-weight: 600; color: var(--text); }
.usage-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; }
.usage-modal[hidden] { display: none; }
.usage-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.usage-modal-panel {
  position: relative; z-index: 1; width: min(960px, 92vw); max-height: 86vh; overflow: auto;
  background: var(--panel); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.usage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.usage-head h3 { margin: 0; font-size: 18px; }
.usage-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.usage-stat {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 12px;
}
.usage-stat-val { font-size: 22px; font-weight: 600; }
.usage-stat-label { margin-top: 2px; }
.usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.usage-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 12px;
}
.usage-card h4 { margin: 0 0 10px; font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.usage-bars { display: flex; flex-direction: column; gap: 6px; }
.usage-bar { display: grid; grid-template-columns: 88px 1fr 80px; gap: 8px; align-items: center; font-size: 12px; }
.usage-bar .bar-track { background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; height: 8px; }
.usage-bar .bar-fill { background: linear-gradient(90deg, var(--axiom-violet-500), var(--axiom-violet-300)); height: 100%; }
.usage-bar .bar-amt { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.usage-table { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.usage-table-row { display: grid; grid-template-columns: 1fr 60px 80px; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.usage-table-row:hover { background: rgba(255,255,255,0.04); }
.usage-table-row .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-table-row .calls { color: var(--dim); text-align: right; }
.usage-table-row .amt { text-align: right; font-variant-numeric: tabular-nums; }
.usage-foot { margin-top: 14px; text-align: center; }

/* ── drag/drop + attachments ──────────────────────────────────────────── */
.composer-attachments {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px 0 12px;
}
.composer-attachments .att-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  font-size: 12px;
}
.composer-attachments .att-thumb {
  width: 28px; height: 28px; border-radius: 6px;
  object-fit: cover; background: rgba(255,255,255,0.04);
  display: inline-block;
}
.composer-attachments .att-doc {
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--dim);
  background: rgba(108,99,255,0.12);
}
.composer-attachments .att-meta { display: flex; flex-direction: column; gap: 2px; max-width: 220px; }
.composer-attachments .att-meta .att-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.composer-attachments .att-meta .att-status {
  font-size: 10px; color: var(--dim);
}
.composer-attachments .att-meta .att-status.ok { color: var(--ok); }
.composer-attachments .att-meta .att-status.err { color: var(--err); }
.composer-attachments .att-remove {
  background: none; border: none; color: var(--dim); cursor: pointer;
  font-size: 14px; line-height: 1;
}
.composer-attachments .att-remove:hover { color: var(--text); }
.composer-dropzone {
  margin: 8px 12px 0;
  padding: 18px;
  border: 2px dashed rgba(108,99,255,0.45);
  border-radius: 14px;
  text-align: center;
  background: rgba(108,99,255,0.06);
  color: var(--text);
  font-size: 13px;
  pointer-events: none;
}
.composer-dropzone .drop-text { opacity: 0.85; }
.composer-wrap.dropping .composer-dropzone[hidden] { display: block !important; }
.composer-wrap.dropping { border-color: var(--accent); }

/* live voice indicator — slides in above the textarea when voice mode is on */
.voice-indicator {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(108,99,255,0.10), rgba(108,99,255,0));
  border-bottom: 1px solid rgba(108,99,255,0.18);
  font-size: 12px; color: var(--accent-soft);
}
.voice-indicator[hidden] { display: none; }
.voice-indicator .voice-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 0 0 currentColor;
}
.voice-indicator.listening .voice-dot {
  background: var(--err); color: var(--err);
  animation: claudy-dot-pulse 1.1s ease-out infinite;
}
.voice-indicator.thinking .voice-dot { background: var(--warn); }
.voice-indicator.speaking .voice-dot { background: var(--ok); }
.voice-indicator .voice-state-text { font-weight: 500; letter-spacing: 0.02em; }
.voice-indicator .voice-level {
  flex: 1; height: 4px; background: rgba(255,255,255,0.05);
  border-radius: 2px; overflow: hidden;
}
.voice-indicator .voice-level > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transition: width 0.08s linear;
}
.voice-indicator.listening .voice-level > span { background: linear-gradient(90deg, #ff7b72, var(--err)); }
.voice-indicator.speaking .voice-level > span { background: linear-gradient(90deg, var(--accent-soft), var(--ok)); }
.voice-exit {
  background: transparent; border: 1px solid transparent;
  color: var(--dim); cursor: pointer; padding: 0;
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 14px; line-height: 1; flex-shrink: 0;
}
.voice-exit:hover { color: var(--err); border-color: var(--err); }
@keyframes claudy-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%      { box-shadow: 0 0 0 6px transparent; opacity: 0.6; }
}
.ghost { background: transparent; border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px; border-radius: 4px; cursor: pointer;
  font: inherit; font-size: 12px; }
.ghost:hover { border-color: var(--accent); color: var(--accent); }

.ctx-menu {
  position: fixed; background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); padding: 4px;
  min-width: 160px; z-index: var(--z-overlay);
}
.ctx-menu button {
  display: block; width: 100%; text-align: left; background: transparent;
  border: none; color: var(--text); padding: 6px 12px; border-radius: 4px;
  cursor: pointer; font: inherit; font-size: 13px;
}
.ctx-menu button:hover { background: var(--panel-hi); }
.ctx-menu button.danger { color: var(--err); }

/* ── right panel (IDE shell) ──────────────────────────────────────────── */
#right-panel {
  position: relative;
  /* Matching tint to the sidebar — both rails feel like one cohesive shell. */
  background:
    linear-gradient(180deg, rgba(108,99,255,0.04), rgba(108,99,255,0.01)),
    var(--bg-soft);
  border-left: 1px solid var(--axiom-ink-300);
  display: flex; flex-direction: column;
  min-width: 0; height: 100vh; overflow: hidden;
}
#right-resize {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 5;
}
#right-resize:hover, #right-resize.dragging { background: var(--accent-glow); }
.rp-tabs {
  display: flex; align-items: stretch; gap: 2px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  background: rgba(8,8,16,0.4); overflow-x: auto; scrollbar-width: thin;
}
/* v0.37.2 Bug-1 — mobile-only close button inside rp-tabs header.
   Desktop close lives in the top-bar (#topbar-rp-toggle); on mobile that
   button is hidden, leaving the in-panel button as the discoverable
   close target alongside swipe + scrim-tap. */
.rp-mobile-close {
  display: none;
  flex: 0 0 auto;
  align-self: center;
  margin-left: 4px;
}
.rp-tab {
  background: transparent; border: 1px solid transparent;
  color: var(--dim); padding: 5px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  white-space: nowrap; transition: color 0.15s, background 0.15s, border-color 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.rp-tab:hover { color: var(--text); background: var(--panel); }
.rp-tab.active {
  color: var(--accent); background: var(--user-bg); border-color: var(--accent);
}
.rp-tab-icon { font-size: 11px; opacity: 0.85; }
.rp-tab-x {
  margin-left: 2px; opacity: 0; transition: opacity 0.15s, color 0.15s;
  color: var(--dim); font-size: 14px; line-height: 1;
  width: 14px; text-align: center; border-radius: 3px;
}
.rp-tab:hover .rp-tab-x { opacity: 0.8; }
.rp-tab-x:hover { opacity: 1; color: var(--err); background: rgba(248,81,73,0.12); }

/* overview pane */
.ov { display: flex; flex-direction: column; gap: 12px; }
.ov-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
.ov-card-head {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
.ov-card-body { padding: 10px 14px; font-size: 13px; }
.ov-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.ov-sub { color: var(--dim); font-size: 12px; font-family: var(--font-mono); word-break: break-all; }
.ov-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ov-pill {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--dim);
}
.ov-pill-warn { color: var(--warn); background: rgba(210,153,34,0.12); }
.ov-pill-accent { color: var(--accent); background: var(--user-bg); }
.ov-row { display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 12px; color: var(--text); border-bottom: 1px dashed var(--border); }
.ov-row:last-child { border-bottom: none; }
.ov-row span:last-child { color: var(--dim); font-family: var(--font-mono); }
.ov-live.ok { color: var(--ok); }
.ov-live.err { color: var(--err); }
.ov-tips { list-style: none; margin: 0; padding: 8px 14px 12px; font-size: 12px; line-height: 1.7; }
.ov-tips li { margin-bottom: 2px; }
.ov-tips li::before { content: "›  "; color: var(--accent); }
.ov-tips code { background: var(--code-bg); padding: 1px 4px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px; }
.ov-tips kbd { background: var(--code-bg); padding: 1px 4px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--border); }
.ov-recent { padding: 8px 12px; font-size: 12px; max-height: 200px; overflow-y: auto; }
.ov-recent-row { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.ov-recent-row:last-child { border-bottom: none; }
.ov-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; flex-shrink: 0; width: 50px; }
.ov-role.user { color: var(--dim); }
.ov-role.assistant { color: var(--accent); }
.ov-text { color: var(--dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1; }
.rp-spacer { flex: 1; }
.rp-body { flex: 1; overflow: hidden; position: relative; }
.rp-pane {
  position: absolute; inset: 0; padding: 16px; overflow-y: auto; overflow-x: hidden;
}
.rp-pane.hidden { display: none; }
.rp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--dim); padding: 32px; }
.rp-empty-head { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.rp-empty-text { font-size: 12px; max-width: 28ch; line-height: 1.6; }

.rp-h {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline;
}
.rp-extlink { font-size: 11px; color: var(--accent); text-decoration: none; }
.rp-extlink:hover { text-decoration: underline; }

/* plan */
.rp-plan { list-style: none; padding: 0; margin: 0; }
.rp-plan-step {
  display: flex; gap: 10px; padding: 6px 4px;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.rp-plan-icon { width: 16px; color: var(--dim); }
.rp-plan-step.rp-status-done .rp-plan-icon { color: var(--ok); }
.rp-plan-step.rp-status-done .rp-plan-text { text-decoration: line-through; color: var(--dim); }
.rp-plan-step.rp-status-running .rp-plan-icon { color: var(--accent); animation: claudy-spin 1.4s linear infinite; }
.rp-plan-step.rp-status-skipped { opacity: 0.5; }
.rp-plan-text { flex: 1; }

/* diff */
.rp-diff { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--code-bg); }
.rp-diff-head { display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--border); }
.rp-diff-path { font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.rp-diff-body { margin: 0; padding: 8px 12px;
  font: 12px/1.45 var(--font-mono); color: var(--code-fg);
  white-space: pre; overflow-x: auto; }
.rp-diff-body .d-add { color: var(--ok); }
.rp-diff-body .d-del { color: var(--err); }
.rp-diff-body .d-hunk { color: var(--accent); }
.rp-diff-body .d-meta { color: var(--dim); }

/* preview */
.rp-iframe { width: 100%; height: calc(100% - 56px); border: none; background: white;
  border-radius: var(--radius-md); }
.rp-preview-hint { font-size: 11px; color: var(--dim); margin-top: 6px; }
.rp-native-preview-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center; color: var(--dim); font-size: 13px;
  border: 1px dashed var(--border); border-radius: var(--radius-md);
  background: var(--panel);
}
.rp-native-preview-icon { font-size: 28px; margin-bottom: 10px; }

/* walkthrough */
.rp-walk { border: 1px solid var(--border); border-radius: var(--radius-md);
  margin-bottom: 10px; background: var(--panel); }
.rp-walk summary { padding: 8px 12px; font-weight: 500; cursor: pointer; user-select: none; }
.rp-walk summary:hover { background: var(--panel-hi); }
.rp-walk-body { padding: 4px 12px 12px; font-size: 13px; }
.rp-walk-body pre { font-family: var(--font-mono); font-size: 12px; }

/* ── terminal drawer ──────────────────────────────────────────────────── */
#term-drawer {
  position: relative;
  height: var(--term-h, 280px);
  background: var(--axiom-ink-100);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0;
}
#term-drawer[hidden] { display: none; }
#term-resize {
  position: absolute; top: -3px; left: 0; right: 0; height: 6px;
  cursor: row-resize; z-index: 5;
}
#term-resize:hover, #term-resize.dragging { background: var(--accent-glow); }
.term-tabs {
  display: flex; align-items: stretch; gap: 2px;
  padding: 5px 8px; background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.term-tab {
  background: transparent; border: 1px solid transparent;
  color: var(--dim); padding: 4px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font-family: var(--font-mono); font-size: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.term-tab:hover { color: var(--text); background: var(--panel); }
.term-tab.active { color: var(--accent); background: var(--user-bg);
  border-color: var(--accent); }
.term-tab.dead { color: var(--err); opacity: 0.7; }
.term-tab-x {
  margin-left: 2px; opacity: 0; transition: opacity 0.15s;
  color: var(--dim); font-size: 13px;
}
.term-tab:hover .term-tab-x { opacity: 0.8; }
.term-tab-x:hover { opacity: 1; color: var(--err); }
.term-body { flex: 1; min-height: 0; position: relative; padding: 4px; }
.term-pane {
  position: absolute; inset: 4px; display: none;
}
.term-pane.active { display: block; }

/* side-panel terminal (inside the right panel's Terminal tab) */
.rp-pane-term { padding: 0; display: flex; flex-direction: column; }
.rp-term-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text); background: rgba(0,0,0,0.25);
  gap: 12px;
}
.rp-term-head-agent {
  background: linear-gradient(90deg, rgba(108,99,255,0.18), rgba(108,99,255,0.04));
  border-bottom: 1px solid rgba(108,99,255,0.3);
}
.rp-term-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rp-term-title > span:nth-child(2) { font-weight: 600; }
.rp-term-sub { font-size: 11px; color: var(--dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.term-tabs-label {
  padding: 0 6px; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dim); cursor: help;
}

/* update banner — sits between sidebar and chat-head, full width */
.update-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(108,99,255,0.22), rgba(167,139,250,0.08));
  border-bottom: 1px solid rgba(108,99,255,0.4);
  font-size: 13px; color: var(--text);
}
.update-banner[hidden] { display: none; }
.update-banner-glyph { font-size: 16px; }
.update-banner-text { display: flex; flex-direction: column; line-height: 1.2; }
.update-banner-text strong { font-weight: 600; }
.update-banner button.ghost { padding: 4px 12px; font-weight: 500; }
.update-banner #update-dismiss-btn { width: 22px; height: 22px; border-color: transparent; }
.update-banner #update-dismiss-btn:hover { border-color: var(--err); color: var(--err); }
.update-progress { display: flex; flex-direction: column; gap: 3px; flex: 1; max-width: 460px; }
.update-progress[hidden] { display: none; }
.update-progress-bar {
  height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px;
  overflow: hidden; position: relative;
}
.update-progress-bar > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--axiom-violet-500), var(--axiom-violet-300));
  transition: width 0.2s ease;
  border-radius: 3px;
}
.update-progress-bar.indeterminate > span {
  width: 30% !important; animation: claudy-indet 1.2s ease-in-out infinite;
}
.update-progress-bar.error > span {
  background: var(--err);
}
@keyframes claudy-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
#update-progress-text { font-variant-numeric: tabular-nums; }
.rp-term-icon { color: var(--accent); margin-right: 4px; }
.rp-term-actions button + button { margin-left: 4px; }
.rp-term-banner {
  padding: 6px 12px; background: rgba(108,99,255,0.08);
  border-bottom: 1px solid var(--border); font-size: 11px; color: var(--accent);
}
.rp-term-banner-dot { margin-right: 6px; }
.rp-term-mount {
  position: relative; flex: 1; min-height: 0; padding: 4px; background: var(--axiom-ink-100);
}
.rp-term-mount .term-pane { position: absolute; inset: 4px; display: block; }

/* settings pane */
.rp-set { display: flex; flex-direction: column; gap: 12px; }
.rp-set-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
.rp-set-head {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
.rp-set-body { padding: 12px 14px; font-size: 12px; display: flex; flex-direction: column; gap: 8px; }
.rp-set-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.rp-set-help { line-height: 1.5; }
.rp-set-help input[type="text"] {
  margin-top: 4px; width: 100%;
  background: var(--code-bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 8px; font: 12px var(--font-mono);
}
.rp-set-url { font-family: var(--font-mono); font-size: 11px; padding: 6px 8px;
  background: var(--code-bg); border-radius: 4px; }
.rp-set-restart { color: var(--warn); margin-top: 4px; }

.rp-flow-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 4px 0;
}
.rp-flow-stats > div {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 6px; text-align: center;
}
.rp-flow-stats > div b {
  display: block; font-size: 16px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rp-flow-stats > div span {
  display: block; font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dim); margin-top: 2px;
}
.rp-flow-chip {
  display: inline-block; padding: 2px 6px; margin-right: 4px;
  font-size: 10px; font-family: var(--font-mono);
  background: rgba(255,255,255,0.05); border-radius: 4px;
  color: var(--accent-soft);
}
.rp-flow-export { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rp-flow-export > span { margin-right: 4px; }

.rp-plugin {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; background: rgba(0,0,0,0.18);
}
.rp-plugin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.rp-plugin-name { font-weight: 600; font-size: 13px; }
.rp-plugin-status { font-size: 10px; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.08em; }
.rp-plugin-status.on { color: var(--ok); background: rgba(63,185,80,0.12); }
.rp-plugin-status.off { color: var(--dim); background: rgba(255,255,255,0.05); }
.rp-plugin-status.error { color: var(--err); background: rgba(248,81,73,0.12); }
.rp-plugin-cfg { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rp-plugin-field { display: flex; flex-direction: column; gap: 2px; }
.rp-plugin-label { font-size: 11px; color: var(--dim); }
.rp-plugin-field input[type="text"],
.rp-plugin-field input[type="password"] {
  background: var(--code-bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 8px; font: 12px var(--font-mono);
}

/* xterm.js theming — match AXIOM ink */
.xterm { padding: 8px 10px; height: 100%; }
.xterm-viewport { background: var(--axiom-ink-100) !important; }
.xterm-screen { background: var(--axiom-ink-100) !important; }

/* ── hover preview ─────────────────────────────────────────────────────── */
#hover-preview {
  position: fixed; z-index: var(--z-overlay);
  /* pointer-events: auto so the popover itself catches mouseenter and
     keeps the close-timer cancelled — needed for scrolling its body
     and for the bridge-zone trick below. */
  pointer-events: auto;
  /* Overlay popover needs an opaque backdrop or content underneath bleeds
     through (var(--panel) is rgba(255,255,255,0.04) = practically see-through).
     Use bg-soft as the solid base then layer a subtle violet tint + backdrop
     blur for the AXIOM glass-card look. */
  background:
    linear-gradient(180deg, rgba(108,99,255,0.06), rgba(108,99,255,0.02)),
    var(--bg-soft);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--axiom-ink-300);
  border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(108,99,255,0.08);
  width: 380px; max-height: 60vh; overflow: hidden;
  display: none;
}
#hover-preview.visible { display: block; }
/* Invisible bridge-zone covering the 8px gap between sidebar item and the
   popover. Without this, the cursor crosses dead space → mouseleave fires
   on the item → popover hides before the cursor reaches it. The bridge
   stretches 16px to the LEFT of the panel (covers the 8px gap and a bit
   of slack), full panel height, and inherits pointer-events so mouseenter
   on it cancels the close-timer. Pure pseudo-element — no extra DOM. */
#hover-preview::before {
  content: "";
  position: absolute;
  top: -8px; bottom: -8px;
  left: -16px; width: 16px;
  /* Visually invisible but mouse-targetable. */
  background: transparent;
  pointer-events: auto;
}
#hover-preview .hp-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 6px;
}
#hover-preview .hp-title { font-weight: 600; font-size: 13px; }
#hover-preview .hp-meta { color: var(--dim); font-size: 11px; }
#hover-preview .hp-status {
  font-size: 11px; color: var(--accent); margin-bottom: 6px;
  padding: 3px 8px; background: rgba(47,129,247,0.1);
  border-radius: 4px; display: inline-block;
}
#hover-preview .hp-status.idle { color: var(--dim); background: transparent;
  padding: 0; }
#hover-preview .hp-body { font-size: 12px; line-height: 1.45;
  max-height: 45vh; overflow-y: auto; }
#hover-preview .hp-msg { margin-bottom: 8px; }
#hover-preview .hp-msg .hp-role {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--dim); margin-bottom: 2px;
}
#hover-preview .hp-msg.user .hp-role { color: var(--accent); }
#hover-preview .hp-msg.assistant .hp-role { color: var(--ok); }
#hover-preview .hp-msg-text {
  white-space: pre-wrap; word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  position: relative;
}
#hover-preview .hp-msg-text.dim { color: var(--dim); }
#hover-preview .hp-status.streaming {
  color: var(--ok); background: rgba(46,160,67,0.1);
  display: inline-flex; align-items: center; gap: 6px;
}
#hover-preview .hp-status .hp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); display: inline-block;
  animation: hp-pulse 1.4s ease-in-out infinite;
}
@keyframes hp-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ── speakable summary (v0.29.3) ── */
/* The <speak> block in voice-mode replies — the gist that gets TTS'd
   while the rest of the message holds the full written answer. Rendered
   as italic prose with a small 🔊 marker so the user can see "this is
   what claudy said out loud" without losing the context. */
.speak-summary {
  font-style: italic;
  color: var(--dim);
  border-left: 2px solid var(--accent);
  padding: 4px 10px;
  margin: 0 0 10px 0;
  background: rgba(47,129,247,0.05);
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  line-height: 1.5;
}
.speak-summary .speak-icon {
  font-style: normal;
  margin-right: 4px;
  opacity: 0.7;
}

/* ── barge-in flash (v0.29.3) ── */
/* Brief visual cue when "claudy stop" fires while TTS is playing — the
   mic icon flashes warn-colored so the user knows the barge-in registered
   before they see/hear anything else change. */
@keyframes barge-in-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255,170,0,0.6); }
  50%  { box-shadow: 0 0 0 10px rgba(255,170,0,0.0); }
  100% { box-shadow: 0 0 0 0 rgba(255,170,0,0.0); }
}
.barge-in-flash { animation: barge-in-flash 600ms ease-out; }

/* ── discarded messages (v0.29.4) ──
   "claudy discard" / "claudy verwerfen" strikes through the user turn
   (and any partial reply) that the user retracted mid-flight. */
.msg.discarded .markdown,
.msg.discarded .user-text,
.msg.discarded > .body,
.msg.user.discarded {
  text-decoration: line-through;
  opacity: 0.55;
}
.msg.discarded::after {
  content: " · discarded";
  font-size: 0.75em;
  opacity: 0.6;
  margin-left: 6px;
}

/* ── lazy-load sentinel (v0.35.1 task D) — sits above oldest visible
   message, IntersectionObserver fetches more on scroll-up. ─────────── */
.load-more-sentinel {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  color: var(--dim, #888);
  font-size: 12px;
  opacity: 0.7;
  user-select: none;
}
.load-more-sentinel .lms-spinner {
  width: 12px; height: 12px;
  border: 2px solid var(--border, #2a2a2a);
  border-top-color: var(--dim, #888);
  border-radius: 50%;
  animation: lms-spin 0.8s linear infinite;
}
@keyframes lms-spin {
  to { transform: rotate(360deg); }
}

/* ── compactor divider (v0.35.1 task C) — visual marker between the
   compactor's head-slice (preserved opening turns) and the live tail
   (recent turns). Hover the label for the "why". ───────────────────── */
.compactor-divider {
  display: flex; align-items: center;
  gap: 0; margin: 14px 0;
  user-select: none;
}
.compactor-divider .cd-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border, #2a2a2a), transparent);
}
.compactor-divider .cd-label {
  flex-shrink: 0;
  font-style: italic; opacity: 0.55;
  font-size: 12px; padding: 0 12px;
  color: var(--dim, #888);
  cursor: help;
}
.compactor-divider:hover .cd-label { opacity: 0.85; }

/* ── background run notification card (v0.29.4) ── */
.msg.run-notification {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #6cc;
  padding: 10px 14px;
  margin: 10px 0;
  border-radius: 6px;
  font-size: 0.92em;
}
.msg.run-notification.failed { border-left-color: #d55; }
.msg.run-notification.hitl_parked { border-left-color: #fa0; }
.run-notif-head { margin-bottom: 4px; }
.run-notif-title { opacity: 0.8; }
.run-notif-summary { opacity: 0.85; margin: 4px 0; }
.run-notif-actions a { font-size: 0.85em; opacity: 0.8; }
.run-notif-actions a:hover { opacity: 1; }

/* ── v0.32.0 — Central Attention-Inbox panel ────────────────────────────
 * Always-visible floating card pinned to the top-right corner, above the
 * right-panel. Collapsed by default to a header bar with a badge counter;
 * expands to a list of pending + recently-answered items with quick-action
 * buttons. critical-severity items also pop a fullscreen overlay.        */
/* v0.33.1 — Inbox is now docked at the bottom of the right-sidebar
 * column (flex child of #right-panel) instead of floating over the
 * viewport. position:static so it flows after .rp-body; flex:0 0 auto
 * so the body keeps the remaining space. */
.att-inbox {
  position: static;
  flex: 0 0 auto;
  margin: 6px 8px 8px;
  width: auto;
  max-width: none;
  background: var(--bg-elev, #1a1d22);
  border: 1px solid var(--border, #2a2f37);
  border-radius: 10px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
  font-size: 13px;
  color: var(--fg, #e6e9ee);
  overflow: hidden;
}
.att-inbox[data-pending="0"] { opacity: 0.7; }
.att-inbox[data-pending="0"]:hover { opacity: 1; }
.att-inbox.att-collapsed .att-body { display: none; }
.att-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.att-header:hover { background: rgba(255,255,255,0.04); }
.att-bell { font-size: 14px; }
.att-label { flex: 1; font-weight: 600; opacity: 0.85; }
.att-badge {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
  background: #444;
  color: #fff;
  text-align: center;
}
.att-inbox[data-has-attention="1"] .att-badge { background: #c98a16; }
.att-inbox[data-has-critical="1"] .att-badge { background: #d23a3a; animation: att-pulse 1.2s infinite; }

/* v0.37.0 #9 — pending attention-state visible at-a-glance:
   red ring around the inbox + pulse animation whenever there are any
   pending items, until the user clicks (acknowledges) the header.
   The next incoming pending event clears the acknowledged flag, so the
   ring returns. Critical items still get the badge-pulse on top. */
.att-inbox[data-pending]:not([data-pending="0"]):not(.att-acknowledged) {
  border-color: rgba(248,81,73,0.55);
  box-shadow: 0 0 0 2px rgba(248,81,73,0.22), 0 -4px 12px rgba(0,0,0,0.25);
  animation: att-ring-pulse 1.8s ease-out infinite;
}
@keyframes att-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(248,81,73,0.22), 0 -4px 12px rgba(0,0,0,0.25); }
  50%      { box-shadow: 0 0 0 5px rgba(248,81,73,0.06), 0 -4px 12px rgba(0,0,0,0.25); }
}
.att-inbox[data-pending]:not([data-pending="0"]):not(.att-acknowledged) .att-badge {
  background: #d23a3a;
}
@media (prefers-reduced-motion: reduce) {
  .att-inbox[data-pending]:not([data-pending="0"]):not(.att-acknowledged) { animation: none; }
}
.att-chev { opacity: 0.6; font-size: 11px; transition: transform 0.15s; }
.att-inbox:not(.att-collapsed) .att-chev { transform: rotate(180deg); }
.att-body { padding: 4px 8px 8px; max-height: 60vh; overflow-y: auto; }
.att-empty { opacity: 0.5; padding: 12px; text-align: center; font-style: italic; }
.att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.att-item {
  position: relative;
  padding: 8px 10px 8px 14px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid #555;
  cursor: pointer;
  transition: background 0.12s;
}
.att-item:hover { background: rgba(255,255,255,0.06); }
.att-item[data-severity="info"] { border-left-color: #6a7280; }
.att-item[data-severity="attention"] { border-left-color: #c98a16; }
.att-item[data-severity="attention"]:not([data-state="answered"]) { animation: att-pulse-border 1.6s infinite; }
.att-item[data-severity="critical"] { border-left-color: #d23a3a; }
.att-item[data-state="answered"] { opacity: 0.55; }
.att-item[data-state="answered"] .att-answered-tag { display: inline-block; }
.att-answered-tag {
  display: none;
  font-size: 10px;
  background: #2d6a3e;
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
}
.att-item-title { font-weight: 600; margin-bottom: 2px; word-break: break-word; }
.att-item-meta { font-size: 11px; opacity: 0.55; margin-bottom: 4px; }
.att-item-body { font-size: 12px; opacity: 0.8; margin: 4px 0; white-space: pre-wrap; word-break: break-word; max-height: 80px; overflow: hidden; }
.att-item-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.att-btn {
  font: inherit;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border, #2a2f37);
  background: var(--bg, #14171c);
  color: inherit;
  cursor: pointer;
}
.att-btn:hover { background: var(--bg-elev, #1a1d22); }
.att-btn-primary { background: #2a5b9e; border-color: #2a5b9e; color: #fff; }
.att-btn-primary:hover { background: #356bb0; }
.att-btn-danger { background: #8a2828; border-color: #8a2828; color: #fff; }
.att-btn-danger:hover { background: #a13030; }
.att-btn-link { background: transparent; border: 0; opacity: 0.7; }
.att-btn-link:hover { opacity: 1; text-decoration: underline; }

.att-archive { margin-top: 10px; }
.att-archive summary { cursor: pointer; opacity: 0.55; font-size: 11px; padding: 4px 0; }
.att-archive summary:hover { opacity: 0.85; }
.att-list-archive .att-item { opacity: 0.5; }

.att-critical-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.att-critical-overlay[hidden] { display: none; }
.att-critical-card {
  background: var(--bg-elev, #1a1d22);
  border: 2px solid #d23a3a;
  border-radius: 12px;
  padding: 24px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 12px 48px rgba(210,58,58,0.4);
}
.att-critical-card h2 { margin: 0 0 8px; color: #ff6464; }

@keyframes att-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210,58,58,0.6); }
  50% { box-shadow: 0 0 0 6px rgba(210,58,58,0); }
}
@keyframes att-pulse-border {
  0%, 100% { border-left-color: #c98a16; }
  50% { border-left-color: #f0b040; }
}

/* Hide inbox in voice-fullscreen mode (overrides everything). */
body.voice-fullscreen .att-inbox,
body.voice-fullscreen .att-critical-overlay { display: none !important; }

/* v0.33.1 — inbox now lives inside the right-panel drawer on mobile,
 * so the old position-fixed top-edge override is no longer needed.
 * Just cap the body height so it doesn't squeeze the rp-body. */
@media (max-width: 720px) {
  .att-body { max-height: 40vh; }
}

/* ── v0.29.5 mobile + PWA — responsive layout ───────────────────────────
 * Desktop layout above is grid: [sidebar 280px | chat 1fr | right 380px].
 * On mobile we collapse to a single column, hide sidebar + right-panel by
 * default, and surface them via slide-out drawers triggered from the
 * mobile topbar. Touch targets bumped to 44x44pt per Apple HIG. Safe-area
 * insets respected for notched devices (iPhone 14/15/16, etc.).
 */
#mobile-topbar { display: none; }
/* v0.37.3 Phase-6 — voice-mode-trigger is mobile-only (MVP).
   Hidden by default; the mobile media query below shows it. */
#voice-mode-trigger { display: none; }

/* v0.37.3 Phase-7 — Push-to-Talk text-selection / callout / highlight nuke.
   Press-and-hold on mobile triggers Android+iOS text-selection + native callout
   menus, which (a) breaks the gesture and (b) flashes ugly highlights.
   These properties stop ALL of that without affecting clickability.
   Applied to BOTH the voice-mode-trigger (phase 6) and the in-overlay PTT
   button (phase 8) and their immediate parents. */
#voice-mode-trigger,
#voice-mode-fullscreen,
#voice-mode-fullscreen *,
#voice-mode-ptt {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* PTT specifically — also kill long-press image-context-menu etc. */
#voice-mode-ptt {
  -webkit-user-drag: none;
}

/* ── v0.37.3 Phase-8 — Voice-Dialog Fullscreen-Mode ────────────────────── */
#voice-mode-fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: radial-gradient(circle at center,
                #0d0d1a 0%, #050508 65%, #000 100%);
  color: var(--axiom-fg, #e6e6f0);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(24px + env(safe-area-inset-top, 0px))
           max(20px, env(safe-area-inset-right, 0px))
           calc(28px + env(safe-area-inset-bottom, 0px))
           max(20px, env(safe-area-inset-left, 0px));
  font-family: var(--font-sans, system-ui);
}
#voice-mode-fullscreen[data-open="true"] { display: flex; }

#voice-mode-exit {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: var(--axiom-fg, #e6e6f0);
  cursor: pointer;
}
#voice-mode-exit:focus-visible {
  outline: 2px solid var(--accent, #6c63ff);
  outline-offset: 2px;
}
#voice-mode-exit .lucide { width: 22px; height: 22px; }

/* Orb — visual state for sighted users. */
#voice-mode-orb {
  position: relative;
  width: 220px;
  height: 220px;
  margin-top: 40px;
  flex-shrink: 0;
}
.vm-orb-core {
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #8a82ff 0%, #6c63ff 60%, #4a40c8 100%);
  box-shadow: 0 0 60px rgba(108,99,255,0.55),
              0 0 120px rgba(108,99,255,0.28);
}
.vm-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(108,99,255,0.5);
  opacity: 0;
}
/* Idle — slow gentle pulse. */
#voice-mode-fullscreen[data-state="idle"] .vm-orb-ring-1 { animation: vm-pulse 3.2s ease-out infinite; }
#voice-mode-fullscreen[data-state="idle"] .vm-orb-ring-2 { animation: vm-pulse 3.2s ease-out infinite 1.1s; }
#voice-mode-fullscreen[data-state="idle"] .vm-orb-ring-3 { animation: vm-pulse 3.2s ease-out infinite 2.2s; }
/* Listening — fast bright pulse, orb brighter. */
#voice-mode-fullscreen[data-state="listening"] .vm-orb-core {
  background: radial-gradient(circle, #b8b3ff 0%, #8e85ff 60%, #6c63ff 100%);
  box-shadow: 0 0 100px rgba(184,179,255,0.85),
              0 0 200px rgba(108,99,255,0.45);
  animation: vm-listen-glow 1.0s ease-in-out infinite alternate;
}
#voice-mode-fullscreen[data-state="listening"] .vm-orb-ring-1 { animation: vm-pulse-fast 1.4s ease-out infinite; }
#voice-mode-fullscreen[data-state="listening"] .vm-orb-ring-2 { animation: vm-pulse-fast 1.4s ease-out infinite 0.45s; }
#voice-mode-fullscreen[data-state="listening"] .vm-orb-ring-3 { animation: vm-pulse-fast 1.4s ease-out infinite 0.9s; }
/* Processing — orb spins (rotating gradient). */
#voice-mode-fullscreen[data-state="processing"] .vm-orb-core {
  background: conic-gradient(from 0deg,
    #6c63ff, #b8b3ff, #6c63ff, #4a40c8, #6c63ff);
  animation: vm-spin 1.2s linear infinite;
}
/* Speaking — wave-style scale pulse with the orb. */
#voice-mode-fullscreen[data-state="speaking"] .vm-orb-core {
  animation: vm-wave 0.9s ease-in-out infinite alternate;
}
@keyframes vm-pulse {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 0.6; }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes vm-pulse-fast {
  0%   { opacity: 0; transform: scale(0.7); }
  25%  { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes vm-listen-glow {
  from { box-shadow: 0 0 80px rgba(184,179,255,0.6),  0 0 180px rgba(108,99,255,0.35); }
  to   { box-shadow: 0 0 140px rgba(184,179,255,1.0), 0 0 240px rgba(108,99,255,0.55); }
}
@keyframes vm-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes vm-wave {
  from { transform: scale(0.92); }
  to   { transform: scale(1.08); }
}

#voice-mode-state-label {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  margin: 12px 0;
}
#voice-mode-transcript {
  width: 100%;
  max-width: 480px;
  max-height: 30vh;
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  opacity: 0.75;
  padding: 0 8px;
  margin: 8px 0;
}
#voice-mode-transcript .vm-msg-user {
  color: var(--accent, #6c63ff);
  margin: 6px 0;
  font-style: italic;
}
#voice-mode-transcript .vm-msg-agent {
  color: var(--axiom-fg, #e6e6f0);
  margin: 6px 0;
}

#voice-mode-ptt {
  width: 100%;
  max-width: 480px;
  min-height: 88px;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #6c63ff 0%, #4a40c8 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(108,99,255,0.45);
  transition: transform var(--t-fast, 0.15s),
              box-shadow var(--t-fast, 0.15s),
              background var(--t-fast, 0.15s);
}
#voice-mode-ptt:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
#voice-mode-fullscreen[data-state="listening"] #voice-mode-ptt {
  background: linear-gradient(180deg, #ff5e7e 0%, #c02850 100%);
  box-shadow: 0 12px 40px rgba(255,94,126,0.55);
  transform: scale(0.98);
}
#voice-mode-fullscreen[data-state="processing"] #voice-mode-ptt,
#voice-mode-fullscreen[data-state="speaking"] #voice-mode-ptt {
  opacity: 0.5;
  pointer-events: none;
}

/* sr-only — invisible to sighted users, present for screen-readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* v0.37.3 Phase-9 — Skip-links. Invisible until keyboard focus, then jump
   to the top of the viewport as a visible focus target. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: var(--z-toast);
  padding: 10px 14px;
  background: var(--accent, #6c63ff);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  transition: top var(--t-fast, 0.15s);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: calc(8px + env(safe-area-inset-top, 0px));
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Reduced-motion — kill all orb animations, keep state-color cues only. */
@media (prefers-reduced-motion: reduce) {
  #voice-mode-fullscreen .vm-orb-ring,
  #voice-mode-fullscreen .vm-orb-core {
    animation: none !important;
  }
}
#mobile-scrim { display: none; }

/* Tablet + small desktop: keep both rails but make right panel narrower. */
@media (max-width: 1024px) {
  body { grid-template-columns: 240px 1fr var(--rp-w, 300px); }
}

/* Mobile breakpoint — single column, drawers. */
@media (max-width: 768px) {
  body {
    grid-template-columns: 1fr !important;
    /* Topbar height + composer area accounted for via safe-area below.
       v0.37.3 Phase-3 — uses --topbar-h var (single source). */
    padding-top: calc(var(--topbar-h, 48px) + env(safe-area-inset-top, 0px));
  }
  body.rp-collapsed { grid-template-columns: 1fr !important; }

  /* v0.37.4 Bug 4 — user-select cascade.
     Default: nothing in the chrome is selectable (PTT long-press, sidebar
     drags, topbar taps all caused accidental text-selection in v0.37.3).
     Opt-in: message-content, code-blocks, inputs, transcript readouts. */
  body, #mobile-topbar, #sidebar, #right-panel, #composer, .composer-wrap,
  #chat-head, .cx-iconbtn, .icon-btn, button {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  .msg-body, .msg-body *, #prompt, input, textarea, [contenteditable],
  #voice-mode-transcript, code, pre, .xtd-body, .rp-walk {
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  #mobile-topbar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h, 48px);
    padding: 0 8px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    box-sizing: content-box;
    align-items: center;
    justify-content: space-between;
    background: var(--axiom-ink-050, #0d0d1a);
    border-bottom: 1px solid var(--axiom-ink-200, #1a1a2e);
    z-index: var(--z-topbar);
  }
  /* v0.37.1 — borderless icon buttons in the mobile top-bar.
     Subtle hover/active background-tint instead of the old border-box. */
  #mobile-topbar .cx-mobile-iconbtn,
  #mobile-topbar .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm, 6px);
    color: var(--axiom-fg, #e6e6f0);
    padding: var(--sp-2, 8px);
    min-width: var(--touch-min, 44px);
    min-height: var(--touch-min, 44px);
    cursor: pointer;
    transition: background var(--t-fast, 0.15s);
  }
  #mobile-topbar .cx-mobile-iconbtn:hover,
  #mobile-topbar .icon-btn:hover {
    background: rgba(108,99,255,0.10);
    border: 0;
  }
  #mobile-topbar .cx-mobile-iconbtn:active,
  #mobile-topbar .icon-btn:active {
    background: rgba(108,99,255,0.18);
  }
  #mobile-topbar .cx-mobile-iconbtn .lucide {
    width: 22px; height: 22px;
  }
  #mobile-title {
    color: var(--axiom-fg, #e6e6f0);
    font-size: 17px;
    /* Wordmark polish on the mobile title too. */
    font-family: var(--font-display, var(--font-sans, system-ui));
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  /* v0.37.3 Phase-6 — Voice-Mode-Trigger.
     Visually positioned over the top-left of the mobile topbar, but DOM-first
     in <body> for screen-reader / tab-order. Touch-target = 44x44 (a11y). */
  #voice-mode-trigger {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: max(8px, env(safe-area-inset-left, 0px));
    width: 44px;
    height: 44px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm, 6px);
    color: var(--axiom-fg, #e6e6f0);
    cursor: pointer;
    z-index: calc(var(--z-topbar) + 1);
    transition: background var(--t-fast, 0.15s);
  }
  #voice-mode-trigger:hover { background: rgba(108,99,255,0.10); }
  #voice-mode-trigger:active { background: rgba(108,99,255,0.18); }
  #voice-mode-trigger:focus-visible {
    outline: 2px solid var(--accent, #6c63ff);
    outline-offset: 2px;
  }
  #voice-mode-trigger .lucide { width: 22px; height: 22px; }
  #mobile-topbar-spacer {
    display: inline-block;
    width: 44px;   /* matches voice-mode-trigger so the title stays centered */
    height: 44px;
  }

  /* Sidebar becomes a left drawer. */
  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(82vw, 320px);
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    transition: transform 220ms ease;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    box-shadow: 2px 0 24px rgba(0,0,0,0.5);
    overflow-y: auto;
  }
  body.mobile-sidebar-open #sidebar { transform: translateX(0); }

  /* Right panel becomes a right drawer.
   *
   * v0.31.4 fix — Bug A: previously this set 'display: block !important',
   * which killed the desktop flex layout. .rp-body relies on 'flex: 1' to
   * fill the remaining height; under 'display: block' it collapses to 0,
   * and the absolutely-positioned .rp-pane children (inset: 0) render
   * into a 0-height container → blank drawer. Restore flex-column here. */
  #right-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(88vw, 360px);
    z-index: var(--z-sidebar);
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%);
    transition: transform 220ms ease;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: -2px 0 24px rgba(0,0,0,0.5);
    /* Pane bodies manage their own scrolling. The drawer itself must NOT
     * scroll, otherwise the absolute-positioned panes never get a
     * scrollable parent and the topbar of the drawer scrolls away. */
    overflow: hidden;
  }
  body.mobile-rp-open #right-panel { transform: translateX(0); }
  /* Even when persistently "collapsed" (desktop pref), on mobile the drawer
   * must keep its flex layout — visibility is gated by 'mobile-rp-open',
   * not by 'rp-collapsed'. */
  body.rp-collapsed #right-panel {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Make sure the body region can shrink inside the fixed-height drawer
   * (flex children need explicit min-height: 0 to allow overflow). */
  #right-panel .rp-body { min-height: 0; }
  /* v0.37.1 Bug-1 — #rp-collapse removed; mobile-rp-btn (top-bar) +
     swipe-to-dismiss are the close mechanisms now. */
  /* v0.37.2 Bug-1 — re-add an in-panel close button, mobile-only. The
     button lives inside .rp-tabs so it's reachable from the open drawer
     without scrolling. Tap = same handler as mobile-rp-btn. */
  .rp-mobile-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
  }
  .rp-mobile-close:active { background: var(--panel); }

  /* Scrim behind any open drawer.
     v0.37.4 Bug 2 — opacity capped at 0.4 (was 0.5). The full 50% black
     made the under-drawer chat read as "screen broken" on phones. 40% still
     reads as "this is dimmed", doesn't read as "the app died". */
  #mobile-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: var(--z-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }
  body.mobile-sidebar-open #mobile-scrim,
  body.mobile-rp-open #mobile-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* v0.37.1 — Composer fixed-bottom, safe-area + keyboard-aware (JS sets
     --kb-offset via VisualViewport). Send-button always visible, 44px touch.
     v0.37.2 Bug-6 — FULLY OPAQUE — no gradient, no backdrop-blur, no
     translucent inner wrap. With the soft-keyboard open + chat scrolling
     behind the fixed composer, any transparency made the input area look
     broken ("fucked up transparent"). Forcing solid panel bg everywhere. */
  /* v0.37.3 Phase-2 — Composer LESBAR.
     ROOT-CAUSE des "transparenten Composers" in v0.37.2: --panel = --axiom-ink-200
     = rgba(255,255,255,0.04) — also 96% durchsichtig. Auf desktop kompensiert
     das parent-bg, aber wenn der mobile composer position:fixed über dem
     scrollenden chat-content liegt, sieht man durch ihn durch. !important
     hilft nicht, weil der VALUE selbst transparent ist.
     Fix: explizit solide dark color (--axiom-ink-000 = #080810, fully opaque).
     Null transparency. Klar lesbar. Punkt. */
  #composer {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--kb-offset, 0px);
    z-index: var(--z-topbar);
    padding: var(--sp-2) max(var(--sp-2), env(safe-area-inset-left, 0px))
             calc(var(--sp-2) + env(safe-area-inset-bottom, 0px))
             max(var(--sp-2), env(safe-area-inset-right, 0px));
    background: var(--axiom-ink-000, #080810) !important;
    background-image: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid var(--border);
    transition: bottom var(--t-fast, 0.15s) ease-out;
  }
  #composer .composer-wrap {
    background: var(--axiom-ink-050, #0d0d1a) !important;
    background-image: none !important;
  }
  /* v0.37.2 Bug-6 — Status-bar (the under-the-hood spinner) on mobile
     sits just above the composer instead of in the chat flow, so it's
     always visible when claudy is working — and uses an opaque bg to
     match. When idle, .hidden keeps display:none and the composer takes
     bottom-flush. */
  #status-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--composer-h, 80px) + var(--kb-offset, 0px));
    z-index: calc(var(--z-topbar) - 1);
    background: var(--axiom-ink-050, #0d0d1a) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 6px max(var(--sp-3), env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--border);
  }
  #composer input, #composer textarea {
    font-size: 16px; /* prevent iOS zoom-on-focus */
  }
  #composer button, #composer .icon-btn {
    min-width: var(--touch-min, 44px);
    min-height: var(--touch-min, 44px);
  }
  /* Multi-line autoresize cap (max 30vh, then scroll). */
  #composer #prompt {
    max-height: 30vh;
    overflow-y: auto;
  }
  /* v0.37.2 Bug-7 — Make room for fixed composer so last message isn't
     covered. Tracks the live --composer-h CSS var published by JS so
     attachments / multi-line / status-bar growth all stay accounted for. */
  #chat {
    padding-bottom: calc(var(--composer-h, 80px) + var(--sp-4) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Voice mic button — bigger + thumb-reachable when present. */
  .voice-mic-btn, #voice-mic-btn, #mic-btn {
    min-width: 64px !important;
    min-height: 64px !important;
    font-size: 28px !important;
  }
  body.voice-mode .voice-mic-btn,
  body.voice-mode #voice-mic-btn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 88px;
    height: 88px;
    border-radius: 50%;
    z-index: var(--z-overlay);
    box-shadow: 0 8px 32px rgba(108,99,255,0.45);
  }

  /* Chat area — comfortable mobile padding. */
  #chat, .chat, main {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  /* Composer keyboard hints — hide on mobile. No hardware keyboard
     means the ⌘↵ / ⌘K / ctrl-tick / ⌥V pills are pure noise, and
     they were a primary source of horizontal overflow on narrow
     viewports before flex-wrap kicked in. */
  .composer-hint { display: none !important; }

  /* Messages: drop the 90ch column cap on mobile so bubbles use the
     full available width — and ensure long content wraps hard. */
  .msg { max-width: 100%; }
  .msg-body {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Tool-call cards / artifact previews / diff blocks — clamp to
     container so wide payloads never push the column. */
  .msg .tool-call, .msg .tool-call-card,
  .msg pre, .msg pre.code,
  .msg .artifact-preview, .msg .rp-diff {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* v0.37.1 — Code-block horizontal scroll-hint shadow on mobile.
     A subtle inner-shadow on the right edge hints at scrollable content. */
  .msg pre, .msg pre.code {
    position: relative;
    overflow-x: auto;
    box-shadow: inset -10px 0 8px -8px rgba(108,99,255,0.18);
  }

  /* v0.37.1 — Bubble padding tightened on mobile so content uses width. */
  .msg-body {
    padding: var(--sp-3, 12px);
  }

  /* v0.37.1 — Sidebar items get a 44px touch floor on mobile. */
  .proj-head, .session, #orch-summary, #runs-summary,
  #orch-summary > *, #runs-summary > * {
    min-height: var(--touch-min, 44px);
  }
  .session { padding: var(--sp-2) var(--sp-3); }
  .proj-head { padding: var(--sp-2) var(--sp-3); }
  /* Right rail / drawer overlay polish on mobile — full-screen overlay
     instead of side-by-side. (The drawer transform is already wired in
     wireMobileDrawers; we just widen it and dim the backdrop.) */
  body.mobile-rp-open #right-panel {
    width: min(100vw, 480px) !important;
    max-width: 100vw;
  }
}

/* Phone breakpoint — even tighter. */
@media (max-width: 480px) {
  #mobile-title { font-size: 14px; }
  #sidebar { width: min(88vw, 300px); }
  /* Brand sub-label hidden to save horizontal room in drawer header. */
  #sidebar .brand-sub { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v0.37.0 — DESIGN-FOUNDATION COMPONENT LAYER
   Custom controls that replace OS-default form widgets, tooltips, menus.
   All components opt-in: add the class. Native widgets untouched until migrated.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom Select (cx-select) ──────────────────────────────────────────── */
.cx-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sp-4) 0 var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  user-select: none;
}
.cx-select:hover { background: var(--panel-hi); border-color: rgba(108,99,255,0.35); }
.cx-select:focus-visible, .cx-select.cx-open {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.18);
}
.cx-select::after {
  content: "";
  width: 8px; height: 8px;
  margin-left: var(--sp-3);
  border-right: 1.5px solid var(--dim);
  border-bottom: 1.5px solid var(--dim);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-base);
}
.cx-select.cx-open::after { transform: rotate(-135deg) translateY(2px); }
.cx-select-menu {
  position: absolute;
  top: calc(100% + 4px); left: 0;
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  padding: var(--sp-1);
  z-index: var(--z-overlay);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.cx-select.cx-open .cx-select-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* v0.37.3 bug-fix #1: menu is PORTALED to <body> when open, so the
   .cx-select.cx-open descendant selector above no longer matches it.
   The menu carries its own .cx-open marker for that case. */
.cx-select-menu.cx-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cx-select-item {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.cx-select-item:hover, .cx-select-item.cx-active { background: var(--panel-hi); }
.cx-select-item.cx-selected { color: var(--accent-soft); }
.cx-select-search {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-1);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.cx-select-search:focus { outline: none; border-color: var(--accent); }

/* ── Custom Checkbox (cx-check) ─────────────────────────────────────────── */
.cx-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text);
}
.cx-check input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--panel);
  cursor: pointer;
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  flex-shrink: 0;
}
.cx-check input[type="checkbox"]:hover { border-color: var(--accent-soft); }
.cx-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108,99,255,0.25);
}
.cx-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.cx-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  animation: cx-check-pop var(--t-base);
}
.cx-check input[type="checkbox"]:indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}
.cx-check input[type="checkbox"]:indeterminate::after {
  content: "";
  position: absolute;
  left: 3px; top: 7px;
  width: 10px; height: 2px;
  background: white;
}
@keyframes cx-check-pop {
  0% { transform: rotate(45deg) scale(0.4); opacity: 0; }
  100% { transform: rotate(45deg) scale(1); opacity: 1; }
}

/* ── v0.37.1 — Native form-control upgrade ──────────────────────────────
   .cx-native-hidden: visually-hidden but still in the form. cx.upgradeNativeSelect
   parks the original <select> here while the .cx-select host takes over.
   The native is still tab-focusable via aria-hidden=true + tabindex=-1
   tricks; we explicitly keep it out of layout so visuals don't collide. */
.cx-native-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
  pointer-events: none !important;
}

/* cx.select label area + items wrap + flip-up. */
.cx-select-label {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-select-items { display: flex; flex-direction: column; gap: 1px; }
.cx-select-menu.cx-flip-up {
  top: auto; bottom: calc(100% + 4px);
}
.cx-select.cx-disabled {
  opacity: 0.55; cursor: not-allowed; pointer-events: none;
}
.cx-select-item.cx-disabled { opacity: 0.5; cursor: not-allowed; }
.cx-select-item.cx-selected {
  color: var(--accent-soft);
  background: rgba(108,99,255,0.08);
  font-weight: 500;
}

/* cx.checkbox upgrade wrapper — .cx-check-box swaps in around the native
   <input type=checkbox>. The native stays hidden inside (form behavior),
   the .cx-check-visual is what the user sees + clicks. */
.cx-check-box {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
  cursor: pointer;
}
.cx-check-box input[type="checkbox"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: inherit;
  z-index: 1;
}
.cx-check-visual {
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--panel);
  color: white;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  pointer-events: none;
}
.cx-check-box:hover .cx-check-visual { border-color: var(--accent-soft); }
.cx-check-box input[type="checkbox"]:focus-visible + .cx-check-visual {
  box-shadow: 0 0 0 3px rgba(108,99,255,0.25);
  border-color: var(--accent);
}
.cx-check-mark {
  width: 14px; height: 14px;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  transition: stroke-dashoffset var(--t-base);
}
.cx-check-dash {
  display: none;
  width: 10px; height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.cx-check-box.cx-checked .cx-check-visual,
.cx-check-box.cx-indeterminate .cx-check-visual {
  background: var(--accent);
  border-color: var(--accent);
}
.cx-check-box.cx-checked .cx-check-mark { stroke-dashoffset: 0; }
.cx-check-box.cx-indeterminate .cx-check-mark { display: none; }
.cx-check-box.cx-indeterminate .cx-check-dash { display: block; }
.cx-check-box.cx-disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* ── Custom Radio (cx-radio) ────────────────────────────────────────────── */
.cx-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
  font-size: 13px;
}
.cx-radio input[type="radio"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  cursor: pointer;
  position: relative;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  flex-shrink: 0;
}
.cx-radio input[type="radio"]:hover { border-color: var(--accent-soft); }
.cx-radio input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108,99,255,0.25);
}
.cx-radio input[type="radio"]:checked { border-color: var(--accent); }
.cx-radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  animation: cx-radio-pop var(--t-base);
}
@keyframes cx-radio-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Custom Slider (cx-slider) ──────────────────────────────────────────── */
.cx-slider {
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--panel);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.cx-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 0 var(--accent-glow);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.cx-slider::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 0 0 6px var(--accent-glow); }
.cx-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* ── Text Inputs (cx-input) — uniform focus-ring + clear-button ─────────── */
.cx-input {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cx-input:hover { border-color: rgba(108,99,255,0.35); }
.cx-input:focus, .cx-input:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.18);
}
.cx-input::placeholder { color: var(--dim); }

.cx-search { position: relative; display: inline-flex; align-items: center; }
.cx-search > input { padding-right: 28px; }
.cx-search-clear {
  position: absolute;
  right: 8px;
  width: 18px; height: 18px;
  border: none;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.cx-search-clear:hover { background: var(--panel-hi); color: var(--text); }
.cx-search.cx-has-value .cx-search-clear { display: inline-flex; }

/* ── Textarea (cx-textarea) ─────────────────────────────────────────────── */
.cx-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cx-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.18);
}
/* Style the resize-handle on WebKit */
.cx-textarea::-webkit-resizer { background-color: var(--border); }

/* ── File Input (cx-file) — custom button look ──────────────────────────── */
.cx-file {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.cx-file input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cx-file-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cx-file-btn:hover { background: var(--panel-hi); border-color: var(--accent-soft); }
.cx-file-name { color: var(--dim); font-size: 12px; }

/* ── Tooltip (cx-tip) — replaces native title= ──────────────────────────── */
[data-cx-tip] { position: relative; }
[data-cx-tip]::after {
  content: attr(data-cx-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--axiom-ink-000);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: var(--r-xs);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: var(--z-overlay);
  box-shadow: var(--shadow-1);
}
[data-cx-tip]:hover::after, [data-cx-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 250ms;
}
[data-cx-tip-pos="bottom"]::after {
  bottom: auto; top: calc(100% + 6px);
  transform: translateX(-50%) translateY(-4px);
}
[data-cx-tip-pos="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }
[data-cx-tip-pos="right"]::after {
  bottom: auto; top: 50%; left: calc(100% + 6px);
  transform: translateY(-50%) translateX(-4px);
}
[data-cx-tip-pos="right"]:hover::after { transform: translateY(-50%) translateX(0); }

/* ── Context Menu (cx-menu) — solid bg, no transparent ──────────────────── */
.cx-menu {
  position: fixed;
  z-index: var(--z-overlay);
  min-width: 180px;
  background: #14141f;            /* SOLID — #6 fix */
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-3);
  padding: var(--sp-1);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  animation: cx-menu-in var(--t-fast);
}
@keyframes cx-menu-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cx-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--t-fast);
}
.cx-menu-item:hover, .cx-menu-item:focus-visible { background: var(--panel-hi); outline: none; }
.cx-menu-item.cx-danger { color: var(--err); }
.cx-menu-item.cx-danger:hover { background: rgba(248,81,73,0.12); }
.cx-menu-sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; }

/* ── Modal / Dialog (cx-modal) — backdrop blur, custom ──────────────────── */
.cx-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(8,8,16,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: cx-modal-fade var(--t-base);
}
@keyframes cx-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.cx-modal {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  max-width: 480px;
  width: 100%;
  max-height: 86vh;
  overflow: auto;
  animation: cx-modal-pop var(--t-base);
}
@keyframes cx-modal-pop {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cx-modal-head {
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}
.cx-modal-body { padding: var(--sp-4) var(--sp-5); font-size: 13px; line-height: 1.55; }
.cx-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--border);
}
.cx-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding: 0 var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.cx-btn:hover { background: var(--panel-hi); border-color: var(--accent-soft); }
.cx-btn:active { transform: scale(0.97); }
.cx-btn.cx-primary { background: var(--accent); border-color: var(--accent); color: white; }
.cx-btn.cx-primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.cx-btn.cx-danger { color: var(--err); border-color: rgba(248,81,73,0.4); }
.cx-btn.cx-danger:hover { background: rgba(248,81,73,0.12); }
.cx-btn.cx-ghost { background: transparent; border-color: transparent; }
.cx-btn.cx-ghost:hover { background: var(--panel-hi); }

/* v0.37.1 — Install-prompt toast (PWA beforeinstallprompt UX). */
.claudy-install-toast {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-3));
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: min(420px, calc(100vw - 24px));
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.4));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: claudy-install-in var(--t-base, 0.2s) ease-out;
}
.claudy-install-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.claudy-install-text strong { font-size: 13px; font-weight: 600; color: var(--text); }
.claudy-install-actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
@keyframes claudy-install-in {
  from { transform: translate(-50%, 100%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
@media (max-width: 768px) {
  .claudy-install-toast {
    left: var(--sp-3); right: var(--sp-3); transform: none;
    max-width: none;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); /* above fixed composer */
  }
  @keyframes claudy-install-in {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

/* ── Lucide icon size helpers ───────────────────────────────────────────── */
.lucide { width: 16px; height: 16px; stroke-width: 1.75; flex-shrink: 0; }
.lucide-sm { width: 14px; height: 14px; }
.lucide-lg { width: 20px; height: 20px; }

/* ── #9 Inbox-Badge — pulse ring when pending ───────────────────────────── */
.cx-inbox-badge { position: relative; display: inline-flex; align-items: center; }
.cx-inbox-badge[data-count]:not([data-count="0"])::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--err);
  animation: cx-inbox-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
.cx-inbox-badge[data-count]:not([data-count="0"])::after {
  content: attr(data-count);
  position: absolute;
  top: -4px; right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--err);
  color: white;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@keyframes cx-inbox-pulse {
  0%   { transform: scale(1);    opacity: 0.85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ── Spinner dot (used by #7 restart status, generic) ───────────────────── */
.spinner-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border: 1.5px solid var(--dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -1px;
  animation: cx-spin 0.9s linear infinite;
}
@keyframes cx-spin { to { transform: rotate(360deg); } }

/* ── #1 Right-panel toggle — fixed slot in top-bar ──────────────────────── */
.cx-rp-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--dim);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cx-rp-toggle:hover { background: var(--panel-hi); color: var(--text); border-color: var(--border); }
.cx-rp-toggle.cx-on { color: var(--accent-soft); background: rgba(108,99,255,0.12); }

/* ── #4 Session-Collapse — show-more ────────────────────────────────────── */
.cx-show-more {
  display: block;
  width: calc(100% - var(--sp-4));
  margin: var(--sp-1) auto var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-xs);
  color: var(--dim);
  font-size: 11px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.cx-show-more:hover { color: var(--accent-soft); border-color: var(--accent-soft); }

/* ── #2 Left-sidebar top-buttons cleanup — borderless icon-row ──────────── */
.cx-sidebar-toprow {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
}
.cx-sidebar-toprow .cx-rp-toggle { width: 30px; height: 30px; }

/* ── #5 Archive section ─────────────────────────────────────────────────── */
.cx-archive-section {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-2);
}
.cx-archive-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
}
.cx-archive-head:hover { color: var(--text); }
.cx-archive-head .cx-chevron {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-base);
}
.cx-archive-section.cx-open .cx-chevron { transform: rotate(45deg); }
.cx-archive-body { display: none; padding: 0 var(--sp-2) var(--sp-2); }
.cx-archive-section.cx-open .cx-archive-body { display: block; }
.cx-archive-search { width: 100%; margin-bottom: var(--sp-2); }
.cx-archive-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  font-size: 12px;
  color: var(--dim);
  cursor: default;
  transition: background var(--t-fast), color var(--t-fast);
}
.cx-archive-item:hover { background: var(--panel-hi); color: var(--text); }
.cx-archive-item .cx-archive-restore {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--accent-soft);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.cx-archive-item .cx-archive-restore:hover { background: rgba(108,99,255,0.12); }
.cx-archive-empty { padding: var(--sp-3); color: var(--dim); font-size: 12px; text-align: center; font-style: italic; }

/* ── #10f Brand Wordmark "Claudy" — Geist display font ──────────────────── */
.cx-wordmark {
  /* v0.37.1 — polished Geist treatment per spec: tighter tracking + same
     subtle gradient. (No new font-file; Geist already preloaded.) */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--text) 55%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

/* ── #10f Borderless icon-only nav buttons ──────────────────────────────── */
.cx-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.cx-iconbtn:hover { background: var(--panel-hi); }
.cx-iconbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}

/* ── #10 Mobile: safe-area + sticky chrome ──────────────────────────────── */
@media (max-width: 768px) {
  .cx-mobile-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(13,13,26,0.78);
    padding-top: var(--safe-top);
    border-bottom: 1px solid var(--border);
  }
  .cx-mobile-bottombar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--z-topbar);
    padding-bottom: var(--safe-bottom);
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
  }
  /* Touch-target floor */
  .cx-iconbtn, .cx-btn, .cx-rp-toggle { min-width: var(--touch-min); min-height: var(--touch-min); }
  /* Sidebar items left-padding for thumb reach */
  #sidebar .proj-row, #sidebar .sess-row, #sidebar .brand, #sidebar .cwd-row, #sidebar .active-runs-row {
    padding-left: var(--sp-4);
  }
}

/* ── Reduced-motion respect ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cx-inbox-badge[data-count]:not([data-count="0"])::before { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}