:root{
  --bg:#000;
  --panel:#0b0b0b;
  --border:#2c2c2c;
  --text:#eaeaea;
  --muted:#b7b7b7;
  --accent:#1b8cff;
  --bubbleUser:#0f1a22;
  --bubbleSys:#111111;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }

.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  border-bottom:1px solid var(--border);
  background:#050505;
}

.brand{ font-weight:700; letter-spacing:.5px; }
.actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
button, select{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
button:hover, select:hover{ border-color:var(--accent); }
.status{ color:var(--muted); margin-left:8px; font-size:12px; }

.layout{
  height: calc(100vh - 56px);
  display:grid;
  grid-template-columns: 1fr 420px;
}

.editorPane{ border-right:1px solid var(--border); }
.editor{ height:100%; width:100%; }

.sidePane{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  background:#050505;
}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 260px;
}

.panelTitle{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}

.terminalPanel{
  min-height: calc(100vh - 56px - 20px);
}

.chat{
  padding:12px;
  overflow:auto;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
}

.msgRow{
  display:flex;
}
.msgRow.user{ justify-content:flex-end; }
.msgRow.system{ justify-content:flex-start; }

.msg{
  max-width: 95%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.35;
}

.msg.system{
  background:var(--bubbleSys);
}
.msg.user{
  background:var(--bubbleUser);
  border-color:#223649;
}

.meta{
  color:var(--muted);
  font-size:11px;
  margin-bottom:6px;
}

.chatInputRow{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-top:1px solid var(--border);
}

.prompt{
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.chatInput{
  flex:1;
  background:transparent;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  color:var(--text);
  outline:none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
}
.chatInput:focus{ border-color: var(--accent); }

.hint{
  padding:8px 12px 12px;
  color: var(--muted);
  font-size:12px;
}