/* AI Project Builder — Part 4 additions (loaded last). */

/* ============================================================
   THEMES
   ============================================================ */

/* ---- Light ---- */
body[data-theme="light"] {
  --bg: #f6f8fc;
  --bg-2: #eef2f9;
  --bg-3: #e7ecf5;
  --panel: #ffffff;
  --panel-2: #f2f5fb;
  --border: #d4dbe9;
  --border-2: #bcc7de;
  --text: #1a2238;
  --text-dim: #4c597a;
  --text-mute: #7d89a6;
  --accent: #3563e0;
  --accent-2: #4d7dff;
  --good: #1a8a4f;
  --warn: #b56a00;
  --danger: #c81e3d;
}
body[data-theme="light"] .topbar { background: linear-gradient(180deg, #ffffff 0%, #eef2f9 100%); }
body[data-theme="light"] .statusbar { background: linear-gradient(180deg, #f7f9fd 0%, #e9eef7 100%); }
body[data-theme="light"] #structure-input,
body[data-theme="light"] #ai-input,
body[data-theme="light"] .mini-input,
body[data-theme="light"] .modal input,
body[data-theme="light"] .modal select { background: #ffffff; }
body[data-theme="light"] .editor-area,
body[data-theme="light"] .editor-stack { background: #ffffff; }
body[data-theme="light"] #line-numbers { background: #f5f8fc; }
body[data-theme="light"] .report-output { background: #ffffff; }
body[data-theme="light"] .editor-stack #editor { caret-color: #1a2238; }
body[data-theme="light"] .tree-row.active { background: rgba(53,99,224,.14); color: var(--text); }
body[data-theme="light"] .tree-row:hover { background: rgba(53,99,224,.08); }
body[data-theme="light"] .tabs .tab.active { background: #ffffff; }
body[data-theme="light"] .btn { background: #eef2f9; color: var(--text); }
body[data-theme="light"] .btn:hover { background: #e0e7f3; border-color: var(--accent); }
body[data-theme="light"] .btn.primary { background: linear-gradient(180deg, #4d7dff 0%, #3563e0 100%); color: #fff; }
body[data-theme="light"] .btn.ghost { background: transparent; }
body[data-theme="light"] .mini { color: var(--text-dim); }
body[data-theme="light"] .mini:hover { background: rgba(53,99,224,.10); color: var(--text); }
body[data-theme="light"] .mini.primary { color: #fff; background: #3563e0; }
body[data-theme="light"] .cmd-item:hover,
body[data-theme="light"] .cmd-item.sel { background: rgba(53,99,224,.12); }
body[data-theme="light"] .small-tabs .tab.active,
body[data-theme="light"] .tabs .tab.active { border-color: var(--border); }
body[data-theme="light"] .hl-comment    { color: #7a879f; }
body[data-theme="light"] .hl-string     { color: #17693a; }
body[data-theme="light"] .hl-number     { color: #a34a00; }
body[data-theme="light"] .hl-keyword    { color: #6d28d9; }
body[data-theme="light"] .hl-function   { color: #0d6ea8; }
body[data-theme="light"] .hl-punct      { color: #4c597a; }
body[data-theme="light"] .hl-type       { color: #a34a00; }
body[data-theme="light"] .hl-property   { color: #0d6ea8; }
body[data-theme="light"] .hl-tag        { color: #c81e3d; }
body[data-theme="light"] .hl-attr       { color: #a34a00; }
body[data-theme="light"] .hl-doctype    { color: #7d89a6; }
body[data-theme="light"] .hl-selector   { color: #c81e3d; }
body[data-theme="light"] .hl-atrule     { color: #6d28d9; }
body[data-theme="light"] .hl-md-head    { color: #0d6ea8; }
body[data-theme="light"] .hl-md-code    { color: #17693a; }
body[data-theme="light"] .hl-md-link    { color: #0d6ea8; }
body[data-theme="light"] .hl-md-em      { color: #a34a00; }
body[data-theme="light"] .hl-md-strong  { color: #a34a00; }

/* ---- High contrast ---- */
body[data-theme="hc"] {
  --bg: #000000;
  --bg-2: #050505;
  --bg-3: #101010;
  --panel: #000000;
  --panel-2: #060606;
  --border: #3a3a3a;
  --border-2: #5e5e5e;
  --text: #ffffff;
  --text-dim: #d0d0d0;
  --text-mute: #9a9a9a;
  --accent: #00d9ff;
  --accent-2: #7ce6ff;
  --good: #00ff85;
  --warn: #ffcc00;
  --danger: #ff4466;
}
body[data-theme="hc"] .topbar,
body[data-theme="hc"] .statusbar { background: #000000; border-color: #3a3a3a; }
body[data-theme="hc"] #structure-input,
body[data-theme="hc"] #ai-input,
body[data-theme="hc"] .mini-input { background: #000000; }
body[data-theme="hc"] .editor-area,
body[data-theme="hc"] .editor-stack,
body[data-theme="hc"] #line-numbers { background: #000000; }
body[data-theme="hc"] .report-output { background: #000000; }
body[data-theme="hc"] .editor-stack #editor { caret-color: #ffffff; }
body[data-theme="hc"] .hl-comment  { color: #a0a0a0; }
body[data-theme="hc"] .hl-string   { color: #00ff85; }
body[data-theme="hc"] .hl-number   { color: #ffcc00; }
body[data-theme="hc"] .hl-keyword  { color: #ff77ff; }
body[data-theme="hc"] .hl-function { color: #7ce6ff; }
body[data-theme="hc"] .hl-punct    { color: #d0d0d0; }
body[data-theme="hc"] .hl-type     { color: #ffcc00; }
body[data-theme="hc"] .hl-property { color: #7ce6ff; }
body[data-theme="hc"] .hl-tag      { color: #ff77ff; }
body[data-theme="hc"] .hl-attr     { color: #ffcc00; }

/* ============================================================
   SYMBOL OUTLINE PANEL
   ============================================================ */
.sym-list { display: flex; flex-direction: column; gap: 2px; }
.sym-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  border: 1px solid transparent;
}
.sym-row:hover { background: rgba(93,141,255,.10); border-color: var(--border); }
.sym-row .kind {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .4px;
  flex: 0 0 auto;
  font-family: var(--sans);
}
.sym-row .kind.function  { color: #63c5ea; background: rgba(99,197,234,.14); }
.sym-row .kind.class     { color: #ffc878; background: rgba(255,200,120,.14); }
.sym-row .kind.method    { color: #7fc3ff; background: rgba(127,195,255,.14); }
.sym-row .kind.interface { color: #a18bff; background: rgba(161,139,255,.14); }
.sym-row .kind.type      { color: #a18bff; background: rgba(161,139,255,.14); }
.sym-row .kind.enum      { color: #ff9bb5; background: rgba(255,155,181,.14); }
.sym-row .kind.heading   { color: #a3d68b; background: rgba(163,214,139,.14); }
.sym-row .kind.selector  { color: #ff7a97; background: rgba(255,122,151,.14); }
.sym-row .kind.tag       { color: #ff7a97; background: rgba(255,122,151,.14); }
.sym-row .kind.symbol    { color: var(--text-dim); background: rgba(120,130,160,.14); }
.sym-row .name {
  font-family: var(--mono);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.sym-row .ln {
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 11px;
  flex: 0 0 auto;
}
.sym-row.indent-1 { padding-left: 22px; }
.sym-row.indent-2 { padding-left: 36px; }
.sym-row.indent-3 { padding-left: 50px; }

/* ============================================================
   BOOKMARK GUTTER
   ============================================================ */
#line-numbers { position: relative; }
.bm-gutter {
  position: absolute;
  left: 2px;
  top: 0;
  bottom: 0;
  width: 10px;
  pointer-events: none;
  z-index: 2;
}
.bm-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 4px rgba(255,180,84,.55);
  left: 0;
  transition: top .05s linear;
}
body[data-theme="light"] .bm-dot { box-shadow: 0 0 4px rgba(181,106,0,.45); }
body[data-theme="hc"] .bm-dot { background: #ffcc00; }

/* ============================================================
   MINIMAP
   ============================================================ */
.editor-stack.with-minimap { padding-right: 108px; }
.minimap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 108px;
  background: #0a1024;
  border-left: 1px solid var(--border);
  z-index: 3;
  overflow: hidden;
  cursor: pointer;
}
body[data-theme="light"] .minimap { background: #f5f8fc; }
body[data-theme="hc"] .minimap { background: #000000; border-left-color: #3a3a3a; }
.minimap canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.minimap-viewport {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(93,141,255,.16);
  border-top: 1px solid rgba(93,141,255,.5);
  border-bottom: 1px solid rgba(93,141,255,.5);
  pointer-events: none;
  will-change: transform, height;
}
body[data-theme="light"] .minimap-viewport { background: rgba(53,99,224,.12); border-color: rgba(53,99,224,.4); }

/* ============================================================
   PREVIEW MODAL
   ============================================================ */
.preview-root {
  position: fixed;
  inset: 0;
  background: rgba(4,8,20,.78);
  backdrop-filter: blur(4px);
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.preview-box {
  width: 100%;
  max-width: 1200px;
  height: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  flex-wrap: wrap;
}
.preview-head h3 { margin: 0; font-size: 14px; }
.preview-head .meta { color: var(--text-mute); font-size: 11.5px; font-family: var(--mono); }
.preview-head .spacer { flex: 1 1 auto; }
.preview-head label.toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-dim);
  user-select: none;
}
.preview-head label.toggle input { accent-color: var(--accent); }
.preview-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
}
.preview-body iframe {
  flex: 1 1 auto;
  border: 0;
  width: 100%;
  background: #ffffff;
}
.preview-console {
  flex: 0 0 auto;
  max-height: 160px;
  overflow: auto;
  background: #0a1024;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  border-top: 1px solid var(--border);
}
body[data-theme="light"] .preview-console { background: #f5f8fc; }
.preview-console[hidden] { display: none; }
.preview-console .pc-row {
  padding: 3px 10px;
  border-bottom: 1px solid rgba(34,48,92,.5);
  white-space: pre-wrap;
  word-break: break-word;
}
.preview-console .pc-row.error { color: #ff8ba0; background: rgba(255,92,122,.08); }
.preview-console .pc-row.warn  { color: #ffcc80; background: rgba(255,180,84,.06); }
.preview-console .pc-row.info  { color: #8fc7ff; }
.preview-console .pc-row.log   { color: var(--text-dim); }
.preview-console-empty { padding: 10px; color: var(--text-mute); font-style: italic; }

/* ============================================================
   TEXT TOOLS MODAL
   ============================================================ */
.tools-root {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4,8,20,.72);
  backdrop-filter: blur(4px);
  padding: 20px;
}
.tools-box {
  width: 100%;
  max-width: 660px;
  max-height: 86vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.tools-box h3 { margin: 0 0 6px; font-size: 15px; }
.tools-box > p { margin: 0 0 4px; color: var(--text-mute); font-size: 12px; }
.tools-section {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 12px;
}
.tools-section h4 {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.tools-grid button {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12px;
  text-align: left;
}
.tools-grid button:hover { background: rgba(93,141,255,.12); border-color: var(--accent); }

/* ============================================================
   TAB CONTEXT MENU
   ============================================================ */
.tabmenu {
  position: fixed;
  z-index: 10011;
  min-width: 180px;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tabmenu button {
  text-align: left;
  padding: 6px 10px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
}
.tabmenu button:hover { background: rgba(93,141,255,.16); }
.tabmenu button.danger { color: #ffbfcd; }
.tabmenu button.danger:hover { background: rgba(255,92,122,.16); }
.tabmenu button:disabled { color: var(--text-mute); cursor: not-allowed; }
.tabmenu button:disabled:hover { background: transparent; }
.tabmenu .sep { height: 1px; background: var(--border); margin: 3px 0; }

/* ============================================================
   STATUS BAR EXTRAS
   ============================================================ */
#status-bracket {
  font-family: var(--mono);
  color: var(--accent-2);
}
#status-bracket.none { color: var(--text-mute); }
#status-bracket.unmatched { color: var(--danger); }