:root {
  --bg: #0a0a0a;
  --panel: #111111;
  --tab-active: #1c1c1e;
  --tab-border: #3a3a3a;
  --text: #ededed;
  --text-2: #a3a3a3;
  --muted: #737373;
  --accent: #5b8ef7;
  --line: #262626;
  --line-soft: #1d1d1d;
  --amber: #f59e0b;
  --amber-soft: #d97706;
  --green: #4ade80;
  --magenta: #c084fc;
  --red: #f87171;
  --cyan: #67e8f9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.hidden { display: none !important; }

/* ─── auth ─── */
.auth {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #0d0d0d;
}
.auth form {
  background: #111;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 300px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.auth-brand { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.auth-mode { margin: 0; color: var(--muted); font-size: 12px; font-family: "Geist Mono", monospace; }
.auth input {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 16px;
  font-family: "Geist Mono", monospace;
}
.auth input:focus { outline: none; border-color: var(--accent); }
.auth button {
  padding: 10px; border-radius: 8px; border: none; background: var(--accent);
  color: #0a0a0a; font-weight: 600; font-size: 14px; cursor: pointer;
}
.auth-msg { color: var(--red); min-height: 16px; font-size: 12px; margin: 0; }

/* ─── app shell ─── */
.app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
.shell { flex: 1; display: flex; min-height: 0; }

/* ─── winchrome ─── */
.winchrome {
  height: 30px;
  background: #0d0d0d;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 12px;
  user-select: none;
  flex-shrink: 0;
  position: relative;
}
.winchrome .wc-tools { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.winchrome .wc-tools .btn {
  width: 22px; height: 22px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.winchrome .wc-tools .btn:hover { background: #1a1a1a; color: var(--text-2); }
.winchrome .wc-title {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font-size: 12px; font-weight: 500; color: var(--text);
  gap: 6px;
}
.winchrome .wc-spacer { flex: 1; }

/* ─── sidebar ─── */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #0c0c0c;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: width .2s ease, margin-left .2s ease;
}
.sidebar.collapsed { width: 0; border-right: none; overflow: hidden; }
/* right sidebar variant: mirrors opencode TUI's right info panel via the
   /api/sessions/:id/dp/* proxy. Mirrors the left sidebar geometry but with the
   border on the opposite edge and a narrower default width. */
.sidebar.sidebar-right {
  width: 240px;
  border-right: none;
  border-left: 1px solid var(--line);
  overflow-y: auto;   /* Infra + usage can exceed viewport → scroll, don't clip */
  overflow-x: hidden;
}
.sidebar.sidebar-right.collapsed { width: 0; border-left: none; overflow: hidden; }
.sidebar-right-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-2);
}
.sidebar-right-title { font-weight: 500; letter-spacing: 0.2px; }
.sidebar-right-state {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #1a1a1a;
  color: #8a8a8a;
}
.sidebar-right-state[data-state="live"] { background: #0d2818; color: #7fd89b; }
.sidebar-right-state[data-state="error"] { background: #2a1414; color: #e07b7b; }
.sidebar-right-state[data-state="n/a"] { background: #1a1a1a; color: #5a5a5a; }
.dp-section {
  padding: 10px 14px;
  border-bottom: 1px solid #161616;
}
.dp-section:last-child { border-bottom: none; }
.dp-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a8a8a;
  margin-bottom: 6px;
}
.dp-section-body {
  font-size: 12px;
  color: var(--text-2);
  word-break: break-all;
  line-height: 1.5;
  font-family: "Geist Mono", monospace;
}
.dp-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 1px 0;
}
.dp-row .dp-k { color: #8a8a8a; }
.dp-row .dp-v { color: var(--text); }
.dp-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); margin-right: 6px; vertical-align: middle;
}
.dp-dot.ok { background: var(--green); }
.dp-dot.warn { background: var(--amber); }
.dp-dot.bad { background: #e07b7b; }
.sidebar-list { flex: 1; overflow-y: auto; padding: 6px 0 8px; }
.sidebar-list::-webkit-scrollbar { width: 6px; }
.sidebar-list::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 6px; }
.sidebar-list::-webkit-scrollbar-track { background: transparent; }

.ws {
  padding: 8px 12px 9px 28px;
  position: relative;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.ws:hover { background: #131313; }
.ws.active { background: #1d4ed8; }
.ws.active * { color: #f1f5f9 !important; }
.ws.active .ws-meta { color: #c7d6f5 !important; }
.ws.active .ws-path { color: #a4bef0 !important; }

.ws-glyph {
  position: absolute;
  left: 10px; top: 11px;
  width: 12px; height: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.ws-glyph.run { color: var(--green); }
.ws-glyph.alert { color: var(--amber); animation: glyphPulse 1.4s ease-in-out infinite; }
.ws-glyph.merged { color: var(--magenta); }
.ws-glyph.idle { color: var(--muted); }
.ws-glyph.dead { color: var(--red); }
.ws-glyph.session { color: var(--accent); }

.ws-section {
  padding: 8px 14px 4px;
  font-size: 10px; font-family: "Geist Mono", monospace;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
  user-select: none;
}
.ws-section-engine-claude { color: var(--amber); }
.ws-section-engine-opencode { color: var(--accent); }
.ws-section-engine-runpod { color: #5fd0a0; }

/* collapsible section headers (click to fold/unfold the group) */
.ws-section-toggle {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.ws-section-toggle:hover { color: var(--text); }
.ws-section-caret {
  display: inline-block; width: 9px; flex: none;
  font-size: 9px; line-height: 1; opacity: .7;
}
.ws-section-toggle:hover .ws-section-caret { opacity: 1; }

.fx-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.fx-modal.hidden { display: none; }
.fx-card {
  width: min(1100px, 100%); height: min(720px, 100%);
  background: #0c0c0c; border: 1px solid #2a2a2a; border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
}
.fx-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid #1f1f1f;
  font-size: 12px; color: var(--text);
}
.fx-head > span:first-child { font-weight: 600; }
.fx-path {
  flex: 1; min-width: 0; color: var(--muted); font-family: "Geist Mono", monospace; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-close {
  cursor: pointer; padding: 4px 6px; border-radius: 4px;
  color: var(--muted); display: inline-flex; align-items: center;
}
.fx-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
.fx-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 0;
}
.fx-tree {
  overflow: auto; border-right: 1px solid #1f1f1f; padding: 6px 0;
  font-size: 12px;
}
.fx-detail {
  overflow: auto; padding: 8px 14px;
  font-size: 12px;
}
.fx-row-wrap { display: block; }
.fx-row {
  width: 100%; text-align: left; background: transparent; border: 0;
  padding: 4px 10px 4px calc(8px + 14px * var(--fx-depth, 0));
  color: var(--text); cursor: pointer; font: inherit;
  display: grid; grid-template-columns: 14px 1fr auto; gap: 6px; align-items: center;
}
.fx-row:hover { background: #131313; }
.fx-row[data-active="true"] { background: #1d4ed8; color: #f1f5f9; }
.fx-row:disabled { color: var(--muted); cursor: not-allowed; opacity: .55; }
.fx-row-glyph { color: var(--muted); font-family: "Geist Mono", monospace; font-size: 10px; text-align: center; }
.fx-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-row-badge {
  font-family: "Geist Mono", monospace; font-size: 9.5px;
  color: var(--muted); text-transform: uppercase;
}
.fx-row[data-active="true"] .fx-row-badge { color: #c7d6f5; }
.fx-row[data-kind="directory"] { font-weight: 500; }
.fx-row.is-cut { opacity: .5; }
.fx-children { display: block; }

.fx-detail-head {
  font-family: "Geist Mono", monospace; font-size: 11px; color: var(--muted);
  margin-bottom: 8px; word-break: break-all;
}
.fx-text {
  font-family: "Geist Mono", monospace; font-size: 12px;
  white-space: pre-wrap; word-wrap: break-word;
  color: var(--text); margin: 0;
}
.fx-preview-frame { display: flex; justify-content: center; min-height: 100%; }
.fx-preview-frame img { max-width: 100%; max-height: 600px; object-fit: contain; }
.fx-preview-frame iframe { width: 100%; height: 600px; border: 0; background: #fff; }
.fx-empty, .fx-error { padding: 16px; color: var(--muted); font-size: 12px; text-align: center; }
.fx-error { color: var(--amber); }

@media (max-width: 640px) {
  .fx-modal { padding: 0; }
  .fx-card { border-radius: 0; height: 100%; }
  .fx-body { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .fx-tree { border-right: 0; border-bottom: 1px solid #1f1f1f; }
}
.ws-slot-tag {
  position: absolute; right: 10px; top: 10px;
  font-family: "Geist Mono", monospace; font-size: 10px;
  color: var(--accent); background: rgba(91,142,247,.12);
  padding: 1px 5px; border-radius: 3px;
}
.ws.active .ws-slot-tag { color: #c7d6f5; background: rgba(255,255,255,.18); }
@keyframes glyphPulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }

.ws-name { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.3; }
.ws.active .ws-name { font-weight: 600; }
/* Session-folder rows: keep the title inline to the RIGHT of the ⋮ kebab instead
   of wrapping below it. .ws-name is a shared class (worker rows use it too), so
   this is scoped to session-folder rows only — worker rows are untouched. */
.ws[data-kind="session-folder"] .ws-name {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 26px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-meta { font-size: 11px; color: var(--text-2); line-height: 1.4; margin-top: 2px; word-break: break-word; }
.ws-path { font-size: 10.5px; color: var(--muted); margin-top: 3px; font-family: "Geist Mono", monospace; }

/* ─── inline rename ─── */
.ws { padding-right: 36px; } /* room for pencil */
.ws-rename-btn {
  position: absolute;
  right: 10px; top: 9px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.7;
}
.ws-rename-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); opacity: 1; }
.ws.active .ws-rename-btn { color: #c7d6f5; opacity: 0.85; }
.ws.active .ws-rename-btn:hover { color: #fff; background: rgba(255,255,255,0.15); opacity: 1; }
.ws-slot-tag ~ .ws-rename-btn { right: 36px; } /* shift left when slot tag present */

.ws-rename-input {
  display: flex; align-items: center; gap: 6px;
}
.ws-rename-input input {
  flex: 1; min-width: 0;
  padding: 2px 6px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 12.5px;
  outline: none;
}
.ws-rename-input input:disabled { opacity: 0.6; }
.ws-rename-counter {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  user-select: none;
}
.ws.active .ws-rename-counter { color: #c7d6f5 !important; }

.sidebar-foot {
  border-top: 1px solid var(--line);
  padding: 8px 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted);
}
/* Engine-create buttons: 2×2 grid (Claude/OpenCode · Runpod/Codex).
   The single flex row overflowed the sidebar width and pushed Codex
   off-screen (invisible + unclickable). */
#sidebar-foot-sessions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}
.sidebar-foot .ws-add {
  flex: 1; height: 26px; border-radius: 5px;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 8px;
  color: var(--text-2); cursor: pointer; border: 1px dashed #2a2a2a;
}
.sidebar-foot .ws-add:hover { background: #141414; color: var(--text); border-color: #3a3a3a; }
.sidebar-foot .ws-add-opencode { border-color: #2a3a52; color: #8aa8d0; }
.sidebar-foot .ws-add-opencode:hover { background: #0e1722; color: #b3cce7; border-color: #3a5278; }
.sidebar-foot .ws-add-runpod { border-color: #244a3a; color: #5fd0a0; }
.sidebar-foot .ws-add-runpod:hover { background: #0e1c16; color: #8fe6c0; border-color: #356b54; }
.sidebar-foot .ws-add-codex { border-color: #4a3a24; color: #d0a85f; }
.sidebar-foot .ws-add-codex:hover { background: #1c160e; color: #e6c88f; border-color: #6b5435; }

/* ─── main column ─── */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

/* ─── toolbar (slim, no traffic-lights, no tablist) ─── */
.toolbar {
  height: 36px;
  background: #0d0d0d;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 10px;
  user-select: none;
  flex-shrink: 0;
}

.slot-strip { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }

.slot-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 8px 0 6px;
  border-radius: 6px;
  font-size: 12px; color: var(--text-2);
  background: transparent; border: 1px solid var(--line);
  max-width: 240px; min-width: 0;
}
.slot-chip.focused { background: var(--tab-active); border-color: var(--accent); color: var(--text); }
.slot-chip.empty { opacity: .55; }
.slot-chip .slot-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  font-family: "Geist Mono", monospace; font-size: 11px;
  color: var(--muted); background: #1a1a1a;
  flex-shrink: 0;
}
.slot-chip.focused .slot-num { color: var(--accent); background: rgba(91,142,247,.15); }
.slot-chip .slot-label {
  font-family: "Geist Mono", monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

.actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.actions .btn {
  width: 28px; height: 28px;
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); cursor: pointer;
  transition: background .12s, color .12s;
}
.actions .btn:hover { background: #181818; color: var(--text); }
.actions .btn.danger:hover { background: rgba(248,113,113,.12); color: #fca5a5; }
.actions .btn.sys:hover { background: #181818; color: var(--cyan); }
.actions-divider {
  width: 1px; height: 16px; background: var(--line); margin: 0 4px;
  flex-shrink: 0;
}

/* watchdog status dot inside #btn-wd-status */
.wd-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 2px rgba(115,115,115,.18);
  transition: background .15s, box-shadow .15s;
}
.wd-dot[data-state="healthy"] { background: var(--green); box-shadow: 0 0 0 2px rgba(74,222,128,.2); }
.wd-dot[data-state="degraded"] { background: var(--amber); box-shadow: 0 0 0 2px rgba(245,158,11,.22); }
.wd-dot[data-state="dead"] { background: var(--red); box-shadow: 0 0 0 2px rgba(248,113,113,.22); }
.wd-dot[data-state="unknown"] { background: var(--muted); }

/* watchdog status modal */
.wd-modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  padding: 16px;
}
.wd-modal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: min(720px, 100%);
  max-height: min(80vh, 640px);
  display: flex; flex-direction: column;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  overflow: hidden;
}
.wd-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.wd-modal-close {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; color: var(--text-2); cursor: pointer;
}
.wd-modal-close:hover { background: #181818; color: var(--text); }
.wd-modal-body {
  padding: 12px 14px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.wd-summary {
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: 12px; row-gap: 4px;
  font-family: "Geist Mono", monospace; font-size: 12px;
  color: var(--text-2);
}
.wd-summary .k { color: var(--muted); }
.wd-summary .v { color: var(--text); word-break: break-all; }
.wd-summary .v.ok { color: var(--green); }
.wd-summary .v.warn { color: var(--amber); }
.wd-summary .v.err { color: var(--red); }
.wd-log {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: "Geist Mono", monospace; font-size: 11.5px;
  color: var(--text-2);
  white-space: pre;
  overflow: auto;
  max-height: 320px;
}

/* ─── workspace + panes ─── */
.workspace { flex: 1; display: flex; min-height: 0; min-width: 0; position: relative; }
.split { display: flex; height: 100%; width: 100%; }
.split.row { flex-direction: row; }

.pane {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  position: relative;
}
.pane.focused .session-header { background: #131315; }
.pane.focused .pane-focus-bar { background: var(--accent); }
.pane-focus-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  transition: background .15s;
  z-index: 1;
}

/* Split.js gutter overrides */
.gutter { background: var(--line); transition: background .15s, box-shadow .15s; }
.gutter:hover { background: var(--accent); box-shadow: 0 0 8px rgba(91,142,247,.4); }
.gutter.gutter-horizontal { cursor: col-resize; width: 1px; }
.gutter.gutter-vertical { cursor: row-resize; height: 1px; }

/* ─── session header ─── */
.session-header {
  height: 60px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  flex-shrink: 0;
}
.session-icon { width: 32px; height: 32px; flex-shrink: 0; }
.session-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.session-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  letter-spacing: -.01em; line-height: 1.2;
  display: flex; align-items: baseline; gap: 6px;
}
.session-name .ver {
  color: var(--muted); font-weight: 500;
  font-family: "Geist Mono", monospace; font-size: 11.5px;
}
.session-sub {
  font-size: 11px; color: var(--text-2); margin-top: 2px;
  font-family: "Geist Mono", monospace; line-height: 1.3;
}
.session-sub .sep { color: var(--muted); margin: 0 6px; }
.session-tools { display: flex; align-items: center; gap: 2px; color: var(--muted); }
.session-tools .btn {
  width: 24px; height: 24px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.session-tools .btn:hover { background: #1d1d1d; color: var(--text-2); }

/* ─── file pane body (read-only viewer in a slot) ─── */
.file-body {
  flex: 1; min-height: 0;
  background: var(--bg);
  padding: 10px 14px;
  overflow: auto;
  position: relative;
}
.file-body .fx-text {
  font-family: "Geist Mono", monospace; font-size: 12px;
  white-space: pre-wrap; word-wrap: break-word;
  color: var(--text); margin: 0;
}
.file-body .fx-preview-frame { display: flex; justify-content: center; min-height: 100%; }
.file-body .fx-preview-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.file-body .fx-preview-frame iframe { width: 100%; height: 100%; min-height: 480px; border: 0; background: #fff; }
.file-body .fx-empty, .file-body .fx-error { padding: 16px; color: var(--muted); font-size: 12px; text-align: center; }
.file-body .fx-error { color: var(--amber); }

/* ─── terminal (xterm host) ─── */
.terminal {
  flex: 1; min-height: 0;
  background: var(--bg);
  padding: 6px 8px 2px;
  overflow: hidden;
  position: relative;
}
.terminal .xterm { padding: 6px; height: 100%; }
.terminal .xterm-viewport::-webkit-scrollbar { width: 8px; }
.terminal .xterm-viewport::-webkit-scrollbar-track { background: transparent; }
.terminal .xterm-viewport::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 8px; }

/* ─── status bar ─── */
.statusbar {
  height: 28px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-2);
  gap: 10px;
  flex-shrink: 0;
}
.statusbar .sb-path { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statusbar .sb-spacer { flex: 1; }
.statusbar .sb-right { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.statusbar .pipe { color: var(--line); }
.statusbar .dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--green);
  margin-right: 4px;
}
.statusbar .dot.dead { background: var(--red); }
.statusbar .dot.alert { background: var(--amber); }

/* ─── toast ─── */
.toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  background: #1c1c1e;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  height: 36px;
  padding: 0 6px 0 14px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  z-index: 10;
}
.toast .pulse {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--amber);
  position: relative;
}
.toast .pulse.ok { background: var(--green); }
.toast .pulse.err { background: var(--red); }
.toast .pulse::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(245,158,11,.35);
  animation: toastPulse 1.6s ease-in-out infinite;
}
.toast .pulse.ok::after { box-shadow: 0 0 0 2px rgba(74,222,128,.35); animation: toastPulseGreen 1.6s ease-in-out infinite; }
.toast .pulse.err::after { box-shadow: 0 0 0 2px rgba(248,113,113,.35); animation: toastPulseRed 1.6s ease-in-out infinite; }
@keyframes toastPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(245,158,11,.35) } 50% { box-shadow: 0 0 0 5px rgba(245,158,11,.10) } }
@keyframes toastPulseGreen { 0%,100% { box-shadow: 0 0 0 2px rgba(74,222,128,.35) } 50% { box-shadow: 0 0 0 5px rgba(74,222,128,.10) } }
@keyframes toastPulseRed { 0%,100% { box-shadow: 0 0 0 2px rgba(248,113,113,.35) } 50% { box-shadow: 0 0 0 5px rgba(248,113,113,.10) } }
.toast .toast-btn {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); cursor: pointer;
}
.toast .toast-btn:hover { background: #2a2a2a; color: var(--text); }

/* keyboard area buffer for iPad */
.kbd-spacer { height: 0; transition: height 120ms ease; }

/* ─── iOS IME input rail (iPad/iPhone only; toggled by body.ios-ime) ─── */
.ime-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--kbd-offset, 0px));
  z-index: 200;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 10, 0.96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.ios-ime .ime-bar { display: flex; }
/* Block xterm helper textarea on iOS so focus never returns to the broken path */
body.ios-ime .xterm-helper-textarea { pointer-events: none !important; opacity: 0; }
body.ios-ime .workspace { padding-bottom: 120px; }

.ime-keys {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ime-key {
  flex: 0 0 auto;
  min-width: 44px;
  height: 36px;
  padding: 0 10px;
  font: 500 13px/1 "Geist Mono", ui-monospace, monospace;
  color: var(--text);
  background: var(--tab-active);
  border: 1px solid var(--tab-border);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.ime-key:active { background: #2a2a2a; }

.ime-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
#ime-input {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 8px 10px;
  font: 500 15px/1.35 "Geist Mono", ui-monospace, monospace;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--tab-border);
  border-radius: 8px;
  resize: none;
  outline: none;
}
#ime-input:focus { border-color: var(--accent); }
.ime-send {
  flex: 0 0 auto;
  width: 48px;
  font: 600 18px/1 "Geist Mono", ui-monospace, monospace;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
}
.ime-send:active { filter: brightness(0.92); }

/* ─── responsive: mobile / iPad portrait ─── */
@media (max-width: 720px) {
  .sidebar { width: 220px; }
  .traffic { display: none; }
  .session-header { height: 48px; padding: 0 10px; }
  .session-icon { width: 26px; height: 26px; }
}

/*
 * ─── mobile mode (body.mobile, toggled by JS isMobile()) ───
 *
 * Strategy: sidebar becomes off-canvas drawer (left slide + backdrop);
 * workspace shows ONLY the active slot's pane (Split.js skipped); winchrome
 * compacted to a hamburger-only header; toolbar slot-chips become tab switcher.
 *
 * Desktop behavior is intentionally untouched — every rule lives under
 * body.mobile so removing the class restores the original UX exactly.
 */

/* hide the backdrop element entirely on desktop */
.sidebar-backdrop { display: none; }

body.mobile {
  /* honor iPhone notch / Dynamic Island / home indicator */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* Balanced reclaim of the home-indicator strip (user-chosen 2026-06-08):
     shrink the bottom-nav button row 56→48 and clamp the home-gesture
     clearance to ≤16px. The terminal regains ~0.7cm while the buttons stay
     clear of the home indicator. min() collapses to 0 on devices without a
     home indicator (SE / Touch-ID), so no phantom gap is added there.
     Consumed by .bottom-nav, body.mobile .ime-bar, and the
     body.mobile .workspace reserve fallback so the three stay in lockstep;
     the runtime updateMobileBottomReserve() measures nav.offsetHeight and
     therefore tracks this automatically (no JS change needed). */
  --nav-btn-h: 48px;
  --nav-safe: min(env(safe-area-inset-bottom, 0px), 16px);
}

/* app shell: safe-area on left/right too (landscape notch) */
body.mobile .app {
  padding-top: 0; /* winchrome handles top safe-area itself */
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* winchrome: keep but compact, push under notch */
body.mobile .winchrome {
  height: calc(38px + var(--safe-top));
  padding: var(--safe-top) 10px 0;
  background: #0a0a0a;
}
body.mobile .winchrome .wc-tools .btn { width: 34px; height: 34px; }
body.mobile .winchrome .wc-tools .btn svg { width: 18px; height: 18px; }
/* hydra recheck button noise on phone — hide */
body.mobile #btn-hydra-recheck { display: none; }
body.mobile .winchrome .wc-title { font-size: 13px; }

/* sidebar: off-canvas drawer */
body.mobile .sidebar {
  position: fixed;
  top: calc(38px + var(--safe-top));
  bottom: 0;
  left: 0;
  width: min(86vw, 320px);
  transform: translateX(-100%);
  transition: transform 220ms ease;
  z-index: 1100;
  border-right: 1px solid var(--line);
  padding-bottom: var(--safe-bottom);
}
body.mobile .sidebar.open { transform: translateX(0); }
/* desktop .collapsed class is a no-op in mobile (drawer uses .open) */
body.mobile .sidebar.collapsed { width: min(86vw, 320px); border-right: 1px solid var(--line); overflow: visible; }

/* backdrop */
body.mobile .sidebar-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
body.mobile .sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* main column: full width, no sidebar reserve */
body.mobile .shell { display: block; height: 100%; }
body.mobile .main { width: 100%; height: 100%; display: flex; flex-direction: column; }

/* toolbar: slot-strip becomes the active-pane switcher; actions stay */
body.mobile .toolbar {
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  min-height: 44px;
}
body.mobile .slot-strip { flex: 1; min-width: 0; gap: 4px; }
body.mobile .slot-chip {
  flex: 1; min-width: 0;
  padding: 6px 8px;
  font-size: 12px;
}
body.mobile .slot-chip .slot-label {
  max-width: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.mobile .actions { gap: 4px; }
body.mobile .actions .btn { width: 34px; height: 34px; }
body.mobile .actions .btn svg { width: 16px; height: 16px; }
/* hide low-priority desktop buttons on phone */
body.mobile #btn-boot-all,
body.mobile #btn-cleanup-zombies,
body.mobile #btn-wd-status,
/* T3 fix-pass: keep the mobile actions row at its pre-T3 width — Plans /
   설정 are reachable from the bottom-nav More sheet instead. */
body.mobile #btn-plans,
body.mobile #btn-settings { display: none; }

/* workspace: 1-pane fullscreen, no split gutter */
body.mobile .workspace { flex: 1; min-height: 0; }
body.mobile .split.row { display: block; height: 100%; }
body.mobile .split.row > .gutter { display: none !important; }
body.mobile .pane { width: 100% !important; height: 100% !important; }
/* JS hides non-active panes via inline display:none; this is fallback only */
body.mobile .pane[data-mobile-hidden="true"] { display: none !important; }

/* session header inside pane: smaller on phone */
body.mobile .session-header { height: 42px; padding: 0 8px; gap: 8px; }
body.mobile .session-tools .btn { width: 30px; height: 30px; }

/* ime-bar must dock ABOVE the bottom-nav on mobile. Without this override, the
   desktop default `bottom: safe-bottom` puts ime-bar at the same y as bottom-nav,
   with bottom-nav (z-index 1080) covering the textarea row (z-index 200). User
   can't see the IME textarea / send button → effectively no Hangul input on phone.
   bottom-nav owns the safe-area-inset-bottom; ime-bar just sits on top of it. */
body.mobile .ime-bar {
  /* dock exactly on top of the bottom-nav (same height expression as .bottom-nav) */
  bottom: calc(var(--nav-btn-h) + var(--nav-safe) + var(--kbd-offset, 0px));
  padding-bottom: 6px;
}

/* fx-modal / wd-modal in mobile: full-screen for better touch */
body.mobile .fx-modal,
body.mobile .wd-modal {
  padding: 0;
}
body.mobile .fx-card,
body.mobile .wd-modal-card {
  border-radius: 0; width: 100%; height: 100%;
}

/*
 * NOTE: do NOT override .xterm-rows font-size via CSS — xterm.js measures glyph
 * width/height ONCE from term.options.fontSize and absolutely positions every
 * cell using those metrics. A CSS font-size override desyncs the visual size
 * from the internal grid, producing wrap/scroll/cursor misalignment and broken
 * glyph layout. Mobile font size is set programmatically in makeTerm() +
 * applyMobileMode() with a fit() refresh after each change.
 */

/* prevent iOS pull-to-refresh / overscroll bouncing in standalone PWA */
body.mobile { overscroll-behavior: contain; }

/*
 * ─── mobile shell Phase 2 (bottom nav, bottom sheet, swipe, splash, WS, haptic) ───
 *
 * All rules below are inside body.mobile or scoped to elements that are
 * hidden by default (bottom-nav[hidden], bottom-sheet[hidden]).
 */

/* desktop: bottom-nav / bottom-sheet always hidden via [hidden] attribute.
   the JS only removes [hidden] when isMobile() === true. defense in depth: */
body:not(.mobile) .bottom-nav,
body:not(.mobile) .bottom-sheet { display: none !important; }

/* Phase 2: toolbar is replaced by bottom-nav on phones. winchrome still shows
   the hamburger via btn-sidebar, but the toolbar (slot strip + system actions)
   moves to the bottom nav for thumb reachability. */
body.mobile .toolbar { display: none; }

/* Workspace bottom reserve is computed at runtime by updateMobileBottomReserve()
   based on the ACTUAL rendered heights of bottom-nav and ime-bar (if visible).
   Previous static value (calc(120px + 56px + safe)) was both:
     (a) overcounting because ime-bar overlapped bottom-nav (visible gap), and
     (b) imprecise because ime-bar's effective height varies with safe-area /
         keyboard offset / which rows are shown.
   The CSS var fallback is a reasonable initial guess until JS measures. */
body.mobile .workspace { padding-bottom: var(--mobile-bottom-reserve, calc(var(--nav-btn-h) + var(--nav-safe))); }

/* ─── bottom nav (5-tab fixed bar) ─── */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--nav-btn-h, 56px) + var(--nav-safe, 0px));
  padding-bottom: var(--nav-safe, 0px);
  display: flex;
  flex-direction: row;
  background: #0c0c0c;
  border-top: 1px solid var(--line);
  z-index: 1080;  /* below sidebar drawer (1100), above workspace */
}
.bottom-nav .bn-btn {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-family: inherit;
  font-size: 10px;
  padding: 4px 4px 6px;  /* tightened for the 48px button row (was 6/8 for 56px) */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
}
.bottom-nav .bn-btn:active { background: rgba(255,255,255,0.04); }
.bottom-nav .bn-btn svg { width: 20px; height: 20px; stroke-width: 1.6; }
.bottom-nav .bn-btn.active { color: var(--accent, #6da8ff); }
.bottom-nav .bn-btn.active::before {
  /* top accent stripe to mark the active slot */
  content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 2px;
  background: currentColor; border-radius: 0 0 2px 2px;
}
.bottom-nav .bn-label {
  font-size: 10px;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: 0.02em;
}
.bottom-nav .bn-slot { padding-top: 2px; }  /* headroom for num+label in the tighter 48px row */
.bottom-nav .bn-slot-num {
  font-size: 11px; font-weight: 600;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  color: var(--text-2);
}
.bottom-nav .bn-slot.active .bn-slot-num {
  background: var(--accent, #6da8ff);
  color: #0a0a0a;
}
.bottom-nav .bn-slot.empty .bn-slot-num { opacity: 0.5; }
.bottom-nav .bn-slot.empty .bn-slot-label { opacity: 0.6; }
.bottom-nav .bn-slot-label { font-size: 10px; max-width: 90%; }

/* ─── bottom sheet (reusable, mobile-only) ─── */
.bottom-sheet {
  position: fixed; inset: 0;
  z-index: 1200;  /* above sidebar drawer */
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
.bottom-sheet:not([hidden]) { pointer-events: auto; }
.bottom-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 200ms ease;
}
.bottom-sheet.open .bottom-sheet-backdrop { opacity: 1; }
.bottom-sheet-card {
  position: relative;
  background: #121212;
  color: var(--text);
  border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  max-height: 78vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.2, 0.85, 0.3, 1);
  padding-bottom: var(--safe-bottom, 0px);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.5);
}
.bottom-sheet.open .bottom-sheet-card { transform: translateY(0); }
.bottom-sheet-handle {
  width: 38px; height: 4px;
  margin: 8px auto 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
}
.bottom-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 16px 10px;
}
.bottom-sheet-title { font-size: 14px; font-weight: 600; color: var(--text); }
.bottom-sheet-close {
  background: transparent; border: 0; color: var(--text-2);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 6px;
}
.bottom-sheet-close:active { background: rgba(255,255,255,0.06); }
.bottom-sheet-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 8px 12px;
  -webkit-overflow-scrolling: touch;
}
.bottom-sheet-actions {
  display: flex; gap: 8px;
  padding: 10px 16px calc(10px + var(--safe-bottom, 0px));
  border-top: 1px solid var(--line);
}
.bottom-sheet-actions .btn-sheet {
  flex: 1;
  padding: 12px;
  background: var(--accent, #6da8ff); color: #0a0a0a;
  border: 0; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.bottom-sheet-actions .btn-sheet.secondary {
  background: rgba(255,255,255,0.08); color: var(--text);
}

/* sheet items (list rows used by + session picker, cmd history, more menu) */
.bs-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.bs-item:active { background: rgba(255,255,255,0.05); }
.bs-item .bs-item-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: var(--text-2);
  flex-shrink: 0;
}
.bs-item .bs-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bs-item .bs-item-title { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-item .bs-item-sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-item.danger { color: #ff7676; }
.bs-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 10px 12px 4px;
}
.bs-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--muted);
  font-size: 12px;
}
.bs-cmd-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: 'Geist Mono', monospace; font-size: 12px;
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  width: 100%; text-align: left;
  -webkit-tap-highlight-color: transparent;
  word-break: break-all;
}
.bs-cmd-row:active { background: rgba(255,255,255,0.05); }
.bs-cmd-row .bs-cmd-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-cmd-row .bs-cmd-fill {
  flex-shrink: 0;
  font-size: 10px; color: var(--text-2);
  background: rgba(255,255,255,0.06); border-radius: 4px; padding: 2px 6px;
}

/* ─── WS reconnect indicator (in winchrome title) ───
 *
 * Peer review Y15: per the Phase 2 isolation contract, mobile-introduced visuals
 * should be gated by body.mobile. The indicator is useful on desktop too
 * (terminal sessions can drop on either platform), but to honor the documented
 * contract we keep the DOT visible only on mobile. The DOM element still exists
 * on desktop (so future toggling is one CSS change) and JS still tracks state.
 */
.ws-status {
  display: none;  /* desktop default: hidden */
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  background: transparent;
  transition: background 200ms ease;
}
body.mobile .ws-status {
  display: inline-block;
}
body.mobile .ws-status[data-state="reconnecting"] {
  background: #f5a524;
  box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.7);
  animation: ws-pulse 1.4s infinite ease-out;
}
body.mobile .ws-status[data-state="offline"] {
  background: #ef4444;
}
@keyframes ws-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(245, 165, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); }
}

/*
 * Peer review Y5: respect prefers-reduced-motion for the mobile-introduced
 * animations (sheet slide, drawer slide, WS pulse, swipe haptic visuals).
 * iOS/Android Settings > Accessibility > Reduce Motion users get instant
 * state transitions instead of the 220-260ms slides.
 */
@media (prefers-reduced-motion: reduce) {
  body.mobile .sidebar { transition: none; }
  body.mobile .sidebar-backdrop { transition: none; }
  .bottom-sheet-backdrop { transition: none; }
  .bottom-sheet-card { transition: none; }
  body.mobile .ws-status[data-state="reconnecting"] { animation: none; }
}

/* ─── kebab menu ─── */
.ws-kebab-btn {
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 4px;
  opacity: 0.6;
  vertical-align: middle; /* share a centerline with the inline-block .ws-name title */
}
.ws-kebab-btn:hover { opacity: 1; }
.ws-kebab-menu {
  position: fixed;
  background: var(--bg-2, #1e1e1e);
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 120px;
  z-index: 1200; /* above mobile sidebar drawer (1100) + backdrop (1050); was 1000 → occluded on mobile */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.ws-kebab-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--fg, #ddd);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.ws-kebab-item:hover { background: var(--bg-3, #2a2a2a); }
.ws-kebab-item.danger { color: #e85a5a; }
.ws-kebab-item:disabled { opacity: 0.4; cursor: not-allowed; }

/* sidebar tab bar (Sessions / Explorer) */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid #1a1a1a;
  background: #0c0c0c;
  flex-shrink: 0;
}
.sidebar-tab {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 9px 0;
  font: 500 11.5px/1 inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-tab:hover { color: var(--text-2); }
.sidebar-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.sidebar-pane { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.sidebar-pane.hidden { display: none; }

/* notes / todo pane (replaces the retired web tab) */
#sidebar-pane-notes { padding: 0; }
.notes-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 10px 12px;
}
.notes-section.notes-todos { border-bottom: 1px solid #1a1a1a; }
.notes-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; flex-shrink: 0;
}
.notes-title {
  font: 600 11px/1 inherit;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-2);
}
.notes-clear {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font: 500 10.5px/1 inherit;
  padding: 2px 4px; border-radius: 4px;
}
.notes-clear:hover { color: var(--text-2); background: rgba(255, 255, 255, 0.05); }
.notes-add { display: flex; gap: 6px; margin-bottom: 8px; flex-shrink: 0; }
.notes-input {
  flex: 1; min-width: 0;
  background: #0c0c0c; border: 1px solid var(--line);
  color: var(--text); border-radius: 6px;
  padding: 6px 8px; font: 400 12px/1.2 inherit;
}
.notes-input:focus { outline: none; border-color: var(--accent); }
.notes-add-btn {
  flex: none; width: 30px;
  background: #0c0c0c; border: 1px solid var(--line);
  color: var(--text-2); border-radius: 6px; cursor: pointer;
  font-size: 15px; line-height: 1;
}
.notes-add-btn:hover { color: var(--text); border-color: var(--accent); }
.notes-todo-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.notes-empty {
  color: var(--muted); font-size: 11.5px;
  padding: 14px 4px; text-align: center;
}
.notes-todo {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 5px 4px; border-radius: 6px;
}
.notes-todo:hover { background: rgba(255, 255, 255, 0.03); }
.notes-check {
  flex: none; width: 16px; height: 16px; margin-top: 1px;
  border: 1.5px solid var(--line); border-radius: 4px;
  background: transparent; color: #fff; cursor: pointer;
  font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.notes-check:hover { border-color: var(--accent); }
.notes-todo.is-done .notes-check { background: var(--accent); border-color: var(--accent); }
.notes-todo-text {
  flex: 1; min-width: 0;
  color: var(--text); font-size: 12.5px; line-height: 1.35;
  word-break: break-word; white-space: pre-wrap;
}
.notes-todo.is-done .notes-todo-text { color: var(--muted); text-decoration: line-through; }
.notes-del {
  flex: none;
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 12px; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
  opacity: 0; transition: opacity 0.12s;
}
.notes-todo:hover .notes-del { opacity: 1; }
.notes-del:hover { color: var(--red, #e05252); }
.notes-ideas-area {
  flex: 1; min-height: 80px; resize: none;
  background: #0c0c0c; border: 1px solid var(--line);
  color: var(--text); border-radius: 6px;
  padding: 8px; font: 400 12.5px/1.5 inherit;
}
.notes-ideas-area:focus { outline: none; border-color: var(--accent); }

/* explorer */
.explorer-toolbar {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid #161616;
  flex-shrink: 0;
}
.explorer-path-input {
  flex: 1;
  background: #0a0a0a;
  border: 1px solid #1f1f1f;
  border-radius: 4px;
  color: var(--text);
  padding: 4px 7px;
  font: 11px "Geist Mono", monospace;
  outline: none;
  min-width: 0;
}
.explorer-path-input:focus { border-color: var(--accent); }
.explorer-up {
  background: #0a0a0a;
  border: 1px solid #1f1f1f;
  border-radius: 4px;
  color: var(--text-2);
  font: 12px inherit;
  padding: 0 8px;
  cursor: pointer;
}
.explorer-up:hover { background: #141414; color: var(--text); }
.explorer-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 8px;
  font: 12px "Geist Mono", monospace;
}
.explorer-tree::-webkit-scrollbar { width: 6px; }
.explorer-tree::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 6px; }
.explorer-tree::-webkit-scrollbar-track { background: transparent; }
.exp-node {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  cursor: pointer;
  color: var(--text-2);
  white-space: nowrap;
  user-select: none;
}
.exp-node:hover { background: #131313; color: var(--text); }
.exp-node.selected { background: #1d4ed8; color: #f1f5f9; }
.exp-twist {
  display: inline-block;
  width: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  flex-shrink: 0;
}
.exp-icon {
  display: inline-block;
  width: 12px;
  text-align: center;
  flex-shrink: 0;
  font-size: 11px;
}
.exp-icon.dir { color: var(--amber); }
.exp-icon.file { color: var(--muted); }
.exp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.exp-empty, .exp-error, .exp-loading {
  padding: 8px 12px;
  font: 11px inherit;
  color: var(--muted);
}
.exp-error { color: var(--red); }

/* web */
.web-toolbar {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.web-port-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  padding: 4px 7px;
  font: 11px "Geist Mono", monospace;
  outline: none;
  min-width: 0;
}
.web-port-input:focus { border-color: var(--accent); }
.web-open-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-2);
  font: 12px inherit;
  padding: 0 8px;
  cursor: pointer;
}
.web-open-btn:hover { background: var(--tab-active); color: var(--text); }
.web-recent {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px 0;
  font: 11px "Geist Mono", monospace;
  color: var(--muted);
}
.web-recent:empty { display: none; }

/* ---------- Web tab: dashboard ports + live on/off status ---------- */
.web-dash {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-top: 1px solid var(--line-soft);
}
.web-dash-head { display: flex; align-items: center; }
.web-dash-title {
  font: 10px "Geist Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.web-dash-add { display: flex; gap: 4px; }
.web-dash-add .web-port-input { flex: 0 0 64px; }
.web-dash-label-input { flex: 1 1 auto !important; }
.web-dash-list { display: flex; flex-direction: column; gap: 2px; }
.web-dash-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 2px;
  border-radius: 4px;
}
.web-dash-row:hover { background: var(--tab-active); }
.web-dash-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  font: 8px "Geist Mono", monospace;
  line-height: 8px;
  text-align: center;
  color: var(--bg);
}
.web-dash-dot.is-up { background: #3fb950; }
.web-dash-dot.is-down { background: var(--muted); }
.web-dash-dot.is-unknown { background: transparent; color: var(--muted); }
.web-dash-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--text);
  font: 11px "Geist Mono", monospace;
  text-align: left;
  cursor: pointer;
  padding: 1px 2px;
}
.web-dash-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-dash-port { color: var(--muted); flex-shrink: 0; }
.web-dash-open:hover .web-dash-name { color: var(--accent); }
.web-dash-remove {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--muted);
  font: 13px inherit;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.web-dash-remove:hover { color: var(--text); }

.web-body { flex: 1; min-height: 0; display: flex; }
.web-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* ---------- Phase 2: context menu (Explorer right-click) ---------- */
.ctx-menu {
  position: fixed;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 4px 0;
  min-width: 160px;
  z-index: 10000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  font: 12px "Geist Mono", monospace;
}
.ctx-menu-item {
  display: block;
  width: 100%;
  padding: 6px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.ctx-menu-item:hover { background: #1f1f1f; }
.ctx-menu-item.danger { color: #ef6a6a; }
.ctx-menu-item.danger:hover { background: #2a1212; color: #ff8585; }
.ctx-menu-item:disabled { opacity: 0.35; cursor: not-allowed; background: transparent !important; }
.ctx-menu-sep {
  height: 1px;
  background: #2a2a2a;
  margin: 4px 0;
}

/* ---------- Phase 2: prompt modal (inline input dialog) ---------- */
.prompt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
.prompt-card {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 16px 18px;
  min-width: 360px;
  max-width: 520px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.prompt-title {
  color: var(--text);
  font: 12px "Geist Mono", monospace;
  margin-bottom: 10px;
}
.prompt-input {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: var(--text);
  font: 13px "Geist Mono", monospace;
  padding: 8px 10px;
  box-sizing: border-box;
}
.prompt-input:focus { outline: none; border-color: var(--accent); }
.prompt-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.prompt-actions button {
  padding: 6px 14px;
  border-radius: 4px;
  font: 12px "Geist Mono", monospace;
  border: 1px solid #2a2a2a;
  background: #141414;
  color: var(--text);
  cursor: pointer;
}
.prompt-actions .prompt-ok {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.prompt-actions button:hover { filter: brightness(1.15); }

/* ---------- Phase 2: file editor textarea ---------- */
.fx-editor {
  width: 100%;
  height: 100%;
  border: none;
  background: #0a0a0a;
  color: #ededed;
  padding: 12px 14px;
  font: 13px/1.55 "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  resize: none;
  outline: none;
  box-sizing: border-box;
  tab-size: 2;
}
.fx-editor:focus { outline: none; }

/* ---------- Phase 2: drop overlay (Telegram-style upload to terminal) ---------- */
.drop-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,0.78);
  border: 2px dashed transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 50;
}
.drop-overlay.active {
  opacity: 1;
  border-color: var(--accent);
  pointer-events: auto;
}
.drop-overlay-card {
  background: #0a0a0a;
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 32px 48px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(91,142,247,0.25);
}
.drop-overlay-icon {
  font-size: 38px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 8px;
}
.drop-overlay-title {
  font: 14px "Geist Mono", monospace;
  color: var(--text);
  margin-bottom: 6px;
}
.drop-overlay-sub {
  font: 11px "Geist Mono", monospace;
  color: var(--muted);
  word-break: break-all;
  max-width: 320px;
}

/* pane needs position context for the absolute drop overlay */
.pane { position: relative; }

/* ---------- device pairing (app engine) ---------- */
.auth-link {
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--text-2);
  font: 12px "Geist Mono", monospace;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-link:hover { color: var(--text); }

.dev-pair-btn {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: rgba(91, 142, 247, 0.12);
  color: var(--accent);
  font: 12px "Geist Mono", monospace;
  cursor: pointer;
}
.dev-pair-btn:hover { background: rgba(91, 142, 247, 0.2); }

.pair-code-box {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  text-align: center;
  background: rgba(91, 142, 247, 0.06);
}
.pair-code-box .pc-code {
  font: 600 30px "Geist Mono", monospace;
  letter-spacing: 6px;
  color: var(--text);
}
.pair-code-box .pc-hint { margin-top: 6px; font: 11px "Geist Mono", monospace; color: var(--muted); }

.dev-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.dev-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #222;
  border-radius: 6px;
  background: #0d0d0d;
}
.dev-row.revoked { opacity: 0.45; }
.dev-row .dev-meta { min-width: 0; }
.dev-row .dev-name { font: 12px "Geist Mono", monospace; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-row .dev-sub { font: 10px "Geist Mono", monospace; color: var(--muted); }
.dev-revoke {
  flex: none;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #3a1a1a;
  background: #1a0f0f;
  color: #ef6a6a;
  font: 11px "Geist Mono", monospace;
  cursor: pointer;
}
.dev-revoke:hover { background: #2a1212; color: #ff8585; }
.dev-revoke:disabled { opacity: 0.4; cursor: default; }
.dev-empty { font: 11px "Geist Mono", monospace; color: var(--muted); text-align: center; padding: 10px; }

/* ============================================================
   T1.6 — live agent-progress rail (.arail-*). ADDITIVE; scoped class
   prefix to avoid colliding with existing rules. Ported from Helm's right
   rail and adapted to tabterm tokens (dark, Geist / Geist Mono, --accent).
   The rail mounts as a right-side aside (#agent-rail) beside #sidebar-right
   and is hidden until a real frame arrives.
   ============================================================ */
.agent-rail {
  width: 250px;
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  background: var(--panel);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}
.agent-rail.hidden { display: none; }
.agent-rail[hidden] { display: none; }
@media (max-width: 720px) { .agent-rail { display: none !important; } }

/* status row: dot + label + right-aligned pill */
.arail-status-row { display: flex; align-items: center; gap: 7px; }
.arail-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(163,163,163,0.45); flex-shrink: 0;
}
.arail-dot.is-working { background: var(--green); box-shadow: 0 0 0 3px rgba(74,222,128,.16); animation: arail-pulse 1.4s ease-in-out infinite; }
.arail-dot.is-waiting { background: var(--amber); box-shadow: 0 0 0 3px rgba(245,158,11,.16); }
.arail-dot.is-done { background: var(--accent); }
.arail-dot.is-error { background: var(--red); box-shadow: 0 0 0 3px rgba(248,113,113,.16); }
.arail-dot.is-spawning { background: var(--accent); }
.arail-status-label {
  font-size: 13px; font-weight: 600; color: var(--text);
  text-transform: capitalize; letter-spacing: .2px;
}
.arail-prog-pill {
  margin-left: auto; font-size: 11.5px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(163,163,163,0.14); color: var(--muted);
  text-transform: capitalize; letter-spacing: .2px;
}
.arail-prog-pill.is-working { background: rgba(74,222,128,.14); color: var(--green); }
.arail-prog-pill.is-waiting { background: rgba(245,158,11,.16); color: var(--amber); }
.arail-prog-pill.is-done { background: rgba(91,142,247,.16); color: var(--accent); }
.arail-prog-pill.is-error { background: rgba(248,113,113,.16); color: var(--red); }
.arail-prog-pill.is-spawning { background: rgba(91,142,247,.16); color: var(--accent); }

@keyframes arail-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* activity line */
.arail-activity {
  font-size: 13px; color: var(--text-2); line-height: 1.45;
  word-break: break-word;
}

/* granular sub-step (current_tool + step_display) */
.arail-prog-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.arail-substep-tool {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--tab-active);
  font-size: 12.5px;
}
.arail-substep-ic { color: var(--accent); flex-shrink: 0; }
.arail-substep-name { font-weight: 600; color: var(--text); }
.arail-substep-tgt {
  font-family: "Geist Mono", monospace; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.arail-substep-st { margin-left: 1px; color: var(--amber); }
.arail-substep-tool.is-completed .arail-substep-st { color: var(--green); }
.arail-substep-tool.is-error { border-color: var(--red); }
.arail-substep-tool.is-error .arail-substep-st { color: var(--red); }
.arail-substep-tool.is-running .arail-substep-st { color: var(--amber); }
.arail-substep-step {
  font-size: 12px; color: var(--muted);
  font-family: "Geist Mono", monospace;
}

/* context usage bar (renderPctBar port) */
.arail-ctx { display: flex; flex-direction: column; gap: 4px; }
.arail-ctx-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); }
.arail-ctx-label { text-transform: uppercase; letter-spacing: .5px; }
.arail-ctx-nums { font-family: "Geist Mono", monospace; color: var(--text-2); }
.arail-bar-wrap { height: 3px; background: rgba(163,163,163,0.18); border-radius: 2px; overflow: hidden; }
.arail-bar { height: 100%; border-radius: 2px; background: var(--green); transition: width .4s ease; }
.arail-bar-green { background: var(--green); }
.arail-bar-orange { background: var(--amber); }
.arail-bar-red { background: var(--red); }

/* sections (todos / tools) */
.arail-section { display: flex; flex-direction: column; gap: 6px; }
.arail-section-head { display: flex; align-items: baseline; justify-content: space-between; }
.arail-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.arail-section-score { font-size: 12px; color: var(--green); font-family: "Geist Mono", monospace; }

/* todos */
.arail-todo-list { display: flex; flex-direction: column; gap: 4px; }
.arail-todo-item { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--text); line-height: 1.4; }
.arail-todo-check { flex-shrink: 0; width: 13px; text-align: center; margin-top: 1px; color: var(--muted); }
.arail-todo-item.is-completed .arail-todo-check { color: var(--green); }
.arail-todo-item.is-in_progress .arail-todo-check { color: var(--amber); }
.arail-todo-item.is-completed .arail-todo-text { color: var(--muted); text-decoration: line-through; }
.arail-todo-text { flex: 1; word-break: break-word; }
.arail-todo-item.is-active {
  background: rgba(91,142,247,.10);
  border-radius: 5px; margin: 0 -4px; padding: 1px 4px;
  box-shadow: inset 0 0 0 1px rgba(91,142,247,.28);
}

/* tools timeline */
.arail-timeline { display: flex; flex-direction: column; gap: 2px; }
.arail-tl-item { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 5px; font-size: 12.5px; color: var(--text-2); }
.arail-tl-item:hover { background: rgba(255,255,255,0.04); }
.arail-tl-ic { flex-shrink: 0; width: 14px; text-align: center; color: var(--accent); }
.arail-tl-ic.is-mcp { color: var(--magenta); }
.arail-tl-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.arail-tl-st { flex-shrink: 0; font-size: 12px; color: var(--green); }
.arail-tl-st.is-error { color: var(--red); }
.arail-tl-st.is-running { color: var(--amber); }

/* empty state */
.arail-empty { padding: 14px 8px; font-size: 12px; color: var(--muted); text-align: center; }

/* ============================================================
   T2 — Conversation view (.aconv-*). ADDITIVE; scoped class prefix.

   The overlay (.aconv-overlay) is absolutely positioned over the xterm host so
   it COVERS the terminal without unmounting/resizing it. Hidden by default;
   toggling back to Terminal just hides it -> the live terminal is untouched.
   Adapted from Helm's conversation/message-card/thinking/tool/lightbox/copy CSS
   to tabterm tokens (--accent / --green / --amber / --red / --magenta).
   ============================================================ */

/* terminal-wrap: holds the xterm host (.terminal) + the conversation overlay.
   Carries the flex sizing the bare .terminal used to get directly from .pane,
   so wrapping is layout-neutral. */
.terminal-wrap {
  flex: 1; min-height: 0;
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
}
.terminal-wrap > .terminal { flex: 1; min-height: 0; }

/* header toggle (Terminal | 화면) */
.aconv-toggle {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  margin-right: 4px;
}
.aconv-tgl-btn {
  font: 500 10.5px "Geist Mono", monospace;
  background: transparent; color: var(--muted);
  border: 0; padding: 3px 8px; cursor: pointer; line-height: 1.4;
}
.aconv-tgl-btn:hover { color: var(--text-2); background: #1a1a1a; }
.aconv-tgl-btn.is-active { background: var(--accent); color: #0a0a0a; }
body.mobile .aconv-tgl-btn { padding: 4px 7px; }

/* overlay: covers the terminal body; scrolls its own content */
.aconv-overlay {
  position: absolute; inset: 0; z-index: 4;
  overflow-y: auto; overflow-x: hidden;
  background: var(--bg);
  padding: 10px 12px 14px;
  -webkit-overflow-scrolling: touch;
}
.aconv-overlay[hidden] { display: none; }
.aconv-overlay::-webkit-scrollbar { width: 8px; }
.aconv-overlay::-webkit-scrollbar-track { background: transparent; }
.aconv-overlay::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 8px; }

/* empty / placeholder */
.aconv-empty {
  color: var(--muted); font-size: 14px; text-align: center;
  padding: 44px 0; font-family: "Geist Mono", monospace;
}

/* message card */
.aconv-msg {
  border: 1px solid var(--line); border-left-width: 2px; border-radius: 8px;
  padding: 8px 11px; margin-bottom: 8px; background: var(--panel);
}
.aconv-role-user { border-left-color: var(--accent); }
.aconv-role-assistant { border-left-color: var(--magenta); }
.aconv-role-system { border-left-color: var(--muted); opacity: .92; }
.aconv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.aconv-role-badge { font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--muted); }
.aconv-role-user .aconv-role-badge { color: var(--accent); }
.aconv-role-assistant .aconv-role-badge { color: var(--magenta); }
.aconv-usage { margin-left: auto; font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--muted); }

/* message text + code */
.aconv-text { font-size: 14.5px; line-height: 1.55; color: var(--text-2); word-break: break-word; }
.aconv-text-seg { white-space: normal; }
.aconv-inline {
  font-family: "Geist Mono", monospace; font-size: 13px;
  background: rgba(139,148,158,0.14); padding: 1px 4px; border-radius: 3px; color: var(--text);
}
.aconv-code {
  background: #050506; border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-family: "Geist Mono", monospace; font-size: 13px;
  color: var(--text-2); overflow-x: auto; white-space: pre; margin: 6px 0;
}
.aconv-code-wrap { position: relative; }
.aconv-code-wrap .aconv-code { margin: 6px 0; }

/* collapsible thinking / reasoning */
.aconv-thinking { margin-bottom: 6px; }
.aconv-thinking > summary { font-size: 13px; color: var(--muted); cursor: pointer; list-style: none; }
.aconv-thinking > summary::-webkit-details-marker { display: none; }
.aconv-thinking > summary::before { content: "\25B8 "; color: var(--muted); }
.aconv-thinking[open] > summary::before { content: "\25BE "; }
.aconv-think-body {
  font-size: 13.5px; color: var(--muted); line-height: 1.5;
  padding: 6px 0 2px 8px; border-left: 2px solid var(--line); margin-top: 4px;
}

/* tool calls */
.aconv-tools { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.aconv-tool {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-2); padding: 3px 6px; border-radius: 5px;
  background: rgba(139,148,158,0.07);
}
.aconv-tool-name { font-weight: 600; color: var(--text); }
.aconv-tool-sum {
  color: var(--muted); font-family: "Geist Mono", monospace; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.aconv-tool-st { margin-left: auto; flex-shrink: 0; }
.aconv-tool.is-completed .aconv-tool-st { color: var(--green); }
.aconv-tool.is-error .aconv-tool-st { color: var(--red); }
.aconv-tool.is-running .aconv-tool-st { color: var(--amber); }
.aconv-tool-result { flex-basis: 100%; margin-top: 2px; }
.aconv-tool-result > summary { font-size: 12px; color: var(--muted); cursor: pointer; }

/* copy buttons (message / code / tool result) */
.aconv-copy-btn, .aconv-code-copy {
  padding: 1px 6px; font-size: 13px; line-height: 1.4;
  color: var(--muted); background: transparent;
  border: 1px solid transparent; border-radius: 4px;
  cursor: pointer; opacity: .55; transition: opacity .12s, background .12s, color .12s;
}
.aconv-copy-btn { margin-left: 6px; }
.aconv-head:hover .aconv-copy-btn, .aconv-code-wrap:hover .aconv-code-copy { opacity: 1; }
.aconv-copy-btn:hover, .aconv-code-copy:hover { background: #1a1a1a; color: var(--text); border-color: var(--line); }
.aconv-copy-btn.is-copied, .aconv-code-copy.is-copied { color: var(--green); opacity: 1; }
.aconv-code-copy { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--panel); }

/* image gallery + thumbnails */
.aconv-img-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.aconv-img-thumb {
  max-width: 180px; max-height: 130px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 6px; cursor: zoom-in;
  background: #050506; transition: border-color .12s, transform .12s;
}
.aconv-img-thumb:hover { border-color: var(--accent); transform: scale(1.02); }
.aconv-img-missing {
  font-size: 13px; color: var(--muted); border: 1px dashed var(--line);
  border-radius: 6px; padding: 8px 12px;
}

/* lightbox (self-contained; mounted on body) */
.aconv-lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.6); display: grid; place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.aconv-lb-box {
  width: 90vw; max-width: 1100px; height: 88vh;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.7);
}
.aconv-lb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.aconv-lb-count { font-family: "Geist Mono", monospace; font-size: 14px; color: var(--muted); }
.aconv-lb-btns { display: flex; align-items: center; gap: 8px; }
.aconv-lb-btn {
  padding: 4px 12px; font-size: 14px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.aconv-lb-btn:hover { background: #1a1a1a; border-color: var(--accent); }
.aconv-lb-x {
  width: 26px; height: 26px; border-radius: 6px; color: var(--muted);
  font-size: 16px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; cursor: pointer;
}
.aconv-lb-x:hover { background: #1a1a1a; color: var(--text); }
.aconv-lb-body { flex: 1; display: grid; place-items: center; overflow: auto; padding: 14px; background: #050506; }
.aconv-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; cursor: zoom-in; }
.aconv-lb-body.is-zoomed { place-items: start; cursor: zoom-out; }
.aconv-lb-body.is-zoomed .aconv-lb-img { max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out; }

@media (max-width: 720px) {
  .aconv-lb-box { width: 100vw; height: 100vh; border-radius: 0; }
  .aconv-img-thumb { max-width: 130px; max-height: 100px; }
}

/* ═══════════════ T3.1 — Plans tab (.aplans-*) ═══════════════ */

/* toolbar button count badge (#btn-plans) */
#btn-plans { position: relative; }
.aplans-tb-badge {
  position: absolute; top: -3px; right: -4px;
  min-width: 13px; height: 13px; padding: 0 3px;
  border-radius: 7px;
  background: var(--accent); color: #fff;
  font: 600 9px/13px "Geist Mono", monospace;
  text-align: center;
  pointer-events: none;
}

.aplans-modal-card { width: min(760px, 100%); }
.aplans-count { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; }
.aplans-list { display: flex; flex-direction: column; gap: 10px; }

.aplans-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 36px 16px; text-align: center;
}
.aplans-empty-ic { font-size: 22px; color: var(--muted); }
.aplans-empty-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.aplans-empty-sub { font-size: 11.5px; color: var(--muted); max-width: 420px; line-height: 1.5; }

/* one plan card (rendered by agent-plans.js renderPlansList) */
.aplans-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}

.aplans-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* engine badge — Helm PLAN_AGENT_ACCENT colors (CC orange / CX blue / OC purple) */
.aplans-eng {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 17px; padding: 0 5px;
  border-radius: 4px; flex: none;
  font: 600 10px/17px "Geist Mono", monospace;
  background: #1d1d1f; color: var(--text-2);
}
.aplans-eng.is-orange { background: rgba(232,122,82,.16); color: #e87a52; }
.aplans-eng.is-blue { background: rgba(91,142,247,.16); color: var(--accent); }
.aplans-eng.is-purple { background: rgba(192,132,252,.16); color: var(--magenta); }
.aplans-title {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aplans-time { flex: none; font-size: 11px; color: var(--muted); font-family: "Geist Mono", monospace; }

.aplans-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-2); }
.aplans-meta-sess { max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aplans-meta-state { color: var(--muted); }
.aplans-meta-state.is-live { color: var(--green); }

/* plan markdown body (escaped segments — agent-conv parseSegments) */
.aplans-body {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px; line-height: 1.55; color: var(--text-2);
}
.aplans-text { white-space: normal; word-break: break-word; }
.aplans-body-empty { color: var(--muted); font-style: italic; }
.aplans-inline {
  font-family: "Geist Mono", monospace; font-size: 11px;
  background: #1a1a1c; border-radius: 4px; padding: 1px 4px; color: var(--cyan);
}
.aplans-code {
  margin: 8px 0; padding: 8px 10px;
  background: #0d0d0f; border: 1px solid var(--line-soft); border-radius: 6px;
  font: 11px/1.5 "Geist Mono", monospace; color: var(--text-2);
  overflow-x: auto; white-space: pre;
}

.aplans-actions { display: flex; gap: 8px; justify-content: flex-end; }
.aplans-exec, .aplans-del {
  font: 12px "Geist", sans-serif; cursor: pointer;
  border-radius: 6px; padding: 5px 12px;
  border: 1px solid var(--line); background: var(--tab-active); color: var(--text);
}
.aplans-exec:hover { border-color: var(--accent); color: var(--accent); }
.aplans-del { color: var(--muted); }
.aplans-del:hover { border-color: var(--red); color: var(--red); }

/* ═══════════════ T3.2 — quick controls (.actl-*) ═══════════════ */

.actl-strip {
  display: flex; align-items: center; gap: 4px;
  flex: none;
}
.actl-chip {
  font: 11px "Geist", sans-serif; cursor: pointer;
  padding: 3px 8px; border-radius: 5px;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.actl-chip:hover { background: #1a1a1c; color: var(--text); }
/* engine accent (Helm agent colors: claude orange / codex blue / opencode purple) */
.actl-strip.is-claude .actl-chip { border-color: rgba(232,122,82,.35); }
.actl-strip.is-claude .actl-chip:hover { color: #e87a52; }
.actl-strip.is-codex .actl-chip { border-color: rgba(91,142,247,.35); }
.actl-strip.is-codex .actl-chip:hover { color: var(--accent); }
.actl-strip.is-opencode .actl-chip { border-color: rgba(192,132,252,.35); }
.actl-strip.is-opencode .actl-chip:hover { color: var(--magenta); }

/* narrow screens: chips would crowd the 42px mobile header — hide like the rail */
@media (max-width: 720px) {
  .actl-strip { display: none; }
}

/* ═══════════════ T3.4 — settings modal (.aset-*) ═══════════════ */

.aset-card { width: min(480px, 100%); }
.aset-body { gap: 10px; }
.aset-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--text);
}
.aset-label { color: var(--text); }
.aset-val { color: var(--muted); font-family: "Geist Mono", monospace; font-size: 11px; margin-left: 6px; }
.aset-ctl { display: flex; align-items: center; gap: 8px; }
.aset-ctl input[type="range"] { width: 150px; accent-color: var(--accent); }
.aset-row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.aset-mini-btn {
  font: 11px "Geist", sans-serif; cursor: pointer;
  padding: 3px 8px; border-radius: 5px;
  background: var(--tab-active); color: var(--text-2);
  border: 1px solid var(--line);
}
.aset-mini-btn:hover { color: var(--text); border-color: var(--accent); }
.aset-select {
  font: 12px "Geist", sans-serif;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
}
.aset-hint { font-size: 11px; color: var(--amber); }
.aset-keys { border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 2px; }
.aset-keys-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.aset-keys-list { display: flex; flex-direction: column; gap: 4px; }
.aset-keys-row { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-2); }
.aset-key {
  font: 10.5px "Geist Mono", monospace; color: var(--text);
  background: #1a1a1c; border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 6px; min-width: 92px; text-align: center;
}

/* ═══════════════ T4.2 — vertical split (.split.column) ═══════════════ */
/* Additive: default layoutDir 'row' keeps producing today's `.split.row`
   markup byte-for-byte; this block only engages when the user flips the
   direction. Split.js v1 vertical gutters already have their height/cursor
   rules in the ".gutter" block above (~line 551). Mobile is single-pane and
   always uses the 'row' wrap class, so nothing here applies there. */
.split.column { flex-direction: column; }
.split.column > .pane { min-width: 0; min-height: 0; }
.split.column > .gutter { width: 100%; }
/* mobile: the layout-direction toggle is meaningless in 1-pane mode — hide it
   like #btn-plans/#btn-settings (T3 precedent). */
body.mobile #btn-layout-dir { display: none; }

/* ═══════════════ T4.3 — rail system stats card (.arail-stats) ═══════════════ */
/* Dormant until the restart-gated server deploy emits cpu/memMB on session
   summaries; renders inside the agent rail only when it is already visible. */
.arail-stats { border-top: 1px solid var(--line-soft); padding-top: 8px; }
.arail-stat-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.arail-stat-label {
  color: var(--muted); text-transform: uppercase; letter-spacing: .5px;
  font-size: 11px; min-width: 28px;
}
.arail-stat-row .arail-bar-wrap { flex: 1; }
.arail-stat-val {
  font-family: "Geist Mono", monospace; color: var(--text-2); font-size: 11px;
  min-width: 44px; text-align: right;
}
.arail-stat-mem { flex: 1; }

/* ═══════════════ Infra section (right info panel) ═══════════════ */
/* spec: docs/superpowers/specs/2026-07-03-infra-status-strip-design.md */
.infra-agg { margin-left: 6px; font-size: 10px; color: var(--text-2); font-weight: 400; }
.infra-row { cursor: pointer; }
.infra-row.infra-off { opacity: .45; }
.infra-foot { margin-top: 4px; font-size: 10px; color: var(--text-2); }
.infra-foot a, .infra-row a { color: inherit; text-decoration: underline dotted; }
/* 구독 사용량 (Claude/Codex) — 서비스 목록과 얇은 구분선 */
.infra-usage:not(:empty) { margin-top: 6px; padding-top: 6px; border-top: 1px solid #161616; }
/* 다중 계정: 현재 live 크레덴셜인 계정 배지 + 한도 항목 단위 줄바꿈 */
.infra-usage .cc-live {
  display: inline-block; white-space: nowrap;
  margin-left: 4px; padding: 0 3px;
  font-size: 8px; font-weight: 600; letter-spacing: .04em;
  color: var(--green); border: 1px solid var(--green); border-radius: 3px;
  vertical-align: 1px;
}
.infra-usage .u-val { white-space: nowrap; }
/* 구독 (월정액) — 제품/금액 2줄 스택 (좁은 패널에서 한 줄 k/v 가 깨지는 것 방지) */
.infra-subs:not(:empty) { margin-top: 6px; padding-top: 6px; border-top: 1px solid #161616; }
.infra-sub { padding: 2px 0; line-height: 1.35; }
.infra-sub .s-name { display: block; color: #8a8a8a; }
.infra-sub .s-val { display: block; color: var(--text); word-break: keep-all; }
.new-session-card { width: min(680px, 100%); }
.new-session-close { padding: 0; border: 0; background: transparent; font-size: 18px; }
.new-session-body { gap: 10px; }
.new-session-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.new-session-field input {
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 12px "Geist Mono", monospace;
}
.new-session-field input:focus { outline: none; border-color: var(--accent); }
.new-session-section-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text); }
.new-session-section-head span:last-child { color: var(--muted); font-family: "Geist Mono", monospace; }
.new-session-help { margin: -4px 0 0; color: var(--muted); font-size: 11px; }
.new-session-projects {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
  max-height: 330px;
  overflow: auto;
  color: var(--muted);
}
.new-session-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 180px);
  gap: 10px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}
.new-session-project-main { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--text); font-size: 12px; }
.new-session-project-main input { accent-color: var(--accent); }
.new-session-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.new-session-project-state { color: var(--muted); font-size: 10px; }
.new-session-project-state.dirty { color: var(--amber); }
.new-session-project select {
  min-width: 0;
  padding: 5px 7px;
  background: var(--panel);
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  font: 11px "Geist Mono", monospace;
}
.new-session-project select:disabled { opacity: .45; }
.new-session-error { color: var(--red); font-size: 11px; }
.new-session-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.new-session-actions button {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  font: 12px inherit;
}
.new-session-actions #new-session-submit { border-color: var(--accent); color: var(--text); background: rgba(91, 142, 247, .14); }
.new-session-actions button:disabled { opacity: .5; cursor: wait; }

@media (max-width: 560px) {
  .new-session-project { grid-template-columns: 1fr; }
}