/* ── CSS Custom Properties ──────────────────────────────────────────────── */
/* Dashboard-specific layout + extra semantic tokens.
   Color and typography tokens come from tokens.css (vendored from
   lesquel/remote-control-landing@6dd3e09c04cb210fe1b15762c8e34cb94239d406).
   Do NOT redefine palette tokens here — they belong in tokens.css and
   arrive via a sibling <link>. */
:root {
  /* Typography alias — TUI uses mono everywhere */
  --ui: var(--mono);

  /* Semantic accent tokens not provided by tokens.css */
  --success: oklch(0.78 0.17 145);

  /* Traffic light chrome (literal hex; PR 4/5 may revisit) */
  --tl-red:    #ff5f56;
  --tl-yellow: #ffbd2e;
  --tl-green:  #27c93f;

  /* Layout */
  --radius-sm: 2px;
  --header-h: 36px;
  --footer-h: 28px;
  --sidebar-w: 220px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg);
  color: var(--fg);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Traffic-light Chrome + Header bar ──────────────────────────────────── */
#tui-header {
  display: flex;
  align-items: center;
  height: var(--header-h);
  background: color-mix(in oklch, var(--bg-2) 85%, transparent);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  padding: 0 10px;
  gap: 10px;
  user-select: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tl-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-right: 6px;
}

.tl-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tl-dot.red    { background: var(--tl-red); }
.tl-dot.yellow { background: var(--tl-yellow); }
.tl-dot.green  { background: var(--tl-green); }

.header-sep {
  color: var(--line-2);
  font-size: 11px;
  flex-shrink: 0;
}

.header-breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  min-width: 0;
  font-size: 12px;
  color: var(--fg-muted);
}

.header-breadcrumb .bc-app {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.header-breadcrumb .bc-sep {
  color: var(--line-2);
  flex-shrink: 0;
}

.header-breadcrumb .bc-session {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SSE connection indicator */
.conn-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  flex-shrink: 0;
}

.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-dim);
  transition: background 0.3s;
  flex-shrink: 0;
}
.conn-dot.connected     { background: var(--success); box-shadow: 0 0 4px var(--success); }
.conn-dot.error         { background: var(--warn); }
.conn-dot.disconnected  { background: var(--danger); }

.conn-label {
  color: var(--fg-muted);
  font-size: 11px;
  white-space: nowrap;
}
.conn-label.reconnecting { color: var(--warn); }

/* Header action buttons (minimal, TUI style) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-3);
  color: var(--fg-muted);
  transition: border-color 0.15s, color 0.15s;
  min-height: 24px;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { opacity: 0.8; }

.btn-primary {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn-primary:hover { background: rgba(94,158,255,.1); }

.btn-ghost {
  background: none;
  border-color: var(--line);
  color: var(--fg-muted);
}

.btn-allow {
  background: transparent;
  border-color: var(--success);
  color: var(--success);
  flex: 1;
  min-height: 32px;
}
.btn-allow:hover { background: rgba(39,201,63,.1); }

.btn-deny {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
  flex: 1;
  min-height: 32px;
}
.btn-deny:hover { background: rgba(255,95,86,.1); }

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover { background: rgba(255,95,86,.1); }

.btn-icon {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg-muted);
  padding: 3px 7px;
  font-size: 12px;
  min-height: 24px;
}

/* ── Permission Banner ───────────────────────────────────────────────────── */
#perm-banner {
  display: none;
  background: rgba(255,189,46,.05);
  border-bottom: 1px solid rgba(255,189,46,.4);
  padding: 8px 14px;
  flex-shrink: 0;
}
#perm-banner.visible { display: block; }
.perm-item { display: flex; flex-direction: column; gap: 6px; }
.perm-title {
  font-weight: 700;
  color: var(--warn);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.perm-desc {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
  word-break: break-all;
}
.perm-actions { display: flex; gap: 8px; }

/* ── Main Layout ─────────────────────────────────────────────────────────── */
#layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar / Sessions Panel ───────────────────────────────────────────── */
#sessions-panel {
  width: var(--sidebar-w);
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  transition: width 0.2s, transform 0.2s;
}

#sessions-panel.collapsed {
  width: 0;
  overflow: hidden;
}

#sessions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  flex-shrink: 0;
}

#sessions-list {
  flex: 1;
  overflow-y: auto;
}

.session-item {
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(58,53,80,.5);
  transition: background 0.1s;
  border-left: 2px solid transparent;
  font-size: 12px;
}
.session-item:hover { background: var(--bg-2); }
.session-item.active {
  background: rgba(94,158,255,.08);
  border-left-color: var(--accent);
}

.session-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 2px;
}
.session-title-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.session-time { font-size: 10px; color: var(--fg-dim); }
.session-model-meta { font-family: var(--mono); font-size: 9px; color: var(--fg-muted); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

/* Status badges */
.badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.badge-idle  { border-color: rgba(39,201,63,.4);  color: var(--success); }
.badge-busy  { border-color: rgba(94,158,255,.4);  color: var(--accent);  }
.badge-error { border-color: rgba(255,95,86,.4);  color: var(--danger);  }

#new-session-big {
  width: 100%;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-family: var(--mono);
  padding: 7px 10px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  font-weight: 600;
}
#new-session-big:hover { background: rgba(94,158,255,.06); }

/* Agent filter */
.sessions-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
}
.sessions-filter label {
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
}
.sessions-filter select {
  flex: 1;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 18px 2px 5px;
  font-size: 11px;
  font-family: var(--mono);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-dim) 50%),
                    linear-gradient(135deg, var(--fg-dim) 50%, transparent 50%);
  background-position: calc(100% - 8px) 50%, calc(100% - 5px) 50%;
  background-size: 3px 3px, 3px 3px;
  background-repeat: no-repeat;
}
.sessions-filter select:hover { border-color: var(--accent); }
.sessions-filter select:focus { border-color: var(--accent); }

/* ── Folder tree view ───────────────────────────────────────────────────── */

.folder-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(58,53,80,.4);
  border-left: 2px solid transparent;
  background: var(--bg-2);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  user-select: none;
  transition: background 0.1s, color 0.12s;
}
.folder-row:hover {
  background: var(--bg-3);
  color: var(--fg-muted);
}
.folder-row--active {
  border-left-color: var(--accent);
}

.folder-chevron {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--fg-dim);
  transition: transform 0.15s;
  display: inline-block;
}
/* collapsed chevron — CSS-only fallback; JS also swaps the character */
.folder-chevron--collapsed {
  transform: rotate(0deg);
}

.folder-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
}

.folder-count {
  flex-shrink: 0;
  font-size: 9px;
  background: var(--bg-3);
  color: var(--fg-dim);
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.folder-children {
  padding-left: 12px;
  /* tighter rhythm inside folders */
}
.folder-children .session-item {
  font-size: 11.5px;
  padding: 5px 10px 5px 8px;
}

/* Agent badges */
.agent-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.agent-badge--plan   { border-color: rgba(94,158,255,.4);  color: var(--accent);  }
.agent-badge--build  { border-color: rgba(39,201,63,.4);   color: var(--success); }
.agent-badge--custom { border-color: color-mix(in oklch, var(--accent) 35%, transparent); color: var(--accent);  }
.agent-badge--compact {
  font-size: 8px;
  padding: 0 4px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Main Panel ──────────────────────────────────────────────────────────── */
#main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Session Info Bar ────────────────────────────────────────────────────── */
#session-info-bar {
  padding: 5px 14px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: var(--bg-2);
}
#session-info-bar.hidden { display: none; }
.info-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.info-top-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.info-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  color: var(--fg);
}
.info-id-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--fg-muted);
}
.info-id {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  cursor: pointer;
  user-select: all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.info-id:hover { border-color: var(--accent); color: var(--accent); }
.info-id-copy {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--mono);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.info-id-copy:hover { border-color: var(--accent); color: var(--accent); }
.info-id-copy-label { font-weight: 600; }
.info-id-hint { color: var(--fg-dim); font-size: 10px; }
.info-id-hint code {
  font-family: var(--mono);
  background: var(--bg);
  padding: 0 4px;
  border-radius: 2px;
  color: var(--fg-muted);
  font-size: 10px;
}

#abort-btn { display: none; }
#abort-btn.visible { display: inline-flex; }

/* ── Subagents Panel ─────────────────────────────────────────────────────── */
.subagents-panel {
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  max-height: 35vh;
  overflow-y: auto;
}
.subagents-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 5px;
  cursor: pointer;
  user-select: none;
}
.subagents-panel-header .subagents-count {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg-muted);
  border-radius: 2px;
  padding: 0 4px;
  font-size: 9px;
}
.subagents-panel-header .subagents-chevron {
  margin-left: auto;
  color: var(--fg-dim);
  transition: transform 0.2s;
}
.subagents-panel.collapsed .subagents-chevron { transform: rotate(-90deg); }
.subagents-panel.collapsed .subagents-list { display: none; }
.subagents-list { display: flex; flex-direction: column; gap: 4px; }
.subagent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 11px;
}
.subagent-item:hover { border-color: var(--accent); }
.subagent-item-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.subagent-item-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.subagent-item-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subagent-item-id {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--fg-dim);
  cursor: pointer;
  user-select: all;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.subagent-item-id:hover { color: var(--accent); border-color: var(--accent); }
.subagent-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.subagent-open {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg-muted);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 10px;
  font-family: var(--mono);
  cursor: pointer;
  font-weight: 600;
}
.subagent-open:hover { border-color: var(--accent); color: var(--accent); }

/* ── Files Changed Panel ─────────────────────────────────────────────────── */
.files-changed-panel {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  overflow: hidden;
  max-height: 30vh;
  display: flex;
  flex-direction: column;
}

.files-changed-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.files-changed-count {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg-muted);
  border-radius: 2px;
  padding: 0 4px;
  font-size: 9px;
}

.files-changed-chevron {
  margin-left: auto;
  color: var(--fg-dim);
  transition: transform 0.2s;
}
.files-changed-panel.collapsed .files-changed-chevron { transform: rotate(-90deg); }
.files-changed-panel.collapsed .files-changed-list    { display: none; }

.files-changed-list {
  overflow-y: auto;
  flex: 1;
}

.files-changed-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 11px;
  font-family: var(--mono);
  border-bottom: 1px solid rgba(58,53,80,.3);
  transition: background 0.1s;
}
.files-changed-item:hover { background: var(--bg-2); }
.files-changed-item:last-child { border-bottom: none; }

.files-changed-path {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-muted);
  font-size: 11px;
}

.files-changed-stats {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  font-size: 10px;
  font-family: var(--mono);
}

.files-changed-add { color: var(--success); }
.files-changed-del { color: var(--danger);  }

.files-changed-empty {
  padding: 8px 10px;
  font-size: 10px;
  color: var(--fg-dim);
  font-style: italic;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  flex-shrink: 0;
  padding: 0 14px;
}
.tab {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
  font-family: var(--mono);
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; flex: 1; overflow: hidden; flex-direction: column; }
.tab-panel.active { display: flex; }

/* ── Messages ────────────────────────────────────────────────────────────── */
#messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* TUI-style message rendering */
.message {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
  padding: 2px 0;
}

.message-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.message.user .message-role     { color: var(--accent); }
.message.assistant .message-role { color: var(--success); }

/* TUI message body — flat, no box */
.message-body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  word-break: break-word;
  color: var(--fg);
  padding: 0 0 6px 0;
}

.message-body.md-rendered h1,
.message-body.md-rendered h2,
.message-body.md-rendered h3 {
  margin: .5em 0 .25em;
  font-size: 13px;
  color: var(--fg);
}
.message-body.md-rendered p { margin-bottom: .4em; }
.message-body.md-rendered ul,
.message-body.md-rendered ol { margin: .3em 0 .3em 1.2em; }
.message-body.md-rendered code:not([class]) {
  background: var(--bg-3);
  padding: 0 4px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .9em;
  color: var(--accent);
}
.message-body.md-rendered pre {
  margin: .5em 0;
  border-radius: var(--radius);
  overflow: auto;
  font-size: 11px;
  border: 1px solid var(--line);
}
.message-body.md-rendered pre code { padding: 0; background: none; }

/* Subtle separator between messages */
.message + .message { border-top: 1px solid rgba(58,53,80,.4); padding-top: 6px; }

/* TUI prefix lines */
.tui-tool-line {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  padding: 1px 0;
}
.tui-tool-line .tui-prefix { color: var(--fg-muted); margin-right: 6px; }
.tui-tool-line .tui-tool-name { color: var(--fg); }

/* Tool blocks */
.tool-block {
  background: transparent;
  border: none;
  border-left: 2px solid var(--line);
  padding-left: 10px;
  margin: 2px 0;
  font-size: 12px;
  overflow: hidden;
}
.tool-block.hidden-tools { display: none; }
.tool-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  cursor: pointer;
  user-select: none;
  color: var(--fg-muted);
  font-size: 11px;
}
.tool-header:hover { color: var(--fg); }
.tool-name { font-family: var(--mono); font-weight: 600; color: var(--fg-muted); }
.tool-status { font-size: 9px; padding: 0 4px; border-radius: 2px; }
.tool-status.pending  { color: var(--warn); }
.tool-status.running  { color: var(--accent); }
.tool-status.completed { color: var(--success); }
.tool-status.error    { color: var(--danger); }
.tool-icon { font-size: 11px; width: 14px; }
.tool-chevron { margin-left: auto; color: var(--fg-dim); transition: transform 0.2s; font-size: 9px; }
.tool-block.open .tool-chevron { transform: rotate(90deg); }
.tool-body {
  display: none;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  word-break: break-all;
}
.tool-block.open .tool-body { display: block; }
.tool-body pre { white-space: pre-wrap; }

/* ── Tool line (compact one-line summary, OpenCode TUI style) ─────────────── */
/* These extend / override the existing .tool-block / .tool-header rules */

.tool-line {
  font-family: var(--mono);
  font-size: 13px;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
.tool-line:hover { color: var(--fg); }

/* Status prefix symbol (replaces old .tool-icon) */
.tool-prefix {
  flex-shrink: 0;
  font-size: 10px;
  width: 12px;
  text-align: center;
}
.tool-prefix--pending  { color: var(--warn); }
.tool-prefix--running  { color: var(--accent); animation: tool-pulse 1s ease-in-out infinite; }
.tool-prefix--completed { color: var(--fg-dim); }
.tool-prefix--error    { color: var(--danger); }

@keyframes tool-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* Tool name accent */
.tool-line .tool-name {
  color: var(--fg);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Secondary arg text */
.tool-arg {
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

/* Right-side metadata: exit codes, match counts, etc. */
.tool-meta {
  color: var(--fg-dim);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* MCP server bracket */
.tool-mcp-server {
  color: var(--accent);
  font-size: 11px;
  flex-shrink: 0;
}

/* Status-specific overrides for meta/name */
.tool-status--error { color: var(--danger) !important; }
.tool-status--pending { color: var(--warn) !important; }

/* ── Panel Error Boundary ────────────────────────────────────────────────── */
.panel-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,95,86,.06);
  border: 1px solid rgba(255,95,86,.3);
  border-radius: var(--radius);
  margin: 8px 14px;
  font-size: 11px;
  color: var(--danger);
}
.panel-error-retry {
  background: none;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 10px;
  font-family: var(--mono);
  cursor: pointer;
  margin-left: auto;
}
.panel-error-retry:hover { background: rgba(255,95,86,.1); }

/* ── Diff Tab ────────────────────────────────────────────────────────────── */
#diff-panel {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.diff-container {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
}
.diff-line { font-family: var(--mono); padding: 1px 8px; font-size: 11px; white-space: pre; }
.diff-add  { background: rgba(39,201,63,.07);  color: #4ec94a; }
.diff-del  { background: rgba(255,95,86,.07);  color: #e86b65; }
.diff-hunk { background: rgba(94,158,255,.07); color: #5e9eff; }
/* File-section anchor headers in the diff view */
.diff-file-header {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  background: rgba(94,158,255,.05);
  border-bottom: 1px solid var(--line);
  color: var(--fg-dim);
  cursor: default;
  user-select: none;
}
/* Highlight pulse when scrolled-to via file-row click */
@keyframes diff-section-highlight {
  0%   { background: rgba(94,158,255,.18); }
  100% { background: transparent; }
}
.diff-section--highlight {
  animation: diff-section-highlight 1.5s ease-out forwards;
  border-radius: var(--radius-sm);
}

/* ── Prompt Composer ─────────────────────────────────────────────────────── */
#input-bar {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  flex-shrink: 0;
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px;
}

#prompt-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  border-radius: 0;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 13px;
  resize: none;
  min-height: 28px;
  max-height: 120px;
  outline: none;
  line-height: 1.5;
}
#prompt-input:focus { border-bottom-color: var(--accent); }
#prompt-input::placeholder { color: var(--fg-dim); }

.btn-send {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  min-width: 32px;
  min-height: 28px;
  padding: 0 10px;
  font-size: 14px;
  font-family: var(--mono);
  border-radius: var(--radius-sm);
}
.btn-send:hover { background: rgba(94,158,255,.1); }

/* Prompt label strip — mode/model/provider */
.input-label-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 6px;
  font-size: 10px;
  color: var(--fg-dim);
  border-top: none;
}
.input-label-strip .lbl-agent  { color: var(--accent); font-weight: 700; }
.input-label-strip .lbl-sep    { color: var(--line-2); }
.input-label-strip .lbl-model  { color: var(--fg-muted); }
.input-label-strip .lbl-provider { color: var(--fg-dim); }

/* ── Footer Shortcuts Bar ────────────────────────────────────────────────── */
#tui-footer {
  height: var(--footer-h);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 10px;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--fg-dim);
  gap: 16px;
  overflow: hidden;
}

.footer-left { display: flex; align-items: center; gap: 10px; }
.footer-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.footer-shortcut {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.footer-shortcut kbd {
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--fg-muted);
}
.footer-shortcut .fsc-label { color: var(--fg-dim); }

.footer-sep { color: var(--line); }

/* Clickable footer shortcuts */
.footer-shortcut--btn { border-radius: var(--radius-sm); padding: 1px 4px; }
.footer-shortcut--btn:hover { background: rgba(94,158,255,.08); color: var(--fg); }

/* ── Multi-view grid (kept for backward compat, prefer palette) ─────────── */
#multiview-grid {
  display: none;
  flex: 1;
  overflow: auto;
  padding: 10px;
  gap: 10px;
  flex-wrap: wrap;
  align-content: flex-start;
}
#multiview-grid.active { display: flex; }
.mv-panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 360px;
  flex: 1 1 360px;
  max-height: 500px;
}
.mv-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mv-title { font-size: 11px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-badge { font-size: 9px; }
.mv-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  color: var(--fg-muted);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-strip-agent { font-weight: 700; }
.mv-strip-sep { color: var(--fg-dim); }
.mv-strip-model, .mv-strip-provider { color: var(--fg-muted); }
.mv-close { background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: 10px; padding: 2px 4px; }
.mv-close:hover { color: var(--danger); }
.mv-messages {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
}
.mv-msg { display: flex; flex-direction: column; gap: 2px; }
.mv-msg-role { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.mv-msg.user .mv-msg-role { color: var(--accent); }
.mv-msg.assistant .mv-msg-role { color: var(--success); }
.mv-msg-body {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 100px;
  overflow: auto;
}
.mv-input-row { display: flex; gap: 4px; padding: 5px 6px; border-top: 1px solid var(--line); flex-shrink: 0; }
.mv-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: 11px;
  font-family: var(--mono);
  outline: none;
}
.mv-input:focus { border-color: var(--accent); }
.mv-send {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 11px;
  font-family: var(--mono);
}
#mv-add-btn {
  min-width: 180px;
  max-width: 260px;
  height: 50px;
  background: transparent;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}
#mv-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Status dot shown in the multi-view panel header */
.mv-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--fg-dim);
}
.mv-status-dot.badge-idle   { background: var(--fg-dim); }
.mv-status-dot.badge-busy   { background: var(--warn); box-shadow: 0 0 6px var(--warn); animation: mv-pulse 1.4s ease-in-out infinite; }
.mv-status-dot.badge-error  { background: var(--danger);  box-shadow: 0 0 6px var(--danger); }
@keyframes mv-pulse {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}

/* Loading / empty / error states inside mv-messages */
.mv-loading, .mv-empty, .mv-error { font-family: var(--mono); }
.mv-error {
  color: var(--danger);
  font-size: .78rem;
  text-align: center;
  padding: 12px;
}
.mv-retry {
  background: none;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-family: var(--mono);
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: 4px;
}
.mv-retry:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); }

/* Compact rendering of the shared message renderer inside a multi-view panel */
.mv-messages.mv-msgs--compact .message {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  margin: 0;
}
.mv-messages.mv-msgs--compact .message + .message { margin-top: 6px; }
.mv-messages.mv-msgs--compact .message-role {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mv-messages.mv-msgs--compact .message-body {
  font-size: 11px;
  line-height: 1.4;
  max-height: 180px;
  overflow: auto;
}
.mv-messages.mv-msgs--compact .tool-block {
  font-size: 10px;
  margin: 4px 0;
}
.mv-messages.mv-msgs--compact .reasoning-block {
  font-size: 10px;
  margin: 4px 0;
}

/* Inline session-list delete button */
.session-delete-btn {
  opacity: 0;
  background: transparent;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  margin-left: 4px;
  border-radius: var(--radius-sm);
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.session-item:hover .session-delete-btn { opacity: 1; }
.session-delete-btn:hover { color: var(--danger); background: rgba(255, 77, 77, .1); }
.session-delete-btn:focus-visible { opacity: 1; outline: 1px solid var(--danger); }

/* Danger-variant palette items (e.g. Delete Session) */
.palette-item--danger .palette-item-icon { color: var(--danger); }
.palette-item--danger:hover,
.palette-item--danger.selected {
  background: rgba(255, 77, 77, .08);
}
.palette-item--danger.selected .palette-item-label { color: var(--danger); }


/* ── Settings Modal ──────────────────────────────────────────────────────── */
/* The pre-Wave-5 #settings-modal rules (display: none + .open → flex) were
 * REMOVED in v1.16.12. They fought the .modal-backdrop class and won by
 * specificity (ID > class), which meant the modal stayed invisible even when
 * `modal.hidden = false` had been set. With those rules gone, the unified
 * `.modal-backdrop` + `.modal-backdrop[hidden]` rules control visibility
 * exactly like every other modal in the dashboard.
 */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}
.setting-row label { color: var(--fg-muted); flex: 1; }

/* Toggle switch */
.toggle { position: relative; width: 34px; height: 18px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  border-radius: 18px;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid var(--line);
}
.toggle-slider:before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fg-dim);
  top: 2px;
  left: 2px;
  transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .toggle-slider { background: rgba(94,158,255,.2); border-color: var(--accent); }
.toggle input:checked + .toggle-slider:before { transform: translateX(16px); background: var(--accent); }

/* ── Command Palette ─────────────────────────────────────────────────────── */
#command-palette {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,.75);
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
#command-palette.open { display: flex; }

.palette-box {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  width: 520px;
  max-width: 95vw;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

.palette-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.palette-search-icon {
  color: var(--fg-dim);
  font-size: 11px;
  flex-shrink: 0;
}

#palette-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  outline: none;
  padding: 2px 0;
}
#palette-input::placeholder { color: var(--fg-dim); }

.palette-hint {
  font-size: 10px;
  color: var(--fg-dim);
  flex-shrink: 0;
}

#palette-list {
  max-height: 340px;
  overflow-y: auto;
}

.palette-section {
  padding: 4px 0 2px;
}

.palette-section-label {
  padding: 4px 12px 2px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-dim);
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
  border-left: 2px solid transparent;
  transition: background 0.08s;
}
.palette-item:hover,
.palette-item.selected {
  background: rgba(94,158,255,.08);
  border-left-color: var(--accent);
}

.palette-item-icon {
  width: 14px;
  font-size: 11px;
  color: var(--fg-dim);
  flex-shrink: 0;
}

.palette-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}

.palette-item-label mark {
  background: rgba(94,158,255,.25);
  color: var(--accent);
  border-radius: 1px;
}

.palette-item-folder {
  margin-left: 8px;
  font-size: 9px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  flex-shrink: 1;
}

.palette-item-meta {
  font-size: 9px;
  color: var(--fg-dim);
  flex-shrink: 0;
}

.palette-item-kbd {
  font-size: 9px;
  color: var(--fg-dim);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 0 4px;
  font-family: var(--mono);
}

.palette-empty {
  padding: 16px 12px;
  font-size: 11px;
  color: var(--fg-dim);
  text-align: center;
}

/* ── Token Gate ──────────────────────────────────────────────────────────── */
#token-gate {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.no-token-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.no-token-card h2 { font-size: 14px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.no-token-card p  { color: var(--fg-muted); font-size: 12px; line-height: 1.5; max-width: 280px; }
.no-token-retry   { margin-top: 4px; padding: 6px 20px; font-size: 12px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: calc(var(--footer-h) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--fg);
  padding: 6px 16px;
  border-radius: var(--radius);
  font-size: 11px;
  font-family: var(--mono);
  transition: transform 0.25s;
  z-index: 500;
  pointer-events: none;
  white-space: nowrap;
}
#toast.visible { transform: translateX(-50%) translateY(0); }

/* ── Session Picker (legacy Ctrl+K — now deferred to palette) ────────────── */
#session-picker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.7);
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
#session-picker.open { display: flex; }
.picker-box {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 460px;
  max-width: 95vw;
  overflow: hidden;
}
#picker-input {
  width: 100%;
  background: var(--bg);
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--mono);
  outline: none;
}
#picker-list { max-height: 260px; overflow-y: auto; }
.picker-item {
  padding: 7px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
}
.picker-item:hover { background: var(--bg-3); }
.picker-item:last-child { border-bottom: none; }

/* ── Connect Screen (standalone mode) ───────────────────────────────────── */
.connect-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
  overflow-y: auto;
}
.connect-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.connect-logo { display: flex; align-items: center; gap: 12px; }
.connect-logo h1 { font-size: 14px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.connect-logo img { border-radius: 6px; }
.connect-subtitle { color: var(--fg-muted); font-size: 11px; margin-top: -8px; }
#connect-form { display: flex; flex-direction: column; gap: 12px; }
.connect-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--fg-dim);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.connect-input {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 12px;
  font-family: var(--mono);
  outline: none;
  transition: border-color 0.15s;
}
.connect-input:focus { border-color: var(--accent); }
.connect-submit { margin-top: 2px; padding: 8px; font-size: 12px; width: 100%; }
.connect-help {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 11px;
  color: var(--fg-muted);
}
.connect-help summary {
  cursor: pointer;
  color: var(--fg-muted);
  font-weight: 600;
  user-select: none;
  margin-bottom: 8px;
  font-size: 11px;
}
.connect-help summary:hover { color: var(--accent); }
.connect-help ol {
  margin: 6px 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.5;
}
.connect-help a { color: var(--accent); text-decoration: none; }
.connect-help a:hover { text-decoration: underline; }
.connect-help code {
  background: var(--bg);
  padding: 0 4px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .9em;
}

/* ── Scrollbars ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }

/* ── No-session empty state ──────────────────────────────────────────────── */
#no-session-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 12px;
  color: var(--fg-dim);
  text-align: center;
  padding: 40px 24px;
}
#no-session-state h3 { font-size: 13px; color: var(--fg-muted); font-weight: 600; }
#no-session-state p  { font-size: 11px; max-width: 280px; line-height: 1.5; }

/* ── Usage Indicator (TUI header right side) ─────────────────────────────── */
.usage-indicator-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.usage-indicator {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--fg-muted);
  white-space: nowrap;
  cursor: default;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}

.usage-indicator:hover {
  border-color: var(--line-2);
  color: var(--fg);
}

.usage-indicator--empty {
  opacity: 0.5;
  letter-spacing: .08em;
}

/* ── Agent Panel (sidebar below files-changed) ───────────────────────────── */
.agent-panel {
  border-top: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  overflow: hidden;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
}

.agent-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  border-bottom: 1px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.agent-panel-header:hover {
  color: var(--fg-muted);
  border-bottom-color: var(--line);
}

.agent-panel-title {
  flex: 1;
}

.agent-panel-chevron {
  font-size: 8px;
  color: var(--fg-dim);
  flex-shrink: 0;
}

.agent-panel-body {
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
}

.agent-panel-empty {
  color: var(--fg-dim);
  font-size: 10px;
  font-style: italic;
  padding: 4px 0;
}

.agent-panel-agent-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.agent-panel-name {
  font-weight: 700;
  font-size: 12px;
}

.agent-panel-builtin {
  font-size: 8px;
  color: var(--fg-dim);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.agent-panel-desc {
  font-size: 10px;
  color: var(--fg-muted);
  line-height: 1.4;
  margin-bottom: 4px;
}

.agent-panel-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 10px;
}

.agent-panel-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  width: 40px;
  flex-shrink: 0;
  padding-top: 1px;
}

.agent-panel-value {
  color: var(--fg-muted);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.agent-panel-model {
  color: var(--accent);
  font-size: 10px;
}

.agent-panel-prompt-row {
  flex-direction: column;
  gap: 4px;
}

.agent-panel-prompt-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.agent-panel-prompt {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--fg-muted);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 80px;
  overflow-y: auto;
  margin: 0;
  line-height: 1.4;
}

.agent-panel-expand-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: 9px;
  font-family: var(--mono);
  cursor: pointer;
  align-self: flex-start;
  font-weight: 600;
}
.agent-panel-expand-btn:hover { border-color: var(--accent); color: var(--accent); }

.agent-panel-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1;
}

.agent-panel-tool-chip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-muted);
  border-radius: 2px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.agent-panel-perm-chip {
  border-color: rgba(39,201,63,.35);
  color: var(--success);
}

/* ── Dynamic agent badge (from references.js renderAgentBadge) ───────────── */
/* color and border-color are set inline by renderAgentBadge() — no extra rule needed */
.agent-badge--dynamic {
  /* Inherits .agent-badge layout; inline style overrides color/border-color */
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1023px) {
  #sessions-panel {
    position: absolute;
    top: var(--header-h);
    left: 0;
    bottom: calc(var(--footer-h) + 50px);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s;
    border-right: 1px solid var(--line-2);
    width: var(--sidebar-w);
  }
  #sessions-panel.open-overlay {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,.5);
  }
}

/* Mobile */
@media (max-width: 639px) {
  :root {
    font-size: 12px;
  }
  #sessions-panel {
    width: 100%;
    max-width: 100%;
  }
  .folder-row {
    padding: 9px 10px;
    min-height: 40px;
  }
  .folder-chevron {
    font-size: 12px;
  }
  #tui-footer .footer-right { display: none; }
  .footer-mobile-toggle {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 4px;
    cursor: pointer;
    color: var(--fg-dim);
    font-size: 10px;
  }
  .mv-panel { min-width: 100%; }
  .info-id { max-width: 160px; }
}

@media (min-width: 640px) {
  .footer-mobile-toggle { display: none; }
}

/* ── Cost Panel (sidebar bottom) ─────────────────────────────────────────── */
.cost-panel {
  border-top: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  font-size: 10px;
  font-family: var(--mono);
}

.cost-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  user-select: none;
}
.cost-panel-header:hover { color: var(--fg-muted); }

.cost-panel-title { flex: 1; }

.cost-panel-toggle {
  background: none;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 8px;
  padding: 0 2px;
  font-family: var(--mono);
}

.cost-panel--collapsed .cost-panel-body { display: none; }

.cost-panel-body {
  padding: 0 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cost-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
}

.cost-label {
  color: var(--fg-dim);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cost-value {
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 600;
}

.cost-top-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

.cost-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 9px;
}

.cost-session-title {
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.cost-session-amount {
  color: var(--accent);
  flex-shrink: 0;
  font-weight: 600;
}

.cost-empty {
  color: var(--fg-dim);
  font-size: 9px;
  font-style: italic;
}

/* ── Pinned TODOs (sidebar section) ──────────────────────────────────────── */
.pinned-todos {
  border-top: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  font-size: 10px;
  font-family: var(--mono);
  max-height: 40vh;
  display: flex;
  flex-direction: column;
}

.pinned-todos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.pinned-todos-header:hover { color: var(--fg-muted); }

.pinned-todos-title { flex: 1; }

.pinned-todos-toggle {
  background: none;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 8px;
  padding: 0 2px;
  font-family: var(--mono);
}

.pinned-todos--collapsed .pinned-todos-body { display: none; }

.pinned-todos-filters {
  display: flex;
  gap: 2px;
  padding: 0 8px 4px;
  flex-shrink: 0;
}

.ptf-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.ptf-btn:hover { border-color: var(--accent); color: var(--accent); }
.ptf-btn--active { border-color: var(--accent); color: var(--accent); background: rgba(94,158,255,.08); }

.pinned-todos-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.pt-item {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  transition: background 0.1s;
}
.pt-item:hover { background: var(--bg-2); }
.pt-item--done { opacity: 0.55; }

.pt-check {
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px;
  color: var(--fg-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: color 0.12s;
}
.pt-check:hover { color: var(--accent); }
.pt-check-icon { display: block; }

.pt-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pt-text {
  color: var(--fg);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.pt-item--done .pt-text { text-decoration: line-through; }

.pt-session-link {
  color: var(--fg-dim);
  font-size: 8px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.pt-session-link:hover { color: var(--accent); text-decoration: underline; }

.pt-unpin {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-dim);
  padding: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.pt-item:hover .pt-unpin { opacity: 1; }
.pt-unpin:hover { color: var(--danger); }

.pt-empty {
  color: var(--fg-dim);
  font-size: 9px;
  font-style: italic;
  padding: 8px 10px;
}

/* ── TodoWrite item list (in expanded tool body) ─────────────────────────── */
.tw-items {
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tw-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.tw-item:hover { background: var(--bg-2); }

.tw-item-icon {
  font-size: 9px;
  flex-shrink: 0;
}

.tw-item--completed .tw-item-icon { color: var(--success); }
.tw-item--in-progress .tw-item-icon { color: var(--warn); }
.tw-item--pending .tw-item-icon { color: var(--fg-dim); }

.tw-item-text {
  flex: 1;
  min-width: 0;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-item--completed .tw-item-text { text-decoration: line-through; color: var(--fg-dim); }

.tw-pin-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s, border-color 0.12s, color 0.12s;
}
.tw-item:hover .tw-pin-btn { opacity: 1; }
.tw-pin-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Settings number input ───────────────────────────────────────────────── */
.setting-number-input {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 6px;
  outline: none;
  transition: border-color 0.15s;
}
.setting-number-input:focus { border-color: var(--accent); }
.setting-number-input::placeholder { color: var(--fg-dim); }

/* ── Layout: right panel integration ────────────────────────────────────── */
#layout {
  /* Override: flex-row; right panel lives AFTER main-panel */
  /* sessions-panel | main-panel | right-panel */
}

/* ── Right Info Panel ────────────────────────────────────────────────────── */
:root {
  --right-panel-w: 260px;
}

.right-panel {
  width: var(--right-panel-w);
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  transition: width 0.2s, opacity 0.15s;
  font-size: 11px;
  font-family: var(--mono);
}

.right-panel--hidden {
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.rp-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.rp-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Session block at top of right panel */
.rp-session-block {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.rp-session-title {
  font-weight: 700;
  font-size: 11px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-session-time {
  font-size: 9px;
  color: var(--fg-dim);
  margin-top: 2px;
  font-family: var(--mono);
}

.rp-parent-link {
  font-size: 9px;
  color: var(--fg-dim);
  margin-top: 3px;
}

.rp-parent-anchor {
  color: var(--accent);
  text-decoration: none;
}
.rp-parent-anchor:hover { text-decoration: underline; }

/* Section layout */
.rp-section {
  border-bottom: 1px solid rgba(58,53,80,.4);
}

.rp-section-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-2);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fg-dim);
  transition: color 0.12s, background 0.1s;
}
.rp-section-header:hover {
  color: var(--fg-muted);
  background: var(--bg-3);
}

.rp-section-header--simple {
  cursor: default;
}
.rp-section-header--simple:hover {
  background: var(--bg-2);
  color: var(--fg-dim);
}

.rp-chevron {
  font-size: 8px;
  flex-shrink: 0;
  color: var(--fg-dim);
  width: 10px;
  text-align: center;
}

.rp-section-label {
  flex: 1;
}

.rp-section-body {
  padding: 5px 10px 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rp-section-body--tight {
  padding: 4px 0 5px;
  gap: 0;
}

.rp-stat-row {
  font-size: 11px;
  color: var(--fg-muted);
  line-height: 1.5;
}

/* Context percent bar */
.rp-pct-bar {
  height: 2px;
  background: var(--bg-3);
  border-radius: 1px;
  margin: 2px 0;
  overflow: hidden;
}

.rp-pct-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
  transition: width 0.3s;
}

/* MCP server rows */
.rp-mcp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.4;
}

.rp-mcp-dot {
  flex-shrink: 0;
  font-size: 9px;
}

.rp-mcp-name {
  color: var(--fg-muted);
  flex-shrink: 0;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-mcp-status {
  font-size: 10px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-mcp-error {
  font-style: italic;
  font-size: 9px;
}

/* MCP status colors */
.mcp-status--connected    { color: var(--success); }
.mcp-status--needs-auth   { color: var(--warn); }
.mcp-status--failed       { color: var(--danger); }
.mcp-status--disabled     { color: var(--fg-dim); }

/* LSP block */
.rp-lsp-block {
  padding: 5px 10px 7px;
}
.rp-lsp-fallback {
  font-style: italic;
  font-size: 10px;
}

/* Path block */
.rp-path-block {
  padding: 5px 10px 7px;
  gap: 4px;
}

.rp-path-text {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.rp-path-branch {
  font-size: 10px;
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}

.rp-branch-icon {
  font-size: 10px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Instance block — pinned at bottom */
.rp-instance-block {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  font-size: 10px;
}

.instance-dot {
  color: var(--success);
  font-size: 9px;
  flex-shrink: 0;
}

.rp-instance-label {
  color: var(--fg-muted);
  flex: 1;
}

.rp-instance-version {
  color: var(--fg-dim);
  font-size: 9px;
  flex-shrink: 0;
}

/* Muted helper */
.rp-muted {
  color: var(--fg-dim);
  font-size: 10px;
}

/* ── Responsive — right panel ────────────────────────────────────────────── */

/* Desktop ≥1280px: always visible */
@media (min-width: 1280px) {
  .right-panel {
    display: flex;
  }
  .right-panel--hidden {
    width: 0;
    opacity: 0;
  }
}

/* Tablet 640-1279px: hidden by default, toggled via Alt+I */
@media (max-width: 1279px) and (min-width: 640px) {
  .right-panel {
    position: absolute;
    top: var(--header-h);
    right: 0;
    bottom: calc(var(--footer-h) + 50px);
    z-index: 110;
    width: var(--right-panel-w);
    border-left: 1px solid var(--line-2);
    transform: translateX(100%);
    transition: transform 0.2s, opacity 0.15s;
    opacity: 0;
    box-shadow: -4px 0 20px rgba(0,0,0,.4);
  }
  .right-panel:not(.right-panel--hidden).right-panel--visible,
  .right-panel.right-panel--overlay-open {
    transform: translateX(0);
    opacity: 1;
  }
  /* When toggled via Alt+I, main.js toggles right-panel--hidden;
     on tablet we also need to translate in */
  .right-panel:not(.right-panel--hidden) {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Mobile <640px: overlay mode */
@media (max-width: 639px) {
  .right-panel {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: var(--footer-h);
    z-index: 150;
    width: min(var(--right-panel-w), 90vw);
    border-left: 1px solid var(--line-2);
    transform: translateX(100%);
    transition: transform 0.2s, opacity 0.15s;
    opacity: 0;
    box-shadow: -4px 0 20px rgba(0,0,0,.5);
  }
  .right-panel:not(.right-panel--hidden) {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ── Right panel close button (always visible, all viewports) ──────────── */
.rp-close-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-2);
  background: var(--bg2);
  color: var(--fg-muted);
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
}
.rp-close-btn:hover {
  background: var(--bg3);
  color: var(--fg);
  border-color: var(--line);
}
.rp-inner {
  position: relative;
}
@media (max-width: 768px) {
  .rp-close-btn {
    width: 36px;
    height: 36px;
    font-size: 22px;
    top: 8px;
    right: 8px;
  }
}

/* ── Footer label strip (TUI style) ────────────────────────────────────── */
.footer-label-strip {
  font-family: var(--mono);
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.flbl-agent   { color: var(--accent);    font-weight: 700; flex-shrink: 0; }
.flbl-model   { color: var(--fg-muted);  flex-shrink: 0; }
.flbl-provider { color: var(--fg-dim); flex-shrink: 0; }
.flbl-sep     { color: var(--line-2);   padding: 0 4px; flex-shrink: 0; white-space: pre; }

/* Compact usage in footer right */
.footer-usage-compact {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--fg-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Help button */
.footer-help-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-family: var(--mono);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  padding: 0;
}
.footer-help-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Keymap Modal ────────────────────────────────────────────────────────── */
#keymap-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 450;
  background: rgba(0,0,0,.7);
  align-items: center;
  justify-content: center;
}
#keymap-modal.open { display: flex; }

.keymap-box {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

.keymap-box h3 {
  font-size: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.keymap-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  font-size: 11px;
  align-items: center;
}

.keymap-grid kbd {
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--fg-muted);
  white-space: nowrap;
}

.keymap-grid span {
  color: var(--fg-muted);
}

.keymap-section-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

/* ── Todo Dock ───────────────────────────────────────────────────────────── */
#todo-dock-mount {
  flex-shrink: 0;
}

.todo-dock {
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg);
}

.todo-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  min-height: 28px;
}

.todo-dock-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-dim);
  font-weight: 700;
}

.todo-dock-toggle {
  background: none;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1;
}
.todo-dock-toggle:hover { color: var(--accent); }

.todo-dock-body {
  padding: 4px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.todo-dock--collapsed .todo-dock-body {
  display: none;
}

.todo-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  line-height: 1.4;
}

.todo-item-icon {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.todo-item-text {
  font-size: 13px;
}

/* Pending — muted */
.todo-item--pending .todo-item-icon,
.todo-item--pending .todo-item-text {
  color: var(--fg-dim);
}

/* In-progress — accent */
.todo-item--in-progress .todo-item-icon,
.todo-item--in-progress .todo-item-text {
  color: var(--accent);
}

/* Completed — strikethrough, dim, animated */
.todo-item--completed .todo-item-text {
  text-decoration: line-through;
  color: var(--fg-muted);
  animation: todo-strike-in .25s ease;
}
.todo-item--completed .todo-item-icon {
  color: var(--fg-muted);
}

@keyframes todo-strike-in {
  from { opacity: 0; text-decoration-color: transparent; }
  to   { opacity: 1; }
}

/* ── File Browser ────────────────────────────────────────────────────────── */

.file-browser-panel {
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.file-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 11px;
  color: var(--fg-muted);
  user-select: none;
  background: var(--bg-2);
}
.file-browser-header:hover { background: var(--bg-3); }

.file-browser-title {
  font-weight: 600;
  letter-spacing: .04em;
}

.file-browser-ignored-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--fg-dim);
  cursor: pointer;
  user-select: none;
}

/* ── File tree ────────────────────────────────────────────────────────────── */

.file-tree {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  overflow-y: auto;
  max-height: 260px;
  background: var(--bg);
}

.file-tree-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid transparent;
}
.file-tree-item:hover {
  background: var(--bg-3);
  border-left-color: var(--accent);
}

.file-tree-item--ignored {
  opacity: 0.4;
}

.file-tree-item--dir {
  font-weight: 600;
  color: var(--fg);
}

/* ── Live filter results ─────────────────────────────────────────────────── */

.fb-filter-match {
  background: var(--warn);
  color: var(--bg);
  border-radius: 1px;
  padding: 0 1px;
}

.fb-filter-path {
  font-size: 9px;
  color: var(--fg-dim);
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

/* ── Mobile Responsive Pass (v1.8.0) — max-width: 768px ─────────────────── */
/* All rules below are additive — desktop CSS above is untouched.             */

/* ── 1. Base: iOS tap optimisation ──────────────────────────────────────── */
@media (max-width: 768px) {
  body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent iOS auto-zoom on form focus — 16px minimum */
  input, textarea, select {
    font-size: 16px !important;
    touch-action: manipulation;
  }

  /* 44×44 touch target on interactive elements */
  button, .btn, .btn-icon, .session-item, .folder-row,
  .tab, .palette-item, .picker-item {
    touch-action: manipulation;
  }
}

/* ── 2. Header: single row, 44px, icon-only actions ─────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-h: 44px;
  }

  /* Hide decorative traffic light dots */
  .tl-dots, .header-sep {
    display: none;
  }

  /* Truncate breadcrumb */
  .header-breadcrumb {
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .header-breadcrumb .bc-session {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hide SSE label text — dot only */
  .conn-label {
    display: none;
  }

  /* Hide "+ New" button text — icon only */
  #header-new-btn .btn-text {
    display: none;
  }

  /* Header actions: tighter */
  .header-actions {
    gap: 4px;
  }

  /* Ensure icon buttons hit 44×44 touch targets */
  .btn-icon {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* + New button: icon-only, same target size */
  #header-new-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 0 8px;
    font-size: 16px;
    font-weight: 700;
  }

  /* Usage indicator in header: hide on mobile to save space */
  .usage-indicator-wrap {
    display: none;
  }
}

/* ── 3. Sidebar as drawer at < 768px ─────────────────────────────────────── */
/* Note: tablet rule (max-width: 1023px) already makes #sessions-panel a     */
/* positioned overlay with open-overlay toggle. We extend/override here.     */
@media (max-width: 768px) {
  #sessions-panel {
    position: fixed;
    left: 0;
    top: var(--header-h);
    bottom: 0;
    width: min(85vw, 360px);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    border-right: 1px solid var(--line-2);
    box-shadow: none;
    overflow-y: auto;
    /* override the tablet 'bottom' that includes footer height */
    height: auto;
  }

  /* .open-overlay is toggled by shortcuts.js toggleSidebar() */
  #sessions-panel.open-overlay {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.6);
  }

  /* Backdrop — shown by main.js when drawer is open */
  .mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: rgba(0,0,0,.5);
    z-index: 199;
  }
  .mobile-backdrop.visible {
    display: block;
  }

  /* Session items: bigger touch target */
  .session-item {
    padding: 10px 10px;
    min-height: 44px;
  }

  /* Always show delete button on mobile (no hover state) */
  /* On touch devices hover-only affordances don't work */
  .session-delete-btn {
    opacity: 1;
  }

  /* Pinned todo unpin button: always visible on mobile */
  .pt-unpin {
    opacity: 1;
  }

  /* Pin button on todo items: always visible */
  .tw-pin-btn {
    opacity: 1;
  }
}

/* ── 4. Main panel: full width when drawer closed ────────────────────────── */
@media (max-width: 768px) {
  #main-panel {
    width: 100%;
    flex: 1;
    min-width: 0;
  }

  /* Input bar: sticky to bottom */
  #input-bar {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    z-index: 10;
  }

  /* Composer textarea: thumb-friendly padding */
  #prompt-input {
    font-size: 16px;
    min-height: 44px;
    padding: 8px 0;
  }

  /* Send button: 44×44 minimum */
  .btn-send {
    min-width: 44px;
    min-height: 44px;
    font-size: 18px;
  }
}

/* ── 5. Label strip on mobile: compact but visible (was display:none — fixed v1.8.2) */
/* See override block at bottom of file. Kept empty to not lose cascade position. */

/* ── 6. Multi-view: horizontal scroll-snap ───────────────────────────────── */
@media (max-width: 768px) {
  #multiview-grid.active {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    gap: 0;
    align-items: stretch;
  }

  /* Each pane takes full viewport width and snaps */
  .mv-panel {
    flex: 0 0 100vw;
    min-width: 0;
    max-width: 100vw;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border-left: none;
    border-right: 1px solid var(--line);
    scroll-snap-align: start;
  }

  /* Hide the "add session" button in multi-view on mobile — use palette */
  #mv-add-btn {
    display: none;
  }

  /* Multi-view input: 16px font to prevent iOS zoom */
  .mv-input {
    font-size: 16px;
    min-height: 44px;
  }

  .mv-send {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── 7. Modals: full-screen on mobile ────────────────────────────────────── */
@media (max-width: 768px) {
  #settings-modal {
    align-items: flex-end;
  }

  /* Close buttons in modals: 44×44 */
  #settings-close, #keymap-close {
    min-height: 44px;
    font-size: 13px;
    padding: 10px;
    width: 100%;
  }

  /* Command palette: full-width, reduced top padding */
  #command-palette {
    padding-top: 0;
    align-items: flex-start;
  }
  .palette-box {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
  }
  #palette-list {
    max-height: none;
    flex: 1;
    overflow-y: auto;
  }
  .palette-hint {
    display: none;
  }

  /* Keymap modal: full-screen sheet */
  .keymap-box {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--line);
    padding: 20px 16px;
    max-height: 90vh;
    overflow-y: auto;
  }
  #keymap-modal {
    align-items: flex-end;
  }

  /* Connect phone modal: full-screen */
  .cpm-box {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--line);
    min-height: 50vh;
    max-height: 90vh;
    overflow-y: auto;
  }
  .cpm-overlay {
    align-items: flex-end;
  }

  /* Session picker: full-width */
  .picker-box {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  #session-picker {
    padding-top: 0;
    align-items: flex-start;
  }
}

/* ── 8. Permission banner ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #perm-banner {
    padding: 10px 14px;
  }
  /* Allow / Deny buttons: 44px min touch target */
  .btn-allow, .btn-deny {
    min-height: 44px;
    font-size: 13px;
  }
  .perm-actions {
    flex-direction: row;
    gap: 10px;
  }
}

/* ── 9. Code blocks: no horizontal overflow ──────────────────────────────── */
@media (max-width: 768px) {
  pre, .message-body pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
  }
  code {
    word-break: break-word;
  }
  #messages {
    overflow-y: auto;
  }
  /* Diff lines: wrap on mobile */
  .diff-line {
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* ── 10. Tabs: bigger touch targets ──────────────────────────────────────── */
@media (max-width: 768px) {
  .tab {
    padding: 10px 16px;
    font-size: 12px;
  }
}

/* ── 11. Footer: hide on mobile (space is precious) ──────────────────────── */
@media (max-width: 768px) {
  #tui-footer {
    display: none;
  }
}

/* ── 12. QR code: responsive canvas size ─────────────────────────────────── */
@media (max-width: 768px) {
  .cpm-body canvas {
    max-width: 280px;
    width: 100% !important;
    height: auto !important;
  }
  .qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Close button in connect modal: 44×44 touch target */
  .cpm-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Connect modal tabs: bigger tap targets */
  .cpm-tab {
    padding: 12px 14px;
    min-height: 44px;
  }
}

/* ── 13. Right panel: hidden on mobile (Alt+I toggles overlay) ───────────── */
/* Already handled by existing max-width: 639px rule above.                  */
/* Extend to 768px breakpoint:                                                */
@media (max-width: 768px) and (min-width: 640px) {
  .right-panel {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    z-index: 150;
    width: min(var(--right-panel-w), 90vw);
    border-left: 1px solid var(--line-2);
    transform: translateX(100%);
    transition: transform 0.2s, opacity 0.15s;
    opacity: 0;
    box-shadow: -4px 0 20px rgba(0,0,0,.5);
  }
  .right-panel:not(.right-panel--hidden) {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ── End of v1.8.0 mobile responsive pass ───────────────────────────────── */

.file-tree-icon {
  width: 10px;
  flex-shrink: 0;
  color: var(--fg-dim);
  font-size: 10px;
}

.file-tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-tree-loading,
.file-tree-error,
.file-tree-empty {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--fg-dim);
  font-style: italic;
}
.file-tree-error { color: var(--danger); }
.empty-state {
  padding: 16px;
  color: var(--fg-muted);
  font-size: .82rem;
  text-align: center;
  line-height: 1.5;
}

.file-tree-truncated {
  color: var(--fg-dim);
  font-style: italic;
  font-size: 11px;
  cursor: default;
}
.file-tree-truncated:hover {
  background: transparent;
  border-left-color: transparent;
}

/* ── File viewer modal ───────────────────────────────────────────────────── */

/* ── Custom folder modal ─────────────────────────────────────────────────── */

.custom-folder-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.custom-folder-box {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
}
.custom-folder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.custom-folder-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-muted);
}
.custom-folder-close {
  background: none;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.custom-folder-close:hover { color: var(--fg); background: var(--bg-3); }
.custom-folder-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.custom-folder-label {
  font-size: 11px;
  color: var(--fg-muted);
}
.custom-folder-input {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  width: 100%;
}
.custom-folder-input:focus { border-color: var(--accent); }
.custom-folder-error {
  font-size: 11px;
  color: var(--danger);
}
.custom-folder-footer {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}

/* ── lbl-agent-btn (compose bar agent quick-switch) ─────────────────────── */

.lbl-agent-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
}
.lbl-agent-btn:hover .lbl-agent { text-decoration: underline; }

/* ── File viewer modal (pre-existing, keep below) ─────────────────────────── */

.file-viewer-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}

.file-viewer-box {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 80px);
  overflow: hidden;
}

.file-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  gap: 8px;
}

.file-viewer-path {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-viewer-close {
  background: none;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.file-viewer-close:hover { color: var(--danger); background: var(--bg-3); }

.file-viewer-content {
  overflow: auto;
  margin: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  flex: 1;
}

/* ── Reasoning panel (Feature C) ────────────────────────────────────────── */

.reasoning-block {
  border-left: 2px solid var(--line-2);
  margin: 4px 0;
  font-size: 11px;
}

.reasoning-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--fg-dim);
  user-select: none;
}
.reasoning-header:hover { color: var(--fg-muted); background: var(--bg-3); }

.reasoning-toggle { font-size: 10px; width: 12px; flex-shrink: 0; }
.reasoning-label  { font-style: italic; }
.reasoning-duration { color: var(--fg-dim); font-size: 10px; margin-left: auto; }

.reasoning-body {
  display: none;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  opacity: 0.7;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  border-top: 1px solid var(--line);
}
.reasoning-block.reasoning-expanded .reasoning-body { display: block; }
.reasoning-block.reasoning-expanded .reasoning-toggle { transform: rotate(90deg); display: inline-block; }

/* ── Agent transition part ───────────────────────────────────────────────── */

.agent-transition {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin: 6px 0;
  border-left: 2px solid var(--line-2);
  font-size: 11px;
  color: var(--fg-muted);
}
.agent-transition-icon { font-size: 10px; color: var(--accent); }
.agent-transition-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }

/* ── Step dividers ───────────────────────────────────────────────────────── */

.step-divider {
  font-size: 10px;
  color: var(--fg-dim);
  padding: 2px 10px;
  letter-spacing: .04em;
}

/* ── Retry / compaction notices ──────────────────────────────────────────── */

.retry-notice {
  font-size: 10px;
  color: var(--warn);
  padding: 3px 10px;
  border-left: 2px solid var(--warn);
  margin: 4px 0;
}
.compaction-notice {
  font-size: 10px;
  color: var(--fg-muted);
  padding: 3px 10px;
  border-left: 2px solid var(--line-2);
  margin: 4px 0;
  font-style: italic;
}

/* ── Streaming cursor ────────────────────────────────────────────────────── */

.streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: blink-cursor .7s step-end infinite;
  margin-left: 1px;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Typing indicator (shown when assistant MESSAGE_CREATED arrives) ─────── */

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  color: var(--fg-muted);
  font-size: 11px;
}

.typing-indicator span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: typing-bounce .9s ease-in-out infinite;
  opacity: .6;
}

.typing-indicator span:nth-child(2) { animation-delay: .15s; }
.typing-indicator span:nth-child(3) { animation-delay: .30s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: .4; }
  40%           { transform: scale(1.1); opacity: 1;  }
}

/* ── Connect from phone modal ────────────────────────────────────────────── */

.cpm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 1100;
  align-items: center;
  justify-content: center;
}
.cpm-overlay.open { display: flex; }

.cpm-box {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  width: min(480px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cpm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.cpm-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

.cpm-close {
  font-size: 12px;
  color: var(--fg-dim);
  padding: 2px 6px;
}
.cpm-close:hover { color: var(--fg); }

.cpm-body {
  overflow-y: auto;
  flex: 1;
  padding: 0;
}

/* Tabs */
.cpm-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
  flex-shrink: 0;
}

.cpm-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 8px 14px;
  cursor: pointer;
  flex: 1;
  text-align: center;
  transition: color .15s, border-color .15s;
}
.cpm-tab:hover { color: var(--fg); }
.cpm-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Tab content */
.cpm-tab-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 260px;
}

/* QR code container */
.cpm-qr-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  min-width: 224px;
  min-height: 224px;
}

.cpm-qr-wrap canvas {
  display: block;
  border-radius: 2px;
}

.qr-loading {
  color: var(--fg-dim);
  font-size: 11px;
}

.qr-offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
}

.qr-offline-label {
  font-size: 11px;
  color: var(--warn);
}

.qr-offline-hint {
  font-size: 10px;
  color: var(--fg-dim);
}

.qr-fallback-url {
  font-size: 10px;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  word-break: break-all;
  user-select: all;
  max-width: 200px;
  text-align: center;
}

/* URL row */
.cpm-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.cpm-url-label {
  font-size: 10px;
  color: var(--fg-dim);
  flex-shrink: 0;
}

.cpm-url {
  font-size: 10px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  word-break: break-all;
  flex: 1;
  user-select: all;
}

.cpm-url--disabled {
  color: var(--fg-dim);
  text-decoration: line-through;
  cursor: not-allowed;
}

.cpm-copy-btn {
  font-size: 10px;
  padding: 3px 8px;
  min-height: 22px;
  flex-shrink: 0;
}

/* Provider badge */
.cpm-provider-badge {
  font-size: 10px;
  color: var(--fg-dim);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px 8px;
}

/* Warning / info boxes */
.cpm-warning-box {
  width: 100%;
  max-width: 420px;
  background: color-mix(in srgb, var(--warn) 10%, var(--bg-3));
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-size: 10px;
  padding: 8px 10px;
  line-height: 1.6;
}

.cpm-warning-box--security {
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-3));
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}

.cpm-info-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: 10px;
  padding: 8px 10px;
  line-height: 1.6;
}

/* Instructions */
.cpm-instructions {
  width: 100%;
  max-width: 420px;
  font-size: 10px;
  line-height: 1.7;
  color: var(--fg);
}

.cpm-instructions-title {
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: 6px;
}

.cpm-instructions-step {
  margin-bottom: 10px;
}

.cpm-instructions-step ol {
  padding-left: 16px;
  margin-top: 4px;
}

.cpm-instructions-step code {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1px 4px;
  font-size: 10px;
  color: var(--accent);
}

/* Note */
.cpm-note {
  font-size: 10px;
  color: var(--fg-dim);
  text-align: center;
  max-width: 360px;
  line-height: 1.5;
}

.cpm-loading {
  color: var(--fg-dim);
  font-size: 11px;
  padding: 40px;
  text-align: center;
}

/* Connect phone button in header */
#connect-phone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  color: var(--fg-muted);
}
#connect-phone-btn:hover { color: var(--accent); }
#connect-phone-btn svg { display: block; }

/* ── v1.8.2 Mobile UX Polish ─────────────────────────────────────────────── */

/* ── Problem 3: Mobile kebab button — desktop hidden, mobile visible ─── */
.mobile-kebab-btn {
  display: none;
}

@media (max-width: 768px) {
  .mobile-kebab-btn {
    display: inline-flex;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    align-items: center;
    justify-content: center;
  }
}

/* Mobile kebab popover */
.mobile-kebab-popover {
  display: none;
  position: fixed;
  top: var(--header-h);
  right: 8px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  z-index: 500;
  min-width: 210px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  overflow: hidden;
}

.mobile-kebab-popover.open {
  display: block;
}

.mkp-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  touch-action: manipulation;
  min-height: 48px;
}
.mkp-item:last-child {
  border-bottom: none;
}
.mkp-item:hover, .mkp-item:active {
  background: rgba(94,158,255,.08);
  color: var(--accent);
}

/* ── Problem 4: Show label-strip on mobile (was display:none below 480px) */
@media (max-width: 480px) {
  /* Override the v1.8.0 rule that hid the label-strip */
  .input-label-strip {
    display: flex !important;
    font-size: 11px;
    padding: 2px 10px 4px;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
  }
  .input-label-strip .lbl-agent,
  .input-label-strip .lbl-model,
  .input-label-strip .lbl-provider {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28vw;
  }
}

/* ── End of v1.8.2 mobile UX polish ─────────────────────────────────────── */

/* ── v1.9 polish ─────────────────────────────────────────────────────────── */

/* 4. Multi-view: hide the ⊞ button on mobile — not supported there */
@media (max-width: 768px) {
  #multiview-btn {
    display: none !important;
  }
}

/* 5. Agent panel: readable on mobile */
@media (max-width: 768px) {
  .agent-panel {
    max-height: 60vh;
  }
  .agent-panel-body {
    font-size: 13px;
    padding: 10px 12px;
    gap: 8px;
    /* Ensure it fits inside the drawer width */
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .agent-panel-header {
    font-size: 11px;
    padding: 8px 12px;
  }
  .agent-panel-name {
    font-size: 14px;
  }
  .agent-panel-desc {
    font-size: 12px;
  }
  .agent-panel-row {
    font-size: 12px;
    /* Stack label/value vertically for narrow drawer */
    flex-direction: column;
    gap: 3px;
  }
  .agent-panel-label {
    font-size: 10px;
    width: auto;
  }
  .agent-panel-value {
    font-size: 12px;
    word-break: break-word;
  }
  .agent-panel-model {
    font-size: 12px;
  }
  .agent-panel-prompt {
    font-size: 11px;
    word-break: break-word;
    max-height: 120px;
  }
  .agent-panel-tool-chip {
    font-size: 11px;
    padding: 1px 6px;
  }
  .agent-panel-empty {
    font-size: 12px;
  }
}

/* 6. Project switcher: header badge showing current project */
.header-project-badge {
  display: none; /* desktop: hide — too crowded */
}

@media (max-width: 768px) {
  /* Show a tappable project badge in the header on mobile */
  .header-project-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--fg-dim);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    flex-shrink: 0;
    touch-action: manipulation;
  }
  .header-project-badge:active {
    background: var(--bg-3);
    color: var(--accent);
  }
}

/* Desktop: show the project badge only in the sidebar header for quick switch */
#sessions-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--fg-dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  max-width: 80px;
  text-overflow: ellipsis;
  font-family: var(--mono);
  touch-action: manipulation;
  flex-shrink: 0;
}
#sessions-project-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── End of v1.9 polish ───────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────
 * v1.11 — Project tabs bar
 * Horizontal tabs between the header and the main layout. Each tab is one
 * open project. The + at the end opens the project picker.
 * ───────────────────────────────────────────────────────────────────────── */

#project-tabs-bar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-height: 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 4px 8px 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  scrollbar-width: thin;
  white-space: nowrap;
}
#project-tabs-bar:empty { display: none; }

#project-tabs-bar::-webkit-scrollbar { height: 4px; }
#project-tabs-bar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }

.project-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: var(--bg-2);
  color: var(--fg-muted);
  border: 1px solid var(--line);
  border-bottom: none;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 240px;
  height: 28px;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.project-tab:hover {
  background: var(--bg-3);
  color: var(--fg);
}
.project-tab--active {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--line-2);
  border-bottom: 1px solid var(--bg);
  margin-bottom: -1px;
  z-index: 1;
}
.project-tab--loading .project-tab-label {
  opacity: .7;
  font-style: italic;
}

.project-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  user-select: none;
}

.project-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  color: var(--fg-dim);
  cursor: pointer;
  flex-shrink: 0;
}
.project-tab-close:hover {
  background: var(--danger);
  color: #fff;
}

.project-tab-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 2px;
  background: transparent;
  color: var(--fg-dim);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--mono);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.project-tab-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  border-style: solid;
}

.project-tab-empty {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: var(--fg-dim);
  font-size: 11px;
  font-style: italic;
}

/* Tablet / smaller desktop: tighter tabs */
@media (max-width: 1024px) and (min-width: 769px) {
  .project-tab { max-width: 180px; }
  .project-tab-label { max-width: 140px; }
}

/* Mobile: tabs get taller (touch targets), horizontal scroll enabled */
@media (max-width: 768px) {
  #project-tabs-bar {
    min-height: 44px;
    padding: 4px 6px 0 6px;
    overflow-x: auto;  /* ensure horizontal scroll is not overridden */
    -webkit-overflow-scrolling: touch;
  }
  .project-tab {
    height: 40px;
    padding: 4px 8px 4px 12px;
    max-width: 160px;
  }
  .project-tab-label {
    max-width: 120px;
  }
  .project-tab-close {
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 16px;
  }
  .project-tab-add {
    width: 40px;
    min-width: 40px;
    height: 40px;
    font-size: 18px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * v1.11 — Debug modal CSS (was missing — Close button couldn't actually hide)
 * The modal uses .modal-overlay + .open to toggle visibility.
 * ───────────────────────────────────────────────────────────────────────── */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-overlay.open {
  display: flex;
}
.modal-box {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--fg);
}
.modal-box--wide { max-width: 680px; }

.modal-header {
  flex-shrink: 0;
}

/* Debug modal inline buttons (.btn--secondary / .btn--ghost) */
.btn.btn--secondary {
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  cursor: pointer;
}
.btn.btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn.btn--ghost {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  cursor: pointer;
}
.btn.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }


/* ─────────────────────────────────────────────────────────────────────────
 * v1.11 — Project picker: search + rich rows
 * ───────────────────────────────────────────────────────────────────────── */

.palette-project-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.palette-project-search input {
  flex: 1;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12px;
  font-family: var(--mono);
  outline: none;
}
.palette-project-search input:focus {
  border-color: var(--accent);
}

.palette-project-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.palette-project-row:hover,
.palette-project-row.selected {
  background: var(--bg-3);
  border-left-color: var(--accent);
}
.palette-project-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.palette-project-row-label {
  color: var(--fg);
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-project-row-icon {
  color: var(--fg-dim);
  font-size: 11px;
  width: 12px;
  text-align: center;
  flex-shrink: 0;
}
.palette-project-row-path {
  color: var(--fg-dim);
  font-size: 10px;
  padding-left: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-project-row-time {
  color: var(--fg-muted);
  font-size: 10px;
  flex-shrink: 0;
}
.palette-project-row-active {
  color: var(--accent);
}

/* ── End v1.11 additions ─────────────────────────────────────────────────── */

/* ── Plugin configuration (v1.12) ─────────────────────────────────────────
   New "Plugin configuration" section inside the Settings modal. Lets users
   edit plugin env vars from the UI — persisted to ~/.opencode-pilot/config.json. */

.plugin-config-section {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plugin-config-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.plugin-config-header h4 {
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin: 0;
}
.plugin-config-path {
  font-size: 10px;
  color: var(--fg-dim);
}
.plugin-config-path code {
  font-size: 10px;
  color: var(--fg-muted);
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
}

.plugin-config-status {
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg-3);
}
.plugin-config-status.error { color: #ff8585; border-color: rgba(255, 133, 133, 0.4); }
.plugin-config-status.ok { color: var(--accent); border-color: rgba(94, 158, 255, 0.4); }

.pcf-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--bg-3);
}
.pcf-group > summary {
  cursor: pointer;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  list-style: none;
}
.pcf-group > summary::-webkit-details-marker { display: none; }
.pcf-group > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s;
  color: var(--fg-dim);
}
.pcf-group[open] > summary::before { transform: rotate(90deg); }
.pcf-group > .pcf-row { padding: 6px 10px; }
.pcf-group > .pcf-row:first-of-type { border-top: 1px solid var(--line); }

.pcf-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1.2fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.pcf-row label {
  color: var(--fg-muted);
  font-size: 11px;
}
.pcf-row input[type="text"],
.pcf-row input[type="number"],
.pcf-row input[type="password"],
.pcf-row select {
  width: 100%;
  min-width: 0;
}
.pcf-row--action {
  grid-template-columns: auto 1fr;
}
.pcf-hint {
  font-size: 10px;
  color: var(--fg-dim);
}
.pcf-hint--error { color: #ff8585; }

.pcf-secret-wrap {
  display: flex;
  gap: 4px;
  min-width: 0;
}
.pcf-secret-wrap input { flex: 1; min-width: 0; }
.pcf-eye-btn {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 11px;
  padding: 0 8px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.pcf-eye-btn:hover { color: var(--fg); }

.pcf-source {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  white-space: nowrap;
}
.pcf-source[data-source="shell-env"] {
  color: #ffb86c;
  border-color: rgba(255, 184, 108, 0.4);
}
.pcf-source[data-source="settings-store"] {
  color: var(--accent);
  border-color: rgba(94, 158, 255, 0.4);
}
.pcf-source[data-source="env-file"] {
  color: #c9a0ff;
  border-color: rgba(201, 160, 255, 0.4);
}

.pcf-row.pcf-row--locked input,
.pcf-row.pcf-row--locked select {
  opacity: 0.55;
  cursor: not-allowed;
}

.plugin-config-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.plugin-config-note {
  font-size: 10px;
  color: #ffb86c;
  border-left: 2px solid #ffb86c;
  padding: 4px 8px;
  background: rgba(255, 184, 108, 0.08);
  border-radius: 2px;
}

@media (max-width: 768px) {
  .pcf-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .pcf-row .pcf-source { justify-self: start; }
}

/* === Permission banner v2 (Wave 5 UX) === */
#perm-banner .perm-banner-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
}
#perm-banner .perm-banner-icon {
  font-size: 1.4rem;
  line-height: 1;
  padding-top: 2px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
#perm-banner .perm-banner-icon[data-risk="shell"] { color: #ef4444; }
#perm-banner .perm-banner-icon[data-risk="network"] { color: #f59e0b; }
#perm-banner .perm-banner-icon[data-risk="write"] { color: #f59e0b; }
#perm-banner .perm-banner-icon[data-risk="read"] { color: #22c55e; }
#perm-banner .perm-banner-icon[data-risk="unknown"] { color: var(--fg-muted); }

#perm-banner .perm-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#perm-banner .perm-banner-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
#perm-banner .perm-banner-queue {
  font-weight: 500;
}
#perm-banner .perm-banner-title {
  font-size: 0.95rem;
  font-weight: 500;
  word-break: break-word;
}
#perm-banner .perm-banner-detail code {
  font-size: 0.8rem;
  word-break: break-all;
  background: var(--bg-2-alt, rgba(127,127,127,0.08));
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  max-width: 100%;
}
#perm-banner .perm-banner-meta {
  font-size: 0.75rem;
  color: var(--fg-muted);
}
#perm-banner .perm-banner-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  #perm-banner .perm-banner-row { flex-wrap: wrap; }
  #perm-banner .perm-banner-actions { width: 100%; justify-content: flex-end; }
}

/* === Wave 5 UX styles (onboarding, help modal, empty/error states) === */

/* ── Empty / onboarding states ─────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  color: var(--fg-muted);
  text-align: center;
  min-height: 180px;
}
.empty-state h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--fg);
  font-family: var(--mono);
}
.empty-state p {
  margin: 0;
  max-width: 40ch;
  line-height: 1.5;
  font-size: 0.85rem;
}
.empty-state.muted {
  color: var(--fg-dim);
  font-size: 0.85rem;
}
.empty-state.onboarding-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.empty-state.onboarding-loading {
  color: var(--fg-muted);
  gap: 10px;
}
.empty-state.error-state {
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: rgba(255, 95, 86, 0.06);
}
.empty-state.error-state h3 { color: var(--danger); }

/* Button row inside empty/onboarding states */
.onboarding-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

/* ── Spinner (CSS-only, inline) ─────────────────────────────────────────── */
.spinner-small {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pilot-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes pilot-spin { to { transform: rotate(360deg); } }

/* ── Help modal ─────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
/* Honour the HTML `hidden` attribute even when the class sets display:flex —
 * without this, <div class="modal-backdrop" hidden> stays visible because the
 * class wins over the user-agent `[hidden]` default. */
.modal-backdrop[hidden] { display: none !important; }

/* Prominent "restart required" banner shown in Settings footer after a save
 * that touched fields like port/host/tunnel. More visible than the plain
 * status text so the user doesn't save + walk away thinking nothing needs
 * to happen. */
.restart-required-banner {
  display: inline-block;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: var(--fg);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.restart-required-banner strong {
  color: #f59e0b;
  font-weight: 600;
}
.modal-panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  overflow: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  color: var(--fg);
  font-family: var(--mono);
}

/* .modal-header already has a stub at line 4479 (flex-shrink: 0 inside debug modal).
   Scoped to .help-modal so the two don't conflict. */
.help-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.help-modal .modal-header h2 {
  margin: 0;
  font-size: 0.95rem;
  font-family: var(--mono);
  color: var(--fg);
}
.modal-close {
  background: transparent;
  border: 0;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--fg-muted);
  padding: 2px 6px;
  line-height: 1;
  font-family: var(--mono);
  border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--fg); background: var(--bg-3); }

/* ── Help modal body sections ───────────────────────────────────────────── */
.help-section {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.help-section:first-of-type { border-top: 0; }
.help-section h3 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  font-family: var(--mono);
}
.help-section ul {
  margin: 0;
  padding-left: 16px;
  line-height: 1.6;
  font-size: 0.85rem;
}

/* Key bindings definition list */
.help-keys {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 0.85rem;
}
.help-keys dt {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.help-keys dd {
  margin: 0;
  color: var(--fg-muted);
  align-self: center;
}

/* Keyboard key chip */
kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 0.78em;
  background: var(--bg-2-alt, rgba(127, 127, 127, 0.1)); /* TODO: promote to var */
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  line-height: 1.4;
  color: var(--fg);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .modal-panel { max-width: 100%; border-radius: 0; }
  .empty-state { padding: 24px 16px; }
}

/* === Settings tabs (Wave 5 UX) === */
.settings-tabs {
  display: flex;
  gap: 4px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.settings-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--fg-muted);
  cursor: pointer;
  white-space: nowrap;
  transform: translateY(1px);
}
.settings-tab:hover { color: var(--fg); }
.settings-tab.is-active,
.settings-tab[aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.settings-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 2px;
}

.settings-panes { padding: 12px 18px; max-height: calc(100vh - 220px); overflow-y: auto; }
.settings-pane > * + * { margin-top: 12px; }
.settings-section-divider { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

.settings-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.settings-status { font-size: 0.85rem; color: var(--fg-muted); flex: 1; min-width: 0; }

/* ── Landing decorations & textures ─────────────────────────────────────────
   Hand-ported from lesquel/remote-control-landing — base.css + effects.css.
   Universal visual rules; landing-specific layout selectors intentionally
   excluded. Body decorations are toggle-driven (data-grid, data-scanlines).
*/

body[data-grid="true"]::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px,
      color-mix(in oklch, var(--fg-dim) 40%, transparent) 1px,
      transparent 0);
  background-size: 24px 24px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
body[data-scanlines="true"]::after {
  content: "";
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 1;
}

::selection { background: var(--accent); color: var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
button:focus-visible, a:focus-visible { outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}