/*
  Simple styling for the browser IDE.  We keep the layout responsive
  using flexbox.  The toolbar is fixed at the top; below it the
  application is divided into a side bar (file tree and commit
  history), an editor pane and a preview pane.  Hidden panes are
  toggled using the `hidden` class.
*/

html,
body,
#app {
  /* Reset sizing and adopt a dark, branded look */
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(135deg, #0d0221, #2f0743);
  color: #f5f5f5;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(32, 0, 56, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  color: #f5f5f5;
}

/* Brand logo */
#toolbar #logo {
  font-size: 1.25rem;
  font-weight: bold;
  margin-right: 1rem;
  color: #bb31ff;
  text-shadow: 0 0 6px rgba(187, 49, 255, 0.7);
}

#toolbar #logo .logoText{ font-weight: 900; letter-spacing: .5px; }
#toolbar #logo .logoSub{ font-size: .8rem; opacity: .85; margin-left: 10px; color: #ffd65a; text-shadow: 0 0 10px rgba(255,214,90,.35); }

.userChip{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: rgba(245,245,245,.9);
  font-size: 12px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted{ color: rgba(245,245,245,.72); font-size: 12px; }

#toolbar input,
#toolbar select,
#toolbar button,
#toolbar label {
  font-size: 0.85rem;
  margin: 0;
  border-radius: 4px;
}

main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Panel resize handles ──────────────────────────────────── */
.panel-resize-handle {
  width: 8px;
  flex: 0 0 8px;
  background: rgba(162, 67, 255, 0.08);
  border-left: 1px solid rgba(162, 67, 255, 0.25);
  border-right: 1px solid rgba(162, 67, 255, 0.25);
  cursor: col-resize;
  position: relative;
  z-index: 50;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
  flex-shrink: 0;
}
.panel-resize-handle::after {
  content: '⋮';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: rgba(162, 89, 255, 0.5);
  transition: color 0.12s;
  pointer-events: none;
  user-select: none;
}
.panel-resize-handle:hover {
  background: rgba(162, 67, 255, 0.18);
  border-color: rgba(162, 89, 255, 0.6);
}
.panel-resize-handle:hover::after,
.panel-resize-handle.dragging::after {
  color: #bb31ff;
}
.panel-resize-handle.dragging {
  background: rgba(162, 67, 255, 0.25);
  border-color: #bb31ff;
}

aside#side {
  width: 260px;
  min-width: 220px;
  max-width: none;
  flex-shrink: 0;
  background: rgba(24, 0, 48, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto;
  overflow-x: hidden;
  color: #e0d6f5;
  display: flex;
  flex-direction: column;
}

.sideTabs{
  display:flex;
  gap:6px;
  padding: 8px;
  position: sticky;
  top: 0;
  background: rgba(24,0,48,.9);
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 10;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.sideTabs::-webkit-scrollbar{display:none}

.tabDockBtn{
  margin-left: auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: #d9ccff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.tabDockBtn:hover{ background: rgba(162,89,255,.22); border-color: rgba(162,89,255,.45); }

.undock-drag-handle{
  cursor: grab;
}

.undock-drag-handle:active{
  cursor: grabbing;
}

.tabBtn{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(245,245,245,.9);
  padding: 5px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tabBtn.active{
  background: rgba(187,49,255,.18);
  border-color: rgba(187,49,255,.45);
}

#editor-section {
  flex: 1;
  min-width: 320px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(24, 0, 48, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

#editor {
  flex: 1;
  height: 100%;
  width: 100%;
  resize: none;
  font-family: Consolas, Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.5);
  color: #f5f5f5;
  border: none;
  outline: none;
  padding: 0.75rem;
}

#preview-section {
  width: 40%;
  min-width: 240px;
  max-width: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(24, 0, 48, 0.4);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

#preview-section.hidden {
  display: none;
}

.pane {
  padding: 0.5rem;
  overflow: auto;
}

aside#side > .pane {
  flex: 1;
  min-height: 0;
}

.hidden {
  display: none;
}

/* Ensure new file controls appear inline when not hidden */
#new-file-input,
#create-file {
  display: inline-block;
}
#new-file-input.hidden,
#create-file.hidden {
  display: none;
}

/* File tree styling */
#file-tree ul {
  list-style: none;
  padding-left: 0.5rem;
}

#file-tree li {
  cursor: pointer;
  padding: 0.1rem 0.25rem;
  border-radius: 3px;
  transition: background 0.2s;
}

#file-tree li:hover {
  background: rgba(187, 49, 255, 0.1);
}

#file-tree li.selected {
  font-weight: bold;
  background: rgba(187, 49, 255, 0.2);
}

/* History pane */
#history-pane {
  padding: 0.5rem;
  color: #e0d6f5;
}

/* Chat */
.chatTop{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

#chat-pane{
  display:flex;
  flex-direction:column;
  min-height:0;
}

#chat-pane.hidden{display:none}

.chatTimeline{
  height: auto;
  flex: 1;
  min-height: 120px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,.20);
}

.chatMsg{
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,.10);
}
.chatMsg.user{ background: rgba(255,214,90,.10); border-color: rgba(255,214,90,.22); }
.chatMsg.assistant{ background: rgba(187,49,255,.10); border-color: rgba(187,49,255,.22); }
.chatMsg.thinking{ opacity: .72; }
.chatMsg.thinking::after{ content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #bb31ff; margin-left: 8px; animation: kaixu-pulse 1.2s ease-in-out infinite; }
@keyframes kaixu-pulse{ 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity: .3; transform: scale(.7); } }
.chatMeta{ font-size: 11px; opacity: .8; margin-bottom: 6px; display:flex; justify-content: space-between; gap: 10px; }
.chatActions{ display:flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.chatComposer{
  display:flex;
  gap: 10px;
  margin-top: 10px;
  flex-shrink: 0;
}

#files-pane{display:flex;flex-direction:column;min-height:0}
#files-pane.hidden{display:none}
#file-tree{flex:1;min-height:0;overflow:auto}

#chatInput{
  flex: 1;
  min-height: 64px;
  max-height: 180px;
  resize: vertical;
  background: rgba(0,0,0,.35);
  color: #f5f5f5;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px;
  font-family: Consolas, Menlo, monospace;
  font-size: 12.5px;
}

/* Auth */
.authTabs{ display:flex; gap: 10px; margin: 10px 0; }
.authTabBtn{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #f5f5f5;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
}
.authTabBtn.active{ background: rgba(187,49,255,.18); border-color: rgba(187,49,255,.45); }
.authPanel input{ width: 100%; margin: 6px 0; }


#history-pane .commit {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem 0;
  cursor: pointer;
}

#history-pane .commit:hover {
  background: rgba(187, 49, 255, 0.1);
}

/* Preview iframe */
#preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
}

/* Utility classes */
.flex {
  display: flex;
}
.grow {
  flex-grow: 1;
}
button {
  background: rgba(80, 0, 140, 0.8);
  color: #f5f5f5;
  border: 1px solid rgba(187, 49, 255, 0.3);
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
button:hover {
  background: rgba(128, 0, 200, 0.8);
  border-color: rgba(187, 49, 255, 0.5);
}
button:disabled {
  opacity: 0.6;
  cursor: default;
}

input, select {
  background: rgba(24, 0, 48, 0.6);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
}

/* New file input width */
#new-file-input {
  width: 8rem;
}

input::placeholder, select::placeholder {
  color: #a58ccf;
}

label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

/* Checkbox styling using accent-color for better visibility */
input[type="checkbox"] {
  accent-color: #bb31ff;
}

/* Dialog overlay for new file creation */

/*
 * Dialog overlay for new file creation.  We explicitly set the base styles
 * on the `.dialog` class but avoid setting `display`.  The display is
 * controlled by the `.hidden` modifier on the element so that toggling
 * visibility via JavaScript works correctly.  See `.dialog.hidden` below.
 */
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}

/* When a dialog also has the `hidden` class, force it to be removed from
   the flow entirely.  We use a more specific selector so that it wins
   over the base `.dialog` styles defined above. */
.dialog.hidden {
  display: none !important;
}

.dialog-content {
  background: rgba(32, 0, 56, 0.95);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  min-width: 280px;
}

.dialog-content h3 {
  margin: 0 0 0.5rem 0;
  color: #bb31ff;
}

.dialog-content input {
  width: 100%;
  background: rgba(24, 0, 48, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f5f5f5;
  padding: 0.4rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.dialog-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.dialog-buttons button {
  flex: 0 0 auto;
}

.orgBar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px;
  padding:6px 8px 4px;
  align-items:center;
}
.orgBar select{
  min-width:0;
  width:100%;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.orgBar button{
  flex-shrink:0;
  padding:3px 7px;
  font-size:11px;
  white-space:nowrap;
}

/* ── Editor container + dual panes ─────────────────────────────────────── */
#editor-section{display:flex;flex-direction:column;flex:1;overflow:hidden;min-width:0}
#editor-container{display:flex;flex:1;overflow:hidden;min-width:0}
.editor-pane{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden;background:var(--bg-main,#13062a)}
.editor-pane.hidden{display:none}
.editor-area{flex:1;resize:none;border:none;outline:none;font-family:'Fira Mono','Cascadia Code',monospace;font-size:14px;line-height:1.6;padding:12px 16px;background:transparent;color:#e8deff;tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto}
.editor-area::placeholder{color:#5a4a7a}

/* ── Tab bar ──────────────────────────────────────────────────────────────── */
.tab-bar{display:flex;overflow-x:auto;background:rgba(0,0,0,.35);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;min-height:30px;align-items:stretch;scrollbar-width:thin}
.tab-bar::-webkit-scrollbar{height:3px}
.tab-bar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.tab{display:flex;align-items:center;gap:5px;padding:0 10px;font-size:12px;cursor:pointer;border-right:1px solid rgba(255,255,255,.06);white-space:nowrap;color:#b0a0d0;user-select:none;min-height:30px}
.tab:hover{background:rgba(255,255,255,.06)}
.tab.active{background:rgba(255,255,255,.1);color:#e8deff;border-bottom:2px solid #a259ff}
.tab-name{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.tab-dirty::after{content:'•';color:#ffd65a;margin-left:3px}
.tab-close{opacity:.5;font-size:10px;padding:0 2px;border-radius:3px;line-height:1;cursor:pointer}
.tab-close:hover{opacity:1;background:rgba(255,80,80,.4)}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:2px;padding:0 12px;height:22px;font-size:11px;color:#8070a8;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;overflow:hidden}
.bc-seg{cursor:pointer;color:#b0a0d0}
.bc-seg:hover{color:#e8deff}
.bc-sep{color:#5a4a7a}
.bc-empty{color:#5a4a7a;font-style:italic}

/* ── Split handle ─────────────────────────────────────────────────────────── */
#split-handle{width:4px;background:rgba(255,255,255,.08);cursor:col-resize;flex-shrink:0;transition:background .15s}
#split-handle:hover,#split-handle.dragging{background:#a259ff}

/* ── File viewer (image/CSV/markdown) ────────────────────────────────────── */
.file-viewer{flex:1;overflow:auto;padding:16px;font-family:inherit}
.file-viewer.hidden{display:none}
.file-viewer img{max-width:100%;border-radius:8px}
.file-viewer table{border-collapse:collapse;font-size:12px}
.file-viewer th,.file-viewer td{border:1px solid rgba(255,255,255,.12);padding:4px 8px}
.file-viewer th{background:rgba(255,255,255,.06);cursor:pointer;user-select:none}

/* ── Search panel ─────────────────────────────────────────────────────────── */
#search-panel{background:rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.09);padding:8px 12px;flex-shrink:0}
.search-panel-header{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.search-panel-header input[type=text],#sp-query,#sp-replace{flex:1;min-width:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#e8deff;padding:4px 8px;font-size:12px}
.search-panel-header label{font-size:11px;color:#b0a0d0;display:flex;align-items:center;gap:3px;white-space:nowrap}
#search-results{max-height:260px;overflow-y:auto;margin-top:8px}
.search-file-group{margin-bottom:4px}
.search-file-label{font-size:11px;font-weight:600;color:#a259ff;padding:2px 4px;cursor:pointer}
.search-match{font-size:11px;padding:2px 8px;cursor:pointer;color:#c8bce8;border-radius:4px;display:flex;gap:6px;align-items:baseline}
.search-match:hover{background:rgba(255,255,255,.07)}
.search-match-pre{color:#5a4a7a}
.search-match-hl{background:#a259ff33;color:#e8deff;border-radius:2px;padding:0 2px}
.search-match-post{color:#5a4a7a}
.search-line-num{color:#5a4a7a;font-size:10px;min-width:28px;text-align:right;flex-shrink:0}

/* ── File tree rows ───────────────────────────────────────────────────────── */
#file-tree ul{list-style:none;margin:0;padding:0}
#file-tree li{margin:0}
.tree-row{display:flex;align-items:center;gap:5px;padding:3px 8px;font-size:12.5px;cursor:pointer;border-radius:5px;color:#c8bce8;user-select:none;white-space:nowrap}
.tree-row:hover{background:rgba(255,255,255,.06)}
.tree-row.selected{background:rgba(162,89,255,.22);color:#e8deff}
.tree-icon{font-size:12px;width:14px;text-align:center;flex-shrink:0}
.tree-name{overflow:hidden;text-overflow:ellipsis;flex:1}
.tree-cb{flex-shrink:0}
.tree-arrow{font-size:9px;opacity:.5;flex-shrink:0;transition:transform .15s}
.tree-arrow.open{transform:rotate(90deg)}
.tree-folder{font-weight:600;color:#ffd65a}
.tree-children{padding-left:14px}
.tree-children.hidden{display:none}

/* ── File tree drag-and-drop ─────────────────────────────────────────────── */
.tree-row.tree-dragging{opacity:.4;pointer-events:none}
.tree-row.tree-drop-above{border-top:2px solid #a259ff}
.tree-row.tree-drop-below{border-bottom:2px solid #a259ff}
.tree-row.tree-drop-folder{background:rgba(162,89,255,.28)!important;border-radius:5px}

/* ── Toast notifications ─────────────────────────────────────────────────── */
#toast-container{position:fixed;bottom:22px;right:22px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:rgba(30,12,50,.95);border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:10px 18px;font-size:13px;color:#e8deff;box-shadow:0 4px 24px #0009;pointer-events:none;animation:toastIn .25s ease;max-width:380px}
.toast.success{border-color:#a259ff66;color:#d0b8ff}
.toast.error{border-color:#ff506688;color:#ffb0b8}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── Context menu ─────────────────────────────────────────────────────────── */
#ctx-menu{position:fixed;z-index:9990;background:rgba(22,8,42,.97);border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:4px 0;min-width:160px;box-shadow:0 8px 32px #0009;font-size:13px}
.ctx-item{padding:7px 18px;cursor:pointer;color:#c8bce8;white-space:nowrap;border-radius:6px;margin:0 4px}
.ctx-item:hover{background:rgba(162,89,255,.22);color:#e8deff}
.ctx-sep{border:0;border-top:1px solid rgba(255,255,255,.09);margin:4px 0}

/* ── Command palette ─────────────────────────────────────────────────────── */
#cmd-palette{align-items:flex-start;padding-top:80px}
.cmd-palette-box{width:560px;max-width:96vw;background:rgba(22,8,42,.98);border:1px solid rgba(162,89,255,.35);border-radius:14px;box-shadow:0 16px 48px #000c;overflow:hidden}
#cmd-input{width:100%;box-sizing:border-box;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.09);color:#e8deff;font-size:15px;padding:14px 18px;outline:none}
.cmd-list{max-height:380px;overflow-y:auto}
.cmd-item{padding:8px 18px;cursor:pointer;color:#c8bce8;font-size:13px;display:flex;justify-content:space-between;gap:12px}
.cmd-item:hover,.cmd-item.selected{background:rgba(162,89,255,.22);color:#e8deff}
.cmd-item kbd{font-size:10px;color:#8070a8;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:1px 5px;white-space:nowrap}
.cmd-group-header{padding:5px 18px 3px;font-size:10px;color:#6050a0;text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* ── Settings modal ──────────────────────────────────────────────────────── */
.settings-section{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.settings-section label{display:flex;align-items:center;gap:10px;font-size:13px;color:#c8bce8}
.settings-section input[type=number]{width:64px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#e8deff;padding:3px 8px;font-size:13px}
.settings-section select{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#e8deff;padding:3px 8px;font-size:13px}
#settings-modal .layout-preset-block{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:8px;
}
#settings-modal .layout-preset-title{
  font-size:12px;
  color:var(--muted);
}
#settings-modal .layout-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#settings-modal .layout-preset-help{
  font-size:11px;
  color:var(--muted);
}
.shortcuts-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.shortcuts-table td{padding:4px 8px;color:#b0a0d0;border-bottom:1px solid rgba(255,255,255,.05)}
.shortcuts-table td:first-child{font-family:monospace;color:#a259ff;width:140px}

/* ── Keyboard Shortcuts full modal table ────────────────────────────────── */
.shortcuts-table-full{font-size:13px;max-height:380px;display:block;overflow-y:auto}
.shortcuts-table-full th{text-align:left;padding:6px 10px;color:#7060a0;font-size:11px;text-transform:uppercase;letter-spacing:.07em;position:sticky;top:0;background:#100820}
.shortcuts-table-full td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.shortcuts-table-full td:first-child{width:auto}
.shortcuts-table-full kbd{background:rgba(162,89,255,.15);border:1px solid rgba(162,89,255,.35);border-radius:5px;padding:2px 7px;font-family:monospace;font-size:12px;color:#c9a0ff;white-space:nowrap}

/* ── Go-to-Symbol modal ─────────────────────────────────────────────────── */
.goto-symbol-list{max-height:320px;overflow-y:auto;margin-top:10px;border:1px solid rgba(255,255,255,.08);border-radius:8px}
.goto-sym-row{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;color:#c8bce8;font-size:13px}
.goto-sym-row:hover,.goto-sym-row.selected{background:rgba(162,89,255,.22);color:#e8deff}
.goto-sym-kind{font-family:monospace;font-size:11px;color:#a259ff;background:rgba(162,89,255,.15);border-radius:4px;padding:1px 5px;min-width:20px;text-align:center;flex-shrink:0}
.goto-sym-name{flex:1;font-family:monospace}
.goto-sym-line{font-size:11px;color:#6050a0;flex-shrink:0}
.goto-sym-empty{padding:16px;text-align:center;color:#5040a0;font-size:13px}

/* ── Drag-over indicator ─────────────────────────────────────────────────── */
body.drag-over::after{content:'Drop files here';position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#a259ff;background:rgba(10,0,25,.75);border:3px dashed #a259ff;z-index:9999;pointer-events:none}

/* ── Pane flex layout for outline / problems ─────────────────────────────── */
#outline-pane,#problems-pane{display:flex;flex-direction:column;padding:0;overflow:hidden}

/* ── Pane toolbar (outline / problems) ───────────────────────────────────── */
.pane-toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.pane-toolbar input,.pane-toolbar select{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#e8deff;padding:3px 8px;font-size:12px;outline:none}
.pane-toolbar input:focus,.pane-toolbar select:focus{border-color:#a259ff}
.toolbar-sm-btn{background:rgba(255,80,102,.15);border:1px solid rgba(255,80,102,.25);color:#ffb0b8;border-radius:5px;padding:3px 8px;font-size:11px;cursor:pointer;white-space:nowrap}
.toolbar-sm-btn:hover{background:rgba(255,80,102,.3)}

/* ── Problems badge ─────────────────────────────────────────────────────── */
.badge{display:inline-block;background:#ff5066;color:#fff;font-size:9px;font-weight:700;border-radius:8px;padding:1px 5px;margin-left:4px;vertical-align:middle;min-width:14px;text-align:center;line-height:14px}
.badge.hidden{display:none}

/* ── Outline panel ───────────────────────────────────────────────────────── */
#outline-list{flex:1;overflow-y:auto;padding:4px 0}
.outline-row{display:flex;align-items:center;gap:7px;padding:4px 10px;cursor:pointer;border-radius:5px;margin:0 4px;font-size:12px;white-space:nowrap;overflow:hidden}
.outline-row:hover{background:rgba(162,89,255,.15)}
.outline-icon{font-size:11px;font-weight:700;opacity:.85;min-width:16px;text-align:center}
.outline-name{flex:1;overflow:hidden;text-overflow:ellipsis;color:#d8c8f8}
.outline-line{font-size:10px;color:#6050a0;flex-shrink:0}
.outline-empty{padding:20px 12px;color:#6050a0;font-size:12px;text-align:center}
#outline-filter{font-size:12px}

/* ── Problems panel ──────────────────────────────────────────────────────── */
#problems-list{flex:1;overflow-y:auto;padding:4px 0}
.problems-file-group{margin-bottom:4px}
.problems-file-label{padding:5px 10px;font-size:11px;color:#8070b0;font-weight:600;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.03);margin:0 4px;border-radius:4px}
.problems-count{font-size:10px;background:rgba(255,255,255,.08);padding:1px 6px;border-radius:8px}
.problem-row{display:flex;align-items:flex-start;gap:8px;padding:4px 12px;cursor:pointer;border-radius:5px;margin:0 4px;font-size:12px}
.problem-row:hover{background:rgba(162,89,255,.12)}
.problem-icon{font-size:13px;flex-shrink:0;margin-top:1px}
.problem-msg{flex:1;color:#d0c0f0;line-height:1.4}
.problem-loc{font-size:10px;color:#6050a0;white-space:nowrap;flex-shrink:0}
.problem-src{font-size:10px;color:#6050a0;margin-top:1px}
.problems-empty{padding:20px 12px;color:#6050a0;font-size:12px;text-align:center}

/* ── Templates modal ─────────────────────────────────────────────────────── */
.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;max-height:420px;overflow-y:auto;padding:4px 2px}
.template-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px;cursor:pointer;transition:border-color .15s,background .15s;display:flex;flex-direction:column;gap:5px}
.template-card:hover{border-color:#a259ff;background:rgba(162,89,255,.12)}
.template-emoji{font-size:24px;margin-bottom:2px}
.template-name{font-size:14px;font-weight:700;color:#f0e8ff}
.template-desc{font-size:11px;color:#9080c0;line-height:1.4;flex:1}
.template-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.template-tags .tag{background:rgba(162,89,255,.2);color:#c8a8ff;font-size:10px;padding:1px 6px;border-radius:8px}
.template-file-count{font-size:10px;color:#6050a0;margin-top:4px}
.template-empty{padding:32px 0;color:#6050a0;font-size:13px;text-align:center}
.user-template{border-color:rgba(255,190,80,.3) !important}
.user-template:hover{border-color:#ffbe50 !important;background:rgba(255,190,80,.08) !important}
.tpl-user-badge{font-size:9px;background:rgba(255,190,80,.2);color:#ffbe50;border-radius:6px;padding:1px 5px;vertical-align:middle;margin-left:4px}
.tpl-delete-btn{margin-top:6px;background:rgba(255,80,80,.15);border:none;color:#ff9090;border-radius:5px;padding:3px 8px;font-size:10px;cursor:pointer;width:100%}
.tpl-delete-btn:hover{background:rgba(255,80,80,.35)}
#templates-search{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#e8deff;padding:7px 12px;font-size:13px;outline:none;box-sizing:border-box}
#templates-search:focus{border-color:#a259ff}

/* ── Paste import modal ──────────────────────────────────────────────────── */
.paste-modal-textarea{width:100%;height:220px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#e8deff;font-family:monospace;font-size:12px;padding:10px;resize:vertical;outline:none;box-sizing:border-box}
.paste-modal-textarea:focus{border-color:#a259ff}

/* ── Snippet manager modal ───────────────────────────────────────────────── */
.snippets-layout{display:flex;gap:16px;min-height:360px;max-height:60vh}
.snippets-list-col{flex:0 0 280px;display:flex;flex-direction:column;gap:6px}
.snippets-form-col{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
#snippets-search{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#e8deff;padding:5px 10px;font-size:12px;outline:none;box-sizing:border-box;width:100%}
#snippets-search:focus{border-color:#a259ff}
.snippets-list{flex:1;overflow-y:auto;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(0,0,0,.2)}
.snippet-row{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.05);cursor:default}
.snippet-row.builtin{opacity:.7}
.snippet-row:hover{background:rgba(162,89,255,.1)}
.snip-prefix{font-family:monospace;color:#a259ff;font-size:12px;min-width:60px;font-weight:600}
.snip-lang{font-size:10px;color:#6050a0;background:rgba(255,255,255,.06);border-radius:4px;padding:1px 5px;white-space:nowrap}
.snip-name{flex:1;color:#d0c0f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snip-edit-btn{font-size:10px;background:rgba(162,89,255,.2);border:none;color:#c8a8ff;border-radius:4px;padding:2px 6px;cursor:pointer;margin-left:auto}
.snip-edit-btn:hover{background:rgba(162,89,255,.4)}
.snip-del-btn{font-size:10px;background:rgba(255,80,80,.15);border:none;color:#ff9090;border-radius:4px;padding:2px 6px;cursor:pointer}
.snip-del-btn:hover{background:rgba(255,80,80,.35)}
.snip-label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:#9080c0}
.snip-label input,.snip-label select{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#e8deff;padding:5px 9px;font-size:12px;outline:none}
.snip-label input:focus,.snip-label select:focus{border-color:#a259ff}
.snip-body-area{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#e8deff;font-family:monospace;font-size:12px;padding:8px;resize:vertical;outline:none;min-height:100px;line-height:1.5}
.snip-body-area:focus{border-color:#a259ff}

/* ── Format-on-save indicator ────────────────────────────────────────────── */
.status-fmt{font-size:10px;color:#a259ff;margin-left:4px;opacity:.7}

/* ── Status bar ─────────────────────────────────────────────────────────── */
#status-bar{display:flex;align-items:center;gap:8px;padding:2px 12px;background:rgba(0,0,0,.45);border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#9080c0;min-height:22px;flex-shrink:0;user-select:none}
#status-bar .status-sep{opacity:.35}
#status-bar .status-right{margin-left:auto}
#status-dirty{color:#e6a020;font-size:11px}
#status-pos,#status-lang{cursor:default}

body.undock-mode #toolbar{
  padding: 0.35rem 0.6rem;
  gap: 0.35rem;
}
body.undock-mode #toolbar > :not(#logo):not(#authBtn):not(#userChip){
  display: none !important;
}
body.undock-mode main{height:100%;}

/* ── Apply-patch modal ───────────────────────────────────────────────────── */
.apply-patch-preview{margin-top:8px;max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.patch-file-block{border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;background:rgba(0,0,0,.25)}
.patch-file-header{padding:5px 10px;font-size:12px;background:rgba(162,89,255,.12);color:#c8a8ff;display:flex;align-items:center;gap:8px}
.patch-meta{font-size:10px;opacity:.6;margin-left:auto}
.patch-diff-preview{margin:0;padding:8px 10px;font-size:11px;line-height:1.6;overflow-x:auto;max-height:180px;overflow-y:auto;color:#d0c8f0;font-family:monospace;white-space:pre}
.pdiff-del{color:#ff8080;display:block}
.pdiff-add{color:#80e080;display:block}
.patch-parse-empty{padding:12px;font-size:12px;color:#9080c0;text-align:center;opacity:.7}

/* ── User template cards ─────────────────────────────────────────────────── */
.user-template{border:1.5px solid #a259ff!important;position:relative}
.cloud-template{border:1.5px solid #20a0e6!important;position:relative}
.tpl-user-badge{position:absolute;top:6px;right:6px;font-size:9px;background:rgba(162,89,255,.25);color:#c8a8ff;border-radius:4px;padding:1px 6px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.tpl-org-badge{font-size:9px;background:rgba(32,160,230,.2);color:#80d0ff;border-radius:4px;padding:1px 6px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-left:5px;vertical-align:middle}
.tpl-delete-btn{position:absolute;bottom:6px;right:6px;font-size:10px;background:rgba(255,80,80,.15);border:none;color:#ff9090;border-radius:4px;padding:2px 7px;cursor:pointer;z-index:2}
.tpl-delete-btn:hover{background:rgba(255,80,80,.35)}

/* ── Template modal tabs ─────────────────────────────────────────────────── */
.tpl-tab-bar{display:flex;gap:4px;margin-bottom:2px}
.tpl-tab-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#9080c0;font-size:12px;padding:5px 14px;cursor:pointer;transition:background .15s,color .15s}
.tpl-tab-btn:hover{background:rgba(162,89,255,.15);color:#c8a8ff}
.tpl-tab-btn.active{background:rgba(162,89,255,.25);color:#fff;border-color:#a259ff}


/* ── GitHub Panel ────────────────────────────────────────────────────────── */
.gh-section{padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.gh-section.hidden{display:none}
.gh-hero{font-size:20px;font-weight:700;color:#e0d0ff;letter-spacing:.02em}
.gh-hint{font-size:12px;color:#7060a0;margin:0;line-height:1.5}
.gh-repo-header{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gh-repo-name{font-size:13px;font-weight:600;color:#e0d0ff;font-family:monospace;word-break:break-all}
.gh-branch-chip{font-size:10px;background:rgba(162,89,255,.2);color:#c8a8ff;border-radius:20px;padding:2px 9px;font-weight:600;white-space:nowrap}
.gh-status-bar{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.2);border-radius:8px;padding:6px 10px}
.gh-status-text{flex:1;font-size:12px;color:#9080c0}
.gh-status-text.ok{color:#60d080}
.gh-status-text.behind{color:#f0a040}
.gh-status-text.err{color:#ff7070}
.gh-icon-btn{background:none;border:none;color:#7060a0;cursor:pointer;font-size:14px;padding:0 4px;line-height:1}
.gh-icon-btn:hover{color:#c8a8ff}
.gh-actions{display:flex;flex-direction:column;gap:7px}
.gh-commit-row{display:flex;gap:6px}
.gh-commit-input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:7px;color:#e0d0ff;font-size:12px;padding:6px 10px;outline:none}
.gh-commit-input:focus{border-color:#a259ff}
.gh-primary-btn{background:linear-gradient(135deg,#a259ff,#7c3aed);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:600;padding:9px 18px;cursor:pointer;transition:opacity .15s}
.gh-primary-btn:hover{opacity:.85}
.gh-primary-btn:disabled{opacity:.4;cursor:not-allowed}
.gh-secondary-btn{background:rgba(162,89,255,.12);border:1px solid rgba(162,89,255,.3);border-radius:8px;color:#c8a8ff;font-size:13px;font-weight:600;padding:8px 18px;cursor:pointer;transition:background .15s}
.gh-secondary-btn:hover{background:rgba(162,89,255,.22)}
.gh-secondary-btn:disabled{opacity:.4;cursor:not-allowed}
.gh-danger-btn{background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.25);border-radius:7px;color:#ff9090;font-size:11px;padding:5px 11px;cursor:pointer;transition:background .15s}
.gh-danger-btn:hover{background:rgba(255,80,80,.25)}
.gh-progress{display:flex;flex-direction:column;gap:5px}
.gh-progress.hidden{display:none}
.gh-progress-bar{height:6px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden}
.gh-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#a259ff,#7c3aed);border-radius:6px;transition:width .3s}
.gh-progress-label{font-size:11px;color:#7060a0;text-align:center}
.gh-footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px;flex-wrap:wrap;gap:6px}
.gh-link{font-size:11px;color:#7060a0;text-decoration:none}
.gh-link:hover{color:#c8a8ff}
/* Connect modal */
.gh-modal-hint{font-size:12px;color:#7060a0;margin:0 0 10px;line-height:1.5}
.gh-modal-status{font-size:12px;min-height:18px;margin-top:4px}
.gh-modal-status.ok{color:#60d080}
.gh-modal-status.err{color:#ff7070}
/* GitHub badge on tab */
#github-badge{background:#f0a040;color:#1a1030}

/* ═══════════════════════════════════════════════════════════════════════════
   THEMES
   data-theme="dark" is the default (existing variables)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="ultra-dark"] {
  --bg:         #0a0a0e;
  --bg2:        #111118;
  --bg3:        #18181f;
  --border:     rgba(255,255,255,.06);
  --txt:        #adadc8;
  --txt2:       #6a6a8a;
  --accent:     #7040c0;
  --accent2:    #5030a0;
  --sidebar-bg: #0d0d14;
}
[data-theme="ultra-dark"] body,
[data-theme="ultra-dark"] #ide-root{background:var(--bg);color:var(--txt)}
[data-theme="ultra-dark"] .sidebar{background:var(--sidebar-bg)}
[data-theme="ultra-dark"] .top-bar{background:var(--bg2);border-color:var(--border)}
[data-theme="ultra-dark"] .editor-area{background:var(--bg3);color:var(--txt)}

[data-theme="purple-gold"] {
  --bg:         #12091f;
  --bg2:        #1a0e2e;
  --bg3:        #22113e;
  --border:     rgba(180,130,255,.15);
  --txt:        #e8d8ff;
  --txt2:       #9070c0;
  --accent:     #c080ff;
  --accent2:    #f0b030;
  --sidebar-bg: #16092a;
}
[data-theme="purple-gold"] body,
[data-theme="purple-gold"] #ide-root{background:var(--bg);color:var(--txt)}
[data-theme="purple-gold"] .sidebar{background:var(--sidebar-bg)}
[data-theme="purple-gold"] .top-bar{background:var(--bg2);border-bottom:1px solid var(--accent2)}
[data-theme="purple-gold"] .editor-area{background:var(--bg3);color:var(--txt)}
[data-theme="purple-gold"] .tab{border-color:var(--accent)}
[data-theme="purple-gold"] .tab.active{background:var(--bg3);color:var(--accent)}
[data-theme="purple-gold"] button,.top-btn{border-color:var(--accent2);color:var(--accent2)}

/* ═══════════════════════════════════════════════════════════════════════════
   PREVIEW TOOLBAR + DEVICE EMULATION + CONSOLE
   ═══════════════════════════════════════════════════════════════════════════ */
#preview-toolbar{
  display:flex;align-items:center;gap:6px;padding:5px 8px;
  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap;
}
#preview-entry{
  flex:1;min-width:80px;max-width:180px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:6px;color:#e0d0ff;font-size:12px;padding:3px 6px;outline:none;
}
#preview-entry:focus{border-color:#a259ff}
.preview-device-btns{display:flex;gap:3px}
.dev-btn{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:5px;color:#9080a0;font-size:13px;padding:3px 8px;cursor:pointer;
  transition:background .15s,color .15s;
}
.dev-btn:hover{background:rgba(162,89,255,.18);color:#c8a8ff}
.dev-btn.active{background:rgba(162,89,255,.25);border-color:#a259ff;color:#e0d0ff}
#preview-console-toggle,#preview-refresh-btn{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:5px;color:#9080a0;font-size:12px;padding:3px 9px;cursor:pointer;
}
#preview-console-toggle:hover,#preview-refresh-btn:hover{color:#c8a8ff;border-color:#a259ff}

#preview-frame-wrap{
  flex:1;overflow:hidden;display:flex;align-items:stretch;
  transition:max-width .25s;
  min-height: 0;
}
#preview-frame{width:100%;height:100%;border:none;background:#fff}

/* Console panel */
#preview-console{
  height:180px;display:flex;flex-direction:column;
  background:#0d0d14;border-top:1px solid rgba(255,255,255,.08);
}
#preview-console.hidden{display:none}
#preview-console-toolbar{
  display:flex;align-items:center;gap:8px;padding:3px 8px;
  background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.06);
  font-size:11px;color:#7060a0;
}
#preview-console-clear{
  background:none;border:none;color:#7060a0;cursor:pointer;font-size:11px;
}
#preview-console-clear:hover{color:#c8a8ff}
#preview-console-log{
  flex:1;overflow-y:auto;padding:4px 8px;font-family:monospace;
  font-size:12px;line-height:1.5;
}
.console-line{padding:1px 0;white-space:pre-wrap;word-break:break-all}
.console-log{color:#c8c8e0}
.console-info{color:#60a8e0}
.console-warn{color:#e0c050;background:rgba(200,160,0,.08)}
.console-error{color:#ff7070;background:rgba(255,60,60,.08)}

/* ═══════════════════════════════════════════════════════════════════════════
   SECRETS BANNER
   ═══════════════════════════════════════════════════════════════════════════ */
.secrets-banner{
  display:flex;align-items:center;gap:8px;
  background:rgba(220,60,60,.18);border:1px solid rgba(220,60,60,.4);
  border-radius:6px;margin:6px 8px;padding:7px 10px;font-size:12px;color:#ffaaaa;
}
.secrets-banner.hidden{display:none}
.secrets-banner span{flex:1}
#secrets-banner-close{
  background:none;border:none;color:#ff9090;cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px;
}
#secrets-banner-close:hover{color:#fff}

/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING CHECKLIST MODAL
   Overrides .dialog which is fullscreen — onboarding is a corner panel
   ═══════════════════════════════════════════════════════════════════════════ */
#onboarding-modal {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 290px !important;
  height: auto !important;
  display: block !important;
  background: #1a1030;
  border: 1px solid rgba(162,89,255,.35);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 600;
}
#onboarding-modal.hidden { display: none !important; }
.ob-header{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.ob-header h3{margin:0;font-size:14px;color:#e0d0ff}
#onboarding-close{
  background:none;border:none;color:#7060a0;cursor:pointer;font-size:16px;line-height:1;
}
#onboarding-close:hover{color:#c8a8ff}
#ob-progress{font-size:11px;color:#7060a0;margin:0 0 10px;text-align:right}
.onboarding-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.onboard-item{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:#b0a0d0;padding:6px 8px;border-radius:7px;
  background:rgba(255,255,255,.04);transition:background .15s;
}
.onboard-item .ob-check{
  width:18px;height:18px;border-radius:50%;border:2px solid rgba(162,89,255,.4);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:11px;transition:background .2s,border-color .2s;
}
.onboard-item[data-done="1"]{color:#70d090}
.onboard-item[data-done="1"] .ob-check{
  background:#409060;border-color:#60d090;
}
.onboard-item[data-done="1"] .ob-check::after{content:'✓';color:#fff}


/* ═══════════════════════════════════════════════════════════════════════════
   DIFF VIEWER
   ═══════════════════════════════════════════════════════════════════════════ */
.diff-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2)}
.diff-toolbar-title{font-size:12px;font-weight:600;color:#b0a0d0}
.diff-mode-btns{display:flex;gap:4px}
.diff-mode-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#7060a0;font-size:11px;padding:3px 10px;cursor:pointer}
.diff-mode-btn.active{background:rgba(162,89,255,.2);border-color:#a259ff;color:#e0d0ff}
.diff-commit-list{overflow-y:auto;flex:0 0 auto;max-height:220px;border-bottom:1px solid rgba(255,255,255,.08)}
.diff-commit-row{padding:9px 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .12s}
.diff-commit-row:hover{background:rgba(162,89,255,.1)}
.diff-commit-row.selected{background:rgba(162,89,255,.18);border-left:2px solid #a259ff}
.diff-commit-msg{font-size:12px;font-weight:600;color:#d0c0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diff-commit-meta{font-size:10px;color:#7060a0;margin-top:2px}
.diff-detail{overflow-y:auto;flex:1;padding-bottom:1rem}
.diff-detail.hidden{display:none}
.diff-revert-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.06);gap:8px}
.diff-commit-label{font-size:12px;color:#b0a0d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diff-revert-btn{background:rgba(255,160,80,.1);border:1px solid rgba(255,160,80,.3);border-radius:6px;color:#f0b030;font-size:11px;padding:4px 10px;cursor:pointer;flex-shrink:0}
.diff-revert-btn:hover{background:rgba(255,160,80,.25)}
.diff-file-section{margin:8px 10px 0}
.diff-file-header{font-size:11px;font-weight:600;color:#9080c0;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:6px}
.diff-file-icon{opacity:.6}
.diff-table-wrap,.diff-split-wrap{overflow-x:auto}
.diff-split-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0}
.diff-table{width:100%;border-collapse:collapse;font-family:monospace;font-size:11px;table-layout:fixed}
.diff-split{width:100%;border-right:1px solid rgba(255,255,255,.06)}
.diff-ln{width:36px;min-width:36px;text-align:right;padding:0 6px;color:#4a3a6a;user-select:none;background:rgba(0,0,0,.2);border-right:1px solid rgba(255,255,255,.04)}
.diff-code{padding:1px 8px;white-space:pre-wrap;word-break:break-all;color:#c8c0e0}
.diff-add{background:rgba(60,160,90,.12)}
.diff-add .diff-code{color:#80d0a0}
.diff-del{background:rgba(200,60,60,.12)}
.diff-del .diff-code{color:#f09090}
.diff-ctx .diff-code{color:#8070a0}
.diff-hunk-header td{background:rgba(60,80,160,.12);color:#7080d0;padding:2px 8px;font-size:10px}
.diff-empty-line .diff-code{background:rgba(0,0,0,.15)}
.diff-empty{color:#5040a0;padding:1.5rem;text-align:center;font-size:12px}

/* History pane flex layout */
#history-pane{display:flex;flex-direction:column;overflow:hidden}
#history-pane:not(.hidden){display:flex}

/* ═══════════════════════════════════════════════════════════════════════════
   PASSWORD RESET MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.link-btn{background:none;border:none;color:#8060d0;cursor:pointer;font-size:12px;text-decoration:underline;padding:0}
.link-btn:hover{color:#c8a8ff}

/* ═══════════════════════════════════════════════════════════════════════════
   DEMO PROJECT LOADER
   ═══════════════════════════════════════════════════════════════════════════ */
.demo-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto}
.demo-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px 14px;transition:background .15s}
.demo-card:hover{background:rgba(162,89,255,.1);border-color:rgba(162,89,255,.3)}
.demo-card-emoji{font-size:1.8rem;flex-shrink:0;width:40px;text-align:center}
.demo-card-info{flex:1;min-width:0}
.demo-card-name{font-size:13px;font-weight:600;color:#e0d0ff;margin-bottom:3px}
.demo-card-desc{font-size:11px;color:#8070a0}
.demo-load-btn{background:linear-gradient(135deg,#a259ff,#7c3aed);border:none;border-radius:7px;color:#fff;font-size:12px;font-weight:600;padding:6px 14px;cursor:pointer;flex-shrink:0;transition:opacity .15s}
.demo-load-btn:hover{opacity:.85}

/* ═══════════════════════════════════════════════════════════════════════════
   AI PLAN MODE INDICATOR
   ═══════════════════════════════════════════════════════════════════════════ */
.chat-plan-badge{display:inline-block;background:rgba(240,176,48,.15);border:1px solid rgba(240,176,48,.4);border-radius:5px;color:#f0b030;font-size:10px;font-weight:700;padding:2px 8px;margin-left:6px;vertical-align:middle}
.chatMsg.plan-msg .chatMeta::after{content:'PLAN';background:rgba(240,176,48,.15);border:1px solid rgba(240,176,48,.35);border-radius:4px;color:#f0b030;font-size:9px;font-weight:700;padding:1px 6px;margin-left:6px;vertical-align:middle}
.plan-execute-btn{background:linear-gradient(135deg,#f0b030,#c87820);border:none;border-radius:7px;color:#1a0e00;font-size:12px;font-weight:700;padding:5px 14px;cursor:pointer;transition:opacity .15s}
.plan-execute-btn:hover{opacity:.85}

/* ═══════════════════════════════════════════════════════════════════════════
   PRESENCE BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.presence-bar{display:flex;align-items:center;gap:4px;padding:0 6px;min-width:24px}
.presence-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;cursor:default;border:2px solid rgba(255,255,255,.2);flex-shrink:0;position:relative}
.presence-avatar:hover::after{content:attr(title);position:absolute;top:32px;left:50%;transform:translateX(-50%);background:#1a1120;border:1px solid rgba(162,89,255,.4);border-radius:6px;padding:4px 8px;font-size:11px;white-space:nowrap;z-index:200;pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════════════
   WATCH MODE BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */
#watch-mode-btn{font-size:11px;padding:4px 10px}
#watch-mode-btn.active{background:rgba(96,208,128,.15);border-color:rgba(96,208,128,.5);color:#60d080}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT MODE CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */
.chatModes{display:flex;align-items:center;gap:6px;padding:4px 6px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.chatModes select{font-size:11px;padding:3px 6px;background:#1e1530;color:#c4b5fd;border:1px solid rgba(162,89,255,.3);border-radius:5px}
.chatModes label{font-size:11px;display:flex;align-items:center;gap:4px;white-space:nowrap}
#loop-mode-btn{font-size:11px;padding:3px 9px}
#loopCount{background:#1e1530;border:1px solid rgba(162,89,255,.3);color:#c4b5fd;border-radius:5px;padding:3px 5px;font-size:11px}
#loop-status{color:#8070a0;font-size:11px;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════════════
   EMAIL VERIFY BANNER
   ═══════════════════════════════════════════════════════════════════════════ */
.email-verify-banner{background:rgba(240,176,48,.12);border-bottom:1px solid rgba(240,176,48,.35);color:#f0c040;font-size:12px;padding:6px 12px;display:flex;align-items:center;gap:8px}
.email-verify-banner .link-btn{color:#f0c040;text-decoration:underline;font-size:12px}
.email-verify-banner button:last-child{margin-left:auto;background:none;border:none;color:#f0c040;cursor:pointer;font-size:14px;line-height:1}

/* ═══════════════════════════════════════════════════════════════════════════
   SCM: BRANCH + STASH
   ═══════════════════════════════════════════════════════════════════════════ */
.scm-top{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.scm-top select{flex:1;font-size:12px;background:#1e1530;color:#c4b5fd;border:1px solid rgba(162,89,255,.3);border-radius:5px;padding:4px 6px}
.scm-stash-bar{display:flex;gap:6px;padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.scm-stash-bar input{flex:1;font-size:12px}
.scm-divider{border:none;border-top:1px solid rgba(255,255,255,.06);margin:0}
.stash-list{padding:4px 0;overflow-y:auto;max-height:160px}
.stash-item{display:flex;align-items:center;gap:6px;padding:5px 10px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px}
.stash-item-msg{flex:1;color:#c4b5fd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stash-item-time{color:#6050a0;font-size:10px;white-space:nowrap}
.stash-pop-btn,.stash-drop-btn{font-size:10px;padding:2px 7px}
.branch-list{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto;margin-top:10px}
.branch-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.03)}
.branch-item.active-branch{background:rgba(162,89,255,.12);border:1px solid rgba(162,89,255,.3)}
.branch-item-name{flex:1;font-size:12px;color:#c4b5fd;font-weight:500}
.branch-item-name.active-branch-label::after{content:'✓';margin-left:6px;color:#a259ff}
.branch-switch-btn,.branch-delete-btn{font-size:10px;padding:2px 7px}
.branch-create-row{display:flex;gap:8px;margin-bottom:10px}
.branch-create-row input{flex:1}

/* ═══════════════════════════════════════════════════════════════════════════
   BLAME PANE
   ═══════════════════════════════════════════════════════════════════════════ */
.blame-pane{position:absolute;inset:0;background:#0d0914;z-index:50;display:flex;flex-direction:column;overflow:hidden}
.blame-pane.hidden{display:none}
.blame-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;font-weight:600;color:#c4b5fd}
#blame-close-btn{background:none;border:none;color:#8070a0;cursor:pointer;font-size:18px;line-height:1}
.blame-content{flex:1;overflow:auto;font-family:monospace;font-size:12px}
.blame-table{width:100%;border-collapse:collapse}
.blame-table tr{border-bottom:1px solid rgba(255,255,255,.04)}
.blame-table tr:hover{background:rgba(162,89,255,.06)}
.blame-meta{color:#6050a0;padding:3px 8px;white-space:nowrap;user-select:none;font-size:11px;width:240px;vertical-align:top}
.blame-lineno{color:#4a3860;padding:3px 6px;text-align:right;user-select:none;width:40px}
.blame-code{color:#d0c0f0;padding:3px 8px 3px 0;white-space:pre;word-break:break-all}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTIVITY FEED
   ═══════════════════════════════════════════════════════════════════════════ */
.activity-feed{overflow-y:auto;flex:1;padding:4px 0}
.activity-item{display:flex;gap:8px;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.04);align-items:flex-start;font-size:12px}
.activity-icon{font-size:14px;flex-shrink:0;width:20px;text-align:center}
.activity-body{flex:1;min-width:0}
.activity-who{font-weight:600;color:#c4b5fd}
.activity-action{color:#9080c0}
.activity-time{color:#5a4890;font-size:10px;margin-top:2px}
#activity-refresh-btn{font-size:11px;padding:2px 8px}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARE MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.share-link-output{display:flex;gap:6px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(162,89,255,.3);border-radius:7px;padding:6px 10px}
.share-link-output input{flex:1;background:none;border:none;color:#c4b5fd;font-family:monospace;font-size:12px;outline:none}
#share-link-copy{font-size:11px;padding:3px 9px}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSIONS LIST
   ═══════════════════════════════════════════════════════════════════════════ */
.sessions-list{display:flex;flex-direction:column;gap:6px;max-height:400px;overflow-y:auto}
.session-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:8px 12px}
.session-item.current-session{border-color:rgba(162,89,255,.4);background:rgba(162,89,255,.08)}
.session-device{font-size:12px;color:#c4b5fd;flex:1}
.session-meta{font-size:11px;color:#6050a0}
.session-revoke-btn{font-size:11px;padding:3px 9px;background:rgba(255,80,80,.1);border-color:rgba(255,80,80,.3);color:#ff8080}
.session-revoke-btn:hover{background:rgba(255,80,80,.2)}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.admin-tab-bar{display:flex;gap:4px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px}
.admin-tab-btn{background:none;border:none;border-bottom:2px solid transparent;color:#8070a0;font-size:13px;font-weight:600;padding:6px 14px;cursor:pointer;transition:color .15s,border-color .15s}
.admin-tab-btn.active{color:#c4b5fd;border-bottom-color:#a259ff}
.admin-tab-pane{min-height:240px}
.admin-usage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:8px}
.admin-usage-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px 14px;text-align:center}
.admin-usage-card-value{font-size:1.5rem;font-weight:700;color:#c4b5fd;line-height:1.1}
.admin-usage-card-label{font-size:11px;color:#6050a0;margin-top:4px}
#admin-kill-switch-btn{font-size:11px;padding:3px 10px}
.admin-table{width:100%;border-collapse:collapse;font-size:12px}
.admin-table th{color:#8070a0;font-weight:600;padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.admin-table td{color:#c4b5fd;padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.04)}
.admin-table tr:hover td{background:rgba(162,89,255,.05)}
.invite-link-row{display:flex;gap:6px;align-items:center}
.invite-link-row input{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(162,89,255,.3);border-radius:6px;color:#c4b5fd;font-family:monospace;font-size:12px;padding:4px 8px}
.webhook-secret-display{font-family:monospace;font-size:11px;color:#60d080;word-break:break-all;background:rgba(96,208,128,.06);border:1px solid rgba(96,208,128,.2);border-radius:6px;padding:6px 10px;margin-top:8px}

/* ═══════════════════════════════════════════════════════════════════════════
   TASKS / ISSUES
   ═══════════════════════════════════════════════════════════════════════════ */
.task-filter-bar{display:flex;gap:6px;padding:8px 8px 4px;flex-shrink:0}
.task-filter-bar select{flex:1;font-size:11px;padding:3px 6px}
.tasks-list{flex:1;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:6px}
.task-card{transition:background .15s}
.task-card:hover{background:rgba(162,89,255,.08)!important}

/* ═══════════════════════════════════════════════════════════════════════════
   HELP MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
#help-modal .modal-dialog{background:#13101e}
#help-search{width:100%;box-sizing:border-box}

/* ═══════════════════════════════════════════════════════════════════════════
   ZIP PROGRESS
   ═══════════════════════════════════════════════════════════════════════════ */
#zip-progress-modal .modal-dialog{background:#13101e}
#zip-progress-bar{accent-color:#a259ff;display:block}

/* ═══════════════════════════════════════════════════════════════════════════
   PREVIEW ROUTE INPUT
   ═══════════════════════════════════════════════════════════════════════════ */
#preview-route{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:5px;color:#c4b5fd;font-size:12px;padding:3px 7px}
#preview-new-tab-btn{font-size:13px;padding:3px 8px}

/* ═══════════════════════════════════════════════════════════════════════════
   MFA MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
#mfa-token-input, #mfa-disable-token-input{font-family:monospace;background:rgba(255,255,255,.05);border:1px solid rgba(162,89,255,.4);border-radius:8px;color:#fff;padding:8px}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEW + TAGS MODALS
   ═══════════════════════════════════════════════════════════════════════════ */
#review-title-input, #review-desc-input, #tag-name-input, #tag-message-input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#e2d9f3;padding:7px 10px;font-size:13px}

/* ═══════════════════════════════════════════════════════════════════════════
   PROTECTED BRANCH LOCK ICON
   ═══════════════════════════════════════════════════════════════════════════ */
.branch-item .branch-actions button{font-size:11px;padding:2px 7px}