:root {
  --bg: #0d1117; --surface: #161b22; --surface2: #1c2129;
  --border: #30363d; --text: #c9d1d9; --muted: #8b949e; --dim: #484f58;
  --accent: #58a6ff; --accent-dim: #1f6feb; --green: #3fb950;
  --red: #f85149; --orange: #d29922; --purple: #bc8cff;
  --mono: 'SF Mono','Fira Code','Cascadia Code','JetBrains Mono',monospace;
  --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --radius: 6px;
  /* Type scale */
  --text-xs: 0.65rem; --text-sm: 0.75rem; --text-base: 0.85rem;
  --text-md: 0.95rem; --text-lg: 1.1rem; --text-xl: 1.3rem;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--sans); background:var(--bg); color:var(--text); height:100vh; overflow:hidden; }

/* ── Header ─────────────────────────────────────────── */
header { padding:8px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; background:var(--surface); flex-shrink:0; position:relative; }
header .logo { font-size:var(--text-lg); font-weight:700; color:var(--accent); letter-spacing:-0.5px; }
header .sep { color:var(--dim); }
header .mode { font-size:var(--text-sm); font-family:var(--mono); color:var(--muted); }
header .status { font-size:11px; font-family:var(--mono); color:var(--muted); display:flex; align-items:center; gap:6px; }
header .dot { width:7px; height:7px; border-radius:50%; background:var(--muted); }
header .dot.ready { background:var(--green); }
header .dot.busy { background:var(--orange); animation:pulse 1s infinite; }
header .dot.error { background:var(--red); }
@keyframes pulse { 50% { opacity:0.4; } }

/* ── Main workspace ─────────────────────────────────── */
.workspace { flex:1; display:flex; overflow:hidden; }

/* ── Sidebar (left) ─────────────────────────────────── */
.sidebar { width:48px; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; padding:8px 0; gap:4px; flex-shrink:0; }
.sidebar button { width:36px; height:36px; border:none; border-radius:var(--radius); background:transparent; color:var(--muted); cursor:pointer; font-size:var(--text-lg); display:flex; align-items:center; justify-content:center; transition:all .15s; }
.sidebar button:hover { background:var(--surface2); color:var(--text); }
.sidebar button.active { background:var(--accent-dim); color:#fff; }
.sidebar .sep-line { width:24px; height:1px; background:var(--border); margin:4px 0; }

/* ── Panels ─────────────────────────────────────────── */
.panels { flex:1; display:flex; overflow:hidden; }

.panel { display:none; flex-direction:column; overflow:hidden; flex:1; }
.panel.active-panel { display:flex; }

.panel-header { padding:8px 12px; border-bottom:1px solid var(--border); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); background:var(--surface); display:flex; align-items:center; gap:8px; flex-shrink:0; }
.panel-header .badge { background:var(--accent-dim); color:#fff; padding:1px 6px; border-radius:10px; font-size:10px; }
.panel-body { flex:1; overflow-y:auto; padding:8px; }

/* ── Chat ───────────────────────────────────────────── */
.messages { display:flex; flex-direction:column; gap:8px; padding:8px; }
.msg { max-width:90%; padding:8px 12px; border-radius:var(--radius); font-size:var(--text-base); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.msg.user { align-self:flex-end; background:#1c2333; border:1px solid var(--border); }
.msg.agent { align-self:flex-start; background:#1a2332; border:1px solid var(--border); }
.msg.system { align-self:center; color:var(--muted); font-size:11px; font-family:var(--mono); padding:2px 8px; }
.msg.error { align-self:center; color:var(--red); font-size:11px; font-family:var(--mono); background:rgba(248,81,73,.08); border:1px solid rgba(248,81,73,.2); }
.msg .label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; color:var(--muted); display:flex; align-items:center; gap:4px; }
.msg-avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* ── Markdown content in agent messages ──────── */
.md-content { white-space:normal; }
.md-content p { margin:0 0 0.5em; }
.md-content p:last-child { margin-bottom:0; }
.md-content table { border-collapse:collapse; margin:0.5em 0; font-size:var(--text-sm); width:auto; }
.md-content th, .md-content td { border:1px solid var(--border); padding:4px 8px; text-align:left; }
.md-content th { background:var(--surface2); font-weight:600; color:var(--text); }
.md-content tr:nth-child(even) td { background:rgba(255,255,255,.02); }
.md-content code { background:var(--surface2); padding:1px 4px; border-radius:3px; font-family:var(--mono); font-size:0.9em; }
.md-content pre { background:var(--surface2); padding:8px; border-radius:var(--radius); overflow-x:auto; margin:0.5em 0; }
.md-content pre code { background:none; padding:0; }
.md-content ul, .md-content ol { margin:0.5em 0; padding-left:1.5em; }
.md-content h1, .md-content h2, .md-content h3, .md-content h4 { margin:0.5em 0 0.25em; color:var(--text); }
.md-content h1 { font-size:1.2em; } .md-content h2 { font-size:1.1em; } .md-content h3 { font-size:1em; }
.md-content blockquote { border-left:3px solid var(--accent-dim); padding-left:8px; color:var(--muted); margin:0.5em 0; }
.md-content a { color:var(--accent); text-decoration:none; }
.md-content a:hover { text-decoration:underline; }
.md-content hr { border:none; border-top:1px solid var(--border); margin:0.5em 0; }

/* ── Retry button (error messages) ────────────── */
.retry-btn {
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 11px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.retry-btn:hover { opacity: 0.85; }

/* ── Streaming cursor ────────────────────────────── */
.streaming-cursor { display:inline-block; width:7px; height:14px; background:var(--accent); animation:blink 0.8s steps(2) infinite; vertical-align:text-bottom; margin-left:1px; }
@keyframes blink { 50% { opacity:0; } }

.input-row { padding:8px 12px; border-top:1px solid var(--border); display:flex; gap:6px; background:var(--surface); flex-shrink:0; }
.input-row input { flex:1; padding:8px 12px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:var(--text-base); outline:none; }
.input-row input:focus { border-color:var(--accent); }
.input-row input:disabled { opacity:.5; }
.input-row button { padding:8px 16px; border-radius:var(--radius); border:none; background:var(--accent-dim); color:#fff; font-size:var(--text-base); font-weight:500; cursor:pointer; }
.input-row button:hover:not(:disabled) { background:var(--accent); }
.input-row button:disabled { opacity:.5; cursor:not-allowed; }

/* ── Tools panel ────────────────────────────────────── */
.tool-entry { margin-bottom:6px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; font-size:var(--text-sm); font-family:var(--mono); }
.tool-entry .tool-head { padding:6px 10px; background:var(--surface2); display:flex; align-items:center; gap:8px; cursor:pointer; }
.tool-entry .tool-head .name { color:var(--accent); font-weight:600; }
.tool-entry .tool-head .status-icon { font-size:10px; }
.tool-entry .tool-head .status-icon.ok { color:var(--green); }
.tool-entry .tool-head .status-icon.err { color:var(--red); }
.tool-entry .tool-head .status-icon.run { color:var(--orange); }
.tool-entry .tool-body { padding:6px 10px; color:var(--muted); white-space:pre-wrap; word-break:break-word; display:none; max-height:200px; overflow-y:auto; }
.tool-entry.expanded .tool-body { display:block; }

/* ── Rich tool cards (in chat) ───────────────────────── */
.msg.tool-card {
  align-self: stretch; max-width: 100%; padding: 0;
  background: transparent; border: none;
  border-left: 3px solid var(--accent); margin: 4px 0;
  font-size: 12px; font-family: var(--mono);
  border-radius: var(--radius);
  overflow: visible;
  white-space: normal; line-height: 1.3;
}
.msg.tool-card.pending { border-left-color: var(--orange); }
.msg.tool-card.ok { border-left-color: var(--green); }
.msg.tool-card.err { border-left-color: var(--red); }

/* Header bar */
.msg.tool-card .tc-header {
  padding: 6px 10px; display: flex; align-items: center;
  gap: 8px; cursor: pointer; color: var(--muted);
  background: var(--surface2);
}
.msg.tool-card .tc-header:hover { background: var(--surface); }
.msg.tool-card .tc-icon { display: flex; align-items: center; flex-shrink: 0; }
.msg.tool-card .tc-status { font-size: 12px; font-weight: 700; }
.msg.tool-card .tc-status.ok { color: var(--green); }
.msg.tool-card .tc-status.err { color: var(--red); }
.msg.tool-card .tc-name { color: var(--accent); font-weight: 600; white-space: nowrap; }
.msg.tool-card .tc-summary {
  color: var(--muted); flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.msg.tool-card .tc-meta {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; margin-left: auto;
}
.msg.tool-card .tc-params-chip {
  font-size: 10px; color: var(--accent); background: rgba(88,166,255,.1);
  padding: 1px 6px; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.msg.tool-card .tc-params-chip:hover { background: rgba(88,166,255,.2); }
.msg.tool-card .tc-duration {
  font-size: 10px; color: var(--dim); background: var(--surface);
  padding: 1px 6px; border-radius: 10px; white-space: nowrap;
}

/* Param key-value pairs */
.msg.tool-card .tc-params {
  padding: 6px 10px; border-top: 1px solid var(--border);
  background: var(--bg);
}
.msg.tool-card .tc-param {
  display: flex; gap: 8px; padding: 1px 0;
  line-height: 1.4;
}
.msg.tool-card .tc-pk {
  color: var(--purple); flex-shrink: 0; min-width: 0;
}
.msg.tool-card .tc-pk::after { content: ':'; color: var(--dim); }
.msg.tool-card .tc-pv {
  color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* Output preview */
.msg.tool-card .tc-output {
  padding: 6px 10px; border-top: 1px solid var(--border);
  background: var(--bg); display: none;
}
.msg.tool-card.expanded .tc-output { display: block; }
.msg.tool-card .tc-output.tc-output-err { background: rgba(248,81,73,.05); }
.msg.tool-card .tc-output-lines { max-height: 120px; overflow-y: auto; }
.msg.tool-card .tc-output.tc-output-expanded .tc-output-lines { max-height: 300px; }
.msg.tool-card .tc-line {
  display: flex; gap: 8px; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}
.msg.tool-card .tc-ln {
  color: var(--dim); min-width: 20px; text-align: right;
  flex-shrink: 0; user-select: none;
}
.msg.tool-card .tc-empty { color: var(--dim); font-style: italic; }
.msg.tool-card .tc-output-toggle {
  background: none; border: none; color: var(--accent);
  font-size: 11px; font-family: var(--mono);
  cursor: pointer; padding: 3px 0 0; display: block;
}
.msg.tool-card .tc-output-toggle:hover { text-decoration: underline; }

/* Spinner (shared) */
.tool-spinner {
  display: inline-block; width: 10px; height: 10px;
  border: 2px solid var(--orange); border-top-color: transparent;
  border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Config controls ────────────────────────────────── */
.config-group { padding:8px 12px; border-bottom:1px solid var(--border); }
.config-group label { display:block; font-size:11px; font-weight:500; margin-bottom:4px; color:var(--muted); }
.config-group select, .config-group input[type="text"], .config-group input[type="password"], .config-group textarea {
  width:100%; padding:5px 8px; border-radius:4px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:11px; font-family:var(--mono);
}
.config-group select { position:relative; z-index:1; cursor:pointer; -webkit-appearance:menulist; appearance:menulist; }
.config-group textarea { resize:vertical; min-height:50px; }
.btn-sm { padding:4px 10px; border-radius:4px; border:none; background:var(--accent-dim); color:#fff; font-size:11px; cursor:pointer; margin-top:4px; }
.btn-sm:hover { background:var(--accent); }
.btn-sm-secondary { background:var(--surface2); border:1px solid var(--border); color:var(--text); }

/* ── Event log ──────────────────────────────────────── */
.event-item { padding:3px 0; border-bottom:1px solid rgba(48,54,61,.5); font-size:11px; font-family:var(--mono); color:var(--muted); }
.event-item .topic { color:var(--purple); }

/* ── State display ──────────────────────────────────── */
.state-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px 0; }
.state-card { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:8px; text-align:center; }
.state-card .val { font-size:var(--text-xl); font-weight:700; color:var(--accent); font-family:var(--mono); }
.state-card .lbl { font-size:10px; text-transform:uppercase; color:var(--muted); margin-top:2px; }

/* ── Tool list (registered) ──────────────────────────── */
.tool-list { font-size:11px; font-family:var(--mono); }
.tool-list .tl-item { padding:4px 8px; border-bottom:1px solid rgba(48,54,61,.4); display:flex; gap:8px; align-items:center; cursor:pointer; }
.tool-list .tl-item .tl-name { color:var(--accent); font-weight:500; }
.tool-list .tl-item .tl-source { color:var(--dim); font-size:10px; }

/* ── MCP section ────────────────────────────────────── */
.mcp-server { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:4px; font-size:11px; font-family:var(--mono); display:flex; align-items:center; gap:6px; }
.mcp-server .mcp-dot { width:6px; height:6px; border-radius:50%; background:var(--green); }
.mcp-server .mcp-name { color:var(--text); flex:1; }
.mcp-server .mcp-tools { color:var(--muted); }

/* ── Modal ──────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000; display:flex; align-items:center; justify-content:center; animation:fadeIn .12s; }
.modal-box { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px 20px; min-width:300px; max-width:420px; width:90%; box-shadow:0 8px 24px rgba(0,0,0,.5); animation:slideUp .15s; }
.modal-title { font-size:var(--text-base); font-weight:600; color:var(--text); margin-bottom:8px; }
.modal-body { font-size:var(--text-sm); color:var(--muted); margin-bottom:12px; line-height:1.5; }
.modal-input { width:100%; padding:6px 10px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:var(--text-sm); font-family:var(--mono); margin-bottom:12px; outline:none; }
.modal-input:focus { border-color:var(--accent); }
.modal-btns { display:flex; justify-content:flex-end; gap:6px; }
.modal-btn { padding:5px 14px; border-radius:4px; border:none; font-size:var(--text-sm); font-weight:500; cursor:pointer; }
.modal-btn-cancel { background:var(--surface2); color:var(--muted); border:1px solid var(--border); }
.modal-btn-cancel:hover { color:var(--text); }
.modal-btn-ok { background:var(--accent-dim); color:#fff; }
.modal-btn-ok:hover { background:var(--accent); }
.modal-btn-danger { background:var(--red); color:#fff; }
.modal-btn-danger:hover { opacity:.85; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { transform:translateY(8px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* ── Item bar (unified conversation / terminal session bar) ─── */
.item-bar-container { flex:1; }
.item-bar { display:flex; align-items:center; gap:6px; padding:4px 8px; position:relative; }
.item-bar-name { font-size:11px; font-family:var(--mono); color:var(--muted); background:var(--surface2); padding:2px 8px; border-radius:10px; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-bar-btn { padding:3px 8px; border:none; border-radius:4px; font-size:11px; cursor:pointer; font-family:var(--mono); }
.item-bar-new { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.item-bar-rename { background:var(--accent-dim); color:#fff; }
.item-bar-hist { background:var(--surface2); color:var(--muted); border:1px solid var(--border); }
.item-bar-btn:hover { opacity:.85; }

.item-bar-dropdown { display:none; position:absolute; top:100%; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:4px; min-width:280px; max-height:400px; overflow-y:auto; z-index:200; box-shadow:0 4px 12px rgba(0,0,0,.5); font-size:var(--text-sm); font-family:var(--mono); }
.item-bar-dropdown.visible { display:block; }
.item-bar-entry { padding:6px 8px; cursor:pointer; border-radius:4px; display:flex; align-items:center; gap:8px; }
.item-bar-entry:hover { background:var(--surface2); }
.item-bar-entry.active { background:var(--accent-dim); color:#fff; }
.item-bar-entry-info { flex:1; min-width:0; }
.item-bar-entry-title { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.item-bar-entry-meta { font-size:10px; color:var(--dim); margin-top:1px; display:block; }
.item-bar-entry.active .item-bar-entry-meta { color:rgba(255,255,255,.6); }
.item-bar-entry-del { font-size:10px; color:var(--red); cursor:pointer; opacity:.6; padding:2px 4px; }
.item-bar-entry-del:hover { opacity:1; }
.item-bar-empty { padding:12px; text-align:center; color:var(--dim); font-size:11px; }
.item-bar-search-row { padding:4px; border-bottom:1px solid var(--border); }
.item-bar-search { width:100%; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:11px; font-family:var(--mono); box-sizing:border-box; outline:none; }
.item-bar-search:focus { border-color:var(--accent); }
.item-bar-actions { display:flex; flex-direction:column; gap:2px; padding:6px 8px; border-top:1px solid var(--border); margin-top:4px; }
.item-bar-actions button { width:100%; padding:5px 8px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--text); font-size:11px; cursor:pointer; text-align:left; transition:background .15s; }
.item-bar-actions button:hover { background:var(--surface2); }

/* ── Memory CRUD ───────────────────────────────────── */
/* Shared memory form styles */
.mem-form input, .mem-form textarea, .mem-form select { width:100%; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:11px; font-family:var(--mono); margin-bottom:4px; }
.mem-form textarea { resize:vertical; min-height:40px; }
.mem-form .mem-form-row { display:flex; gap:4px; }

.mem-add-form { display:none; padding:8px 12px; border-bottom:1px solid var(--border); }
.mem-add-form.visible { display:block; }

.mem-item { padding:6px 8px; border-bottom:1px solid var(--border); position:relative; }
.mem-item:hover { background:rgba(88,166,255,.03); }
.mem-item .mem-header { display:flex; align-items:center; gap:6px; }
.mem-item .mem-key { color:var(--accent); font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mem-item .mem-cat { background:var(--surface2); padding:1px 5px; border-radius:3px; font-size:9px; color:var(--muted); }
.mem-item .mem-score { color:var(--dim); font-size:10px; }
.mem-item .mem-actions { display:flex; gap:2px; }
.mem-item .mem-actions button { border:none; background:transparent; cursor:pointer; font-size:11px; padding:2px 4px; border-radius:3px; color:var(--muted); }
.mem-item .mem-actions button:hover { background:var(--surface2); color:var(--text); }
.mem-item .mem-actions .mem-del:hover { color:var(--red); }
.mem-item .mem-content { color:var(--muted); font-size:11px; margin-top:3px; white-space:pre-wrap; word-break:break-word; }
.mem-item .mem-date { font-size:9px; color:var(--dim); margin-top:2px; }

.mem-edit-form { margin-top:4px; padding:6px; border:1px solid var(--border); border-radius:4px; background:var(--surface); }

/* ── Account management ────────────────────────────── */
.acct-form { padding:8px 12px; border-bottom:1px solid var(--border); display:none; }
.acct-form.visible { display:block; }
.acct-form .config-group { padding:4px 0; border:none; }
.acct-item { padding:6px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:11px; font-family:var(--mono); }
.acct-item:hover { background:var(--surface2); }
.acct-item .acct-name { color:var(--accent); font-weight:500; }
.acct-item .acct-detail { color:var(--dim); flex:1; }
.acct-item .acct-actions { display:flex; gap:2px; }
.acct-item .acct-actions button { border:none; background:transparent; cursor:pointer; font-size:11px; padding:2px 4px; border-radius:3px; color:var(--muted); }
.acct-item .acct-actions button:hover { background:var(--surface2); color:var(--text); }
.acct-item .acct-actions .acct-del:hover { color:var(--red); }
.acct-edit-form { padding:6px; border:1px solid var(--border); border-radius:4px; background:var(--surface); margin:4px 12px; }
.acct-edit-form input, .acct-edit-form select { width:100%; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:11px; font-family:var(--mono); margin-bottom:4px; }
.acct-edit-form .acct-form-row { display:flex; gap:4px; }
.input-error { border-color:var(--red, #f85149) !important; box-shadow:0 0 0 1px var(--red, #f85149); }

/* ── Command Palette ────────────────────────────────── */
.cmd-tool-item { padding:6px 10px; cursor:pointer; border-bottom:1px solid rgba(48,54,61,.4); font-size:var(--text-sm); font-family:var(--mono); }
.cmd-tool-item:hover { background:var(--surface2); }
.cmd-tool-item.selected { background:var(--accent-dim); color:#fff; }
.cmd-tool-item .cmd-tool-name { color:var(--accent); font-weight:600; }
.cmd-tool-item.selected .cmd-tool-name { color:#fff; }
.cmd-tool-item .cmd-tool-desc { color:var(--muted); font-size:11px; margin-top:2px; }
.cmd-tool-item.selected .cmd-tool-desc { color:rgba(255,255,255,.7); }
.cmd-tool-item .cmd-tool-perm { font-size:9px; padding:1px 4px; border-radius:3px; background:var(--surface2); color:var(--dim); margin-left:6px; }
.cmd-param-group { margin-bottom:6px; }
.cmd-param-group label { display:block; font-size:11px; font-weight:500; color:var(--muted); margin-bottom:2px; }
.cmd-param-group label .required { color:var(--red); }
.cmd-param-group input, .cmd-param-group select, .cmd-param-group textarea { width:100%; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:11px; font-family:var(--mono); }
.cmd-param-group textarea { resize:vertical; min-height:50px; }

/* ── Skills panel ───────────────────────────────────── */
.skill-item { padding:8px; border-bottom:1px solid var(--border); }
.skill-item:hover { background:rgba(88,166,255,.03); }
.skill-header { display:flex; align-items:center; gap:6px; }
.skill-name { color:var(--accent); font-weight:600; font-size:var(--text-sm); }
.skill-scope { background:var(--surface2); padding:1px 5px; border-radius:3px; font-size:9px; color:var(--muted); }
.skill-scope.workspace { background:var(--accent-dim); color:#fff; }
.skill-active-dot { width:6px; height:6px; border-radius:50%; background:var(--green); display:none; }
.skill-item.active .skill-active-dot { display:inline-block; }
.skill-desc { color:var(--muted); font-size:11px; margin-top:3px; }
.skill-actions { display:flex; gap:4px; margin-left:auto; align-items:center; }
.skill-actions button { border:none; background:transparent; cursor:pointer; font-size:11px; padding:2px 4px; border-radius:3px; color:var(--muted); }
.skill-actions button:hover { background:var(--surface2); color:var(--text); }
.skill-actions .skill-del:hover { color:var(--red); }
.skill-toggle { position:relative; width:28px; height:16px; background:var(--dim); border-radius:8px; cursor:pointer; border:none; transition:background .2s; flex-shrink:0; }
.skill-toggle.on { background:var(--green); }
.skill-toggle::after { content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:left .2s; }
.skill-toggle.on::after { left:14px; }
.skill-token-warn { font-size:9px; color:var(--orange); margin-top:2px; }

/* ── Slash command autocomplete ─────────────────────── */
.slash-autocomplete { position:absolute; bottom:100%; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:var(--radius) var(--radius) 0 0; max-height:200px; overflow-y:auto; display:none; z-index:50; }
.slash-autocomplete.visible { display:block; }
.slash-item { padding:6px 12px; cursor:pointer; font-size:var(--text-sm); font-family:var(--mono); display:flex; align-items:center; gap:8px; }
.slash-item:hover, .slash-item.selected { background:var(--surface2); }
.slash-item .slash-name { color:var(--accent); font-weight:500; }
.slash-item .slash-desc { color:var(--muted); font-size:11px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── View containers ──────────────────────────────── */
#viewHome, #viewWorkspace {
  display: none; flex-direction: column; height: 100vh; overflow: hidden;
}
#viewHome.active-view, #viewWorkspace.active-view { display: flex; }

.home-content { flex:1; overflow-y:auto; padding:24px; }
.home-inner { max-width:720px; margin:0 auto; width:100%; }
.home-section { margin-bottom:32px; }
.home-section h2 { font-size:var(--text-md); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); margin-bottom:12px; }

.ws-card { padding:12px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); cursor:pointer; margin-bottom:8px; display:flex; align-items:center; gap:12px; transition:border-color .15s; }
.ws-card:hover { border-color:var(--accent); }
.ws-card-name { font-weight:600; color:var(--text); flex:1; }
.ws-card-meta { font-size:11px; color:var(--muted); font-family:var(--mono); }
.ws-card-actions { display:flex; gap:4px; }
.ws-card-actions button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:var(--text-sm); padding:2px 4px; border-radius:3px; }
.ws-card-actions button:hover { color:var(--text); background:var(--surface2); }
.ws-card-actions button.danger:hover { color:var(--red); }

/* ── Goals ──────────────────────────────────────────── */
.goal-item { padding:6px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.goal-dot { font-size:inherit; color:var(--muted); }
.goal-dot.active { color:var(--accent); }
.goal-dot.completed { color:var(--green); }
.goal-dot.failed { color:var(--red); }
.goal-complete-btn { margin-left:auto; border:none; background:var(--green); color:#fff; border-radius:4px; padding:2px 8px; cursor:pointer; font-size:11px; }
.goal-edit-btn { border:none; background:transparent; color:var(--dim); cursor:pointer; font-size:12px; padding:0 4px; opacity:0.5; }
.goal-edit-btn:hover { opacity:1; color:var(--accent); }
.goal-edit-wrap { display:flex; align-items:center; gap:4px; flex:1; }
.goal-edit-input { flex:1; background:var(--surface2); color:var(--text); border:1px solid var(--accent); border-radius:3px; padding:2px 6px; font-size:11px; font-family:var(--mono); }
.goal-edit-priority { background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:3px; padding:2px 4px; font-size:10px; }
.goal-edit-save, .goal-edit-cancel { font-size:10px; padding:2px 6px; }

/* ── Workspace dropdown ────────────────────────────── */
.ws-dd-item { padding:5px 8px; cursor:pointer; border-radius:4px; display:flex; align-items:center; gap:6px; }
.ws-dd-item.active { background:var(--accent-dim); color:#fff; }
.ws-dd-name { flex:1; }
.ws-dd-action { font-size:10px; cursor:pointer; opacity:0.7; border:none; background:none; color:inherit; }
.ws-dd-action.danger { color:var(--red); }

/* ── File browser ──────────────────────────────────── */
.file-item { padding:3px 6px; border-bottom:1px solid var(--border); cursor:pointer; }
.file-back { padding:3px 6px; border-bottom:1px solid var(--border); cursor:pointer; color:var(--accent); }
.file-preview { padding:6px; border:1px solid var(--border); border-radius:4px; margin-bottom:4px; white-space:pre-wrap; max-height:300px; overflow-y:auto; font-size:11px; }
.file-preview-name { color:var(--accent); margin-bottom:4px; }
.file-binary-info { padding:6px; color:var(--muted); font-size:11px; }
.file-load-more { display:block; width:100%; margin:4px 0; text-align:center; }
.file-count-summary { font-size:10px; color:var(--dim); padding:3px 6px; border-bottom:1px solid var(--border); }

/* ── Tool call time / inline tool summary ─────────── */
.tool-time { color:var(--dim); margin-left:auto; }
.ti-summary { margin-left:auto; color:var(--dim); }

/* ── Tool registry permission states ──────────────── */
.tl-perm-auto { color:var(--green); background:rgba(63,185,80,.13); padding:1px 4px; border-radius:2px; font-size:10px; }
.tl-perm-approve { color:var(--orange); background:rgba(234,179,8,.13); padding:1px 4px; border-radius:2px; font-size:10px; }
.tl-perm-denied { color:var(--red); background:rgba(248,84,84,.13); padding:1px 4px; border-radius:2px; font-size:10px; }

/* ── Extracted inline styles ─────────────────────────── */

/* Header/workspace bar */
.ws-name-wrap    { cursor:pointer; position:relative; }
.provider-label  { color:var(--dim); }
.cost-display    { font-size:10px; font-family:var(--mono); color:var(--dim); margin-right:8px; }

/* Workspace dropdown */
.ws-dropdown     { display:none; position:absolute; top:36px; left:60px; background:var(--surface);
                   border:1px solid var(--border); border-radius:var(--radius); padding:4px;
                   min-width:200px; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,.4);
                   font-size:12px; font-family:var(--mono); }
.ws-dropdown.visible { display:block; }
.ws-dd-create-row { border-top:1px solid var(--border); margin-top:4px; padding-top:4px;
                    display:flex; gap:4px; }
.ws-dd-input     { flex:1; padding:4px 6px; border:1px solid var(--border); border-radius:4px;
                   background:var(--bg); color:var(--text); font-size:11px; font-family:var(--mono); }
.ws-dd-create-btn { padding:4px 8px; border:none; border-radius:4px; background:var(--accent-dim);
                    color:#fff; font-size:11px; cursor:pointer; }

/* Chat panel */
.panel-header-flush { padding:0; }
/* conv-bar-wrap replaced by .item-bar-container */
.input-row-wrap  { position:relative; }
.cmd-palette-btn-style { background:var(--surface2); border:1px solid var(--border);
                         color:var(--muted); }

/* Panel helpers */
.panel-mono      { font-family:var(--mono); font-size:var(--text-sm); }
.ml-auto         { margin-left:auto; }
.spacer          { flex:1; }
.flex-1          { flex:1; }

/* Memory panel */
.mem-filter-row  { display:flex; gap:4px; align-items:flex-end; }
.mem-cat-filter  { width:auto; padding:5px 8px; border-radius:4px; border:1px solid var(--border);
                   background:var(--bg); color:var(--text); font-size:11px; font-family:var(--mono); }
.btn-surface2    { background:var(--surface2); border:1px solid var(--border); }

/* Skills panel */
.skill-import-label { cursor:pointer; }
.skill-scope-bar   { padding:6px 8px; border-bottom:1px solid var(--border); display:none; }
.skill-scope-bar.visible { display:block; }
.skill-scope-label { font-size:11px; color:var(--muted); display:block; margin-bottom:4px; }
.skill-scope-btns  { display:flex; gap:4px; }

/* Config panel */
.panel-body-flush  { padding:0; }
.acct-toggle     { float:right; margin-top:-2px; }
.btn-row         { display:flex; gap:4px; padding:4px 0; }
.tool-registry-scroll { max-height:200px; }
.state-grid-wrap { padding:8px 12px; }
.config-toggle   { cursor:pointer; }
.config-arrow    { font-size:10px; }
.config-section-hidden { display:none; }
.config-section-hidden.visible { display:block; }
.mcp-servers-wrap { padding:8px 12px; }
.domain-hint     { opacity:.6; }
.cfg-narrow      { width:80px; }
.security-apply-wrap { padding:4px 12px; }
.btn-danger      { background:var(--red); }

/* Command palette */
.cmd-overlay     { display:none; }
.cmd-overlay.visible { display:flex; }
.cmd-box         { max-width:560px; max-height:80vh; display:flex; flex-direction:column;
                   padding:12px 16px; }
.cmd-search-row  { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cmd-icon        { font-size:var(--text-lg); }
.cmd-search-input { margin-bottom:0; flex:1; }
.cmd-tool-scroll { flex:1; overflow-y:auto; max-height:300px; border:1px solid var(--border);
                   border-radius:var(--radius); margin-bottom:8px; }
.cmd-param-scroll { display:none; border:1px solid var(--border); border-radius:var(--radius);
                    padding:8px; margin-bottom:8px; max-height:200px; overflow-y:auto; }
.cmd-param-scroll.visible { display:block; }

/* Home view */
.home-create-row  { display:flex; gap:6px; margin-bottom:12px; }
.home-ws-input    { flex:1; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius);
                    background:var(--bg); color:var(--text); font-size:12px; font-family:var(--mono); }
.home-ws-create-btn { padding:6px 12px; }
.home-acct-toggle { margin-top:8px; }
.home-acct-form  { display:none; margin-top:8px; padding:8px 12px; border:1px solid var(--border);
                   border-radius:var(--radius); background:var(--surface); }
.home-acct-form.visible { display:block; }
.skill-scope-cancel { color:var(--muted); }

/* ── Batch 1: Config panel sections ───────────────── */
.radio-group { display:flex; gap:12px; padding:4px 0; }
.radio-label { font-size:11px; color:var(--text); display:flex; align-items:center; gap:4px; cursor:pointer; }
.radio-label input[type="radio"] { accent-color:var(--accent); }

.cost-meter-wrap { position:relative; height:18px; background:var(--bg); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.cost-meter-bar { height:100%; background:var(--green); transition:width .3s, background .3s; width:0%; }
.cost-meter-bar.warn { background:var(--orange); }
.cost-meter-bar.danger { background:var(--red); }
.cost-meter-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-family:var(--mono); color:var(--text); }

.identity-preview { padding:8px 12px; font-size:11px; font-family:var(--mono); white-space:pre-wrap; word-break:break-word; color:var(--muted); max-height:200px; overflow-y:auto; border:1px solid var(--border); border-radius:4px; margin:0 12px 8px; background:var(--bg); }

.routing-chain-list { font-size:11px; font-family:var(--mono); }
.routing-chain-item { padding:4px 0; display:flex; align-items:center; gap:6px; }
.routing-chain-item .chain-idx { color:var(--dim); width:16px; }
.routing-chain-item .chain-name { color:var(--accent); flex:1; }
.routing-health-badges { display:flex; flex-wrap:wrap; gap:4px; }
.health-badge { padding:2px 6px; border-radius:10px; font-size:10px; font-family:var(--mono); }
.health-badge.healthy { background:rgba(63,185,80,.15); color:var(--green); }
.health-badge.degraded { background:rgba(210,153,34,.15); color:var(--orange); }
.health-badge.down { background:rgba(248,81,73,.15); color:var(--red); }

.auth-profile-list { font-size:11px; font-family:var(--mono); }
.auth-profile-item { padding:4px 0; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--border); }
.auth-profile-item .profile-active { width:6px; height:6px; border-radius:50%; }
.auth-profile-item .profile-active.on { background:var(--green); }
.auth-profile-item .profile-active.off { background:var(--dim); }
.auth-profile-item .profile-name { color:var(--accent); flex:1; }
.auth-profile-item .profile-provider { color:var(--dim); }
.auth-profile-item .profile-actions button { border:none; background:transparent; cursor:pointer; font-size:10px; color:var(--muted); padding:2px 4px; }
.auth-profile-item .profile-actions button:hover { color:var(--text); }

input[type="range"] { width:100%; accent-color:var(--accent); }
.range-val { font-size:10px; font-family:var(--mono); color:var(--dim); }

.cache-stats { font-size:11px; font-family:var(--mono); color:var(--muted); padding:4px 0; }

.sandbox-caps { display:flex; flex-wrap:wrap; gap:4px; }
.sandbox-cap { font-size:10px; padding:2px 6px; border-radius:3px; background:var(--surface2); color:var(--muted); display:flex; align-items:center; gap:3px; cursor:pointer; }
.sandbox-cap.granted { background:rgba(63,185,80,.15); color:var(--green); }
.sandbox-cap input[type="checkbox"] { accent-color:var(--green); width:10px; height:10px; }

.heartbeat-checks { font-size:11px; font-family:var(--mono); }
.heartbeat-check-item { padding:3px 0; display:flex; align-items:center; gap:6px; border-bottom:1px solid rgba(48,54,61,.4); }
.heartbeat-check-item .hb-status { width:6px; height:6px; border-radius:50%; background:var(--dim); }
.heartbeat-check-item .hb-status.pass { background:var(--green); }
.heartbeat-check-item .hb-status.fail { background:var(--red); }
.heartbeat-check-item .hb-name { flex:1; color:var(--text); }
.heartbeat-check-item .hb-remove { border:none; background:transparent; cursor:pointer; color:var(--muted); font-size:10px; }
.heartbeat-check-item .hb-remove:hover { color:var(--red); }

/* ── Batch 2: Header badges ────────────────────────── */
.autonomy-badge, .daemon-badge, .remote-badge, .extension-badge {
  font-size:10px; font-family:var(--mono); padding:1px 6px; border-radius:10px; margin-right:4px; display:none;
}
.autonomy-badge.visible, .daemon-badge.visible, .remote-badge.visible, .extension-badge.visible { display:inline-block; }
.autonomy-badge.readonly { background:rgba(248,81,73,.15); color:var(--red); }
.autonomy-badge.supervised { background:rgba(210,153,34,.15); color:var(--orange); }
.autonomy-badge.full { background:rgba(63,185,80,.15); color:var(--green); }
.daemon-badge.paused { background:rgba(210,153,34,.15); color:var(--orange); }
.daemon-badge.running { background:rgba(63,185,80,.15); color:var(--green); }
.daemon-badge.stopped { background:rgba(248,81,73,.15); color:var(--red); }
.remote-badge { background:rgba(88,166,255,.15); color:var(--accent); }
.extension-badge.connected { background:rgba(63,185,80,.15); color:var(--green); }
.extension-badge.disconnected { background:rgba(139,148,158,.15); color:var(--muted); }

/* ── Batch 3: Panel enhancements ───────────────────── */
.mount-list { font-size:11px; font-family:var(--mono); }
.mount-item { padding:4px 6px; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--border); }
.mount-item .mount-point { color:var(--accent); flex:1; }
.mount-item .mount-unmount { border:none; background:transparent; cursor:pointer; color:var(--muted); font-size:10px; }
.mount-item .mount-unmount:hover { color:var(--red); }

.goal-tree-item { transition:background .15s; }
.goal-tree-item:hover { background:rgba(88,166,255,.03); }
.goal-toggle { cursor:pointer; font-size:10px; color:var(--dim); width:14px; display:inline-block; text-align:center; }
.goal-toggle:hover { color:var(--accent); }
.goal-desc { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.goal-progress { height:3px; background:var(--border); border-radius:2px; margin-top:2px; overflow:hidden; width:100%; }
.goal-progress-fill { height:100%; background:var(--green); transition:width .3s; }
.goal-artifact-link { font-size:9px; color:var(--accent); margin-left:6px; text-decoration:none; }
.goal-artifact-link:hover { text-decoration:underline; }

/* Memory semantic toggle */
.mem-semantic-label { font-size:10px; color:var(--muted); display:flex; align-items:center; gap:3px; white-space:nowrap; }
.mem-semantic-label input[type="checkbox"] { accent-color:var(--accent); width:12px; height:12px; }

/* OAuth connected apps */
.oauth-provider-card { padding:8px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:11px; font-family:var(--mono); }
.oauth-provider-card:hover { background:var(--surface2); }
.oauth-name { color:var(--text); font-weight:500; flex:1; }
.oauth-status { color:var(--dim); font-size:10px; }
.oauth-status.connected { color:var(--green); }

/* Skill registry search */
.skill-search-row { padding:6px 8px; border-bottom:1px solid var(--border); display:flex; gap:4px; }
.skill-search-input { flex:1; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:11px; font-family:var(--mono); }
.skill-browse-results { max-height:300px; overflow-y:auto; }
.skill-browse-card { padding:8px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.skill-browse-card:hover { background:rgba(88,166,255,.03); }
.skill-browse-name { color:var(--accent); font-weight:600; font-size:var(--text-sm); }
.skill-browse-desc { color:var(--muted); font-size:11px; flex:1; }

/* ── Batch 4: Terminal & Dashboard panels ──────────── */
.terminal-output { background:var(--bg); color:var(--green); font-size:11px; white-space:pre-wrap; word-break:break-word; min-height:100px; }
.terminal-input-row { padding:4px 8px; border-top:1px solid var(--border); display:flex; gap:4px; align-items:center; background:var(--surface); flex-shrink:0; }
.terminal-cwd { font-size:10px; font-family:var(--mono); color:var(--accent); white-space:nowrap; }
.terminal-input { flex:1; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--green); font-size:11px; font-family:var(--mono); outline:none; }
.terminal-input:focus { border-color:var(--accent); }
.terminal-cmd { color:var(--accent); }
.terminal-stdout { color:var(--text); }
.terminal-stderr { color:var(--red); }

.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px 0; margin-bottom:8px; }
.dash-card { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:8px; text-align:center; }
.dash-card .val { font-size:var(--text-xl); font-weight:700; color:var(--accent); font-family:var(--mono); }
.dash-card .lbl { font-size:10px; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.dash-log-wrap { max-height:300px; overflow-y:auto; }
.dash-log-entry { padding:2px 4px; border-bottom:1px solid rgba(48,54,61,.3); font-size:10px; }
.dash-log-entry.warn { color:var(--orange); }
.dash-log-entry.error { color:var(--red); }
.dash-log-entry .log-time { color:var(--dim); margin-right:6px; }

/* ── Dashboard Charts (Phase 1) ────────────────────── */
.dash-chart-period { display:flex; align-items:center; gap:6px; padding:4px 0; font-size:var(--text-sm); color:var(--muted); }
.dash-chart-period select { background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:2px 6px; font-size:10px; }
.dash-chart-container { margin-bottom:12px; }
.chart-empty { color:var(--dim); font-size:11px; padding:8px 0; text-align:center; }
.chart-title { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
.chart-bar-container { display:flex; align-items:flex-end; gap:2px; height:100px; padding:4px 0; }
.chart-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; min-width:0; }
.chart-bar-value { font-size:8px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.chart-bar-track { width:100%; height:80px; display:flex; align-items:flex-end; }
.chart-bar { width:100%; border-radius:2px 2px 0 0; min-height:1px; transition:height .2s; }
.chart-bar-label { font-size:8px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-top:2px; }
.chart-ts { display:flex; flex-direction:column; gap:3px; padding:4px 0; }
.chart-ts-row { display:flex; align-items:center; gap:4px; font-size:10px; }
.chart-ts-label { width:48px; text-align:right; color:var(--dim); flex-shrink:0; overflow:hidden; text-overflow:ellipsis; }
.chart-ts-track { flex:1; height:10px; background:var(--surface2); border-radius:3px; overflow:hidden; }
.chart-ts-bar { height:100%; border-radius:3px; min-width:1px; transition:width .2s; }
.chart-ts-value { width:48px; text-align:right; color:var(--muted); flex-shrink:0; font-family:var(--mono); }
.cost-breakdown { padding:4px 0; }
.cost-breakdown-bar { display:flex; height:12px; border-radius:4px; overflow:hidden; margin-bottom:6px; }
.cost-seg { min-width:2px; transition:width .2s; }
.cost-breakdown-legend { display:flex; flex-direction:column; gap:2px; }
.cost-legend-row { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); }
.cost-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cost-legend-model { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.cost-legend-pct { width:28px; text-align:right; font-family:var(--mono); }
.cost-legend-cost { width:56px; text-align:right; font-family:var(--mono); color:var(--accent); }
.cost-legend-tokens { width:56px; text-align:right; font-family:var(--mono); }
.cost-legend-calls { width:40px; text-align:right; font-family:var(--mono); }

/* ── Diff View (Phase 2e) ─────────────────────────── */
.diff-view { font-family:var(--mono); font-size:11px; overflow-x:auto; }
.diff-line { display:flex; gap:0; line-height:1.6; }
.diff-num { width:32px; text-align:right; padding-right:4px; color:var(--dim); user-select:none; flex-shrink:0; }
.diff-prefix { width:12px; text-align:center; flex-shrink:0; user-select:none; }
.diff-text { flex:1; white-space:pre; }
.diff-add { background:rgba(63,185,80,.15); color:var(--green); }
.diff-del { background:rgba(248,81,73,.15); color:var(--red); }
.diff-eq { color:var(--muted); }
.diff-empty { color:var(--dim); padding:8px 0; text-align:center; font-size:11px; }

/* ── Identity Editor (Phase 2b) ───────────────────── */
.identity-editor { padding:4px 0; }
.ide-section { margin-bottom:8px; }
.ide-label { font-size:10px; color:var(--muted); display:block; margin-bottom:2px; }
.ide-input, .ide-textarea, .ide-select { width:100%; background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:4px 8px; font-size:var(--text-sm); font-family:var(--mono); box-sizing:border-box; }
.ide-textarea { resize:vertical; min-height:40px; }
.ide-group { border:1px solid var(--border); border-radius:var(--radius); padding:6px 8px; }
.ide-group-title { font-size:10px; font-weight:600; color:var(--accent); text-transform:uppercase; margin-bottom:4px; }
.ide-avatar-preview { margin-top:4px; }
.ide-avatar-preview img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--border); }
.ide-no-avatar { font-size:10px; color:var(--dim); }
.ide-actions { display:flex; gap:6px; margin-top:8px; }
.ide-import-label { cursor:pointer; }

/* ── Hook Management (Phase 2d) ───────────────────── */
.hook-list { display:flex; flex-direction:column; gap:4px; }
.hook-item { display:flex; align-items:center; gap:6px; padding:4px 6px; background:var(--surface2); border-radius:var(--radius); font-size:11px; }
.hook-name { flex:1; font-family:var(--mono); color:var(--text); }
.hook-point { font-size:10px; color:var(--accent); background:var(--surface); padding:1px 6px; border-radius:8px; }
.hook-priority { font-size:10px; color:var(--dim); }
.hook-toggle { cursor:pointer; }
.hook-remove { border:none; background:transparent; color:var(--dim); cursor:pointer; font-size:11px; }
.hook-remove:hover { color:var(--red); }
.hook-add-form { display:flex; flex-direction:column; gap:4px; margin-top:6px; padding:6px; border:1px solid var(--border); border-radius:var(--radius); }

/* ── Batch 5: Chat inline elements ─────────────────── */
.msg.subagent-card { align-self:stretch; max-width:100%; padding:0; background:transparent; border:none; border-left:3px solid var(--purple); margin:4px 0; font-size:var(--text-sm); font-family:var(--mono); }
.subagent-head { padding:4px 10px; display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--muted); }
.subagent-head:hover { background:var(--surface2); }
.subagent-head .sa-icon { color:var(--purple); }
.subagent-head .sa-task { color:var(--purple); font-weight:600; flex:1; }
.subagent-head .sa-stats { color:var(--dim); font-size:10px; }
.subagent-detail { display:none; padding:4px 10px 6px; color:var(--muted); white-space:pre-wrap; word-break:break-word; max-height:200px; overflow-y:auto; border-top:1px solid var(--border); }
.msg.subagent-card.expanded .subagent-detail { display:block; }
.sa-done { color:var(--green) !important; }
.sa-error { color:var(--red) !important; }

/* ── Checkpoint items ─────────────────────────────── */
.checkpoint-item { display:flex; align-items:center; gap:6px; padding:4px 6px; border-bottom:1px solid var(--border); font-size:11px; }
.cp-time { flex:1; color:var(--text); font-family:var(--mono); }
.cp-size { color:var(--dim); font-size:10px; }
.cp-restore { font-size:10px; }
.cp-delete { font-size:10px; padding:2px 6px; }

/* ── Fallback chain editor ────────────────────────── */
.chain-entry { display:flex; align-items:center; gap:4px; padding:4px 6px; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:2px; font-size:11px; }
.chain-entry.drag-over { border-color:var(--accent); background:rgba(88,166,255,.1); }
.chain-drag-handle { cursor:grab; color:var(--dim); }
.chain-name { flex:1; color:var(--text); font-family:var(--mono); }
.chain-model { color:var(--muted); font-size:10px; }
.chain-remove { border:none; background:transparent; color:var(--dim); cursor:pointer; }
.chain-remove:hover { color:var(--red); }
.chain-add-row { display:flex; gap:4px; margin-top:4px; }
.chain-add-row input { flex:1; background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:2px 6px; font-size:10px; }

/* ── Discovered tools ─────────────────────────────── */
.discovered-tool-item { display:flex; align-items:center; gap:6px; padding:3px 6px; border-bottom:1px solid var(--border); font-size:11px; }
.dt-name { font-family:var(--mono); color:var(--text); }
.dt-source-badge { font-size:9px; padding:1px 4px; border-radius:6px; text-transform:uppercase; }
.dt-ext { background:var(--green); color:#000; }
.dt-mcp { background:var(--accent); color:#000; }
.dt-desc { flex:1; color:var(--dim); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.safety-banner { padding:6px 10px; background:rgba(210,153,34,.08); border:1px solid rgba(210,153,34,.2); border-radius:var(--radius); color:var(--orange); font-size:11px; font-family:var(--mono); margin:4px 0; }

.undo-btn { display:inline-block; margin-top:4px; font-size:10px; color:var(--dim); cursor:pointer; font-family:var(--mono); border:none; background:none; padding:0; }
.undo-btn:hover { color:var(--accent); text-decoration:underline; }

.intent-badge { display:inline-block; padding:0 5px; border-radius:8px; font-size:9px; font-family:var(--mono); font-weight:600; margin-left:6px; vertical-align:middle; }
.intent-badge.command { background:rgba(88,166,255,.15); color:var(--accent); }
.intent-badge.query { background:rgba(188,140,255,.15); color:var(--purple); }
.intent-badge.task { background:rgba(63,185,80,.15); color:var(--green); }
.intent-badge.chat { background:rgba(139,148,158,.15); color:var(--muted); }
.intent-badge.system { background:rgba(210,153,34,.15); color:var(--orange); }

/* ── Batch 8: Modals & dialogs ─────────────────────── */
.vault-dialog { padding:16px; }
.vault-dialog input[type="password"] { width:100%; padding:6px 10px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:var(--text-sm); font-family:var(--mono); margin-bottom:8px; }
.vault-lock-toggle { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); cursor:pointer; }

/* ── AskUserQuestion cards ─────────────────────── */
.ask-user-card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:10px 12px; margin:8px 0; }
.ask-user-card.ask-user-answered { opacity:.7; }
.ask-user-header { font-size:9px; font-weight:600; text-transform:uppercase; color:var(--accent); letter-spacing:.5px; margin-bottom:4px; }
.ask-user-question { font-size:var(--text-sm); color:var(--text); margin-bottom:8px; }
.ask-user-options { display:flex; flex-direction:column; gap:4px; }
.ask-user-option { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--border); border-radius:4px; cursor:pointer; transition:border-color .15s,background .15s; }
.ask-user-option:hover { border-color:var(--accent); background:rgba(88,166,255,.06); }
.ask-user-option.selected { border-color:var(--accent); background:rgba(88,166,255,.12); }
.ask-user-idx { width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg); border:1px solid var(--border); font-size:10px; font-weight:600; color:var(--muted); flex-shrink:0; }
.ask-user-label { font-size:var(--text-sm); font-weight:500; color:var(--text); }
.ask-user-desc { font-size:10px; color:var(--muted); margin-left:auto; }
.ask-user-other { border-style:dashed; }
.ask-user-input-row { display:flex; gap:6px; margin-top:6px; }
.ask-user-text { flex:1; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:var(--text-sm); font-family:var(--mono); }
.ask-user-submit { padding:4px 12px; border:1px solid var(--accent); border-radius:4px; background:transparent; color:var(--accent); font-size:11px; cursor:pointer; }
.ask-user-submit:hover { background:rgba(88,166,255,.12); }
.ask-user-answer { font-size:11px; color:var(--green); margin-top:6px; font-weight:500; }

/* ── Tool Management Panel (Block 36) ─────────────── */
.tool-mgmt-tabs { display:flex; gap:2px; margin-left:auto; }
.tool-mgmt-tab { padding:2px 10px; border:1px solid var(--border); border-radius:4px 4px 0 0; background:none; color:var(--muted); font-size:10px; cursor:pointer; font-family:var(--mono); }
.tool-mgmt-tab.active { background:var(--surface2); color:var(--text); border-bottom-color:var(--surface2); }
.tool-mgmt-tab:hover { color:var(--accent); }
.tool-mgmt-tab-body { display:none; }
.tool-mgmt-tab-body.active { display:block; }
.tool-search-bar { display:flex; align-items:center; padding:8px; border-bottom:1px solid var(--border); gap:8px; }
.tool-search-input { flex:1; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-family:var(--mono); font-size:11px; }
.tool-search-input:focus { border-color:var(--accent); outline:none; }
.tool-count { font-size:10px; color:var(--muted); white-space:nowrap; }
.tool-filters { display:flex; gap:4px; padding:6px 8px; border-bottom:1px solid var(--border); }
.tool-filter-btn { padding:2px 8px; border:1px solid var(--border); border-radius:3px; background:none; color:var(--muted); font-size:10px; cursor:pointer; }
.tool-filter-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.tool-category { border-bottom:1px solid var(--border); }
.tool-category-header { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; background:rgba(139,148,158,.06); cursor:pointer; }
.tool-category-name { font-size:11px; font-weight:600; color:var(--text); }
.tool-category-toggle { font-size:10px; color:var(--accent); background:none; border:none; cursor:pointer; }
.tool-category-toggle:hover { text-decoration:underline; }
.tool-item { display:flex; align-items:center; gap:6px; padding:3px 8px 3px 12px; font-size:11px; border-bottom:1px solid rgba(255,255,255,.03); }
.tool-item:hover { background:rgba(88,166,255,.04); }
.tool-item.perm-denied { opacity:.5; }
.tool-checkbox { flex-shrink:0; }
.tool-checkbox input { cursor:pointer; accent-color:var(--accent); }
.tool-name { font-family:var(--mono); font-weight:500; color:var(--text); cursor:pointer; min-width:140px; }
.tool-name:hover { color:var(--accent); text-decoration:underline; }
.tool-perm-badge { font-size:9px; padding:1px 4px; border-radius:2px; font-family:var(--mono); min-width:48px; text-align:center; }
.perm-auto .tool-perm-badge { background:rgba(63,185,80,.13); color:var(--green); }
.perm-approve .tool-perm-badge { background:rgba(234,179,8,.13); color:#eab308; }
.perm-denied .tool-perm-badge { background:rgba(248,84,84,.13); color:var(--red); }
.tool-desc { flex:1; color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-usage { font-size:9px; color:var(--muted); }
.tool-detail-expanded { padding:8px 12px 8px 32px; background:rgba(139,148,158,.06); border-bottom:1px solid var(--border); font-size:11px; }
.tool-detail-desc { color:var(--text); margin-bottom:8px; }
.tool-detail-label { font-weight:600; color:var(--muted); margin-bottom:4px; font-size:10px; }
.tool-param { display:flex; gap:8px; padding:2px 0; font-family:var(--mono); font-size:10px; }
.tool-param-name { color:var(--accent); min-width:80px; }
.tool-param-type { color:var(--muted); min-width:100px; }
.tool-param-desc { color:var(--muted); }
.tool-detail-meta { color:var(--muted); font-size:10px; margin-top:8px; }
.tool-detail-perm { margin-top:6px; display:flex; gap:12px; align-items:center; }
.tool-perm-radio { font-size:10px; color:var(--text); cursor:pointer; padding:2px 6px; border-radius:3px; }
.tool-perm-radio input { accent-color:var(--accent); }
.perm-radio-auto { color:var(--green); }
.perm-radio-approve { color:#eab308; }
.perm-radio-denied { color:var(--red); }
.tool-bulk-actions { display:flex; gap:8px; padding:8px; border-top:1px solid var(--border); }
.tool-bulk-actions button { padding:4px 10px; border:1px solid var(--border); border-radius:3px; background:none; color:var(--muted); font-size:10px; cursor:pointer; }
.tool-bulk-actions button:hover { background:rgba(88,166,255,.04); color:var(--text); }

/* ── Agent Picker (Block 37) ─────────────────────── */
.agent-dot { display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; }
.agent-picker { display:none; position:absolute; top:100%; right:0; width:320px; max-height:400px; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.3); z-index:200; }
.agent-picker.visible { display:block; }
.agent-search-bar { padding:8px; border-bottom:1px solid var(--border); }
.agent-search { width:100%; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:11px; font-family:var(--mono); box-sizing:border-box; }
.agent-search:focus { border-color:var(--accent); outline:none; }
.agent-group-label { padding:6px 10px 2px; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.agent-pick-item { display:flex; gap:8px; padding:6px 10px; cursor:pointer; align-items:flex-start; }
.agent-pick-item:hover { background:rgba(88,166,255,.06); }
.agent-pick-item.active { background:rgba(88,166,255,.1); }
.agent-pick-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.agent-pick-info { flex:1; min-width:0; }
.agent-pick-name { font-size:var(--text-sm); font-weight:500; color:var(--text); }
.agent-pick-model { font-size:10px; color:var(--muted); margin-left:4px; }
.agent-pick-desc { font-size:10px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-pick-footer { display:flex; justify-content:space-between; padding:6px 10px; border-top:1px solid var(--border); }
.agent-pick-footer button { background:none; border:none; color:var(--accent); font-size:11px; cursor:pointer; }
.agent-pick-footer button:hover { text-decoration:underline; }

/* ── Agent Management Panel (Block 37) ─────────────── */
.agent-panel-header { display:flex; justify-content:space-between; align-items:center; padding:8px; border-bottom:1px solid var(--border); }
.agent-filter-bar { padding:6px 8px; border-bottom:1px solid var(--border); }
.agent-filter-bar input { width:100%; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:11px; font-family:var(--mono); box-sizing:border-box; }
.agent-card { padding:8px 10px; border-bottom:1px solid var(--border); }
.agent-card:hover { background:rgba(88,166,255,.04); }
.agent-card.active { border-left:3px solid var(--accent); }
.agent-card-header { display:flex; align-items:center; gap:6px; }
.agent-card-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.agent-card-name { font-size:var(--text-sm); font-weight:600; color:var(--text); }
.agent-card-model { font-size:10px; color:var(--muted); margin-left:auto; }
.agent-card-desc { font-size:10px; color:var(--muted); margin:2px 0 2px 16px; }
.agent-card-meta { font-size:9px; color:var(--dim); margin-left:16px; }
.agent-card-actions { display:flex; gap:6px; margin:4px 0 0 16px; }
.agent-card-actions button { padding:2px 8px; border:1px solid var(--border); border-radius:3px; background:none; color:var(--muted); font-size:10px; cursor:pointer; }
.agent-card-actions button:hover { background:rgba(88,166,255,.06); color:var(--text); }
.agent-panel-footer { display:flex; gap:8px; padding:8px; border-top:1px solid var(--border); }
.agent-editor { padding:10px; }
.agent-editor h3 { font-size:var(--text-base); margin:0 0 10px; color:var(--text); }
.agent-back-btn { margin-bottom:8px; }

/* ── Fork-from-point icons ─────────────────────── */
.msg-fork { display:none; cursor:pointer; margin-left:6px; font-size:var(--text-sm); color:var(--dim); vertical-align:middle; }
.msg.user:hover .msg-fork { display:inline; }
.msg-fork:hover { color:var(--accent); }
.channel-badge { display:inline-block; padding:1px 6px; border-radius:3px; font-size:10px; color:#fff; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; vertical-align:middle; margin-right:4px; }
.term-fork { display:none; cursor:pointer; margin-left:6px; font-size:11px; color:var(--dim); }
.terminal-cmd:hover .term-fork { display:inline; }
.term-fork:hover { color:var(--accent); }

/* ── Terminal session bar (now uses .item-bar-*) ─── */

/* ── Agent mode badge ─────────────────────────── */
.terminal-mode-badge { display:inline-block; padding:1px 6px; border-radius:3px; font-size:10px; font-family:var(--mono); font-weight:600; color:var(--muted); background:rgba(139,148,158,.1); margin-left:8px; }
.terminal-mode-badge.agent { color:var(--accent); background:rgba(88,166,255,.15); }
.agent-mode-prompt { color:var(--accent); font-weight:600; }

/* ── API Key Warning Banner (Gap 7.3) ────────── */
.api-key-warning-banner { padding:8px 10px; margin:6px 8px; background:rgba(248,81,73,.06); border:1px solid rgba(248,81,73,.2); border-radius:var(--radius); }
.api-key-warning-text { font-size:11px; font-family:var(--mono); color:var(--red); line-height:1.5; margin-bottom:6px; }
.api-key-warning-text strong { color:var(--red); }
.api-key-warning-text em { font-style:italic; }
.api-key-clear-btn { margin-top:2px; }

/* ── Storage Quota Bar (Gap 7.6 + 12.1) ─────── */
.quota-bar-wrap { padding:0 8px 8px; }
.quota-meter-wrap { position:relative; height:18px; background:var(--bg); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.quota-meter-bar { height:100%; background:var(--green); transition:width .3s, background .3s; }
.quota-meter-bar.warn { background:var(--orange); }
.quota-meter-bar.danger { background:var(--red); }
.quota-meter-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-family:var(--mono); color:var(--text); }
.quota-status-text { font-size:10px; font-family:var(--mono); margin-top:4px; }
.quota-status-text.warn { color:var(--orange); }
.quota-status-text.danger { color:var(--red); }

/* ── Tool Permission Legend (Gap 7.7) ─────────── */
.tool-perm-legend { padding:8px 10px; margin:0 0 2px; background:rgba(139,148,158,.04); border-bottom:1px solid var(--border); }
.tool-perm-legend-title { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:6px; }
.tool-perm-legend-items { display:flex; flex-direction:column; gap:4px; }
.tool-perm-legend-item { display:flex; align-items:center; gap:8px; }
.tool-perm-legend-item .tool-perm-badge { font-size:9px; padding:1px 4px; border-radius:2px; font-family:var(--mono); min-width:48px; text-align:center; flex-shrink:0; }
.tool-perm-legend-desc { font-size:10px; color:var(--muted); }

/* ── Clean Conversations (Gap 12.2) ────────────────── */
.clean-conv-results { font-size:11px; font-family:var(--mono); }
.clean-conv-empty { padding:8px 12px; color:var(--dim); }
.clean-conv-header { padding:6px 12px; font-weight:600; color:var(--muted); border-bottom:1px solid var(--border); }
.clean-conv-item { padding:4px 12px; border-bottom:1px solid rgba(48,54,61,.3); }
.clean-conv-label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.clean-conv-label input[type="checkbox"] { accent-color:var(--accent); }
.clean-conv-name { color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clean-conv-age { color:var(--dim); font-size:10px; }
.clean-conv-actions { display:flex; gap:6px; padding:8px 12px; align-items:center; border-top:1px solid var(--border); }

/* ── Gap 8.3: Light Theme ──────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not(.theme-dark) {
    --bg: #ffffff; --surface: #f6f8fa; --surface2: #ebeef1;
    --border: #d0d7de; --text: #1f2328; --muted: #656d76; --dim: #8b949e;
    --accent: #0969da; --accent-dim: #0550ae; --green: #1a7f37;
    --red: #cf222e; --orange: #bf8700; --purple: #8250df;
  }
}

:root.theme-light {
  --bg: #ffffff; --surface: #f6f8fa; --surface2: #ebeef1;
  --border: #d0d7de; --text: #1f2328; --muted: #656d76; --dim: #8b949e;
  --accent: #0969da; --accent-dim: #0550ae; --green: #1a7f37;
  --red: #cf222e; --orange: #bf8700; --purple: #8250df;
}

/* ── Gap 8.5: Reduced Motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }
}

/* ── Gap 8.4: Responsive Breakpoints ─────────────────── */
@media (max-width: 768px) {
  .sidebar {
    width: 40px;
    padding: 4px 0;
  }
  .sidebar button {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .sidebar .sep-line { width: 20px; }
  .item-bar-name { max-width: 100px; }
  .modal-box { min-width: 260px; max-width: 90%; }
}

@media (max-width: 480px) {
  /* Convert sidebar to bottom tab bar */
  .workspace {
    flex-direction: column-reverse;
  }
  .sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-top: 1px solid var(--border);
    padding: 4px 8px;
    gap: 2px;
    flex-shrink: 0;
  }
  .sidebar button {
    width: 36px;
    height: 36px;
    font-size: 14px;
    flex-shrink: 0;
  }
  .sidebar .sep-line {
    width: 1px;
    height: 24px;
    margin: 0 2px;
  }
  .panels { flex: 1; overflow: hidden; }
  .panel-header { padding: 6px 8px; }
  .input-row { padding: 6px 8px; }
  .item-bar-name { max-width: 80px; font-size: 10px; }
  .item-bar-dropdown { min-width: 220px; }
  .msg { max-width: 100%; }
  header { padding: 6px 10px; gap: 8px; }
  header .logo { font-size: 14px; }
}

/* ── Gap 8.9: Print Styles ────────────────────────────── */
@media print {
  /* Hide non-content UI chrome */
  .sidebar,
  .input-row,
  .input-row-wrap,
  .item-bar,
  .slash-autocomplete,
  .cmd-overlay,
  .modal-overlay,
  .tool-bulk-actions,
  .panel-header,
  header {
    display: none !important;
  }

  /* Show only the active panel content */
  body {
    background: #fff;
    color: #000;
    height: auto;
    overflow: visible;
  }
  .workspace {
    display: block;
    overflow: visible;
  }
  .panels {
    display: block;
    overflow: visible;
  }
  .panel {
    display: none;
    overflow: visible;
  }
  .panel.active-panel {
    display: block;
  }
  .panel-body {
    overflow: visible;
    padding: 0;
  }

  /* Black text on white, no decorative backgrounds */
  .msg, .msg.user, .msg.agent, .msg.system, .msg.error {
    color: #000;
    background: none;
    border: 1px solid #ccc;
    box-shadow: none;
    max-width: 100%;
  }
  .msg .label { color: #555; }

  /* Remove shadows and unnecessary backgrounds */
  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .tool-entry, .tool-entry .tool-head, .tool-entry .tool-body,
  .state-card, .dash-card {
    background: #fff;
    color: #000;
    border-color: #ccc;
  }
  .state-card .val, .dash-card .val { color: #000; }
  .state-card .lbl, .dash-card .lbl { color: #555; }
}

/* ── Vault Passphrase Modal ──────────────────────────────────── */
/* ── Skill Dependency Warning ───────────────────────────────── */
.skill-dep-warn { font-size:9px; color:var(--orange); margin-top:2px; background:rgba(210,153,34,.1); padding:1px 5px; border-radius:3px; display:inline-block; }

/* ── Skill Update Check ────────────────────────────────────── */
.skill-actions button.skill-update-check { font-size:13px; }

/* ── Skill Diff Modal ──────────────────────────────────────── */
.skill-diff-body { max-height:50vh; overflow-y:auto; font-family:var(--mono); font-size:11px; line-height:1.5; border:1px solid var(--border); border-radius:4px; padding:8px; background:var(--bg); }
.diff-add { color:var(--green); }
.diff-remove { color:var(--red); }
.diff-same { color:var(--muted); }

/* ── Template Picker / Diff Dialog ─────────────────────────── */
.template-option { padding:10px 12px; border:1px solid var(--border); border-radius:6px; cursor:pointer; transition:background .15s; }
.template-option:hover { background:var(--surface2); }
dialog.skill-dialog::backdrop { background:rgba(0,0,0,0.7); }

/* ── Demo Banner ────────────────────────────────────────────── */
.demo-banner { background:var(--accent-dim); color:#fff; text-align:center; padding:6px 12px; font-size:12px; font-weight:600; letter-spacing:0.3px; }

.vault-modal { border: 1px solid #30363d; border-radius: 8px; background: #161b22; color: #c9d1d9; padding: 24px; max-width: 400px; }
.vault-modal::backdrop { background: rgba(0,0,0,0.7); }
.vault-form { display: flex; flex-direction: column; gap: 12px; }
.vault-form input { padding: 8px 12px; border: 1px solid #30363d; border-radius: 4px; background: #0d1117; color: #c9d1d9; font-size: 14px; }
.vault-form button { padding: 8px 16px; border: none; border-radius: 4px; background: #238636; color: #fff; cursor: pointer; font-size: 14px; }
.vault-form button:hover { background: #2ea043; }
.vault-error { color: #f85149; font-size: 13px; margin: 0; }

/* ── Virtual Servers (Phase 7) ──────────────────────────── */
.srv-add-form { padding:8px 12px; border-bottom:1px solid var(--border); }
.srv-add-form .config-group { margin-bottom:6px; }
.srv-add-form .code-editor { font-family:var(--mono); font-size:12px; resize:vertical; background:var(--surface1); color:var(--fg); border:1px solid var(--border); border-radius:var(--radius); padding:6px; width:100%; box-sizing:border-box; }
.srv-list { padding:4px 0; }
.srv-item { display:flex; align-items:center; gap:8px; padding:6px 12px; border-bottom:1px solid rgba(48,54,61,.3); cursor:pointer; }
.srv-item:hover { background:var(--surface2); }
.srv-item .srv-host { font-family:var(--mono); font-weight:600; color:var(--accent); flex:1; }
.srv-item .srv-type { font-size:10px; text-transform:uppercase; color:var(--muted); padding:1px 6px; background:var(--surface2); border-radius:var(--radius); }
.srv-item .srv-status { width:8px; height:8px; border-radius:50%; }
.srv-item .srv-status.on { background:#3fb950; }
.srv-item .srv-status.off { background:#8b949e; }
.srv-item .srv-actions { display:flex; gap:4px; }
.srv-item .srv-actions button { font-size:11px; padding:1px 6px; }
.srv-detail { padding:8px 12px; }
.srv-detail-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-weight:600; }
.srv-detail-header span { flex:1; font-family:var(--mono); color:var(--accent); }
.srv-log-wrap { max-height:300px; overflow-y:auto; font-size:11px; }
.srv-log-entry { padding:2px 4px; border-bottom:1px solid rgba(48,54,61,.2); }
.srv-log-entry .log-status { font-weight:600; }
.srv-log-entry .log-status.s2xx { color:#3fb950; }
.srv-log-entry .log-status.s4xx { color:var(--orange); }
.srv-log-entry .log-status.s5xx { color:var(--red); }
.srv-empty { text-align:center; color:var(--muted); padding:24px 12px; font-size:13px; }

/* ── Channels panel ───────────────────────────────────────────── */
.channel-add-form { padding:8px 12px; display:none; border-bottom:1px solid var(--border); }
.channel-add-form.visible { display:block; }
.channel-card { padding:8px 12px; border-bottom:1px solid var(--border); }
.channel-card-header { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.channel-icon { font-size:16px; }
.channel-name { font-family:var(--mono); font-weight:600; color:var(--fg); }
.channel-type-badge { font-size:10px; padding:1px 6px; border-radius:var(--radius); background:var(--surface2); color:var(--muted); text-transform:uppercase; }
.channel-status { font-size:10px; margin-left:auto; }
.channel-status-on { color:var(--green); }
.channel-status-off { color:var(--muted); }
.channel-card-actions { display:flex; gap:4px; margin-top:6px; }
.channel-card-actions button { font-size:11px; padding:1px 6px; }
.channel-empty { text-align:center; color:var(--muted); padding:24px 12px; font-size:13px; }
.channel-section-label { padding:8px 12px; border-top:1px solid var(--border); font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:8px; }

/* ── SharedWorker config ──────────────────────────────────────── */
.sw-status-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
.sw-status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.sw-status-dot.on { background:var(--green); }
.sw-status-dot.off { background:var(--muted); }
.sw-status-label { font-size:12px; color:var(--muted); }

/* ── Extension promo & status ─────────────────────────────────── */
.extension-promo { background:var(--surface2); border:1px solid var(--blue); border-radius:var(--radius); padding:16px; text-align:center; }
.extension-promo h2 { margin:0 0 8px; font-size:16px; color:var(--fg); }
.extension-promo p { margin:0 0 12px; font-size:13px; color:var(--muted); line-height:1.4; }
.extension-install-btn { background:var(--blue) !important; color:white !important; text-decoration:none; display:inline-block; padding:6px 16px !important; border-radius:var(--radius); font-weight:600; }
.extension-install-btn:hover { opacity:0.9; }
.extension-status { font-size:12px; padding:4px 8px; border-radius:var(--radius); }
.extension-status.connected { color:var(--green); }
.extension-status.disconnected { color:var(--muted); }