:root {
  --font: ui-monospace, "Cascadia Code", "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
  --bar-h: 1.7rem;
  --pad: 0.75rem;
}

html[data-theme="dark"] {
  --bg: #070807;
  --fg: #7dff9a;
  --dim: #3d7a4a;
  --accent: #c8ff00;
  --err: #ff6b6b;
  --user: #b4ff62;
  --tool: #7ec8ff;
  --bar-bg: #031403;
  --border: #1c3d22;
  --suggest-bg: #0d1a10;
  --cursor: #7dff9a;
}

html[data-theme="light"] {
  --bg: #f4f1e8;
  --fg: #1a1a1a;
  --dim: #6b6458;
  --accent: #0b5d1e;
  --err: #a40000;
  --user: #0b5d1e;
  --tool: #084c8d;
  --bar-bg: #e7e2d4;
  --border: #c9c1ae;
  --suggest-bg: #fffdf6;
  --cursor: #0b5d1e;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); }
body { font-size: 14px; line-height: 1.45; }
#app { display: flex; flex-direction: column; height: 100%; height: 100dvh; }

#bar {
  display: flex; align-items: center; gap: 0.75rem;
  height: var(--bar-h); padding: 0 var(--pad);
  background: var(--bar-bg); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--dim); user-select: none;
}
#bar-left { color: var(--accent); }
#bar-mid { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#theme-toggle {
  background: none; border: 1px solid var(--border); color: var(--fg);
  font: inherit; font-size: 11px; padding: 0 0.45rem; cursor: pointer;
}

#term {
  flex: 1; overflow-y: auto; padding: var(--pad);
  white-space: pre-wrap; word-break: break-word; outline: none;
}
#term .line { margin: 0 0 0.35rem; }
#term .user { color: var(--user); }
#term .assistant { color: var(--fg); }
#term .sys { color: var(--dim); }
#term .err { color: var(--err); }
#term .tool { color: var(--tool); }
#term img.pic { max-width: min(420px, 100%); display: block; margin: 0.4rem 0; border: 1px solid var(--border); }
#term a { color: var(--accent); }
#term code { background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 0 0.2rem; }
#term pre { border: 1px solid var(--border); padding: 0.5rem; overflow-x: auto; }

#suggest {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 3.2rem;
  background: var(--suggest-bg); border: 1px solid var(--border);
  max-height: 12rem; overflow-y: auto; z-index: 5;
}
#suggest div { padding: 0.2rem 0.5rem; cursor: pointer; color: var(--dim); }
#suggest div b { color: var(--fg); font-weight: 600; }
#suggest div.active, #suggest div:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--fg); }

#composer {
  display: flex; align-items: flex-end; gap: 0.5rem;
  padding: 0.4rem var(--pad) calc(0.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: var(--bar-bg);
}
#prompt-char { color: var(--accent); padding-bottom: 0.35rem; }
#input {
  flex: 1; resize: none; border: 0; background: transparent; color: var(--fg);
  font: inherit; outline: none; max-height: 8rem; padding: 0.3rem 0;
  caret-color: var(--cursor);
}

.gate {
  max-width: 28rem; margin: 2rem auto; border: 1px solid var(--border);
  padding: 1rem; background: var(--bar-bg);
}
.gate label { display: block; color: var(--dim); font-size: 12px; margin-top: 0.6rem; }
.gate input {
  width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  font: inherit; padding: 0.35rem 0.4rem; margin-top: 0.15rem;
}
.gate button {
  margin-top: 0.8rem; background: var(--bg); color: var(--accent);
  border: 1px solid var(--accent); font: inherit; padding: 0.35rem 0.7rem; cursor: pointer;
}
.gate img.qr { width: 180px; height: 180px; margin: 0.6rem 0; image-rendering: pixelated; }
.gate .err { color: var(--err); min-height: 1.2rem; }

@media (max-width: 768px) {
  body { font-size: 15px; }
}