/* ========================================================================
   rc-custom · terminal skin
   Design system: one spacing scale, two control heights, one font scale,
   one radius scale. Everything below composes from these tokens so controls
   share a baseline (height / padding / radius / gap) and align by construction.
   ======================================================================== */
:root {
  /* palette */
  --bg: #07080a;          /* terminal black */
  --bg2: #0c0e12;         /* surfaces: scrollback, inputs */
  --chrome: #14161c;      /* tab bar / titlebars */
  --tab: #0f1116;
  --text: #cfd3da;
  --dim: #9aa0ac;
  --muted: #5c6370;
  --accent: #d97757;      /* claude orange — prompt + cursor */
  --cyan: #56b6c2;        /* paths / ids */
  --green: #98c379;       /* user input + ok */
  --red: #e06c75;
  --border: #1c1f27;      /* low-contrast dividers */
  --border2: #2a2f3a;     /* control borders */

  /* spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* control heights — every row-level control snaps to one of these */
  --ctrl: 30px;           /* bar buttons, pills, toggles, tabs-add, ghost */
  --ctrl-lg: 38px;        /* inputs, composer, primary actions */
  --icon: 17px;           /* glyph/SVG size inside icon buttons & status */
  --tabbar-h: 40px;
  --tab-h: 34px;

  /* font scale */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-lg: 14px;

  /* radius */
  --r: 4px;
  --r-lg: 8px;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* don't let mobile reflow resize text */
body {
  margin: 0;
  font: var(--fs-base)/1.5 var(--mono);
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
}
/* faint scanline texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px);
  z-index: 9999;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.spacer { flex: 1; }
.error { color: var(--red); min-height: 1.2em; margin: var(--sp-2) 0 0; }
kbd { background: var(--chrome); border: 1px solid var(--border2); border-radius: 3px; padding: 0 5px; color: var(--accent); }
code { color: var(--cyan); }

.screen { height: 100vh; display: flex; flex-direction: column; }

/* =========================== buttons (one base) =========================== */
button {
  font: inherit;
  height: var(--ctrl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-3);
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation; /* instant taps — no double-tap-to-zoom delay */
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
button::before { content: '['; opacity: 0.45; margin-right: 4px; }
button::after  { content: ']'; opacity: 0.45; margin-left: 4px; }
button:hover { background: var(--accent); color: var(--bg); }
button:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
button.ghost { color: var(--muted); border-color: var(--border2); }
button.ghost:hover { background: var(--chrome); color: var(--text); }
button.secondary { color: var(--cyan); border-color: var(--cyan); }
button.secondary:hover { background: var(--cyan); color: var(--bg); }
/* chrome buttons: no brackets, square footprint */
.iconbtn, .tab-add, .x {
  border-color: var(--border2);
  color: var(--dim);
  padding: 0;
  width: var(--ctrl);
  font-size: var(--icon);
}
.iconbtn svg, .tab-add svg, .x svg { width: var(--icon); height: var(--icon); }
.iconbtn::before, .iconbtn::after,
.tab-add::before, .tab-add::after,
.x::before, .x::after { content: none; }
.iconbtn:hover, .tab-add:hover { background: var(--chrome); color: var(--text); }

/* ===================== generic terminal window chrome ===================== */
.term-window {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.titlebar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--tabbar-h);
  padding: 0 var(--sp-3);
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--dim);
}
.dots { display: inline-flex; gap: 7px; flex: none; }
.dots i { width: 11px; height: 11px; border-radius: 50%; }
.dots i:nth-child(1) { background: #ff5f56; }
.dots i:nth-child(2) { background: #ffbd2e; }
.dots i:nth-child(3) { background: #27c93f; }
.titlebar .title { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titlebar .x { height: var(--ctrl); border: 0; font-size: var(--fs-base); }
.titlebar .x:hover { color: var(--red); background: transparent; }
/* keep titlebar visually centered despite the dots on the left */
.titlebar .dots { width: 56px; }
.titlebar .x ~ .title, .titlebar .title { margin: 0; }

/* ================================ login ================================ */
.login-window { width: min(440px, 92vw); margin: 14vh auto; }
.login-body { padding: var(--sp-5); }
.banner { color: var(--accent); font-size: clamp(7px, 2.7vw, 12px); line-height: 1.05; margin: 0; text-align: center; overflow: hidden; }
.banner-sub { text-align: center; font-size: var(--fs-sm); letter-spacing: 2px; margin: var(--sp-2) 0 var(--sp-5); }
#loginForm { display: flex; flex-direction: column; gap: var(--sp-2); }
.field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--ctrl-lg);
  padding: 0 var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--r);
}
.field:focus-within { border-color: var(--accent); }
.prompt-sigil { color: var(--green); white-space: nowrap; width: 56px; }
.field input { flex: 1; height: 100%; background: transparent; border: 0; color: var(--text); font: inherit; caret-color: var(--accent); }
.field input:focus { outline: none; }
#loginForm button { height: var(--ctrl-lg); width: 100%; margin-top: var(--sp-2); }

/* =============================== tab bar =============================== */
.tabbar {
  display: flex;
  align-items: center;
  height: var(--tabbar-h);
  padding: 0;
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.tabs { display: flex; flex: 1; align-items: flex-end; gap: var(--sp-1); height: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: calc(var(--tabbar-h) - var(--tab-h)) 0 0; }
.tabs.split { gap: 6px; } /* match splitter width so tab edges line up with panes */
/* right-side controls float over the strip so tabs can span the full pane width */
.tabbar-right { position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); background: var(--chrome); box-shadow: -10px 0 10px 2px var(--chrome); z-index: 3; }
/* user menu (avatar → email + logout) */
.usermenu { position: relative; display: flex; align-items: center; }
.usermenu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: var(--sp-2);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 400;
}
.usermenu-email { font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2); word-break: break-all; }
.usermenu-pop button { width: 100%; }
.tabs::-webkit-scrollbar { height: 0; }
/* .tab is a slot (full pane width in a split); .tab-inner is the short visible chip */
.tab { display: flex; align-items: flex-end; height: 100%; flex: none; min-width: 0; }
.tab-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--tab-h);
  padding: 0 var(--sp-1) 0 var(--sp-3);
  background: var(--tab);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  font-size: var(--fs-sm);
  color: var(--dim);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  top: 1px;
  flex: none;
}
.tab:hover .tab-inner { color: var(--text); }
.tab.in-split .tab-inner { background: var(--tab); color: var(--text); } /* visible column, not active */
.tab.active .tab-inner { background: var(--bg); color: var(--text); border-color: var(--border2); border-bottom-color: var(--bg); box-shadow: inset 0 2px 0 var(--accent); }
.tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.tab .dot.idle { background: var(--green); }
.tab .dot.thinking { background: var(--cyan); animation: blink 1s steps(2) infinite; }
.tab .dot.running { background: var(--accent); animation: blink 1s steps(2) infinite; }
.tab .dot.offline { background: var(--red); }
.tab.offline .tname { color: var(--muted); }
/* attention badge: a session needs the user */
.tab.attention .tab-inner { box-shadow: inset 0 0 0 1px var(--accent); }
.tab.attention .tname::after { content: ' ●'; color: var(--accent); animation: blink 1s steps(2) infinite; }
.tab .tname { width: 15ch; flex: none; overflow: hidden; text-overflow: ellipsis; } /* uniform width, ~15 chars then ellipsis */
.tab .tclose {
  height: 16px; width: 16px;
  border: 0; background: none; color: var(--muted);
  font-size: var(--fs-xs); opacity: 0.5; border-radius: 3px; flex: none;
}
.tab .tclose::before, .tab .tclose::after { content: none; }
.tab .tclose:hover { color: var(--red); opacity: 1; background: rgba(224, 108, 117, 0.12); }
/* compact chips for hidden sessions (shown in the controls area during a split) */
.hidden-tabs { display: flex; align-items: center; gap: var(--sp-1); }
.tab.mini { height: auto; align-items: center; }
.tab.mini .tab-inner { height: var(--ctrl); top: 0; padding: 0 var(--sp-2); border: 1px solid var(--border2); border-radius: var(--r); background: var(--tab); opacity: 0.85; }
.tab.mini .tab-inner:hover { opacity: 1; border-color: var(--accent); }
.tab.mini .tname { width: auto; max-width: 12ch; }
.tab-add { font-size: calc(var(--icon) + 3px); flex: none; }
.tab-add:hover { color: var(--accent); border-color: var(--accent); }
.whoami { font-size: var(--fs-sm); align-self: center; }
@keyframes blink { 50% { opacity: 0.25; } }

/* =============================== panes =============================== */
#app { position: relative; }
#panes { flex: 1; position: relative; display: flex; flex-direction: row; overflow: hidden; }
.pane { display: none; flex-direction: column; min-width: 0; overflow: hidden; position: relative; }
.pane.visible { display: flex; }
/* in a split, highlight the active column and de-emphasize the others' headers */
#panes.split .pane.active { box-shadow: inset 0 2px 0 var(--accent); }
#panes.split .pane.active .bar { background: var(--chrome); }
#panes.split .pane.visible:not(.active) .bar { opacity: 0.55; }

/* draggable splitter between columns */
.splitter { flex: 0 0 6px; cursor: col-resize; background: var(--chrome); position: relative; }
.splitter::before { content: ''; position: absolute; inset: 0 -3px; } /* wider hit area */
.splitter:hover, body.resizing .splitter { background: var(--accent); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { pointer-events: none; }

/* tab context menu */
.ctxmenu {
  position: fixed;
  z-index: 500;
  min-width: 190px;
  padding: var(--sp-1);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  font-size: var(--fs-sm);
}
.ctxmenu .item { padding: var(--sp-2) var(--sp-3); border-radius: 3px; cursor: pointer; white-space: nowrap; color: var(--text); }
.ctxmenu .item:hover { background: var(--chrome); }
.ctxmenu .item.danger { color: var(--red); }
.ctxmenu .item.danger:hover { background: var(--red); color: var(--bg); }
.ctxmenu .sep { height: 1px; background: var(--border2); margin: var(--sp-1) 0; }

.bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--tabbar-h);
  padding: 0 var(--sp-4);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.sessionLabel { color: var(--text); font-weight: 500; display: flex; align-items: baseline; min-width: 0; overflow: hidden; }
.sessionLabel::before { content: '⟩'; color: var(--accent); font-weight: 700; flex: none; margin-right: 5px; }
/* truncate the host:project at the START (…end visible) so the project name
   stays readable; direction:rtl moves the ellipsis to the left for the single
   LTR run, the .phost span is bidi-transparent so order is preserved. */
.sl-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: rtl; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctrl);
  height: var(--ctrl);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  color: var(--muted);
  flex: none;
}
.pill::before { content: '●'; font-size: calc(var(--icon) - 1px); }
.pill.idle { color: var(--green); border-color: var(--green); }     /* connected / ready */
.pill.thinking { color: var(--cyan); border-color: var(--cyan); }
.pill.running { color: var(--accent); border-color: var(--accent); }
.pill.offline { color: var(--red); border-color: var(--red); }
.pill.offline::before { content: '⊘'; font-size: calc(var(--icon) + 1px); } /* disconnected / ended */
.pill.thinking::before, .pill.running::before { animation: blink 1s steps(2) infinite; }
.bar .stop { font-size: calc(var(--icon) - 4px); }
/* keep all pane-bar controls a uniform square — the mobile 38px button
   min-height would otherwise make the buttons taller than the status pill */
.bar .iconbtn, .bar .pill { width: var(--ctrl); height: var(--ctrl); min-height: 0; flex: none; }
/* close lives on the tab (✕) on desktop; on mobile (no tab bar) it moves into the pane header */
.bar .pclose { display: none; }
#app.mobile .bar .pclose { display: inline-flex; }
#app.mobile .bar .pclose:hover { color: var(--red); }
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--ctrl);
  font-size: var(--fs-sm);
  color: var(--muted);
  cursor: pointer;
  flex: none;
}
.toggle input { accent-color: var(--accent); margin: 0; }
.bar .stop { flex: none; }
.bar .stop:hover { background: var(--red); border-color: var(--red); color: var(--bg); }

/* scrollback log */
.stream {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.msg { white-space: pre-wrap; word-wrap: break-word; }
.msg.user { color: var(--green); }
.msg.user::before { content: '❯ '; color: var(--green); font-weight: 700; }
.msg.assistant { color: var(--text); padding-left: var(--sp-3); border-left: 2px solid var(--accent); }
.msg.thinking { color: var(--muted); font-style: italic; padding-left: var(--sp-3); border-left: 2px dashed var(--border2); }
.msg.thinking::before { content: '… '; }
/* tool activity block */
.tool { padding-left: var(--sp-3); }
.tool-head { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; color: var(--dim); }
.tool-head:hover { color: var(--text); }
.tool-caret { color: var(--muted); font-size: 11px; transition: transform 0.15s; flex: none; }
.tool.collapsed .tool-caret { transform: rotate(-90deg); }
/* min-height:0 + margin:0 guard against the generic `.error` utility (the status
   modifier shares its name) stretching the 7px dot into a pill. */
.tool-status { width: 7px; height: 7px; min-height: 0; margin: 0; border-radius: 50%; flex: none; background: var(--muted); }
.tool-status.running { background: var(--accent); animation: blink 1s steps(2) infinite; }
.tool-status.done { background: var(--green); }
.tool-status.error { background: var(--red); }
.tool .name { color: var(--accent); flex: none; }
.tool-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-body { margin: var(--sp-1) 0 0 calc(var(--sp-4) + var(--sp-1)); display: flex; flex-direction: column; gap: var(--sp-1); }
.tool.collapsed .tool-body { display: none; }
.tool-out { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-2) var(--sp-3); margin: 0; overflow-x: auto; max-height: 320px; font-size: var(--fs-sm); color: var(--dim); white-space: pre-wrap; word-break: break-word; }
.tool-out.err { color: var(--red); border-color: var(--red); }
/* inline diff */
.diff { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r); overflow-x: auto; font-size: var(--fs-sm); }
.diff-file { padding: var(--sp-1) var(--sp-2); color: var(--cyan); border-bottom: 1px solid var(--border2); }
.dl { padding: 0 var(--sp-2); white-space: pre-wrap; word-break: break-word; }
.dl.add { background: rgba(126, 194, 126, 0.13); color: var(--green); }
.dl.del { background: rgba(224, 108, 117, 0.13); color: var(--red); }
.dl.ctx { color: var(--muted); }
.dl.gap { height: var(--sp-2); }
.diff-stat { font-size: var(--fs-xs); flex: none; }
.diff-stat .da { color: var(--green); }
.diff-stat .dd { color: var(--red); }

/* "generating…" placeholder */
.generating { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-style: italic; padding-left: var(--sp-3); }
.gen-dots { display: inline-flex; gap: 4px; }
.gen-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: gen-blink 1.2s infinite; }
.gen-dots i:nth-child(2) { animation-delay: 0.2s; }
.gen-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes gen-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.result { font-size: var(--fs-sm); color: var(--muted); padding-top: var(--sp-2); border-top: 1px dashed var(--border2); margin-top: var(--sp-1); }
.result::before { content: '— '; }
.result.attached { color: var(--green); font-weight: 500; border-top: none; padding-top: var(--sp-2); }
.result.attached::before { content: ''; }
.history-sep { text-align: center; color: var(--muted); opacity: 0.75; border-top: 1px dashed var(--border2); border-bottom: 1px dashed var(--border2); }
.history-sep::before { content: '⟲ '; }

/* ---- collapsible turns (prompt + its response) ---- */
.turn { display: flex; flex-direction: column; gap: var(--sp-2); }
.turn-prompt {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 2px 0;
  cursor: pointer;
  color: var(--green);
  font-weight: 700;
}
.turn-caret { flex: none; transition: transform 0.15s; }
.turn.collapsed .turn-caret { transform: rotate(-90deg); }
.turn-text { white-space: pre-wrap; word-break: break-word; }
.turn.collapsed .turn-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; opacity: 0.8; }
.turn-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.turn.collapsed .turn-body { display: none; }

/* ---- rendered markdown (assistant output) ---- */
.md { white-space: normal; overflow-wrap: break-word; } /* wrap long URLs/tokens instead of overflowing */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 var(--sp-2); }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: var(--sp-3) 0 var(--sp-2); line-height: 1.3; color: var(--text); }
.md h5, .md h6 { font-size: 0.95em; color: var(--dim); }
.md h1 { font-size: 1.35em; color: var(--accent); border-bottom: 1px solid var(--border2); padding-bottom: var(--sp-1); }
.md h2 { font-size: 1.2em; color: var(--accent); }
.md h3 { font-size: 1.08em; }
.md h4 { font-size: 1em; color: var(--dim); }
.md strong { color: #fff; font-weight: 700; }
.md em { font-style: italic; }
.md del { color: var(--muted); }
.md a { color: var(--cyan); text-decoration: underline; }
.md ul, .md ol { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); }
.md li { margin: 2px 0; }
.md li::marker { color: var(--accent); }
.md li > ul, .md li > ol { margin: 2px 0 0; } /* tighten nested lists */
/* GFM task lists: drop the bullet so it's just the checkbox + text */
.md li:has(> input[type='checkbox']) { list-style: none; margin-left: calc(-1 * var(--sp-4)); }
.md li > input[type='checkbox'] { margin: 0 var(--sp-2) 0 0; accent-color: var(--accent); }
.md blockquote { margin: 0 0 var(--sp-2); padding: 2px 0 2px var(--sp-3); border-left: 2px solid var(--border2); color: var(--dim); }
.md hr { border: 0; border-top: 1px dashed var(--border2); margin: var(--sp-3) 0; }
/* inline code */
.md code { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 0.92em; color: var(--cyan); overflow-wrap: anywhere; } /* break long inline tokens */
/* fenced code block — fixed dark so syntax highlighting reads in every theme */
.md pre { background: #0d1117; border: 1px solid #30363d; border-radius: var(--r); padding: var(--sp-3); margin: 0 0 var(--sp-2); overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; color: #c9d1d9; font-size: var(--fs-sm); }

/* copy buttons on code blocks + tool output (hover to reveal) */
pre[data-copy] { position: relative; }
.copy-btn {
  position: absolute; top: 4px; right: 4px;
  height: auto; width: auto; min-width: 0; padding: 1px 7px;
  font-size: var(--fs-xs); line-height: 1.6;
  color: var(--muted); background: var(--chrome); border: 1px solid var(--border2); border-radius: 3px;
  opacity: 0; transition: opacity 0.12s; cursor: pointer;
}
pre[data-copy]:hover .copy-btn, .copy-btn:focus-visible { opacity: 0.9; }
.copy-btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); opacity: 1; }
.copy-btn.ok { color: var(--green); border-color: var(--green); opacity: 1; }
.copy-btn.ok:hover { background: transparent; color: var(--green); }
/* highlight.js token palette (github-dark-ish) */
.hljs-comment, .hljs-quote { color: #8b949e; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-type, .hljs-meta-keyword { color: #ff7b72; }
.hljs-string, .hljs-attr, .hljs-template-string, .hljs-regexp { color: #a5d6ff; }
.hljs-number, .hljs-literal, .hljs-meta { color: #79c0ff; }
.hljs-title, .hljs-title\.function_, .hljs-section { color: #d2a8ff; }
.hljs-built_in, .hljs-name, .hljs-attribute, .hljs-symbol, .hljs-bullet { color: #ffa657; }
.hljs-variable, .hljs-params, .hljs-property { color: #c9d1d9; }
.hljs-deletion { color: #ffa198; }
.hljs-addition { color: #7ee787; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
/* tables */
.md table { border-collapse: collapse; margin: 0 0 var(--sp-2); font-size: var(--fs-sm); display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { border: 1px solid var(--border2); padding: var(--sp-1) var(--sp-3); text-align: left; }
.md th { background: var(--chrome); color: var(--accent); font-weight: 700; }
.md tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
.md img { max-width: 100%; border-radius: var(--r); }
/* KaTeX math: let wide display equations scroll rather than overflow the pane */
.md .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; margin: var(--sp-2) 0; }
.md .katex { font-size: 1.02em; }

/* interactive prompt cards */
.prompt { background: var(--bg2); border: 1px solid var(--accent); border-radius: var(--r-lg); padding: var(--sp-4); }
.prompt h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 700; color: var(--accent); }
.prompt h3::before { content: '? '; color: var(--green); }
.prompt .sub { color: var(--muted); font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.prompt pre {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: var(--sp-3);
  margin: 0;
  overflow-x: auto;
  max-height: 320px;
  font-size: var(--fs-sm);
}
.prompt .row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.prompt.answered { border-color: var(--border2); opacity: 0.5; }
.qgroup { margin-bottom: var(--sp-4); }
.qgroup .chip { display: inline-block; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--r); padding: 2px var(--sp-2); font-size: var(--fs-xs); color: var(--cyan); margin-bottom: var(--sp-2); }
.qopt { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border2); border-radius: var(--r); margin: var(--sp-1) 0; cursor: pointer; }
.qopt:hover { border-color: var(--accent); background: var(--bg); }
.qopt input { accent-color: var(--accent); margin-top: 3px; flex: none; }
.qopt .label { font-weight: 500; }
.qopt .desc { color: var(--muted); font-size: var(--fs-base); }
.qother { width: 100%; height: var(--ctrl); margin-top: var(--sp-1); padding: 0 var(--sp-3); background: var(--bg); color: var(--text); border: 1px dashed var(--border2); border-radius: var(--r); font: inherit; caret-color: var(--accent); }
.qother:focus { outline: none; border-style: solid; border-color: var(--accent); }
.qother::placeholder { color: var(--muted); }
.prompt.needs-answer { border-color: var(--red); }
.prompt.needs-answer::after { content: 'select an option for each question'; display: block; margin-top: var(--sp-2); color: var(--red); font-size: var(--fs-sm); }

/* offline overlay: broker is down */
.pane-offline {
  position: absolute;
  inset: var(--tabbar-h) 0 0 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  text-align: center;
  background: var(--bg); /* fallback */
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(1px);
}
.po-icon { font-size: 40px; color: var(--red); line-height: 1; }
.po-title { font-size: var(--fs-lg); font-weight: 700; color: var(--red); }
.po-sub { font-size: var(--fs-base); color: var(--dim); max-width: 42ch; line-height: 1.7; }
.po-sub code { color: var(--cyan); }

/* lock overlay: input + pane locked */
.pane-lock {
  position: absolute;
  inset: var(--tabbar-h) 0 0 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--muted);
  background: var(--bg2); /* fallback */
  background: color-mix(in srgb, var(--bg2) 55%, transparent);
  backdrop-filter: blur(1px);
  cursor: not-allowed;
}
.pane-lock svg { width: 34px; height: 34px; }
.pl-text { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 2px; }
.iconbtn.lock.locked { color: var(--accent); border-color: var(--accent); }

/* jump-to-latest button (shown when scrolled up) */
.jump {
  position: absolute;
  right: var(--sp-4);
  bottom: 76px;
  z-index: 5;
  height: var(--ctrl);
  background: var(--bg2);
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.jump::before, .jump::after { content: none; }
.jump:hover { background: var(--accent); color: var(--bg); }

/* in-transcript search bar (Cmd/Ctrl+F) */
.search {
  position: absolute;
  top: calc(var(--tabbar-h) + var(--sp-2));
  right: var(--sp-4);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  background: var(--chrome);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.search.hidden { display: none; }
.search-input { height: var(--ctrl); width: 180px; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r); padding: 0 var(--sp-2); color: var(--text); font: var(--fs-sm) var(--mono); }
.search-input:focus { outline: none; border-color: var(--accent); }
.search-count { min-width: 52px; text-align: center; font-size: var(--fs-xs); }
.search .iconbtn { width: var(--ctrl); }
mark.search-hit { background: rgba(217, 119, 87, 0.32); color: inherit; border-radius: 2px; }
mark.search-hit.current { background: var(--accent); color: var(--bg); }

/* composer — shell input line */
.composer {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg2);
  border-top: 1px solid var(--border);
}
/* The left chevron is now the Spliternal terminal button (sized like .attach). */
.composer .term { height: var(--ctrl-lg); width: var(--ctrl-lg); flex: none; color: var(--accent); }
.composer .term.on { background: var(--chrome); border-color: var(--accent); }
.composer textarea {
  flex: 1;
  resize: none;
  min-height: var(--ctrl-lg);
  max-height: 160px;
  padding: 8px var(--sp-3);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  font: inherit;
  line-height: 1.5;
  caret-color: var(--accent);
}
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer textarea::placeholder { color: var(--muted); }
/* slimmer scrollbar inside the prompt box */
.composer textarea { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
.composer textarea::-webkit-scrollbar { width: 5px; }
.composer textarea::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.composer textarea::-webkit-scrollbar-track { background: transparent; }
.composer .send { height: var(--ctrl-lg); flex: none; }
.composer .send.btw { color: var(--accent); border-color: var(--accent); } /* mid-turn "by the way" send */

/* Clickable media filename in a reply → click to preview (file.preview). */
.filelink { color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.filelink:hover { text-decoration-style: solid; }
.composer .attach { height: var(--ctrl-lg); width: var(--ctrl-lg); flex: none; }
.composer .mic { height: var(--ctrl-lg); width: var(--ctrl-lg); flex: none; }
.composer .mic.on { color: var(--red); border-color: var(--red); animation: blink 1.1s steps(2) infinite; } /* recording */

/* Spliternal: terminal split below the chat (chat = .stream above, shell = .term-wrap below). */
.term-split { flex: none; height: 7px; background: var(--bg2); border-top: 1px solid var(--border); cursor: row-resize; position: relative; }
.term-split::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 3px; border-radius: 2px; background: var(--border2); }
.term-split:hover::before { background: var(--accent); }
.term-split.hidden, .term-wrap.hidden { display: none; }
.term-wrap { flex: none; height: 300px; min-height: 80px; display: flex; flex-direction: column; background: var(--bg); border-top: 1px solid var(--border); }
.term-head { flex: none; display: flex; align-items: center; gap: var(--sp-2); padding: 4px var(--sp-3); background: var(--bg2); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.term-head .term-title { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-head .iconbtn { width: var(--ctrl); height: var(--ctrl); min-height: 0; }
.term-host { flex: 1; min-height: 0; overflow: hidden; padding: 2px 4px; }
.term-host .xterm, .term-host .xterm-viewport { background: transparent !important; }
body.row-resizing { cursor: row-resize; user-select: none; }

/* image attachments: staged tray + sent-message thumbnails + drop overlay */
.img-tray { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--bg2); }
.img-tray.hidden { display: none; }
.img-chip { position: relative; width: 56px; height: 56px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border2); }
.img-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-x { position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; min-width: 0; padding: 0; border: 0; border-radius: 3px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10px; line-height: 1; }
.img-x:hover { background: var(--red); }
.img-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); align-items: center; }
.img-thumb { max-width: 220px; max-height: 180px; border-radius: var(--r); border: 1px solid var(--border2); }
/* file (non-image) attachment chips — in the tray and under a sent prompt */
.file-chip { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 240px; padding: 5px var(--sp-2); border: 1px solid var(--border2); border-radius: var(--r); background: var(--bg); color: var(--text); font-size: var(--fs-sm); }
.file-chip .file-ic { color: var(--accent); flex: none; display: inline-flex; }
.file-chip .file-meta { display: flex; flex-direction: column; min-width: 0; }
.file-chip .file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-chip .file-size { font-size: 10px; }
.file-chip .img-x { position: static; width: 16px; height: 16px; background: transparent; color: var(--muted); flex: none; }
.file-chip .img-x:hover { background: var(--red); color: #fff; }
.file-chip.sent { background: var(--bg2); }
.drop-hint { position: absolute; inset: var(--sp-3); z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(12, 14, 18, 0.85); border: 2px dashed var(--accent); border-radius: var(--r-lg); color: var(--accent); font-size: var(--fs-lg); pointer-events: none; }
.drop-hint.hidden { display: none; }

/* @-mention file autocomplete popup (anchored above the composer) */
.mention { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--ctrl-lg) + var(--sp-5)); z-index: 8; max-height: 240px; overflow-y: auto; background: var(--chrome); border: 1px solid var(--border2); border-radius: var(--r); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.mention.hidden { display: none; }
.mention-item { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; }
.mention-item.active { background: var(--accent); color: var(--bg); }
.mention-item.active .m-dir { color: var(--bg); opacity: 0.7; }
.mention-item .m-base { color: inherit; }
.mention-item .m-dir { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mention-item .m-desc { color: var(--muted); margin-left: auto; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); }
.mention-item.active .m-desc { color: var(--bg); opacity: 0.75; }
.mention-item.muted { color: var(--muted); cursor: default; }

/* shared assets (send_file) */
.asset { display: inline-flex; flex-direction: column; gap: var(--sp-1); max-width: 100%; margin: var(--sp-1) 0 var(--sp-2); padding: var(--sp-2); background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r); }
.asset-head { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); }
.asset-name { color: var(--cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.asset-size { font-size: var(--fs-xs); flex: none; }
.asset-img-wrap { position: relative; display: inline-block; max-width: 100%; }
.asset-img { max-width: min(420px, 100%); max-height: 320px; border-radius: var(--r); cursor: zoom-in; display: block; }
.asset-copy { position: absolute; top: var(--sp-1); right: var(--sp-1); opacity: 0; transition: opacity 0.12s; background: rgba(20, 22, 28, 0.85); color: #fff; border: 0; border-radius: 3px; padding: 1px var(--sp-2); font-size: var(--fs-xs); }
.asset-img-wrap:hover .asset-copy { opacity: 1; }
.asset-video { max-width: min(480px, 100%); max-height: 360px; border-radius: var(--r); display: block; background: #000; }
.asset-file { color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r); padding: var(--sp-1) var(--sp-3); align-self: flex-start; }
.asset-file:hover { background: var(--accent); color: var(--bg); }
/* inline document viewers (PDF / text / code / CSV / markdown) */
.asset-doc { width: min(560px, 100%); border: 1px solid var(--border2); border-radius: var(--r); overflow: hidden; background: var(--bg); }
.asset-pdf { width: 100%; height: 460px; border: 0; display: block; background: #fff; }
.asset-viewer-bar { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 3px var(--sp-2); background: var(--bg2); border-top: 1px solid var(--border); }
.asset-open { color: var(--cyan); text-decoration: none; font-size: var(--fs-sm); }
.asset-open:hover { text-decoration: underline; }
.asset-text-body { max-height: 420px; overflow: auto; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.asset-text-body pre { margin: 0; background: none; border: 0; }
.asset-text-body.md { line-height: 1.5; }
.asset-csv { border-collapse: collapse; font-size: var(--fs-sm); }
.asset-csv th, .asset-csv td { border: 1px solid var(--border2); padding: 2px var(--sp-2); text-align: left; white-space: nowrap; }
.asset-csv th { background: var(--chrome); color: var(--accent); position: sticky; top: 0; }
/* send_files gallery — thumbnail grid */
.gallery { max-width: min(560px, 100%); margin: var(--sp-1) 0 var(--sp-2); padding: var(--sp-2); background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r); }
.gallery-cap { font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.gallery-head { font-size: var(--fs-xs); margin-bottom: var(--sp-1); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-1); }
.gallery-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--border2); cursor: pointer; background: #000; display: block; }
.gallery-thumb:hover { border-color: var(--accent); }
.gallery-thumb.file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--bg); color: var(--dim); text-decoration: none; padding: var(--sp-1); overflow: hidden; }
.gallery-thumb.file .gt-ic { color: var(--accent); }
.gallery-thumb.file .gt-name { font-size: 10px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* Artifacts panel — every file shared in the session */
.iconbtn.artifacts { position: relative; overflow: visible; }
.art-count { position: absolute; top: -3px; right: -3px; min-width: 13px; height: 13px; padding: 0 3px; font-size: 9px; line-height: 13px; text-align: center; background: var(--accent); color: var(--bg); border-radius: 7px; }
.artifacts-panel { position: absolute; inset: 0; z-index: 6; background: var(--bg); display: flex; flex-direction: column; }
.artifacts-panel.hidden { display: none; }
.ap-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); background: var(--bg2); }
.ap-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--sp-2); padding: var(--sp-3); align-content: start; }
.ap-item { display: flex; flex-direction: column; gap: 3px; text-decoration: none; cursor: pointer; }
.ap-item img, .ap-item video, .ap-item .ap-ic { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--border2); background: #000; }
.ap-item .ap-ic { display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--bg2); }
.ap-item:hover img, .ap-item:hover video, .ap-item:hover .ap-ic { border-color: var(--accent); }
.ap-name { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.asset-cap { font-size: var(--fs-sm); color: var(--dim); }
.asset-prog { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.asset-bar { height: 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border2); overflow: hidden; }
.asset-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s ease; }
.asset-pct { font-size: var(--fs-xs); }
.asset-gone { font-size: var(--fs-sm); font-style: italic; }

/* fullscreen asset viewer */
.lightbox { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.88); padding: var(--sp-4); }
.lightbox.hidden { display: none; }
.lb-media { max-width: 96vw; max-height: 92vh; border-radius: var(--r); }
.lb-close { position: fixed; top: var(--sp-3); right: var(--sp-3); width: var(--ctrl-lg); height: var(--ctrl-lg); border: 0; background: rgba(20, 22, 28, 0.8); color: #fff; border-radius: 50%; font-size: var(--fs-lg); }
.lb-close::before, .lb-close::after { content: none; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; background: rgba(20, 22, 28, 0.6); color: #fff; font-size: 30px; line-height: 1; border-radius: var(--r); }
.lb-nav::before, .lb-nav::after { content: none; }
.lb-nav:hover { background: rgba(20, 22, 28, 0.9); }
.lb-prev { left: var(--sp-3); }
.lb-next { right: var(--sp-3); }
.lb-count { position: fixed; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); color: #fff; background: rgba(20, 22, 28, 0.7); padding: 2px var(--sp-3); border-radius: var(--r); font-size: var(--fs-sm); }

/* command palette (Cmd/Ctrl+K) */
#palette { align-items: flex-start; }
#palette > .term-window { margin: 12vh auto auto; } /* anchor near the top (beats .overlay > .term-window) */
.palette-window { width: min(560px, 94vw); display: flex; flex-direction: column; overflow: hidden; }
.palette-input-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.palette-input-row .prompt-sigil { color: var(--accent); }
#paletteInput { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font: var(--fs-lg) var(--mono); }
.palette-list { list-style: none; margin: 0; padding: var(--sp-1); max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.pal-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r); cursor: pointer; }
.pal-item.active { background: var(--accent); color: var(--bg); }
.pal-item.active .pal-hint { color: var(--bg); opacity: 0.75; }
.pal-label { white-space: nowrap; }
.pal-hint { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-empty { padding: var(--sp-3); }

/* empty state */
.empty { position: absolute; inset: var(--tabbar-h) 0 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.empty pre { font-size: var(--fs-base); text-align: center; }

/* ============================== toasts =============================== */
.toasts { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 200; display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(380px, 92vw); pointer-events: none; }
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--sp-2);
  background: var(--chrome); border: 1px solid var(--border2); border-left: 3px solid var(--border2);
  border-radius: var(--r); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); color: var(--text); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: toast-in 0.18s ease-out;
}
.toast.out { opacity: 0; transform: translateX(8px); transition: opacity 0.2s, transform 0.2s; }
.toast.error { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--green); }
.toast.info { border-left-color: var(--cyan); }
.toast-msg { flex: 1; line-height: 1.4; word-break: break-word; }
.toast-x { flex: none; height: auto; width: auto; min-width: 0; padding: 0 2px; border: 0; background: transparent; color: var(--muted); font-size: var(--fs-sm); }
.toast-x:hover { background: transparent; color: var(--text); }
@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* =========================== picker overlay =========================== */
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; z-index: 100; padding: var(--sp-4); overflow-y: auto; }
.overlay > .term-window { margin: auto; } /* center, but scroll if taller than viewport */
.picker-window { width: min(820px, 94vw); max-height: 80vh; display: flex; flex-direction: column; }
.picker-body { padding: var(--sp-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
#sessionList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
#sessionList li {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  cursor: pointer;
  overflow: hidden;
}
.session-head {
  display: grid;
  grid-template-columns: 22px 80px 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  min-height: var(--ctrl-lg);
  padding: var(--sp-2) var(--sp-3);
}
.scaret { width: 20px; height: 20px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--green); transition: transform 0.12s ease; }
.scaret::before, .scaret::after { content: none; }
.scaret:hover { background: var(--chrome); color: var(--accent); } /* subtle bg — keep the caret visible (not accent-on-accent) */
.scaret.open { transform: rotate(90deg); }
.session-detail { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px dashed var(--border2); background: var(--bg2); display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
.session-detail.hidden { display: none; }
.sd-row { display: grid; grid-template-columns: 74px 1fr; gap: var(--sp-2); align-items: baseline; }
.sd-k { color: var(--muted); }
.sd-v { color: var(--text); word-break: break-all; }
#sessionList li:hover:not(.muted) { border-color: var(--accent); }
#sessionList li.muted { cursor: default; border-style: dashed; padding: var(--sp-3); line-height: 1.6; }
#sessionList li.is-open { opacity: 0.65; }
#sessionList .sid { color: var(--cyan); }
#sessionList .scwd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sessionList .smeta { font-size: var(--fs-sm); white-space: nowrap; }
#sessionList .badge { color: var(--green); border: 1px solid var(--green); border-radius: 3px; padding: 1px var(--sp-2); font-size: var(--fs-xs); }

/* Recent (resumable) sessions in the launch row. */
.recent-list { list-style: none; padding: 0; margin: var(--sp-1) 0 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.recent-list:empty { margin: 0; }
.recent-list li { display: grid; grid-template-columns: 70px 1fr auto auto; gap: var(--sp-3); align-items: center; min-height: var(--ctrl-md, var(--ctrl-lg)); padding: var(--sp-1) var(--sp-3); background: var(--bg); border: 1px solid var(--border2); border-radius: var(--r); font-size: var(--fs-sm); }
.recent-list .sid { color: var(--cyan); }
.recent-list .scwd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-list .smeta { white-space: nowrap; font-size: var(--fs-xs); }
.recent-actions { display: inline-flex; gap: var(--sp-2); }
.recent-actions button { padding: 1px var(--sp-2); font-size: var(--fs-xs); }
.picker-actions { display: flex; justify-content: flex-end; }
.launch-row { display: flex; align-items: center; gap: var(--sp-2); height: var(--ctrl-lg); padding: 0 var(--sp-3); background: var(--bg); border: 1px solid var(--border2); border-radius: var(--r); }
.launch-row:focus-within { border-color: var(--accent); }
.launch-row .prompt-sigil { color: var(--green); white-space: nowrap; }
.launch-row input { flex: 1; height: 100%; background: transparent; border: 0; color: var(--text); font: inherit; caret-color: var(--accent); }
.launch-row input:focus { outline: none; }
.launch-row button { flex: none; }
.launch-fresh { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--muted); cursor: pointer; }
.launch-fresh input { flex: none; width: auto; height: auto; cursor: pointer; }
#launchMsg { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); min-height: 1.2em; }

/* =========================== keyboard shortcuts =========================== */
.shortcuts-window { width: min(420px, 94vw); }
.shortcuts-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.sc-row kbd { flex: none; font-size: var(--fs-sm); padding: 2px 8px; }
.sc-row span { color: var(--dim); font-size: var(--fs-sm); }

/* =========================== confirm dialog =========================== */
.confirm-window { width: min(440px, 92vw); }
.confirm-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.confirm-msg { margin: 0; color: var(--text); line-height: 1.6; }
.confirm-msg::before { content: '? '; color: var(--green); font-weight: 700; }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* =========================== settings panel =========================== */
.settings-window { width: min(640px, 96vw); }
.settings-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
/* Sidebar-categorized settings */
.settings-layout { display: flex; align-items: stretch; min-height: 320px; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border-right: 1px solid var(--border); flex: 0 0 132px; }
.snav { justify-content: flex-start; text-align: left; height: auto; background: none; border: none; color: var(--muted); padding: var(--sp-2) var(--sp-3); border-radius: var(--r); cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.snav::before, .snav::after { content: none; }
.snav:hover { color: var(--text); background: var(--bg2); }
.snav.active { color: var(--accent); background: var(--bg2); }
.settings-content { flex: 1 1 auto; min-width: 0; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); overflow-y: auto; max-height: min(60vh, 460px); }
.settings-cat { display: flex; flex-direction: column; gap: var(--sp-1); }
.settings-cat.hidden { display: none; }
@media (max-width: 560px) {
  .settings-layout { flex-direction: column; }
  .settings-nav { flex-direction: row; flex: none; border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto; }
  .settings-content { max-height: 56vh; }
}
.set-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.set-head { color: var(--accent); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--sp-1); }
.set-head::before { content: '# '; color: var(--muted); }
.phost, .shost { color: var(--accent); opacity: 0.85; }
.allow-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.allow-tool { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border: 1px solid var(--border2); border-radius: var(--r); font-size: var(--fs-sm); cursor: pointer; user-select: none; }
.allow-tool input { accent-color: var(--accent); }
.allow-tool:has(input:checked) { border-color: var(--accent); color: var(--accent); }
/* "Allow all" sits on its own line above the per-tool chips. */
.allow-tool.allow-all { flex-basis: 100%; font-weight: 600; padding-bottom: var(--sp-2); border: 0; border-bottom: 1px solid var(--border2); border-radius: 0; }
.allow-tool.allow-all:has(input:checked) { color: var(--accent); }
.set-row[hidden] { display: none; }
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--ctrl-lg);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  cursor: pointer;
}
.set-label { display: flex; flex-direction: column; gap: 2px; }
.set-label small { color: var(--muted); font-size: var(--fs-xs); }
.set-row.col { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.tg-input { height: var(--ctrl); padding: 0 var(--sp-3); background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: var(--r); font: inherit; caret-color: var(--accent); }
.tg-input:focus { outline: none; border-color: var(--accent); }
.tg-input:disabled { opacity: 0.5; }
.tg-actions { display: flex; gap: var(--sp-2); flex: none; }
#tgStatus { font-size: var(--fs-sm); }
.tg-hint { margin: 0; font-size: var(--fs-xs); line-height: 1.6; }
/* custom dropdown (replaces native <select>) */
.select { position: relative; flex: none; }
.select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--ctrl);
  min-width: 130px;
  padding: 0 var(--sp-3);
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--r);
}
.select-trigger::before, .select-trigger::after { content: none; }
.select-trigger:hover { background: var(--bg2); color: var(--text); border-color: var(--accent); }
.select.open .select-trigger { border-color: var(--accent); }
.select-caret { color: var(--dim); font-size: var(--fs-lg); line-height: 1; transition: transform 0.15s; }
.select.open .select-caret { transform: rotate(180deg); }
.select-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 200;
}
.select-opt { padding: var(--sp-1) var(--sp-3); border-radius: 3px; cursor: pointer; white-space: nowrap; }
.select-opt:hover { background: var(--chrome); }
.select-opt.selected { color: var(--accent); }
.select-opt.selected::before { content: '› '; }
/* let dropdowns escape the window instead of being clipped */
.settings-window { overflow: visible; }
.settings-window .titlebar { border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* terminal-style toggle switch */
.switch { appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; flex: none;
  width: 40px; height: 22px; border: 1px solid var(--border2); border-radius: 999px; background: var(--bg2); position: relative; transition: background 0.15s, border-color 0.15s; }
.switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s; }
.switch:checked { background: rgba(217, 119, 87, 0.2); border-color: var(--accent); }
.switch:checked::before { transform: translateX(18px); background: var(--accent); }

/* slim terminal scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r); }
::-webkit-scrollbar-thumb:hover { background: #333a47; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================== responsive ============================== */
@media (max-width: 680px) {
  /* iOS auto-zooms when a focused field is under 16px — pin form controls to
     16px so typing never zooms the page (keeps pinch-zoom available). */
  input, textarea, select, .composer textarea, .tg-input, .search-input, #paletteInput { font-size: 16px !important; }

  /* the app owns the viewport; only the transcript scrolls (header/composer pinned) */
  html, body { overflow: hidden; height: 100%; }

  /* overlays fill the screen */
  .overlay { padding: 0; }
  .overlay > .term-window,
  .picker-window, .settings-window, .confirm-window {
    width: 100% !important;
    min-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .login-window { width: 100% !important; margin: 0; min-height: 100vh; border-radius: 0; }

  /* roomier touch targets */
  button { min-height: 38px; }
  .qopt { padding: var(--sp-3); }
  #sessionList .session-head { padding: var(--sp-3); }
  .jump { bottom: 84px; }
}

/* ===== mobile swipe carousel (class toggled by JS at the 680px breakpoint) ===== */
/* Fill the *visual* viewport (set by JS from window.visualViewport) so the
   header stays pinned at the top and the composer above the keyboard — only the
   transcript scrolls. Falls back to dvh/vh before the JS measure lands. */
#app.mobile { height: var(--vvh, 100dvh); }
#app.mobile > .tabbar { display: none; }              /* tabs/controls move into the control pane + dots */
#app.mobile #panes { display: block; position: relative; }  /* #panes is the fixed clipping viewport… */
#carouselTrack { display: none; }
#app.mobile #carouselTrack { display: flex; flex-direction: row; position: absolute; inset: 0; will-change: transform; } /* …an absolutely-filled track holds the row (definite height → only .stream scrolls) */
#app.mobile .pane { display: flex !important; flex: 0 0 100%; width: 100%; height: 100%; } /* every pane fullscreen, laid in a row */
#app.mobile #panes .splitter { display: none; }
#app.mobile #empty { display: none; }
#app:not(.mobile) #mobileDots,
#app:not(.mobile) #carouselTrack,
#app:not(.mobile) #mobileControl { display: none !important; }

/* page dots — pinned at the bottom centre, clear of the pane's top status bar
   (so they're not mistaken for a second indicator next to the status pill) */
#mobileDots {
  position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 6px; max-width: 64vw; overflow-x: auto;
  padding: 5px 10px; background: rgba(12, 14, 18, 0.72); border: 1px solid var(--border); border-radius: 999px;
  pointer-events: auto;
}
#mobileDots::-webkit-scrollbar { display: none; }
.mdot { width: 7px; height: 7px; min-height: 0; min-width: 0; padding: 0; flex: none; border: 0; border-radius: 50%; background: var(--border2); }
.mdot::before, .mdot::after { content: none; }        /* drop the terminal-style [ ] brackets every button gets */
.mdot.ctrl { border-radius: 2px; }                    /* square marker for the control pane */
.mdot.on { background: var(--accent); }

/* control pane (account · theme · settings · new session) */
.control-pane .control-body { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-6); }
.ctrl-add { height: var(--ctrl-lg); font-size: var(--fs-lg); }
.ctrl-section { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.ctrl-head { color: var(--accent); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; }
.ctrl-head::before { content: '# '; color: var(--muted); }
.ctrl-email { font-size: var(--fs-sm); }
.ctrl-themes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ctrl-theme { text-transform: capitalize; }
.ctrl-theme.active { border-color: var(--accent); color: var(--accent); }

/* ============================== themes ============================== */
/* Each theme just re-declares the palette tokens; everything else composes
   from them, so the whole app re-skins by switching body[data-theme]. */
body[data-theme='light'] {
  --bg: #f4f5f7; --bg2: #ffffff; --chrome: #e8eaee; --tab: #e2e5ea;
  --text: #1b1e26; --dim: #4a5160; --muted: #8a92a2;
  --accent: #c2410c; --cyan: #0e7490; --green: #3f7e2f; --red: #c0392b;
  --border: #dde0e6; --border2: #c4cad4;
}
body[data-theme='light']::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0 1px, transparent 1px 3px); }
body[data-theme='light'] .md strong { color: #000; }

body[data-theme='amber'] {
  --bg: #0a0700; --bg2: #100b02; --chrome: #160e02; --tab: #120c02;
  --text: #ffb000; --dim: #c98a00; --muted: #7a5400;
  --accent: #ffcb47; --cyan: #ffc24a; --green: #ffb000; --red: #ff7b3d;
  --border: #2a1d00; --border2: #3f2c00;
}
body[data-theme='amber'] .md strong { color: #ffe08a; }

body[data-theme='matrix'] {
  --bg: #000400; --bg2: #020a04; --chrome: #04130a; --tab: #030f07;
  --text: #46d160; --dim: #2f9a45; --muted: #1f6630;
  --accent: #6ee787; --cyan: #39d98a; --green: #46d160; --red: #ff6b6b;
  --border: #0d2a16; --border2: #154023;
}
body[data-theme='matrix'] .md strong { color: #b6ffc8; }