:root {
  color-scheme: dark;
  --bg: #070b14;
  --panel: #0d1424;
  --panel2: #10192c;
  --text: #edf5ff;
  --muted: #8ba1bd;
  --accent: #6ee7ff;
  --accent2: #a78bfa;
  --line: #23304a;
}
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  background: radial-gradient(circle at top left, #14213e, #070b14 44%);
  color: var(--text);
  font: 15px/1.5 Inter, ui-sans-serif, system-ui, Segoe UI, Arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 20, .86);
  backdrop-filter: blur(14px);
}
h1 { font-size: 18px; margin: 0; }
#status { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.actions { display: flex; gap: 8px; align-items: center; }
input, textarea, button { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); }
#title { padding: 10px 12px; min-width: 230px; }
button { padding: 10px 14px; cursor: pointer; font-weight: 700; }
button.active, button:hover { border-color: var(--accent); box-shadow: 0 0 22px rgba(110, 231, 255, .13); }
.primaryAction { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #06101d; border: 0; }
main { min-height: 0; flex: 1; display: flex; padding: 18px 18px 132px; }
.pane { width: 100%; height: 100%; min-height: 0; display: flex; max-width: 1050px; margin: 0 auto; background: rgba(13, 20, 36, .88); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 22px 80px rgba(0,0,0,.25); overflow: hidden; }
.hidden { display: none; }
.pretty-editor { flex: 1; min-height: 0; height: auto; padding: 28px 34px; outline: 0; overflow: auto; overscroll-behavior: contain; scroll-behavior: auto; }
.pretty-editor:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.pretty-editor h1, .pretty-editor h2, .pretty-editor h3 { line-height: 1.15; }
.pretty-editor a { color: var(--accent); }
.pretty-editor code { background: #111c32; padding: .15em .35em; border-radius: 6px; }
.pretty-editor pre { background: #07101f; border: 1px solid var(--line); padding: 14px; border-radius: 14px; overflow: auto; }

/* Keep list spacing stable while contenteditable mutates list item internals. */
.pretty-editor ul,
.pretty-editor ol {
  margin: .35em 0 .85em;
  padding-left: 1.45em;
}
.pretty-editor li {
  margin: .08em 0;
  padding-left: .1em;
  line-height: 1.38;
}
.pretty-editor li > p,
.pretty-editor li > div {
  margin: 0;
  line-height: inherit;
}
.pretty-editor li > p + p,
.pretty-editor li > div + div {
  margin-top: .25em;
}
.pretty-editor li ul,
.pretty-editor li ol {
  margin-top: .2em;
  margin-bottom: .2em;
}

#rawEditor { width: 100%; height: 100%; min-height: 0; resize: none; padding: 24px; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: 0; background: #07101f; border: 0; border-radius: 18px; overscroll-behavior: contain; }
#promptBar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 18px 16px; background: linear-gradient(180deg, rgba(7,11,20,.2), rgba(7,11,20,.98) 25%); border-top: 1px solid rgba(35,48,74,.65); }
#chatLog { max-width: 1050px; margin: 0 auto 8px; color: var(--muted); font-size: 13px; max-height: 42px; overflow: auto; }
.promptRow { max-width: 1050px; margin: 0 auto; display: flex; gap: 10px; align-items: stretch; }
#prompt { flex: 1; padding: 12px 14px; resize: none; background: var(--panel2); }
#sendPrompt { min-width: 96px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #06101d; border: 0; }
@media (max-width: 700px) {
  header { align-items: flex-start; flex-direction: column; }
  .actions { width: 100%; flex-wrap: wrap; }
  #title { flex: 1; min-width: 160px; }
  main { padding: 10px 10px 132px; }
  .pretty-editor { padding: 20px; }
  .promptRow { gap: 6px; }
  #sendPrompt { min-width: 72px; }
}