/* =============================================
   Base CSS — driven entirely by CSS variables
   (set at runtime by themes.js)
   ============================================= */

/* Default values (Tokyo Night) to prevent flash before JS loads */
:root {
  --terminal-frame-top: 105px; --terminal-frame-bottom: 24px; --terminal-docked-side-size: 480px;
  --bg-primary: #1a1b26; --bg-secondary: #16161e; --border-color: #3b4261;
  --text-primary: #a9b1d6; --text-secondary: #787c99; --text-tertiary: #565f89;
  --accent-color: #7aa2f7; --link-color: #7aa2f7;
  --hover-bg: rgba(59,66,97,0.4); --active-bg: rgba(122,162,247,0.12);
  --code-bg: rgba(59,66,97,0.3); --pre-bg: #16161e;
  --table-border: #3b4261; --table-header-bg: #16161e; --table-row-bg: rgba(59,66,97,0.15);
  --scrollbar-thumb: rgba(255,255,255,0.1); --scrollbar-thumb-hover: rgba(255,255,255,0.2);
  --editor-bg: #1a1b26; --editor-gutter-bg: #1a1b26; --editor-gutter-color: #3b4261;
  --editor-active-line: #1e202e; --editor-selection: rgba(122,162,247,0.40); --editor-cursor: #c0caf5;
  --syntax-comment: #565f89; --syntax-keyword: #bb9af7; --syntax-string: #9ece6a;
  --syntax-number: #ff9e64; --syntax-function: #7aa2f7; --syntax-variable: #c0caf5;
  --syntax-tag: #f7768e; --syntax-attribute: #7dcfff; --syntax-operator: #89ddff;
  --syntax-meta: #e0af68; --syntax-added: #9ece6a; --syntax-deleted: #f7768e;
  --syntax-added-bg: rgba(158,206,106,0.15); --syntax-deleted-bg: rgba(247,118,142,0.15);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  body.zen-mode #workspace { background: var(--bg-primary); }
  .template-status-chip,
  .terminal-block,
  .terminal-block-drawer,
  .ai-card,
  .ai-message-bubble {
    border-color: var(--border-color);
    background: var(--bg-secondary);
  }
  .template-status-chip.warning { border-color: var(--syntax-meta); }
  .git-badge-m { background: var(--active-bg); }
  .git-badge-u { background: var(--active-bg); }
  .cm-activeLine { background: var(--editor-active-line) !important; }
  #tab-list .tab-item.pinned,
  .sgrid-colletter.selected,
  .sgrid-rownum.selected,
  .sgrid-cell.in-selection,
  .jedit-row:hover {
    background: var(--active-bg) !important;
  }
  .data-table tbody tr:nth-child(even),
  .sgrid-table tbody tr:nth-child(even) td {
    background: var(--table-row-bg);
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  background: var(--bg-primary);
  color: var(--text-primary);
}
body { display: flex; flex-direction: column; }

body.zen-mode #toolbar,
body.zen-mode #format-bar,
body.zen-mode #tab-bar,
body.zen-mode #statusbar,
body.zen-mode #sidebar,
body.zen-mode #sidebar-resize {
  display: none !important;
}
body.zen-mode #workspace {
  flex: 1 1 auto;
  background:
    radial-gradient(circle at 22% 14%, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 28%),
    var(--bg-primary);
}
body.zen-mode #preview-pane,
body.zen-mode #divider {
  display: none !important;
}
body.zen-mode #editor-pane {
  flex: 1 1 auto;
  max-width: none;
  margin: 0 auto;
}
body.zen-mode.zen-prose #workspace {
  justify-content: center;
  padding: 24px;
}
body.zen-mode.zen-prose #editor-pane {
  flex: 0 1 80ch;
  max-width: min(80ch, calc(100vw - 48px));
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.24);
}
body.zen-mode .cm-content {
  padding-top: 28px;
  padding-bottom: 28px;
}

/* ===================== Toolbar ===================== */
#toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 12px;
  -webkit-app-region: drag;
  user-select: none;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

#toolbar button {
  -webkit-app-region: no-drag;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 28px;
  border: none; border-radius: 6px;
  background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
#toolbar button:hover { background: var(--hover-bg); color: var(--text-primary); }
#toolbar button.active {
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
}
#toolbar button .fmt-mono {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.toolbar-sep { width: 1px; height: 18px; background: var(--border-color); margin: 0 4px; -webkit-app-region: no-drag; }

#file-info {
  -webkit-app-region: no-drag;
  margin-left: 4px; font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
  transition: color 0.3s;
}
#file-info.saved-flash { color: var(--accent-color); }
#template-status-host {
  -webkit-app-region: no-drag;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}
.template-status-chip {
  border: 1px solid color-mix(in srgb, var(--accent-color) 44%, var(--border-color));
  border-radius: 999px;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--text-primary);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.template-status-chip.warning {
  border-color: color-mix(in srgb, var(--syntax-meta) 58%, var(--border-color));
  color: var(--syntax-meta);
}

/* View mode buttons */
#view-modes {
  -webkit-app-region: no-drag;
  display: flex; gap: 1px; margin-left: auto;
  background: var(--border-color); border-radius: 6px; padding: 1px;
}
.view-btn { border-radius: 5px !important; width: 28px !important; height: 24px !important; }
.view-btn.active { background: var(--bg-primary) !important; color: var(--text-primary) !important; }

#btn-toc, #btn-theme { -webkit-app-region: no-drag; }
#btn-toc.active { background: var(--active-bg); color: var(--accent-color); }

#lang-select {
  -webkit-app-region: no-drag;
  padding: 0 4px; font-size: 12px; font-family: inherit;
  background: transparent; color: var(--text-secondary);
  border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; height: 28px;
  transition: border-color 0.15s, color 0.15s;
}
#lang-select:hover { border-color: var(--border-color); color: var(--text-primary); }
#lang-select:focus { outline: none; border-color: var(--accent-color); }
#lang-select option { background: var(--bg-primary); color: var(--text-primary); }

/* ===================== Format Bar ===================== */
#format-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
  user-select: none;
}
#format-bar[hidden] { display: none; }
.fmt-group {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex-wrap: nowrap;
}
.fmt-group[hidden] { display: none; }
#format-bar button.fmt-active {
  background: var(--active-bg);
  color: var(--accent-color);
}

/* ===== Inline query inputs (JSONPath / XPath) ===== */
.fmt-query-input {
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
  font-family: monospace;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  width: 150px;
  outline: none;
  -webkit-app-region: no-drag;
  user-select: text;
}
.fmt-query-input:focus { border-color: var(--accent-color); }
.fmt-query-input.fmt-query-error { border-color: var(--syntax-deleted, #f7768e); }
.fmt-query-run {
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-app-region: no-drag;
  flex-shrink: 0;
}
.fmt-query-run:hover { background: var(--hover-bg); color: var(--text-primary); }
.fmt-query-count {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  padding: 0 2px;
}

/* ===== JSON tree highlight ===== */
.jedit-highlight > .jedit-row {
  background: var(--active-bg);
  border-radius: 4px;
  outline: 1px solid var(--accent-color);
}

/* ===== XML tree highlight ===== */
.xml-highlight > .xml-leaf,
.xml-highlight > details > summary {
  background: var(--active-bg);
  border-radius: 4px;
  outline: 1px solid var(--accent-color);
}

/* ===== Format Modal ===== */
#fmt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#fmt-modal.hidden { display: none; }
#fmt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
#fmt-modal-content {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  min-width: 520px;
  max-width: 80vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
#fmt-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
#fmt-modal-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}
#fmt-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#fmt-modal-close:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}
#fmt-modal-body {
  padding: 14px 16px;
  flex: 1;
  overflow: auto;
  min-height: 120px;
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#fmt-modal-body label {
  font-size: 12px;
  color: var(--text-secondary);
}
#fmt-modal-body input[type=text] {
  width: 100%;
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 12px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 10px;
  outline: none;
}
#fmt-modal-body input[type=text]:focus {
  border-color: var(--accent-color);
}
#fmt-modal-body textarea {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 12px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 10px;
  resize: vertical;
  outline: none;
}
#fmt-modal-body textarea:focus {
  border-color: var(--accent-color);
}
.fmt-modal-result {
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 10px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary);
}
.fmt-modal-result.error { color: var(--syntax-tag); }
.fmt-modal-result.ok { color: var(--syntax-string); }
.fmt-modal-result .diff-add { color: var(--syntax-added, #9ece6a); }
.fmt-modal-result .diff-del { color: var(--syntax-deleted, #f7768e); }
.fmt-modal-result .diff-mod { color: var(--syntax-meta, #e0af68); }
#fmt-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
#fmt-modal-footer button {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
#fmt-modal-footer button:hover {
  background: var(--hover-bg);
}
#fmt-modal-footer button.primary {
  background: var(--accent-color);
  color: var(--bg-primary);
  border-color: var(--accent-color);
}
#fmt-modal-footer button.primary:hover {
  filter: brightness(1.1);
}

/* ===== Command Palette / Quick Open ===== */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(12vh, 92px);
  background: rgba(0, 0, 0, 0.48);
}
.cmdk-overlay.hidden { display: none; }
.cmdk-shell {
  width: min(680px, calc(100vw - 32px));
  max-height: min(76vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 20%, transparent), transparent 34%),
    var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
}
.cmdk-shell-wide { width: min(980px, calc(100vw - 32px)); }
.cmdk-topline,
.cmdk-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cmdk-topline kbd,
.cmdk-footer kbd,
.cmdk-keybinding {
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-bottom-color: color-mix(in srgb, var(--border-color) 55%, black);
  border-radius: 5px;
  background: var(--bg-secondary);
  padding: 2px 6px;
  white-space: nowrap;
}
.cmdk-input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  outline: none;
  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
  color: var(--text-primary);
  padding: 16px 18px;
  font-size: 20px;
  font-family: inherit;
}
.cmdk-input::placeholder { color: var(--text-tertiary); }
.cmdk-results {
  flex: 1;
  overflow: auto;
  padding: 8px;
}
.cmdk-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-primary);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.cmdk-item:hover,
.cmdk-item.selected {
  background: var(--active-bg);
  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
}
.cmdk-item:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.cmdk-item-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmdk-item-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
}
.cmdk-item-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 11px;
}
.cmdk-disabled,
.cmdk-pill {
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 2px 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.cmdk-empty {
  color: var(--text-secondary);
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
}
.quick-open-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
  min-height: 360px;
  overflow: hidden;
}
.quick-open-results {
  border-right: 1px solid var(--border-color);
}
.quick-open-preview {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg-secondary) 65%, transparent);
}
.quick-open-preview-title {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-open-preview pre {
  margin: 0;
  padding: 12px;
  flex: 1;
  overflow: auto;
  color: var(--text-primary);
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre;
}
@media (max-width: 760px) {
  .cmdk-overlay {
    padding: 8px;
    align-items: stretch;
  }
  .cmdk-shell,
  .cmdk-shell-wide {
    width: 100%;
    max-height: calc(100vh - 16px);
  }
  .cmdk-input { font-size: 17px; padding: 14px; }
  .quick-open-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .quick-open-results {
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    max-height: 42vh;
  }
  .quick-open-preview { min-height: 32vh; }
}

/* ===== Update Modal ===== */
.update-modal { gap: 14px; display: flex; flex-direction: column; }
.update-modal-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 4px 2px 2px;
}
.update-modal-icon {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--bg-secondary);
  padding: 8px;
  box-sizing: border-box;
  object-fit: contain;
}
.update-confirm {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 4px 2px;
}
.update-confirm-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--syntax-meta, #e0af68);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.update-confirm-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  padding-top: 4px;
}
#fmt-modal.locked #fmt-modal-close { display: none; }
.update-progress {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 4px;
}
.update-progress-label {
  font-size: 13px;
  color: var(--text-primary);
}
.update-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}
.update-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-color);
  transition: width 0.15s ease;
}
.update-progress-pct {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}
.update-modal-hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.update-modal-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
.update-modal-versions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.update-modal-version {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.update-modal-version-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  opacity: 0.8;
}
.update-modal-version-value {
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 12px;
  color: var(--text-primary);
}
.update-modal-version-new {
  color: var(--accent-color);
  font-weight: 600;
}
.update-modal-version-arrow {
  font-size: 14px;
  color: var(--text-secondary);
  opacity: 0.55;
}
.update-modal-notes-header {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 2px;
}
.update-modal-notes {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 12px;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

/* ===== Diff Mode Workspace ===== */
body.json-diff-mode #editor-pane,
body.json-diff-mode #divider { display: none !important; }
body.json-diff-mode #preview-pane {
  display: flex !important;
  flex: 1 1 auto !important;
  width: auto !important;
}

/* ===== JSON Diff Panel (side-by-side, in preview pane) ===== */
.json-diff-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 6px;
  gap: 6px;
  box-sizing: border-box;
  font-size: 12px;
  color: var(--text-primary);
}
.json-diff-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  flex-shrink: 0;
}
.json-diff-title { font-weight: 600; color: var(--text-secondary); }
.json-diff-stats { font-family: 'Cascadia Code', Consolas, monospace; font-size: 11px; color: var(--text-secondary); }
.json-diff-spacer { flex: 1; }
.json-diff-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.json-diff-toggle input { margin: 0; cursor: pointer; }
.json-diff-btn {
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.json-diff-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
.json-diff-close { font-size: 16px; line-height: 1; padding: 0 8px; }

.json-diff-sbs {
  display: flex;
  flex: 1;
  gap: 6px;
  min-height: 0;
}
.diff-pane {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  min-width: 0;
  background: var(--bg-secondary);
}
.diff-pane-label {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 4px 10px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.diff-pane-body {
  flex: 1;
  position: relative;
  min-height: 0;
  background: var(--bg-primary);
}
.diff-bg,
.diff-text {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 13px;
  line-height: 20px;
  padding: 8px 12px;
  tab-size: 2;
  box-sizing: border-box;
  white-space: pre;
  border: 0;
  letter-spacing: 0;
  vertical-align: top;
}
.diff-bg {
  overflow: auto;
  pointer-events: none;
  color: transparent;
  z-index: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.diff-bg::-webkit-scrollbar { width: 0; height: 0; }
.diff-bg .diff-line {
  display: block;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  margin: 0 -8px;
  color: transparent;
}
.diff-bg .diff-line.diff-del { background: rgba(247, 118, 142, 0.22); }
.diff-bg .diff-line.diff-add { background: rgba(158, 206, 106, 0.22); }
.diff-text {
  overflow: auto;
  background: transparent;
  color: var(--text-primary);
  border: none;
  outline: none;
  resize: none;
  z-index: 2;
  caret-color: var(--editor-cursor, var(--text-primary));
}
.diff-text::selection { background: var(--editor-selection, rgba(122,162,247,0.35)); }
.diff-text[readonly] { cursor: default; }
.diff-text.dragover {
  box-shadow: inset 0 0 0 2px var(--accent-color);
  background: rgba(122,162,247,0.05);
}
#format-bar button {
  display: flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px;
  padding: 0 5px;
  border: none; border-radius: 5px;
  background: transparent; color: var(--text-secondary);
  cursor: pointer; font-size: 12px; font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
#format-bar button:hover { background: var(--hover-bg); color: var(--text-primary); }
#format-bar button b { font-weight: 700; }
#format-bar button i { font-style: italic; }
#format-bar button s { text-decoration: line-through; }
#format-bar button sub { font-size: 9px; margin-left: 1px; }
.fmt-mono { font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace; font-size: 11px; }
.fmt-sep { width: 1px; height: 14px; background: var(--border-color); margin: 0 3px; flex-shrink: 0; }
.fmt-highlight-icon { background: var(--syntax-meta); color: var(--bg-primary); font-weight: 700; font-size: 11px; padding: 0 3px; border-radius: 3px; }

/* Format bar dropdowns */
.fmt-dropdown-wrap { position: relative; }
.fmt-dropdown-arrow { font-size: 8px; margin-left: 1px; opacity: 0.6; }
.fmt-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 4px; z-index: 100;
  min-width: 180px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.fmt-dropdown.hidden { display: none; }
.fmt-dropdown button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  padding: 5px 10px; border: none; border-radius: 5px;
  background: transparent; color: var(--text-primary);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background 0.15s;
}
.fmt-dropdown button:hover { background: var(--hover-bg); }
.fmt-shortcut { font-size: 11px; color: var(--text-tertiary); font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace; }

/* ===================== Export Menu ===================== */
#export-wrap { position: relative; -webkit-app-region: no-drag; }
#export-menu {
  position: absolute; top: 100%; right: 0; margin-top: 4px;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 4px; z-index: 100;
  min-width: 150px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#export-menu.hidden { display: none; }
#export-menu button {
  display: block; width: 100%; text-align: left;
  padding: 6px 12px; border: none; border-radius: 5px;
  background: transparent; color: var(--text-primary);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background 0.15s;
}
#export-menu button:hover { background: var(--hover-bg); }

/* ===================== Tab Bar ===================== */
#tab-bar {
  display: flex;
  align-items: stretch;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  user-select: none;
}

#tab-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}

#btn-share {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 64px;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--accent-color) 9%, var(--bg-secondary));
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#btn-share:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--hover-bg);
}
#btn-share:disabled {
  opacity: 0.45;
  cursor: default;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 33px;
  padding: 0 6px 0 12px;
  font-size: 12px;
  color: var(--text-secondary);
  border-right: 1px solid var(--border-color);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  max-width: 180px;
  position: relative;
}
.tab-item:hover { background: var(--hover-bg); color: var(--text-primary); }
.tab-item.active {
  background: var(--bg-primary);
  color: var(--text-primary);
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-color);
}
.tab-item.dragging { opacity: 0.4; }
.tab-item.drag-over-tab { box-shadow: inset 2px 0 0 var(--accent-color); }

.tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: none; border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 15px; line-height: 1;
  cursor: pointer; flex-shrink: 0;
  opacity: 0;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.tab-item:hover .tab-close,
.tab-item.active .tab-close { opacity: 1; }
.tab-close:hover { background: var(--hover-bg); color: var(--text-primary); }

/* ===================== Sidebar ===================== */
#sidebar {
  width: 260px; min-width: 260px;
  height: 100%;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
  transition: width 0.2s, min-width 0.2s, opacity 0.2s;
}
#sidebar.hidden { width: 0 !important; min-width: 0 !important; opacity: 0; overflow: hidden; }
#sidebar.hidden + #sidebar-resize { display: none; }

#sidebar-resize {
  width: 4px; cursor: col-resize; flex-shrink: 0;
  background: transparent;
  transition: background 0.15s;
  z-index: 21;
}
#sidebar-resize:hover, #sidebar-resize.dragging { background: var(--accent-color); }

#sidebar-header {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.sidebar-tab {
  flex: 1;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-tab:hover { color: var(--text-secondary); }
.sidebar-tab.active { color: var(--accent-color); border-bottom-color: var(--accent-color); }

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

/* File tree */
#file-tree-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
#file-tree-toolbar button {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: none; border-radius: 4px;
  background: transparent; color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#file-tree-toolbar button:hover { background: var(--hover-bg); color: var(--text-primary); }

#file-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.tree-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.tree-item:hover { background: var(--hover-bg); color: var(--text-primary); }
.tree-item.active { background: var(--active-bg); color: var(--accent-color); }

.tree-item-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  transition: transform 0.15s;
}
.tree-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-children { overflow: hidden; }
.tree-children.collapsed { display: none; }

.tree-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.6;
}

/* Search panel */
#search-input-area {
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

#search-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

#search-input {
  flex: 1;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
#search-input:focus { outline: none; border-color: var(--accent-color); }

.search-option-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--text-tertiary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.search-option-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
.search-option-btn.active {
  color: var(--bg-primary);
  border-color: var(--accent-color);
  background: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
}
.search-option-btn.active:hover { filter: brightness(1.1); background: var(--accent-color); color: var(--bg-primary); }

#search-ext-row {
  position: relative;
  margin-top: 6px;
}
.search-ext-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.search-ext-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
#search-ext-label {
  flex: 1;
  text-align: left;
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#search-ext-popover {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  z-index: 50;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#search-ext-popover.hidden { display: none; }
#search-ext-popover-header {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-bottom: 1px solid var(--border-color);
}
#search-ext-popover-header button {
  flex: 1;
  padding: 4px 6px;
  font-size: 11px;
  font-family: inherit;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
#search-ext-popover-header button:hover { background: var(--hover-bg); }
#search-ext-list {
  overflow-y: auto;
  padding: 4px;
}
.search-ext-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
}
.search-ext-item:hover { background: var(--hover-bg); }
.search-ext-item input[type="checkbox"] { margin: 0; cursor: pointer; }

#search-status {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 4px 0 0;
}

#search-results {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.search-file-group { padding: 2px 0; }

.search-file-name {
  display: flex; align-items: center;
  padding: 4px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.search-file-name:hover { background: var(--hover-bg); }

.search-match {
  display: flex; align-items: baseline;
  padding: 2px 12px 2px 24px;
  font-size: 12px;
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-match:hover { background: var(--hover-bg); color: var(--text-primary); }

.search-match-line {
  color: var(--text-tertiary);
  margin-right: 8px;
  flex-shrink: 0;
  font-size: 11px;
}

.search-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.6;
}

/* TOC (inside sidebar) */
#sidebar-toc { padding: 0; }
#toc-source-header {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
#toc-source-header:empty,
#toc-source-header.hidden { display: none; }
#toc-source-label {
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  font-size: 11px;
}
#sidebar-toc nav#toc { padding: 8px 0; flex: 1; overflow-y: auto; }
.toc-list { list-style: none; padding: 0 8px; }
.toc-item a {
  display: block; padding: 4px 8px; font-size: 13px;
  color: var(--text-secondary); text-decoration: none;
  border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.toc-item a:hover { background: var(--hover-bg); color: var(--text-primary); }
.toc-item a.active { color: var(--accent-color); background: var(--active-bg); font-weight: 500; }
.toc-level-1 a { padding-left: 8px; }
.toc-level-2 a { padding-left: 20px; }
.toc-level-3 a { padding-left: 32px; }
.toc-level-4 a { padding-left: 44px; }
.toc-level-5 a { padding-left: 56px; }
.toc-level-6 a { padding-left: 68px; }
.toc-empty { padding: 16px; font-size: 13px; color: var(--text-tertiary); }

/* ===================== Backlinks ===================== */
#sidebar-backlinks { padding: 0; overflow-y: auto; }
.backlink-section-header {
  padding: 8px 12px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-tertiary); border-bottom: 1px solid var(--border-color);
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 4px;
}
.backlink-section-header::before { content: '\25BE'; font-size: 10px; }
.backlink-section-header.collapsed::before { content: '\25B8'; }
.backlink-list.collapsed { display: none; }
.backlink-item { border-bottom: 1px solid var(--border-color); }
.backlink-file-name {
  padding: 6px 12px 2px; font-size: 13px; font-weight: 500;
  color: var(--accent-color); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.backlink-file-name:hover { text-decoration: underline; }
.backlink-context {
  padding: 2px 12px 6px; font-size: 12px;
  color: var(--text-secondary); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.backlink-context:hover { color: var(--text-primary); background: var(--hover-bg); }
.backlinks-empty { padding: 16px; font-size: 13px; color: var(--text-tertiary); text-align: center; }
.git-slow-banner {
  margin: 8px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--syntax-meta) 45%, var(--border-color));
  border-radius: 8px;
  background: color-mix(in srgb, var(--syntax-meta) 12%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
}
.git-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  font: 700 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
}
.git-badge-m { color: var(--syntax-meta); background: color-mix(in srgb, var(--syntax-meta) 15%, transparent); }
.git-badge-a { color: var(--syntax-added); background: var(--syntax-added-bg); }
.git-badge-d { color: var(--syntax-deleted); background: var(--syntax-deleted-bg); }
.git-badge-u { color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 15%, transparent); }
.git-badge-unknown { color: var(--text-tertiary); background: var(--hover-bg); }

/* ===================== Workspace ===================== */
#workspace {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  transition: margin 0.16s ease;
}
body.terminal-docked-left #workspace {
  margin-left: var(--terminal-docked-side-size);
}
body.terminal-docked-right #workspace {
  margin-right: var(--terminal-docked-side-size);
}

/* ===================== Editor Pane ===================== */
#editor-pane {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#editor { flex: 1; overflow: hidden; }

/* CodeMirror overrides via CSS variables (use !important to beat built-in theme) */
.cm-editor { height: 100%; position: relative; background: var(--editor-bg) !important; }
.cm-editor.cm-focused { outline: none; }
.cm-scroller { overflow: auto; font-family: 'Cascadia Code', 'Fira Code', Consolas, Monaco, monospace; font-size: 14px; line-height: 1.6; }
.cm-content { color: var(--text-primary) !important; caret-color: var(--editor-cursor) !important; padding: 16px 0; }
.cm-gutters { background: var(--editor-gutter-bg) !important; color: var(--editor-gutter-color) !important; border-right: 1px solid var(--border-color) !important; }
.cm-gutter.cm-lineNumbers .cm-gutterElement { color: var(--editor-gutter-color) !important; }
.cm-gutter.cm-foldGutter .cm-gutterElement { color: var(--editor-gutter-color) !important; }
.cm-activeLineGutter { background: var(--editor-active-line) !important; }
.cm-activeLine { background: color-mix(in srgb, var(--editor-active-line) 50%, transparent) !important; }
.cm-selectionBackground, .cm-editor.cm-focused .cm-selectionBackground { background: var(--editor-selection) !important; }
.cm-cursor, .cm-dropCursor { border-left-color: var(--editor-cursor) !important; }
.cm-matchingBracket { background: var(--active-bg); outline: 1px solid var(--accent-color); }
.cm-searchMatch { background: rgba(255, 213, 0, 0.25); }
.cm-searchMatch.cm-searchMatch-selected { background: rgba(255, 213, 0, 0.5); }
.cm-foldPlaceholder { background: var(--hover-bg); border: 1px solid var(--border-color); color: var(--text-secondary); }
.cm-tooltip { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); }
.cm-tooltip-autocomplete ul li[aria-selected] { background: var(--active-bg); }
.cm-panels { background: var(--bg-secondary); border-top: 1px solid var(--border-color); }
.cm-panel input { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 2px 6px; }
.cm-panel button { background: var(--hover-bg); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 2px 8px; cursor: pointer; }
.cm-git-gutter .cm-gutterElement {
  min-width: 8px;
  padding: 0 2px;
}
.cm-git-marker {
  width: 4px;
  height: 1.35em;
  display: block;
  margin: 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--accent-color);
  cursor: pointer;
}
.cm-git-added { background: var(--syntax-added); }
.cm-git-modified { background: var(--syntax-meta); }
.cm-git-deleted { background: var(--syntax-deleted); }
.cm-editor.orpad-minimap-enabled .cm-scroller { padding-right: 78px; }
.orpad-minimap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  width: 72px;
  border-left: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--editor-bg) 82%, transparent);
  opacity: 0.88;
  cursor: pointer;
  transition: opacity 0.15s;
}
.orpad-minimap:hover { opacity: 1; }
.orpad-minimap-canvas {
  display: block;
  width: 72px;
  height: 100%;
}
@media (max-width: 760px) {
  .cm-editor.orpad-minimap-enabled .cm-scroller { padding-right: 0; }
  .orpad-minimap { display: none; }
}

/* CodeMirror syntax tokens (classHighlighter) */
.tok-keyword { color: var(--syntax-keyword); }
.tok-string, .tok-string2 { color: var(--syntax-string); }
.tok-number { color: var(--syntax-number); }
.tok-comment { color: var(--syntax-comment); font-style: italic; }
.tok-variableName { color: var(--syntax-variable); }
.tok-typeName, .tok-className, .tok-namespace { color: var(--syntax-function); }
.tok-definition { color: var(--syntax-function); }
.tok-tagName { color: var(--syntax-tag); }
.tok-attributeName { color: var(--syntax-attribute); }
.tok-propertyName { color: var(--syntax-attribute); }
.tok-operator { color: var(--syntax-operator); }
.tok-meta { color: var(--syntax-meta); }
.tok-bool { color: var(--syntax-number); }
.tok-atom { color: var(--syntax-number); }
.tok-url, .tok-link { color: var(--accent-color); }
.tok-heading { color: var(--text-primary); font-weight: 700; }
.tok-emphasis { font-style: italic; }
.tok-strong { font-weight: 700; }
.tok-strikethrough { text-decoration: line-through; }

/* ===================== Divider ===================== */
#divider {
  width: 4px; cursor: col-resize; flex-shrink: 0;
  background: var(--border-color);
  transition: background 0.15s;
}
#divider:hover, #divider.dragging { background: var(--accent-color); }

/* ===================== Preview Pane ===================== */
#preview-pane {
  flex: 1; min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-left: none;
}
#content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  /* overflow: auto on both axes used to let any wide child (long pre line, fenced
     code with no breakable token) push #content's intrinsic width past the pane,
     which then stranded headings/paragraphs in the horizontal scroll area instead
     of wrapping them. Split: vertical scroll only, hide horizontal — wide blocks
     (pre, .md-table-scroll) own their own overflow:auto inside this clip. */
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 40px 80px;
}
#content:not(.view-markdown) {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#content.view-html iframe { flex: 1; border: 0; width: 100%; height: 100%; display: block; }
#content.view-csv .sgrid-host,
#content.view-tsv .sgrid-host { flex: 1; min-height: 0; }
#content.view-json .jedit-host,
#content.view-yaml .jedit-host,
#content.view-toml .jedit-host,
#content.view-ini .jedit-host { flex: 1; min-height: 0; }
#content.view-mermaid .mermaid-block { flex: 1; overflow: auto; margin: 0; border-radius: 0; background: transparent; border: none; padding: 0; }
#content.view-mermaid .mermaid-rendered svg { width: 100%; height: 100%; }
#content.view-xml .xml-tree { flex: 1; overflow: auto; padding: 12px 16px; }
#content.view-env,
#content.view-properties { overflow: auto; }
.git-diff-panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}
.git-diff-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.git-diff-head strong { color: var(--text-primary); }
.git-diff-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
}
.git-diff-label {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.git-diff-label + .git-diff-label { border-left: 1px solid var(--border-color); }
.git-diff-body {
  grid-column: 1 / -1;
  overflow: auto;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.git-diff-line {
  display: grid;
  grid-template-columns: 52px 52px minmax(0, 1fr);
}
.git-diff-line span {
  padding: 0 8px;
  color: var(--text-tertiary);
  text-align: right;
  user-select: none;
}
.git-diff-line code {
  min-width: 0;
  padding-right: 12px;
  color: var(--text-secondary);
  white-space: pre;
}
.git-diff-line.added { background: var(--syntax-added-bg); }
.git-diff-line.deleted { background: var(--syntax-deleted-bg); }
.git-diff-line.added code { color: var(--syntax-added); }
.git-diff-line.deleted code { color: var(--syntax-deleted); }
.git-branch-list {
  display: grid;
  gap: 7px;
  min-width: min(360px, 70vw);
}
.git-branch-list button {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.git-branch-list button:hover,
.git-branch-list button.active {
  border-color: color-mix(in srgb, var(--accent-color) 52%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--accent-color);
}
.git-command-panel {
  display: grid;
  gap: 14px;
  min-width: min(460px, 76vw);
}
.git-command-summary {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
}
.git-command-summary strong {
  color: var(--text-primary);
  font-size: 14px;
}
.git-command-summary span {
  color: var(--text-secondary);
  line-height: 1.45;
}
.git-command-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.git-command-actions button {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.git-command-actions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--text-primary);
}
.git-command-actions button.primary {
  border-color: color-mix(in srgb, var(--accent-color) 65%, var(--border-color));
  color: var(--accent-color);
}
.git-command-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.snippet-picker {
  display: grid;
  gap: 10px;
  min-width: min(560px, 78vw);
}
.snippet-picker input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  outline: none;
}
.snippet-picker-list {
  max-height: min(420px, 58vh);
  overflow: auto;
  display: grid;
  gap: 7px;
}
.snippet-picker-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.snippet-picker-item strong {
  color: var(--text-primary);
  font-size: 13px;
}
.snippet-picker-item span {
  grid-column: 1;
  color: var(--text-tertiary);
  font-size: 11px;
}
.snippet-picker-item kbd {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--accent-color);
  font-size: 10px;
}
.snippet-picker-item:hover,
.snippet-picker-item.selected {
  border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.snippet-picker-empty {
  padding: 18px;
  color: var(--text-tertiary);
  text-align: center;
}

/* View mode visibility */
body.view-editor #preview-pane,
body.view-editor #divider { display: none; }
body.view-preview #editor-pane,
body.view-preview #divider { display: none; }

/* ===================== Theme Panel ===================== */
/* --top-bars-bottom is refreshed from JS (see updateTopBarsBottom) so the
   panel lines up with whichever bar is currently bottom-most. The 105px
   fallback matches the common case (toolbar + format-bar + one row of tabs). */
#theme-panel {
  position: fixed; top: var(--top-bars-bottom, 105px); right: 0; bottom: 0;
  width: 300px;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  z-index: 50; overflow-y: auto;
  transition: transform 0.2s;
  box-shadow: -2px 0 12px rgba(0,0,0,0.1);
}
#theme-panel.hidden { transform: translateX(100%); }
#theme-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}
#theme-panel-header-actions { display: flex; align-items: center; gap: 4px; }
#theme-panel-header-actions button {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: none; border: none; color: var(--text-secondary);
  font-size: 20px; cursor: pointer; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
#theme-panel-header-actions button:hover { background: var(--hover-bg); color: var(--text-primary); }
#theme-panel-body { padding: 12px; }

/* Theme list */
.theme-section-label {
  font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 12px 10px 4px; margin-top: 4px;
}
.theme-section-label:first-child { padding-top: 4px; margin-top: 0; }
.theme-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  transition: background 0.15s;
}
.theme-item:hover { background: var(--hover-bg); }
.theme-item.active { background: var(--active-bg); }
.theme-swatch {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid var(--border-color);
  display: flex; flex-wrap: wrap; overflow: hidden;
}
.theme-swatch-quarter { width: 50%; height: 50%; }
.theme-item-name { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-item-actions { display: flex; gap: 2px; flex-shrink: 0; }
.theme-action-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: none; border-radius: 4px;
  background: transparent; color: var(--text-tertiary); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.theme-action-btn:hover { background: var(--hover-bg); color: var(--text-primary); }

/* Customize section (for custom themes) */
#customize-fields { padding: 12px; border-top: 1px solid var(--border-color); }
.customize-group { margin-bottom: 16px; }
.customize-group-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.customize-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
}
.customize-row label { flex: 1; font-size: 13px; color: var(--text-primary); }
.customize-row input[type="color"] {
  width: 28px; height: 28px; border: 1px solid var(--border-color);
  border-radius: 6px; padding: 2px; cursor: pointer; background: none;
}
.customize-name-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.customize-name-row label { font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
.customize-name-input {
  flex: 1; padding: 4px 8px; font-size: 13px; font-family: inherit;
  background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 6px;
}

/* ===================== Status Bar ===================== */
#statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 24px;
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  user-select: none;
}
#status-selection { color: var(--accent-color); }
.status-chip {
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 48%, var(--border-color));
  border-radius: 999px;
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.status-chip.hidden { display: none; }
.status-git {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 38%, var(--border-color));
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
}
.status-git:hover {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.status-git.hidden { display: none; }
#status-zoom { cursor: pointer; transition: color 0.15s; }
#status-zoom:hover { color: var(--accent-color); }
.statusbar-sep { width: 1px; height: 12px; background: var(--border-color); }

/* ===================== Welcome ===================== */
#welcome {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; z-index: 10;
  background: var(--bg-primary);
}
#welcome.hidden { display: none; }
#welcome-inner { padding: 40px; }
#welcome-icon { margin-bottom: 16px; display: flex; justify-content: center; align-items: center; }
#welcome-icon img { display: block; user-select: none; -webkit-user-drag: none; }
#welcome h2 { font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
#welcome p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
#btn-set-default {
  margin-top: 16px; padding: 8px 20px;
  font-size: 13px; font-weight: 500;
  color: var(--accent-color); background: transparent;
  border: 1px solid var(--border-color); border-radius: 6px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
#btn-set-default:hover { background: var(--hover-bg); border-color: var(--accent-color); }
#welcome kbd {
  display: inline-block; padding: 2px 6px;
  font-family: 'Segoe UI', monospace; font-size: 12px;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 4px; box-shadow: 0 1px 0 var(--border-color);
}

/* Drag overlay */
body.drag-over::after {
  content: attr(data-drop-text); position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; color: var(--accent-color);
  background: var(--bg-primary); opacity: 0.95;
  border: 3px dashed var(--accent-color); margin: 8px; border-radius: 12px;
  z-index: 9999; pointer-events: none;
}

/* ===================== Context Menu ===================== */
#context-menu {
  position: fixed;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 4px;
  z-index: 200;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
#context-menu.hidden { display: none; }
#context-menu button {
  display: block; width: 100%; text-align: left;
  padding: 6px 12px; border: none; border-radius: 5px;
  background: transparent; color: var(--text-primary);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background 0.15s;
}
#context-menu button:hover { background: var(--hover-bg); }
.context-sep { height: 1px; background: var(--border-color); margin: 4px 8px; }

/* ===================== Scrollbar ===================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ===================== Editor↔Preview line highlight ===================== */
.markdown-body > .line-highlight {
  background-color: var(--active-bg);
  box-shadow: inset 3px 0 0 var(--accent-color);
  border-radius: 0 6px 6px 0;
  margin-left: -12px;
  margin-right: -12px;
  padding-left: 12px;
  padding-right: 12px;
  transition: background-color 0.15s;
}

/* ===================== Markdown Body ===================== */
.markdown-body * { min-width: 0; }
.markdown-body p,
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6,
.markdown-body li,
.markdown-body td, .markdown-body th,
.markdown-body blockquote,
.markdown-body details,
.markdown-body summary {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.markdown-body {
  min-width: 0;
  font-size: 16px; line-height: 1.6; color: var(--text-primary);
  /* overflow-wrap: anywhere (not just break-word) lets Chromium break long
     unbreakable strings (paths, slash-joined identifiers, inline code) at any
     point, which is also what lets the paragraph's min-content shrink so the
     preview pane can actually reflow when the window narrows.
     NOTE: word-wrap is a legacy alias for overflow-wrap — setting both silently
     downgrades `anywhere` to whatever the later `word-wrap` value resolves to.
     Keep exactly one declaration. */
  overflow-wrap: anywhere;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; color: var(--text-primary);
}
.markdown-body h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border-color); }
.markdown-body h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border-color); }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body h5 { font-size: 0.875em; }
.markdown-body h6 { font-size: 0.85em; color: var(--text-tertiary); }
.markdown-body h1:first-child { margin-top: 0; }
.markdown-body p { margin-top: 0; margin-bottom: 16px; }
.markdown-body strong { font-weight: 600; }
.markdown-body a { color: var(--link-color); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body a.wiki-link { color: var(--accent-color); text-decoration: none; border-bottom: 1px dashed var(--accent-color); }
.markdown-body a.wiki-link:hover { border-bottom-style: solid; text-decoration: none; }
.markdown-body ul, .markdown-body ol { margin-top: 0; margin-bottom: 16px; padding-left: 2em; }
.markdown-body li { margin-top: 4px; }
.markdown-body li > p { margin-top: 16px; }
.markdown-body .task-list-item { list-style-type: none; margin-left: -1.5em; }
.markdown-body .task-list-item input[type="checkbox"] { margin-right: 0.5em; vertical-align: middle; }
.markdown-body blockquote { margin: 0 0 16px; padding: 0 1em; color: var(--text-secondary); border-left: 4px solid var(--border-color); }
.markdown-body blockquote > :first-child { margin-top: 0; }
.markdown-body blockquote > :last-child { margin-bottom: 0; }
.markdown-body code {
  padding: 0.2em 0.4em; font-size: 85%;
  font-family: 'Cascadia Code', 'Fira Code', Consolas, Monaco, monospace;
  background: var(--code-bg); border-radius: 6px;
}
.markdown-body pre {
  margin-bottom: 16px; padding: 16px; overflow: auto;
  font-size: 85%; line-height: 1.45;
  background: var(--pre-bg); border-radius: 8px; border: 1px solid var(--border-color);
  position: relative;
  /* Wide preformatted content (esp. 4-space indented blocks marked emits as bare
     <pre>) was bleeding the preview-pane intrinsic width past the viewport,
     which collapsed wrap on every adjacent paragraph. Cap the pre to its
     containing block — internal scrollbar handles overflow. box-sizing matters:
     without border-box, padding pushes the actual rendered width past 100%. */
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.markdown-body pre code { padding: 0; font-size: 100%; background: transparent; border-radius: 0; white-space: pre; }
.markdown-body mark { background: color-mix(in srgb, var(--syntax-meta) 30%, transparent); color: inherit; padding: 0.1em 0.3em; border-radius: 4px; }
.copy-btn {
  position: absolute; top: 8px; right: 8px;
  padding: 4px 10px; font-size: 12px; font-family: inherit;
  color: var(--text-secondary); background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: 6px;
  cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.markdown-body pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
.markdown-body .md-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 16px;
}
.markdown-body table {
  border-spacing: 0;
  border-collapse: collapse;
  /* No width/display overrides — wrapper handles overflow, table sizes naturally */
}
.markdown-body .md-table-scroll + p,
.markdown-body .md-table-scroll > table { margin-bottom: 0; }
.markdown-body table th, .markdown-body table td { padding: 8px 16px; border: 1px solid var(--table-border); }
.markdown-body table th { font-weight: 600; background: var(--table-header-bg); }
.markdown-body table tr:nth-child(even) { background: var(--table-row-bg); }
.markdown-body hr { height: 3px; margin: 24px 0; background: var(--border-color); border: 0; border-radius: 2px; }
.markdown-body img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border-color); }
.markdown-body dl { margin-bottom: 16px; }
.markdown-body dt { font-weight: 600; margin-top: 16px; }
.markdown-body dd { margin-left: 2em; margin-bottom: 8px; }
.markdown-body kbd {
  display: inline-block; padding: 3px 5px; font-size: 11px;
  font-family: 'Segoe UI', monospace; line-height: 10px; vertical-align: middle;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 6px; box-shadow: inset 0 -1px 0 var(--border-color);
}
.markdown-body .footnotes { font-size: 14px; border-top: 1px solid var(--border-color); margin-top: 32px; padding-top: 16px; }
.markdown-body details { margin-bottom: 16px; }
.markdown-body summary { cursor: pointer; font-weight: 600; }

/* ===================== hljs syntax (preview) ===================== */
.hljs { color: var(--text-primary); }
.hljs-comment, .hljs-quote { color: var(--syntax-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag { color: var(--syntax-keyword); }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr { color: var(--syntax-number); }
.hljs-string, .hljs-doctag, .hljs-regexp { color: var(--syntax-string); }
.hljs-title, .hljs-section, .hljs-selector-id { color: var(--syntax-function); font-weight: 600; }
.hljs-subst { color: var(--text-primary); }
.hljs-type, .hljs-class .hljs-title { color: var(--syntax-function); }
.hljs-tag, .hljs-name { color: var(--syntax-tag); }
.hljs-attribute { color: var(--syntax-attribute); }
.hljs-symbol, .hljs-bullet, .hljs-link { color: var(--syntax-number); }
.hljs-built_in, .hljs-builtin-name { color: var(--syntax-number); }
.hljs-meta { color: var(--syntax-meta); }
.hljs-deletion { color: var(--syntax-deleted); background: var(--syntax-deleted-bg); }
.hljs-addition { color: var(--syntax-added); background: var(--syntax-added-bg); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* ===================== KaTeX ===================== */
.katex-block { margin: 16px 0; text-align: center; overflow-x: auto; }
.katex-error { color: var(--syntax-deleted); font-family: monospace; font-size: 14px; }

/* ===================== Mermaid ===================== */
.mermaid-block { margin: 16px 0; text-align: center; overflow-x: auto; background: var(--bg-secondary); border-radius: 8px; padding: 16px; border: 1px solid var(--border-color); }
.mermaid-rendered { background: transparent; }
.mermaid-rendered svg { max-width: 100%; height: auto; }

/* ===================== Format-specific previews ===================== */
.preview-placeholder { padding: 24px; color: var(--text-tertiary); font-family: monospace; font-size: 13px; }
.preview-error { padding: 16px 24px; color: var(--syntax-deleted, #f7768e); font-family: monospace; font-size: 13px; white-space: pre-wrap; }

/* XML tree */
.xml-tree { padding: 12px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; color: var(--text-primary); }
.xml-children { padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent); }
.xml-leaf { padding: 1px 0; }
.xml-tag { color: var(--syntax-keyword, #7aa2f7); }
.xml-attr-name { color: var(--syntax-number, #e0af68); }
.xml-attr-value { color: var(--syntax-string, #9ece6a); }
.xml-text { color: var(--text-primary); }
.xml-tree details > summary { cursor: pointer; list-style: none; padding: 1px 0; }
.xml-tree details > summary::-webkit-details-marker { display: none; }
.xml-tree details > summary::before { content: '\25B6'; display: inline-block; width: 12px; margin-right: 2px; color: var(--text-tertiary); font-size: 0.7em; transition: transform 0.1s; }
.xml-tree details[open] > summary::before { transform: rotate(90deg); }

/* CSV / TSV / .env table */
.data-table { border-collapse: collapse; margin: 16px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-primary); }
.data-table th, .data-table td { border: 1px solid var(--table-border, var(--border-color)); padding: 6px 10px; text-align: left; vertical-align: top; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table th { background: var(--table-header-bg, color-mix(in srgb, var(--accent-color) 15%, transparent)); font-weight: 600; position: sticky; top: 0; }
.data-table tbody tr:nth-child(even) { background: var(--table-row-bg, color-mix(in srgb, var(--text-primary) 3%, transparent)); }
.env-table .env-key { color: var(--accent-color); font-weight: 600; }
.env-value { display: flex; align-items: center; gap: 8px; }
.env-value-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.env-value-text.masked { letter-spacing: 2px; color: var(--text-tertiary); }
.env-action { display: inline-flex; align-items: center; justify-content: center; background: var(--border-color); border: none; color: var(--text-secondary); padding: 4px; width: 26px; height: 26px; border-radius: 4px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.env-action:hover { background: color-mix(in srgb, var(--accent-color) 25%, var(--border-color)); color: var(--text-primary); }
.env-action.active { background: var(--accent-color); color: var(--bg-primary); }
.env-action.active:hover { background: color-mix(in srgb, var(--accent-color) 85%, black); }

/* Tab modified indicator */
.tab-modified-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-color);
  margin-right: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-color) 70%, transparent);
}
.tab-item.modified { font-weight: 500; }

/* Fixed-width tabs + multi-row wrapping (Visual Studio style). */
#tab-list .tab-item {
  flex: 0 0 160px;
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  min-height: 33px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
#tab-list .tab-item .tab-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
#tab-list .tab-item.pinned { background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-secondary)); }

/* Pin toggle — hidden on unpinned tabs, revealed on hover. Pinned tabs show it always. */
.tab-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  padding: 2px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  cursor: pointer;
  visibility: hidden;
  flex-shrink: 0;
}
.tab-item:hover .tab-pin-btn { visibility: visible; }
.tab-pin-btn:hover { background: color-mix(in srgb, var(--accent-color) 25%, transparent); color: var(--text-primary); }
.tab-item.pinned .tab-pin-btn { visibility: visible; color: var(--accent-color); }

/* Simple multi-row tabs (VSCode-style): flat, no gap between rows. */
#tab-list .tab-item { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
#tab-list .tab-item.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--accent-color);
}
#tab-list .tab-item:hover:not(.active) { background: var(--hover-bg); color: var(--text-primary); }
#tab-list .tab-item.source-url,
#tab-list .tab-item.source-fragment {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--syntax-meta, #e0af68) 70%, transparent);
}

.share-modal {
  display: grid;
  gap: 10px;
  min-width: min(620px, 78vw);
}
.share-modal p {
  color: var(--text-secondary);
  line-height: 1.5;
}
.share-link-box {
  width: 100%;
  min-height: 92px;
  padding: 8px 9px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  resize: vertical;
}
.share-warning {
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--syntax-meta, #e0af68) 60%, var(--border-color));
  border-radius: 8px;
  background: color-mix(in srgb, var(--syntax-meta, #e0af68) 9%, transparent);
  color: var(--text-primary);
  font-size: 12px;
}

/* Tab context menu */
#tab-context-menu {
  position: fixed;
  z-index: 200;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  padding: 4px;
  min-width: 180px;
}
#tab-context-menu.hidden { display: none; }
#tab-context-menu button {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--text-primary);
  border: none;
  padding: 6px 10px;
  text-align: left;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
}
#tab-context-menu button:hover { background: color-mix(in srgb, var(--accent-color) 25%, transparent); }
#tab-context-menu .context-sep { height: 1px; background: var(--border-color); margin: 4px 0; }

/* ===================== Excel-like Spreadsheet Grid (CSV / TSV) ===================== */
.sgrid-host {
  height: 100%; width: 100%;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  background: var(--bg-primary);
}
.sgrid {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-primary);
  outline: none;
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}
.sgrid-toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  padding-right: 150px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  user-select: none;
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
}
.sgrid-cellref {
  display: inline-flex; align-items: center; justify-content: center;
  width: 110px; flex-shrink: 0;
  padding: 3px 8px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--accent-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.sgrid-tbar-sep { width: 1px; height: 18px; background: var(--border-color); margin: 0 4px; flex-shrink: 0; }
.sgrid-tbar-btn {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 3px 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.sgrid-tbar-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.sgrid-stats {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}
.sgrid-spacer { display: none; }
.sgrid-seg {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-primary);
  z-index: 2;
}
.sgrid-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.sgrid-seg-btn + .sgrid-seg-btn { border-left: 1px solid var(--border-color); }
.sgrid-seg-btn:hover { color: var(--text-primary); background: var(--hover-bg); }
.sgrid-seg-btn.active {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  color: var(--accent-color);
}
.sgrid-seg-btn svg { display: block; flex-shrink: 0; }

.sgrid.read-only .sgrid-tbar-btn[data-act] { opacity: 0.4; pointer-events: none; }
.sgrid.read-only .sgrid-cell { cursor: default; }
.sgrid.read-only .sgrid-field { cursor: default; }

.sgrid-scroll {
  flex: 1; min-height: 0;
  overflow: auto;
  background: var(--bg-primary);
}
.sgrid-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}
.sgrid-table th, .sgrid-table td {
  padding: 0;
  margin: 0;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-family: inherit;
  font-size: 13px;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
  height: 24px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}
.sgrid-table thead th {
  position: sticky;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  z-index: 2;
  user-select: none;
  font-weight: 500;
}
.sgrid-table thead tr.sgrid-letter-row th { top: 0; height: 22px; font-size: 11px; letter-spacing: 0.5px; }
.sgrid-table thead tr.sgrid-field-row th { top: 22px; height: 26px; font-weight: 600; color: var(--text-primary); }

.sgrid-corner {
  left: 0; z-index: 3 !important;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  text-align: center;
  color: var(--text-tertiary);
  width: 48px;
}
.sgrid-corner-inner { cursor: pointer; display: inline-block; width: 100%; font-size: 12px; }
.sgrid-corner-inner:hover { color: var(--accent-color); }

.sgrid-colletter {
  text-align: center;
  position: relative;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M7 1 L15 1 L15 12 L19 12 L11 22 L3 12 L7 12 Z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='round'/></svg>") 11 2, s-resize;
}
.sgrid-colletter .sgrid-letter { display: inline-block; padding: 0 6px; }
.sgrid-colletter.selected { background: color-mix(in srgb, var(--accent-color) 22%, var(--bg-secondary)); color: var(--text-primary); }
.sgrid-colletter:hover { background: var(--hover-bg); }
.sgrid-resizer {
  position: absolute; top: 0; right: -3px; bottom: 0;
  width: 6px; cursor: col-resize; z-index: 4;
}
.sgrid-resizer:hover { background: color-mix(in srgb, var(--accent-color) 60%, transparent); }

.sgrid-field {
  padding: 0 8px;
  cursor: pointer;
  display: table-cell;
  position: relative;
}
.sgrid-field:hover { background: var(--hover-bg); }
.sgrid-field:hover .sgrid-field-name { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-color) 60%, transparent); text-underline-offset: 3px; }
.sgrid-field.selected { background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-secondary)); }
.sgrid-field-name { padding: 0 6px; }
.sgrid-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
  flex-shrink: 0;
  vertical-align: middle;
}
.sgrid-field:hover .sgrid-filter-btn { opacity: 1; }
.sgrid-filter-btn:hover { color: var(--accent-color); background: var(--hover-bg); }
.sgrid-filter-btn.active {
  opacity: 1;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
}
.sgrid-filter-btn svg { display: block; }
.sgrid-sort-arrow { font-size: 10px; color: var(--accent-color); margin-left: 4px; display: inline-block; min-width: 10px; }
.sgrid-sort-arrow:empty::before {
  content: '⇅';
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity 0.12s;
  font-size: 11px;
}
.sgrid-field:hover .sgrid-sort-arrow:empty::before { opacity: 1; }
.sgrid.read-only .sgrid-field:hover .sgrid-field-name { text-decoration: none; }
.sgrid.read-only .sgrid-field:hover .sgrid-sort-arrow:empty::before { opacity: 0; }

.sgrid-rownum {
  position: sticky; left: 0;
  width: 48px; text-align: center;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-size: 11px;
  cursor: pointer;
  z-index: 1;
  user-select: none;
}
.sgrid-rownum:hover { background: var(--hover-bg); color: var(--text-primary); }
.sgrid-rownum.selected { background: color-mix(in srgb, var(--accent-color) 22%, var(--bg-secondary)); color: var(--text-primary); }

.sgrid-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text-primary) 2.5%, transparent); }
.sgrid-table tbody tr:hover td { background: color-mix(in srgb, var(--accent-color) 5%, transparent); }
.sgrid-ai-filter-chip {
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 48%, var(--border-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--accent-color);
  font-size: 11px;
  white-space: nowrap;
}

.sgrid-table td.sgrid-cell {
  padding: 0 8px;
  cursor: cell;
  position: relative;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sgrid-cell.in-selection { background: color-mix(in srgb, var(--accent-color) 12%, transparent) !important; }
.sgrid-cell.sel-top    { --sgrid-edge-top:    inset 0 2px 0 0 var(--accent-color); }
.sgrid-cell.sel-bottom { --sgrid-edge-bottom: inset 0 -2px 0 0 var(--accent-color); }
.sgrid-cell.sel-left   { --sgrid-edge-left:   inset 2px 0 0 0 var(--accent-color); }
.sgrid-cell.sel-right  { --sgrid-edge-right:  inset -2px 0 0 0 var(--accent-color); }
.sgrid-cell.in-selection {
  box-shadow:
    var(--sgrid-edge-top,    0 0 0 0 transparent),
    var(--sgrid-edge-bottom, 0 0 0 0 transparent),
    var(--sgrid-edge-left,   0 0 0 0 transparent),
    var(--sgrid-edge-right,  0 0 0 0 transparent);
}
.sgrid-cell.active-cell {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent) !important;
  outline: 2px solid var(--accent-color);
  outline-offset: -2px;
  z-index: 1;
}
/* When the active cell is inside a multi-cell range, suppress its individual
   outline so only the range perimeter shows. Active cell still reads as the
   "anchor" by having no range fill. */
.sgrid-cell.active-cell.active-in-range {
  background: transparent !important;
  outline: none;
}

.sgrid-cell.editing {
  overflow: visible;
  background: var(--bg-primary) !important;
}
.sgrid-editor {
  position: absolute;
  top: -1px; left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 3;
  box-sizing: border-box;
  border: 2px solid var(--accent-color);
  padding: 0 6px;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-primary);
  background: var(--bg-primary);
  outline: none;
  resize: none;
  white-space: pre;
  overflow: hidden;
}

.sgrid-ctxmenu {
  position: absolute;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px;
  z-index: 100;
  min-width: 180px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Filter popup */
.sgrid-fpop {
  position: absolute;
  z-index: 50;
  width: 260px;
  max-height: 360px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sgrid-fpop-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
}
.sgrid-fpop-close {
  width: 22px; height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-tertiary);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.sgrid-fpop-close:hover { background: var(--hover-bg); color: var(--text-primary); }
.sgrid-fpop-search {
  margin: 8px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  outline: none;
}
.sgrid-fpop-search:focus { border-color: var(--accent-color); }
.sgrid-fpop-togglerow {
  display: flex; gap: 6px;
  padding: 0 8px 6px;
}
.sgrid-fpop-togglerow button {
  padding: 3px 8px;
  font-size: 11px;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
}
.sgrid-fpop-togglerow button:hover { border-color: var(--accent-color); color: var(--accent-color); }
.sgrid-fpop-list {
  flex: 1;
  min-height: 100px;
  overflow-y: auto;
  padding: 2px 4px;
}
.sgrid-fpop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}
.sgrid-fpop-item:hover { background: var(--hover-bg); }
.sgrid-fpop-item input { accent-color: var(--accent-color); cursor: pointer; flex-shrink: 0; }
.sgrid-fpop-val { overflow: hidden; text-overflow: ellipsis; }
.sgrid-fpop-empty { color: var(--text-tertiary); font-style: italic; }
.sgrid-fpop-noresult { padding: 12px; color: var(--text-tertiary); font-size: 12px; text-align: center; }
.sgrid-fpop-footer {
  padding: 6px 8px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.sgrid-fpop-clear {
  width: 100%;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
}
.sgrid-fpop-clear:hover {
  border-color: var(--syntax-deleted, #f7768e);
  color: var(--syntax-deleted, #f7768e);
}
.sgrid-ctxmenu.hidden { display: none; }
.sgrid-ctxmenu button {
  display: block; width: 100%; text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
}
.sgrid-ctxmenu button:hover { background: var(--hover-bg); }
.sgrid-ctx-sep { height: 1px; background: var(--border-color); margin: 4px 6px; }

/* ===================== Editable JSON Tree ===================== */
.jedit-host {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.jedit-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  user-select: none;
  flex-shrink: 0;
}
.jedit-mode-label {
  color: var(--text-secondary);
  font-weight: 500;
}
.jedit-mode-label.jedit-locked {
  color: var(--text-tertiary);
  font-style: italic;
}
.jedit-spacer { flex: 1; }
.jedit-seg {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-primary);
}
.jedit-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.jedit-seg-btn + .jedit-seg-btn { border-left: 1px solid var(--border-color); }
.jedit-seg-btn:hover { color: var(--text-primary); background: var(--hover-bg); }
.jedit-seg-btn.active {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  color: var(--accent-color);
}
.jedit-seg-btn svg { display: block; flex-shrink: 0; }

.jedit-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.jedit-tree {
  padding: 12px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
}
.jedit-node { position: relative; }
.jedit-row { display: flex; align-items: center; gap: 2px; min-height: 22px; }
.jedit-row:hover { background: color-mix(in srgb, var(--accent-color) 6%, transparent); border-radius: 4px; }
.jedit-children {
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}
.jedit-toggle {
  width: 16px; height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jedit-toggle:hover { color: var(--accent-color); }
.jedit-key { display: inline-flex; align-items: center; }
.jedit-key-name {
  color: var(--accent-color);
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.jedit-tree:not(.read-only) .jedit-key-name:hover {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}
.jedit-index { color: var(--text-tertiary); padding-right: 2px; }
.jedit-colon { color: var(--text-secondary); margin-right: 4px; }
.jedit-bracket { color: var(--text-secondary); }
.jedit-count { color: var(--text-tertiary); font-size: 0.85em; }
.jedit-value {
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.jedit-value.editable { cursor: text; }
.jedit-value.editable:hover {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
}
.jedit-value:focus { outline: 2px solid var(--accent-color); outline-offset: 0; }
.jedit-string { color: var(--syntax-string, #9ece6a); }
.jedit-number { color: var(--syntax-number, #e0af68); }
.jedit-boolean { color: var(--syntax-keyword, #bb9af7); }
.jedit-null { color: var(--syntax-deleted, #f7768e); font-style: italic; }

.jedit-input {
  font-family: inherit;
  font-size: 13px;
  padding: 1px 5px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--accent-color);
  border-radius: 3px;
  outline: none;
  min-width: 60px;
}
.jedit-key-input { min-width: 80px; color: var(--accent-color); font-weight: 500; }

.jedit-actions {
  display: inline-flex; gap: 2px;
  margin-left: 8px;
  visibility: hidden;
}
.jedit-row:hover > .jedit-actions { visibility: visible; }
.jedit-act {
  width: 20px; height: 20px;
  padding: 0;
  font-size: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.jedit-act:hover {
  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
  color: var(--accent-color);
}
.jedit-act.jedit-del:hover {
  background: color-mix(in srgb, var(--syntax-deleted, #f7768e) 15%, transparent);
  border-color: color-mix(in srgb, var(--syntax-deleted, #f7768e) 40%, transparent);
  color: var(--syntax-deleted, #f7768e);
}
.jedit-add-inline {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 12px;
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--border-color) 80%, transparent);
  border-radius: 4px;
  color: var(--text-tertiary);
  cursor: pointer;
}
.jedit-add-inline:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}
.jedit-show-more {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 12px;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
  border-radius: 4px;
  color: var(--accent-color);
  cursor: pointer;
}
.jedit-show-more:hover {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  border-color: var(--accent-color);
}

/* Mermaid toolbar */
.mermaid-toolbar { display: flex; gap: 6px; padding: 8px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
.mermaid-action { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); padding: 4px 10px; font-size: 12px; border-radius: 4px; cursor: pointer; }
.mermaid-action:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* ===================== Command Runner ===================== */
.terminal-panel {
  --terminal-panel-size: 360px;
  position: relative;
  flex: 0 0 var(--terminal-panel-size);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: 0 -16px 34px color-mix(in srgb, #000 12%, transparent);
}
.terminal-panel.hidden { display: none; }
.terminal-panel.terminal-layout-bottom {
  max-height: calc(100vh - 160px);
}
.terminal-panel.terminal-layout-left,
.terminal-panel.terminal-layout-right,
.terminal-panel.terminal-layout-floating {
  position: fixed;
  z-index: 760;
  min-height: 0;
  max-height: none;
  border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
  box-shadow: 0 22px 56px color-mix(in srgb, #000 28%, transparent);
}
.terminal-panel.terminal-layout-left,
.terminal-panel.terminal-layout-right {
  top: var(--terminal-frame-top);
  bottom: var(--terminal-frame-bottom);
  width: var(--terminal-panel-size);
}
.terminal-panel.terminal-layout-left {
  left: 0;
  border-left: 0;
  border-radius: 0 13px 0 0;
}
.terminal-panel.terminal-layout-right {
  right: 0;
  border-right: 0;
  border-radius: 13px 0 0 0;
}
.terminal-panel.terminal-layout-floating {
  border-radius: 14px;
  overflow: hidden;
}
.terminal-panel.terminal-dock-drag-source {
  opacity: 0.72;
}
.terminal-panel.terminal-dock-drag-source,
.terminal-panel.terminal-resizing {
  user-select: none;
}
.terminal-dock-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
}
.terminal-dock-overlay.hidden {
  display: none;
}
.terminal-dock-preview {
  position: fixed;
  border: 2px solid color-mix(in srgb, var(--accent-color) 72%, var(--border-color));
  border-radius: 14px;
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent-color) 19%, transparent) 0 10px,
      color-mix(in srgb, var(--accent-color) 6%, transparent) 10px 20px
    ),
    color-mix(in srgb, var(--accent-color) 10%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bg-primary) 48%, transparent),
    0 20px 70px color-mix(in srgb, #000 24%, transparent);
}
.terminal-dock-guide {
  position: fixed;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(3, 78px);
  grid-template-rows: repeat(2, 64px);
  gap: 8px;
  padding: 10px;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 74%),
    color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-primary));
  box-shadow: 0 22px 70px color-mix(in srgb, #000 34%, transparent);
}
.terminal-dock-target {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
  color: var(--text-secondary);
}
.terminal-dock-target strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--accent-color);
  font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.terminal-dock-target span {
  font-size: 10px;
  color: var(--text-tertiary);
}
.terminal-dock-target.active {
  border-color: color-mix(in srgb, var(--accent-color) 78%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 16%, var(--bg-primary));
  color: var(--text-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 34%, transparent);
}
.terminal-dock-target.active span {
  color: var(--text-primary);
}
.terminal-dock-left {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.terminal-dock-float {
  grid-column: 2;
  grid-row: 1;
}
.terminal-dock-right {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.terminal-dock-bottom {
  grid-column: 2;
  grid-row: 2;
}
.terminal-resize-handle {
  position: absolute;
  z-index: 5;
  background: transparent;
}
.terminal-layout-bottom .terminal-resize-handle {
  top: -5px;
  left: 0;
  right: 0;
  height: 10px;
  cursor: ns-resize;
}
.terminal-layout-left .terminal-resize-handle {
  top: 0;
  right: -5px;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
}
.terminal-layout-right .terminal-resize-handle {
  top: 0;
  left: -5px;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
}
.terminal-layout-floating .terminal-resize-handle {
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
}
.terminal-layout-floating .terminal-resize-handle::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border-right: 2px solid color-mix(in srgb, var(--text-tertiary) 82%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--text-tertiary) 82%, transparent);
}
.terminal-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
  cursor: grab;
}
.terminal-dock-drag-source .terminal-head {
  cursor: grabbing;
}
.terminal-head:hover .terminal-dock-hint {
  color: var(--accent-color);
}
.terminal-head > div:first-child {
  display: grid;
  gap: 2px;
}
.terminal-head strong { font-size: 13px; }
.terminal-head span,
.terminal-banner,
.terminal-cwd-row {
  color: var(--text-tertiary);
  font-size: 11px;
}
.terminal-dock-hint {
  color: var(--text-tertiary);
  font-size: 10px;
  white-space: nowrap;
}
.terminal-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  cursor: default;
}
.terminal-head-actions button,
.terminal-form button,
.terminal-block-toolbar button {
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
}
.terminal-head-actions button {
  padding: 4px 8px;
}
.terminal-head-actions button:disabled,
.terminal-form button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.terminal-head-actions button:hover,
.terminal-form button:hover,
.terminal-block-toolbar button:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}
.terminal-banner {
  padding: 7px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}
.terminal-cwd-row {
  padding: 7px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}
.terminal-cwd-row label {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.terminal-cwd,
.terminal-input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
}
.terminal-cwd {
  padding: 5px 7px;
  font-size: 11px;
}
.terminal-output {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
}
.terminal-block {
  margin-bottom: 9px;
  border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
  overflow: hidden;
}
.terminal-block.terminal-failed {
  border-color: color-mix(in srgb, var(--syntax-tag) 52%, var(--border-color));
}
.terminal-block summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
}
.terminal-block summary::-webkit-details-marker { display: none; }
.terminal-command {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.terminal-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--hover-bg);
  color: var(--text-tertiary);
  font-size: 10px;
}
.terminal-badge.running::before {
  content: '';
  width: 9px;
  height: 9px;
  border: 2px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
  border-top-color: var(--accent-color);
  border-radius: 999px;
  animation: ai-spin 0.8s linear infinite;
}
.terminal-badge.ok {
  color: var(--syntax-string);
  background: color-mix(in srgb, var(--syntax-string) 12%, transparent);
}
.terminal-badge.fail {
  color: var(--syntax-tag);
  background: color-mix(in srgb, var(--syntax-tag) 12%, transparent);
}
.terminal-block-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 9px;
}
.terminal-block-toolbar button {
  padding: 4px 8px;
  font-size: 11px;
}
.terminal-block pre {
  max-height: 180px;
  overflow: auto;
  padding: 9px;
  background: var(--pre-bg);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.terminal-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border-top: 1px solid var(--border-color);
}
.terminal-form > span {
  color: var(--accent-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.terminal-input {
  padding: 8px 9px;
  font-size: 12px;
}
.terminal-form button {
  padding: 7px 11px;
  color: var(--accent-color);
}
.terminal-confirm {
  display: grid;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 12px;
}
.terminal-confirm pre {
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--pre-bg);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}
.terminal-mode-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
}
.terminal-mode-tabs button {
  border: 0;
  padding: 4px 8px;
}
.terminal-mode-tabs button.active {
  background: var(--active-bg);
  color: var(--accent-color);
}
.terminal-runner-view,
.terminal-pty-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.terminal-runner-view.hidden,
.terminal-pty-view.hidden,
.terminal-env.hidden,
.terminal-cancel.hidden,
.terminal-pty-empty.hidden,
.terminal-block-drawer.hidden { display: none; }
.terminal-pty-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--editor-bg);
}
.terminal-pty-topbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 38px;
  padding: 4px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
  background: var(--bg-secondary);
}
.terminal-tab-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 0;
}
.terminal-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
}
.terminal-tab span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.terminal-tab.active {
  color: var(--text-primary);
  background: var(--active-bg);
  border-color: color-mix(in srgb, var(--accent-color) 44%, var(--border-color));
}
.terminal-tab.drag-over-tab {
  outline: 1px solid var(--accent-color);
}
.terminal-tab-close {
  color: var(--text-tertiary);
}
.terminal-tab-add {
  flex: 0 0 auto;
  padding: 5px 10px;
  color: var(--accent-color);
}
.terminal-pty-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0;
}
.terminal-active-context,
.terminal-pty-status {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.terminal-active-context {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
  border-radius: 999px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}
.terminal-pty-status {
  color: var(--text-tertiary);
}
.terminal-draft button {
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
}
.terminal-draft button:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}
.terminal-new-popover {
  position: fixed;
  z-index: 1200;
  width: min(380px, calc(100vw - 16px));
  max-height: min(460px, calc(100vh - 16px));
  display: grid;
  gap: 9px;
  padding: 10px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  border-radius: 12px;
  box-shadow: 0 18px 45px color-mix(in srgb, #000 24%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 9%, transparent), transparent 44%),
    color-mix(in srgb, var(--bg-secondary) 94%, var(--bg-primary));
}
.terminal-new-popover.hidden { display: none; }
.terminal-new-popover-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.terminal-new-popover-head > div {
  display: grid;
  gap: 2px;
}
.terminal-new-popover-head strong {
  font-size: 12px;
}
.terminal-new-popover-head span,
.terminal-new-cwd {
  color: var(--text-tertiary);
  font-size: 11px;
}
.terminal-new-cwd {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.terminal-new-cwd input {
  min-width: 0;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
}
.terminal-shell-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.terminal-profile-section-title {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.terminal-profile-section-title + .terminal-shell-card {
  margin-top: -2px;
}
.terminal-shell-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-primary) 74%, transparent);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.terminal-shell-card:hover,
.terminal-shell-card.preferred {
  border-color: color-mix(in srgb, var(--accent-color) 48%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-primary));
  color: var(--text-primary);
}
.terminal-shell-card.ai-cli {
  border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
}
.terminal-shell-card.ai-cli .terminal-shell-icon {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
}
.terminal-shell-card.unavailable {
  border-style: dashed;
  opacity: 0.72;
}
.terminal-shell-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.terminal-shell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color) 13%, transparent);
  color: var(--accent-color);
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.terminal-shell-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.terminal-shell-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 12px;
}
.terminal-shell-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-tertiary);
  font-size: 10px;
}
.terminal-shell-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 13%, transparent);
  color: var(--accent-color);
  font-size: 10px;
}
.terminal-shell-badge.ai {
  background: color-mix(in srgb, var(--accent-color) 11%, transparent);
}
.terminal-shell-badge.missing {
  background: color-mix(in srgb, var(--warning-color, #d97706) 13%, transparent);
  color: color-mix(in srgb, var(--warning-color, #d97706) 90%, var(--text-primary));
}
.terminal-shell-empty {
  padding: 9px;
  border: 1px dashed color-mix(in srgb, var(--border-color) 72%, transparent);
  border-radius: 9px;
  color: var(--text-tertiary);
  font-size: 11px;
}
.terminal-shell-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px dashed color-mix(in srgb, var(--accent-color) 36%, var(--border-color));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-color) 7%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
}
.terminal-draft {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 48%, transparent);
  background: color-mix(in srgb, var(--accent-color) 7%, transparent);
}
.terminal-draft.hidden { display: none; }
.terminal-draft strong {
  display: block;
  font-size: 11px;
}
.terminal-draft span {
  color: var(--text-tertiary);
  font-size: 10px;
}
.terminal-draft pre {
  max-height: 64px;
  overflow: auto;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--pre-bg);
  color: var(--text-secondary);
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}
.terminal-draft > div:last-child {
  display: flex;
  gap: 6px;
}
.terminal-draft button {
  padding: 5px 8px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.terminal-pty-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--editor-bg);
  border-top: 1px solid color-mix(in srgb, var(--border-color) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
}
.terminal-pty-container {
  position: absolute;
  inset: 0;
  min-height: 190px;
  padding: 8px 10px;
  background: var(--editor-bg);
}
.terminal-pty-container .xterm {
  height: 100%;
  min-height: 170px;
}
.terminal-pty-container .xterm-screen,
.terminal-pty-container .xterm-viewport {
  height: 100% !important;
}
.terminal-pty-container.hidden { display: none; }
.terminal-pty-empty {
  position: absolute;
  inset: 12px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  border: 1px dashed color-mix(in srgb, var(--border-color) 72%, transparent);
  border-radius: 8px;
  color: var(--text-tertiary);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-color) 9%, transparent), transparent 44%),
    var(--editor-bg);
}
.terminal-pty-empty strong {
  color: var(--text-secondary);
  font-size: 12px;
}
.terminal-pty-empty span {
  font-size: 11px;
}
.terminal-pty-empty button {
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 48%, var(--border-color));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
  font-family: inherit;
  cursor: pointer;
}
.terminal-block-drawer {
  flex: 0 0 auto;
  max-height: 34%;
  min-height: 34px;
  overflow: auto;
  background: var(--bg-secondary);
}
.terminal-block-drawer summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: var(--text-tertiary);
  font-size: 11px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 52%, transparent);
}
.terminal-block-drawer summary::-webkit-details-marker { display: none; }
.terminal-block-count {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--hover-bg);
  color: var(--text-secondary);
  text-align: center;
}
.terminal-block-list {
  min-height: 0;
  overflow: auto;
  padding: 8px 10px;
}
.terminal-pty-block {
  margin-bottom: 8px;
}

body.terminal-window-body {
  overflow: hidden;
  background: var(--editor-bg);
}
.terminal-window-shell {
  height: 100vh;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--editor-bg);
  color: var(--text-primary);
}
.terminal-window-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 11%, transparent), transparent 48%),
    var(--bg-secondary);
}
.terminal-window-head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.terminal-window-head strong {
  font-size: 13px;
}
.terminal-window-context,
.terminal-window-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-tertiary);
  font-size: 11px;
}
.terminal-window-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.terminal-window-status.active {
  max-width: 260px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 9%, transparent);
  color: var(--text-secondary);
}
.terminal-window-dock,
.terminal-window-close,
.terminal-window-modal button {
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
}
.terminal-window-dock,
.terminal-window-close {
  padding: 5px 9px;
}
.terminal-window-dock:hover,
.terminal-window-close:hover,
.terminal-window-modal button:hover {
  border-color: color-mix(in srgb, var(--accent-color) 50%, var(--border-color));
  color: var(--text-primary);
  background: var(--hover-bg);
}
.terminal-window-dock {
  border-color: color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 9%, transparent);
}
.terminal-window-dock:disabled {
  opacity: 0.6;
  cursor: progress;
}
.terminal-window-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.terminal-window-stage > .terminal-pty-root {
  flex: 1 1 auto;
  min-height: 0;
}
.terminal-window-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, #000 34%, transparent);
}
.terminal-window-modal {
  width: min(520px, calc(100vw - 32px));
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
  border-radius: 14px;
  background: var(--bg-secondary);
  box-shadow: 0 22px 60px color-mix(in srgb, #000 34%, transparent);
}
.terminal-window-modal-head,
.terminal-window-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
}
.terminal-window-modal-head {
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
}
.terminal-window-modal-head button {
  width: 28px;
  height: 26px;
  padding: 0;
}
.terminal-window-modal-body {
  padding: 12px;
}
.terminal-window-modal-foot {
  justify-content: flex-end;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
}
.terminal-window-modal-foot button {
  padding: 6px 10px;
}
.terminal-window-modal-foot button.primary {
  border-color: color-mix(in srgb, var(--accent-color) 62%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
  color: var(--accent-color);
}

/* ===================== Templates ===================== */
.template-picker {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(260px, 1fr);
  gap: 14px;
  min-width: min(780px, 82vw);
  max-height: min(72vh, 680px);
}
.template-list {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 4px;
}
.template-list-item {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.template-list-item strong {
  color: var(--text-primary);
  font-size: 13px;
}
.template-list-item span,
.template-description {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.45;
}
.template-list-item.active {
  border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  background: var(--active-bg);
}
.template-detail {
  min-width: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
}
.template-detail h3 {
  margin: 0;
  font-size: 16px;
}
.template-fields {
  display: grid;
  gap: 8px;
}
.template-field {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 12px;
}
.template-field input {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
}
.template-preview {
  max-height: 280px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--pre-bg);
  color: var(--text-secondary);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}
.template-integrations,
.template-popover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.template-integrations strong {
  flex: 0 0 100%;
  color: var(--text-secondary);
  font-size: 12px;
}
.template-integrations button,
.template-popover-actions button,
.template-section-row {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.template-integrations button,
.template-popover-actions button {
  padding: 6px 9px;
}
.template-integrations button:hover,
.template-popover-actions button:hover,
.template-section-row:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}
.template-status-popover {
  display: grid;
  gap: 10px;
  min-width: min(520px, 76vw);
}
.template-status-popover h3 {
  margin: 0;
}
.template-status-popover p {
  color: var(--text-secondary);
}
.template-section-list {
  display: grid;
  gap: 6px;
}
.template-section-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  text-align: left;
}
.template-section-row small {
  color: var(--text-tertiary);
}
.template-heading {
  cursor: context-menu;
}
.template-heading:hover {
  color: var(--accent-color);
}

/* ===================== AI Sidebar ===================== */
.ai-sidebar-resize {
  width: 5px;
  flex: 0 0 5px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
  position: relative;
  z-index: 30;
}
.ai-sidebar-resize:hover,
.ai-sidebar-resize.dragging { background: var(--accent-color); }
.ai-sidebar-resize.hidden { display: none; }

.ai-sidebar {
  position: relative;
  z-index: 30;
  width: 380px;
  min-width: 280px;
  max-width: min(720px, 70vw);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-color);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 34%),
    var(--bg-secondary);
  color: var(--text-primary);
  overflow: hidden;
}
.ai-sidebar.hidden { display: none; }
.ai-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
}
.ai-provider-button {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 38%, var(--border-color));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-context-chip {
  margin: 10px 10px 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}
.ai-close,
.ai-send,
.ai-history button,
.ai-mode-tabs button,
.ai-code-head button,
.ai-warning-actions button,
.ai-mcp-actions button,
.ai-mcp-tool {
  font-family: inherit;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 7px;
  cursor: pointer;
}
.ai-close {
  width: 28px;
  height: 28px;
}
.ai-close:hover,
.ai-mode-tabs button:hover,
.ai-history button:hover,
.ai-code-head button:hover { color: var(--text-primary); background: var(--hover-bg); }
.ai-mode-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color);
}
.ai-mode-tabs button {
  flex: 1;
  padding: 6px 8px;
}
.ai-mode-tabs button.active {
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.ai-main {
  flex: 1;
  min-height: 0;
  display: flex;
}
.ai-history {
  width: 118px;
  flex: 0 0 118px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ai-history-head {
  padding: 8px;
  display: grid;
  gap: 6px;
}
.ai-history-head input,
.ai-composer,
.ai-settings-row input,
.ai-settings-row select,
.ai-settings-row textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
}
.ai-history-head input { padding: 5px 6px; font-size: 11px; }
.ai-history-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 8px 8px;
}
.ai-history-item {
  position: relative;
  margin-bottom: 6px;
}
.ai-history-open {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 7px 26px 7px 6px;
  text-align: left;
}
.ai-history-item.active .ai-history-open {
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color) 60%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.ai-history-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  font-size: 12px;
  line-height: 1;
}
.ai-history-item:hover .ai-history-delete,
.ai-history-item:focus-within .ai-history-delete {
  opacity: 1;
  pointer-events: auto;
}
.ai-history-delete:hover {
  color: var(--danger-color, #ff7676);
  border-color: color-mix(in srgb, var(--danger-color, #ff7676) 58%, var(--border-color));
  background: color-mix(in srgb, var(--danger-color, #ff7676) 11%, transparent);
}
.ai-history-item.loading .ai-history-open {
  cursor: wait;
}
.ai-history-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.ai-history-meta,
.ai-history-empty { font-size: 10px; color: var(--text-tertiary); }
.ai-chat-panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ai-chat-panel.hidden,
.ai-actions-panel.hidden,
.ai-mcp-panel.hidden { display: none; }
.ai-context-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
}
.ai-context-options label { display: inline-flex; align-items: center; gap: 4px; }
.ai-runner-chip {
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 40%, var(--border-color));
  border-radius: 999px;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.ai-runner-chip.active {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.ai-runner-chip.hidden { display: none; }
.ai-runner-attachment pre {
  max-height: 46vh;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--pre-bg);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: pre-wrap;
}
.ai-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.ai-empty {
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  padding: 12px;
}
.ai-empty strong { color: var(--text-primary); }
.ai-message {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 12px;
  padding-right: 44px;
}
.ai-message.user {
  justify-content: flex-end;
  padding: 0 0 0 44px;
}
.ai-message-bubble {
  display: grid;
  gap: 6px;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-width: min(220px, 100%);
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
  border-radius: 12px 12px 12px 4px;
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}
.ai-message-bubble.loading {
  border-color: color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
}
.ai-message.user .ai-message-bubble {
  border-color: color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
  border-radius: 12px 12px 4px 12px;
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-primary));
}
.ai-message-role {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.55;
}
.ai-message.user .ai-message-role {
  text-align: right;
}
.ai-message-body {
  min-width: 0;
}
.ai-code-block {
  margin-top: 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--pre-bg);
}
.ai-code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 11px;
}
.ai-code-head button { padding: 3px 8px; color: var(--accent-color); }
.ai-run-shell {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.ai-run-shell select {
  min-width: 126px;
  padding: 3px 6px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font: inherit;
}
.ai-code-block pre {
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}
.ai-composer-wrap {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border-color);
}
.ai-composer {
  resize: vertical;
  min-height: 82px;
  max-height: 220px;
  padding: 9px 10px;
  line-height: 1.45;
}
.ai-footer {
  color: var(--text-tertiary);
  font-size: 11px;
}
.ai-send {
  padding: 8px 10px;
  background: var(--accent-color);
  color: var(--bg-primary);
  border-color: var(--accent-color);
  font-weight: 700;
}
.ai-send:disabled { opacity: 0.55; cursor: wait; }
.ai-actions-panel,
.ai-mcp-panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}
.ai-actions-head {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}
.ai-actions-head strong { font-size: 13px; }
.ai-actions-head span {
  color: var(--text-tertiary);
  font-size: 11px;
}
.ai-action-list {
  display: grid;
  gap: 8px;
}
.ai-action-section {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.ai-action-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
}
.ai-action-section-head strong {
  font-size: 12px;
  color: var(--text-primary);
}
.ai-action-section-head span {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}
.ai-action-section-head button {
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.ai-action-section-head button:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}
.ai-action-card {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.ai-action-card:hover {
  border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-primary));
}
.ai-action-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ai-action-card strong {
  display: block;
  font-size: 12px;
}
.ai-action-card small {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10px;
}
.ai-action-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ai-action-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.ai-action-badge,
.ai-action-scope,
.ai-action-warning {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.1;
}
.ai-action-badge.ai {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 13%, transparent);
}
.ai-action-badge.local {
  color: var(--syntax-string, #9ece6a);
  background: color-mix(in srgb, var(--syntax-string, #9ece6a) 13%, transparent);
}
.ai-action-scope {
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--border-color) 42%, transparent);
}
.ai-action-warning {
  color: var(--danger-color, #ff7676);
  background: color-mix(in srgb, var(--danger-color, #ff7676) 12%, transparent);
}
.ai-mcp-card {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}
.ai-mcp-card.running {
  border-color: color-mix(in srgb, var(--syntax-string, #9ece6a) 28%, var(--border-color));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--syntax-string, #9ece6a) 88%, transparent);
}
.ai-mcp-card.expanded {
  border-color: color-mix(in srgb, var(--accent-color) 48%, var(--border-color));
  background:
    radial-gradient(circle at 12px 0, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 44px),
    color-mix(in srgb, var(--bg-primary) 78%, transparent);
}
.ai-mcp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ai-mcp-card-head > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.ai-mcp-card-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.ai-mcp-card-head span,
.ai-mcp-desc,
.ai-mcp-log > span {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.45;
}
.ai-mcp-title-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.ai-mcp-title-line strong {
  min-width: 0;
}
.ai-mcp-state {
  flex: none;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ai-mcp-state.running {
  border-color: color-mix(in srgb, var(--syntax-string, #9ece6a) 38%, var(--border-color));
  background: color-mix(in srgb, var(--syntax-string, #9ece6a) 13%, transparent);
  color: var(--syntax-string, #9ece6a);
}
.ai-mcp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ai-mcp-meta span {
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-color) 34%, transparent);
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.2;
}
.ai-mcp-enable {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 11px;
  user-select: none;
}
.ai-mcp-enable input {
  accent-color: var(--accent-color);
}
.ai-mcp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-mcp-actions button {
  padding: 5px 8px;
  font-size: 11px;
}
.ai-mcp-actions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--text-primary);
}
.ai-mcp-actions button.active {
  border-color: color-mix(in srgb, var(--accent-color) 72%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 17%, transparent);
  color: var(--accent-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 26%, transparent);
  font-weight: 700;
}
.ai-mcp-actions button.active::after {
  content: "on";
  margin-left: 6px;
  padding: 1px 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 20%, transparent);
  color: var(--accent-color);
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ai-mcp-actions button:disabled {
  opacity: 0.58;
  cursor: wait;
}
.ai-mcp-open-panel {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-secondary) 58%, transparent);
}
.ai-mcp-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ai-mcp-list-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ai-mcp-list-head strong {
  color: var(--text-primary);
  font-size: 12px;
}
.ai-mcp-list-head span {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.35;
}
.ai-mcp-count-pill {
  flex: none;
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
  color: var(--accent-color) !important;
  font-weight: 700;
  text-align: center;
}
.ai-mcp-tool-list {
  display: grid;
  gap: 6px;
  max-height: min(340px, 42vh);
  overflow: auto;
  padding-right: 2px;
}
.ai-mcp-tool {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 8px;
  text-align: left;
  background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
}
.ai-mcp-tool:disabled {
  opacity: 0.58;
  cursor: wait;
}
.ai-mcp-tool strong {
  color: var(--text-primary);
  font-size: 12px;
}
.ai-mcp-tool span {
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.4;
}
.ai-mcp-tool-meta {
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 600;
}
.ai-mcp-empty {
  padding: 9px;
  border: 1px dashed color-mix(in srgb, var(--border-color) 82%, transparent);
  border-radius: 8px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}
.ai-mcp-arg-help {
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}
.ai-mcp-arg-help p {
  margin: 0 0 2px;
  color: var(--text-primary);
}
.ai-mcp-arg-help span {
  color: var(--text-tertiary);
}
.ai-mcp-error,
.ai-mcp-stderr,
.ai-mcp-log pre,
.ai-mcp-permission pre,
.ai-mcp-schema pre {
  max-height: 180px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--pre-bg);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.ai-mcp-error {
  color: var(--danger-color, #ff7676);
}
.ai-mcp-log {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-primary) 65%, transparent);
}
.ai-mcp-log strong {
  font-size: 12px;
}
.ai-mcp-log summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
}
.ai-mcp-schema summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
}
.ai-action-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color) 13%, transparent);
  color: var(--accent-color);
}
.ai-action-running,
.ai-action-status,
.ai-loading-line,
.ai-history-loading,
.ai-history-row-loading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-action-running,
.ai-action-status {
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 12px;
}
.ai-loading-line,
.ai-history-loading,
.ai-history-row-loading {
  color: var(--text-tertiary);
  font-size: 11px;
}
.ai-history-loading {
  padding: 7px 6px;
}
.ai-history-row-loading {
  padding: 4px 6px 0;
}
.ai-action-running button {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.ai-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
  border-top-color: var(--accent-color);
  border-radius: 999px;
  animation: ai-spin 0.8s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-settings textarea {
  width: 100%;
  min-height: 160px;
  padding: 8px 9px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
}
.ai-settings {
  display: grid;
  gap: 12px;
  min-width: min(520px, 72vw);
}
.ai-prompt-description {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.45;
}
.ai-settings-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 12px;
}
.ai-settings-row input,
.ai-settings-row select,
.ai-settings-row textarea { padding: 8px 9px; }
.ai-key-status { color: var(--text-tertiary); font-size: 12px; }
.ai-diff-modal { display: grid; gap: 12px; min-width: min(900px, 78vw); }
.ai-diff-modal p { color: var(--text-secondary); font-size: 12px; }
.ai-diff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  max-height: 52vh;
  overflow: hidden;
}
.ai-diff-pane {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
}
.ai-diff-title {
  position: sticky;
  top: 0;
  padding: 7px 9px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 700;
}
.ai-diff-line {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}
.ai-diff-line.changed { background: color-mix(in srgb, var(--accent-color) 9%, transparent); }
.ai-diff-num {
  color: var(--text-tertiary);
  padding: 0 8px;
  text-align: right;
  user-select: none;
}
.ai-diff-code {
  white-space: pre;
  padding-right: 8px;
}
.ai-warning-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.58);
}
.ai-warning-card {
  width: min(520px, 92vw);
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-primary);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}
.ai-warning-card h2 { font-size: 18px; }
.ai-warning-card p,
.ai-warning-check { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.ai-warning-check { display: flex; gap: 8px; align-items: center; }
.ai-warning-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ai-warning-actions button { padding: 8px 12px; }
.ai-warning-actions button.primary {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--bg-primary);
}
.ai-warning-actions button:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 900px) {
  .ai-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: min(440px, 92vw) !important;
    max-width: 92vw;
    box-shadow: -16px 0 44px rgba(0, 0, 0, 0.35);
  }
  .ai-sidebar-resize { display: none; }
  .ai-history { width: 96px; flex-basis: 96px; }
}