:root {
  --nv-bg: #f7f8fa;
  --nv-panel: #ffffff;
  --nv-sidebar: #f0f2f6;
  --nv-tree: #eef0f4;
  --nv-toolbar: #eceef3;
  --nv-border: #d7dbe3;
  --nv-borderLight: #e6e9ef;
  --nv-hover: #eef1f6;
  --nv-selected: #dbe7ff;
  --nv-text: #1f2430;
  --nv-textSubtle: #5b6472;
  --nv-textMuted: #9aa3b2;
  --nv-accent: #1976d2;
  --nv-accentDark: #0f5fb0;
  --nv-success: #52a851;
  --nv-warning: #f59e0b;
  --nv-danger: #dc2626;
  --side-w: 280px;
}
html.dark {
  --nv-bg: #14161a;
  --nv-panel: #1c1f26;
  --nv-sidebar: #181b21;
  --nv-tree: #16191f;
  --nv-toolbar: #21252e;
  --nv-border: #2c313c;
  --nv-borderLight: #232831;
  --nv-hover: #242a34;
  --nv-selected: #2c3a55;
  --nv-text: #e6e9ef;
  --nv-textSubtle: #aab2c0;
  --nv-textMuted: #6b7280;
  --nv-accent: #4f9cf9;
  --nv-accentDark: #2c7fd6;
  --nv-success: #52a851;
  --nv-danger: #ef4444;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  background: var(--nv-bg);
  color: var(--nv-text);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}
.nv-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--nv-toolbar);
  border-bottom: 1px solid var(--nv-border);
  flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-tile {
  width: 28px; height: 28px; border-radius: 4px;
  background: var(--nv-accent); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.brand-title { font-weight: 700; font-size: 14px; }
.brand-sub { color: var(--nv-textMuted); font-size: 11px; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.shell { display: flex; flex: 1; min-height: 0; }
.sidebar {
  width: var(--side-w);
  background: var(--nv-sidebar);
  border-right: 1px solid var(--nv-border);
  overflow: auto;
  flex-shrink: 0;
}
.sidebar.collapsed { width: 0; padding: 0; border: 0; overflow: hidden; }
.side-head {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--nv-textMuted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--nv-borderLight);
}
.docs { padding: 12px; color: var(--nv-textSubtle); font-size: 12px; }
.docs code, .docs pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.docs pre {
  background: var(--nv-tree);
  border: 1px solid var(--nv-borderLight);
  border-radius: 6px;
  padding: 8px;
  overflow: auto;
}
.resizer.vertical {
  width: 4px; cursor: col-resize; background: transparent; flex-shrink: 0;
}
.resizer.vertical:hover, .resizer.vertical:active {
  background: var(--nv-accent); opacity: .35;
}
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tabbar {
  background: var(--nv-toolbar);
  border-bottom: 1px solid var(--nv-border);
  padding: 0 8px;
}
.settings {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
  padding: 10px 12px;
  border-bottom: 1px solid var(--nv-border);
  background: var(--nv-panel);
}
.settings label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--nv-textSubtle); }
.settings label.check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 4px; }
#apiKey { width: 280px; }
#model { width: 180px; }
.log { flex: 1; overflow: auto; padding: 16px; background: var(--nv-bg); }
.msg { max-width: 880px; margin: 0 auto 12px; padding: 10px 12px; border: 1px solid var(--nv-border); border-radius: 8px; background: var(--nv-panel); }
.msg .role { font-size: 11px; color: var(--nv-textMuted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.msg.assistant { border-color: #2c3a55; }
.msg.error { border-color: var(--nv-danger); color: var(--nv-danger); }
.msg pre { white-space: pre-wrap; word-break: break-word; margin: 0; font: inherit; }
.composer {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--nv-border);
  background: var(--nv-panel);
}
.composer textarea { flex: 1; resize: none; min-height: 64px; }
.nv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 4px; padding: 6px 12px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--nv-border); background: var(--nv-panel); color: var(--nv-text);
  cursor: pointer;
}
.nv-btn:hover { background: var(--nv-hover); }
.nv-btn-primary { background: var(--nv-accent); color: #fff; border-color: transparent; }
.nv-btn-primary:hover { background: var(--nv-accentDark); }
.nv-btn:disabled { opacity: .45; pointer-events: none; }
.nv-input {
  border-radius: 4px; padding: 6px 10px; font-size: 13px;
  background: var(--nv-panel); border: 1px solid var(--nv-border); color: var(--nv-text);
}
.nv-input:focus { outline: none; border-color: var(--nv-accent); }
.nv-tab {
  display: inline-flex; padding: 8px 12px; font-size: 12px;
  border-bottom: 2px solid transparent; color: var(--nv-textSubtle);
}
.nv-tab.active { color: var(--nv-accent); border-color: var(--nv-accent); }
.nv-card { background: var(--nv-panel); }
.nv-badge {
  display: inline-flex; align-items: center; border-radius: 4px;
  padding: 2px 8px; font-size: 11px; background: var(--nv-hover); color: var(--nv-textSubtle);
}
.nv-badge.ok { color: var(--nv-success); }
.nv-badge.bad { color: var(--nv-danger); }
.nv-tree-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 12px; color: var(--nv-textSubtle); cursor: default;
}
.nv-tree-row.selected { background: var(--nv-selected); color: var(--nv-accent); }
@media (pointer: coarse) {
  .nv-btn, .nv-tab, .nv-tree-row { min-height: 44px; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--nv-border); border-radius: 6px; }