:root{
  --bg: #0a0d0a;
  --panel: #12160f;
  --panel-edge: #232b1e;
  --amber: #ffb000;
  --amber-dim: #a86e00;
  --amber-faint: #5c4200;
  --text: #e9dfc4;
  --text-dim: #8c9284;
  --err: #ff5c4d;
  --ok: #7fd858;
  --diff-add: #17331a;
  --diff-add-text: #7fd858;
  --diff-del: #331717;
  --diff-del-text: #ff8a7a;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body{
  margin:0; padding:0; height:100%; background:var(--bg); color:var(--text);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  overscroll-behavior:none;
}

#boot{
  position:fixed; inset:0; background:#000; color:var(--amber);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-size:13px; line-height:1.6; z-index:100; padding:24px; text-align:left;
}
#boot pre{ margin:0; white-space:pre-wrap; }
#boot.hide{ display:none; }

.crt-noise{
  position:fixed; inset:0; pointer-events:none; z-index:99; opacity:.03; mix-blend-mode:overlay;
  background-image: repeating-linear-gradient(0deg, #fff 0px, transparent 1px, transparent 2px);
}

.app{ display:flex; flex-direction:column; height:100dvh; padding-top:var(--safe-top); }

header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--panel-edge); background:var(--panel);
  flex-shrink:0;
}
header .brand{ display:flex; align-items:center; gap:8px; font-size:13px; }
header .brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--amber-faint); box-shadow:0 0 6px var(--amber-faint); transition:.2s; }
header .brand .dot.live{ background:var(--ok); box-shadow:0 0 8px var(--ok); }
header .brand .dot.err{ background:var(--err); box-shadow:0 0 8px var(--err); }
header .brand .dot.busy{ background:var(--amber); box-shadow:0 0 8px var(--amber); animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.4; } }
header .brand b{ color:var(--amber); font-weight:600; letter-spacing:0.03em; }
header .header-right{ display:flex; align-items:center; gap:10px; }
header .status{ font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; }
.icon-btn{ background:none; border:1px solid var(--panel-edge); color:var(--text-dim); border-radius:4px; padding:5px 9px; font-size:13px; }
.icon-btn:active{ border-color:var(--amber-dim); color:var(--amber); }

main{ flex:1; min-height:0; position:relative; }
.pane{ position:absolute; inset:0; display:none; flex-direction:column; }
.pane.active{ display:flex; }

/* Chat */
.chat-log{ flex:1; overflow-y:auto; padding:12px 12px 4px; display:flex; flex-direction:column; gap:10px; }
.msg{ max-width:92%; font-size:13px; line-height:1.5; padding:9px 11px; border-radius:6px; white-space:pre-wrap; word-break:break-word; }
.msg.user{ align-self:flex-end; background:var(--amber-faint); color:var(--amber); border:1px solid var(--amber-dim); }
.msg.assistant{ align-self:flex-start; background:var(--panel); border:1px solid var(--panel-edge); }
.msg.tool{ align-self:flex-start; background:transparent; border:1px dashed var(--panel-edge); color:var(--text-dim); font-size:11.5px; max-width:96%; }
.msg.tool .tool-name{ color:var(--amber-dim); }
.msg.error{ align-self:flex-start; background:#1f0d0b; border:1px solid var(--err); color:var(--err); }
.chat-input-bar{
  display:flex; gap:8px; padding:10px 12px calc(10px + var(--safe-bottom));
  background:var(--panel); border-top:1px solid var(--panel-edge); flex-shrink:0;
}
.chat-input-bar textarea{
  flex:1; resize:none; max-height:120px; background:var(--bg); color:var(--text);
  border:1px solid var(--panel-edge); border-radius:6px; padding:9px 10px; font-family:inherit; font-size:13px;
  outline:none;
}
.chat-input-bar textarea:focus{ border-color:var(--amber-dim); }

/* Code */
.code-layout{ flex:1; display:flex; min-height:0; }
.file-tree{
  width:34%; max-width:180px; overflow-y:auto; background:var(--panel); border-right:1px solid var(--panel-edge);
  font-size:11.5px; padding:8px 0;
}
.file-tree .node{ padding:6px 10px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-tree .node.dir{ color:var(--amber-dim); }
.file-tree .node.file{ cursor:pointer; }
.file-tree .node.file.active{ color:var(--amber); background:var(--amber-faint); }
.file-tree .node.file.dirty::after{ content:' ●'; color:var(--amber); }
.editor-wrap{ flex:1; display:flex; flex-direction:column; min-width:0; }
.editor-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px; background:var(--panel); border-bottom:1px solid var(--panel-edge);
  font-size:11px; color:var(--text-dim);
}
#editor{
  flex:1; width:100%; resize:none; border:none; outline:none;
  background:var(--bg); color:var(--text); font-family:inherit; font-size:13px;
  line-height:1.55; padding:12px; caret-color:var(--amber);
}

/* Changes */
.changes-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; background:var(--panel); border-bottom:1px solid var(--panel-edge); font-size:12px;
}
.changes-list{ flex:1; overflow-y:auto; }
.change-item{ border-bottom:1px solid var(--panel-edge); }
.change-item .change-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; font-size:12.5px;
}
.change-item .change-head .path{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.change-item .change-head .tag{ font-size:9.5px; padding:2px 6px; border-radius:3px; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0; }
.tag.added{ background:var(--diff-add); color:var(--diff-add-text); }
.tag.modified{ background:var(--amber-faint); color:var(--amber); }
.tag.deleted{ background:var(--diff-del); color:var(--diff-del-text); }
.diff-body{ font-size:11.5px; line-height:1.5; padding:0 12px 10px; overflow-x:auto; }
.diff-line{ white-space:pre; padding:0 6px; }
.diff-line.add{ background:var(--diff-add); color:var(--diff-add-text); }
.diff-line.del{ background:var(--diff-del); color:var(--diff-del-text); }
.diff-line.ctx{ color:var(--text-dim); }
.change-actions{ display:flex; gap:8px; padding:0 12px 10px; }

/* Preview */
#pane-preview{ background:#fff; }
#pane-preview iframe{ width:100%; height:100%; border:none; }
#pane-preview .empty{
  flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
  background:var(--bg); color:var(--text-dim); font-size:12px; text-align:center; padding:24px;
}
#pane-preview .empty .amber{ color:var(--amber); font-size:13px; }

.btn{
  padding:10px 12px; border-radius:5px; border:1px solid var(--amber-dim);
  background:transparent; color:var(--amber); font-family:inherit; font-size:12px;
  letter-spacing:0.02em; font-weight:600;
}
.btn:active{ background:var(--amber-faint); }
.btn.primary{ background:var(--amber); color:#1a1200; border-color:var(--amber); }
.btn.primary:active{ background:var(--amber-dim); }
.btn.small{ padding:8px 14px; font-size:15px; }
.btn.tiny{ padding:5px 9px; font-size:10.5px; }
.btn:disabled{ opacity:.35; }

nav.tabs{
  display:flex; background:var(--panel); border-top:1px solid var(--panel-edge);
  padding-bottom:var(--safe-bottom); flex-shrink:0;
}
nav.tabs button{
  flex:1; background:transparent; border:none; color:var(--text-dim); font-family:inherit;
  padding:11px 4px 9px; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em;
  display:flex; flex-direction:column; align-items:center; gap:3px; position:relative;
}
nav.tabs button .glyph{ font-size:15px; line-height:1; }
nav.tabs button.active{ color:var(--amber); }
nav.tabs .badge{
  position:absolute; top:4px; right:22%; background:var(--amber); color:#1a1200;
  font-size:9px; border-radius:8px; padding:1px 5px; font-weight:700;
}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-backdrop[hidden]{ display:none; }
.modal{
  width:100%; max-width:480px; background:var(--panel); border-top:1px solid var(--panel-edge);
  border-radius:10px 10px 0 0; padding:16px 16px calc(16px + var(--safe-bottom));
  display:flex; flex-direction:column; gap:12px;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; }
.modal label{ font-size:11px; color:var(--text-dim); display:flex; flex-direction:column; gap:5px; }
.modal input{
  background:var(--bg); border:1px solid var(--panel-edge); color:var(--text); border-radius:5px;
  padding:9px 10px; font-family:inherit; font-size:13px; outline:none;
}
.modal input:focus{ border-color:var(--amber-dim); }
.modal-hint{ font-size:10.5px; color:var(--text-dim); line-height:1.4; }