/* VS Code Editor shell — dark-first, VS Code Dark+ palette */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column;
  font-family: -apple-system, "Segoe UI", Ubuntu, sans-serif;
  font-size: 13px;
  background: #1e1e1e; color: #cccccc;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* Title bar */
#titlebar {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 8px; flex: none;
  background: #323233; border-bottom: 1px solid #252526;
}
.tb-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tb-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-right { display: flex; gap: 4px; }
.tb-btn {
  padding: 3px 10px; border-radius: 4px; color: #cccccc;
}
.tb-btn:hover { background: #454545; }
.tb-btn.accent { background: #0e639c; color: #fff; }
.tb-btn.accent:hover { background: #1177bb; }
#sidebar-toggle { font-size: 15px; padding: 3px 8px; border-radius: 4px; }
#sidebar-toggle:hover { background: #454545; }

/* Layout */
#main { display: flex; flex: 1; min-height: 0; }
#sidebar {
  width: 210px; flex: none; display: flex; flex-direction: column;
  background: #252526; border-right: 1px solid #1b1b1c;
}
#sidebar.hidden { display: none; }
.pane-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px 6px; font-size: 11px; letter-spacing: .06em; color: #bbbbbb;
}
.pane-actions button { padding: 0 5px; font-size: 13px; border-radius: 3px; }
.pane-actions button:hover { background: #454545; }
#file-list { list-style: none; margin: 0; padding: 0 4px; overflow-y: auto; flex: 1; }
#file-list li {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#file-list li:hover { background: #2a2d2e; }
#file-list li.active { background: #37373d; }
#file-list li .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#file-list li .fdel { visibility: hidden; color: #999; padding: 0 3px; }
#file-list li:hover .fdel { visibility: visible; }
#file-list li .fdel:hover { color: #f48771; }
.pane-footer { padding: 8px 12px; font-size: 11px; color: #8a8a8a; border-top: 1px solid #1b1b1c; }

/* Work area */
#workarea { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
#tabs {
  display: flex; overflow-x: auto; flex: none; background: #252526;
  scrollbar-width: thin;
}
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 14px; cursor: pointer; white-space: nowrap;
  border-right: 1px solid #1b1b1c; color: #8f8f8f; font-size: 12.5px;
}
.tab.active { background: #1e1e1e; color: #fff; border-top: 1px solid #0e639c; }
.tab .tclose { border-radius: 3px; padding: 0 3px; }
.tab .tclose:hover { background: #454545; }
#editor { flex: 1; min-height: 0; }
#empty-state {
  position: absolute; inset: 36px 0 22px 0; display: flex; align-items: center; justify-content: center;
  background: #1e1e1e; text-align: center;
}
#empty-state h2 { margin: 0 0 6px; font-weight: 600; }
#empty-state p { margin: 4px 0; color: #bbb; }
#empty-state .dim { color: #777; font-size: 12px; }
#empty-state[hidden] { display: none; }

/* Status bar */
#statusbar {
  display: flex; gap: 14px; align-items: center; flex: none;
  height: 22px; padding: 0 10px; font-size: 11.5px;
  background: #0e639c; color: #fff;
}
#st-save { margin-left: auto; }
#st-save.dirty { color: #ffe28a; }
#st-save.ok { color: #cfe9ff; }

/* Preview modal */
#preview-modal {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: rgba(0,0,0,.65);
}
#preview-modal[hidden] { display: none; }
.pm-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: #252526; color: #fff; font-weight: 600;
}
#pm-close { padding: 2px 8px; border-radius: 4px; }
#pm-close:hover { background: #454545; }
#preview-frame { flex: 1; background: #fff; border: 0; }

/* Light theme body chrome (monaco switches its own theme via API) */
body.light { background: #fff; color: #3b3b3b; }
body.light #titlebar { background: #f3f3f3; border-color: #e0e0e0; }
body.light .tb-btn:hover { background: #e0e0e0; }
body.light #sidebar { background: #f3f3f3; border-color: #e0e0e0; }
body.light #file-list li:hover { background: #e8e8e8; }
body.light #file-list li.active { background: #e0e0e0; }
body.light #tabs { background: #f3f3f3; }
body.light .tab { border-color: #e0e0e0; color: #666; }
body.light .tab.active { background: #fff; color: #1a1a1a; }
body.light #empty-state { background: #fff; }
body.light #empty-state p { color: #555; }
body.light .pane-footer { border-color: #e0e0e0; }

/* Mobile: sidebar becomes an overlay */
@media (max-width: 768px) {
  #sidebar {
    position: absolute; z-index: 30; top: 0; bottom: 0; left: 0;
    box-shadow: 4px 0 16px rgba(0,0,0,.4);
  }
  .tb-btn { padding: 3px 7px; }
}