:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #2b2a26;
  --muted: #6d6a60;
  --accent: #3f6b3a;
  --accent-text: #ffffff;
  --user-bubble: #e4ecdf;
  --border: #dcd8cc;
  --danger: #a33a2c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1c19;
    --surface: #25271f;
    --text: #ebe8de;
    --muted: #a8a496;
    --accent: #7fae72;
    --accent-text: #11140f;
    --user-bubble: #34402f;
    --border: #3a3c33;
    --danger: #e0806f;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.bar h1 { font-size: 1.15rem; margin: 0; letter-spacing: 0.02em; }
nav { display: flex; gap: 12px; }

main { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 760px; margin: 0 auto; min-height: 0; }

button { font: inherit; cursor: pointer; border-radius: 10px; border: 0; }
button.primary { background: var(--accent); color: var(--accent-text); padding: 10px 18px; font-weight: 600; }
button.primary:disabled { opacity: 0.6; cursor: default; }
button.link { background: none; color: var(--accent); padding: 4px 0; text-decoration: underline; }
button.danger { background: none; color: var(--danger); padding: 4px 8px; }

.panel { padding: 24px 16px; display: flex; flex-direction: column; gap: 12px; }
.lead { font-size: 1.2rem; margin: 0; }
.hint { color: var(--muted); margin: 0; }
.msg { color: var(--muted); min-height: 1.5em; margin: 0; }
label { font-weight: 600; font-size: 0.9rem; }
input, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; width: 100%;
}
#setup-form { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }

#chat-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#log { list-style: none; margin: 0; padding: 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
#log li { max-width: 85%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
#log li.user { align-self: flex-end; background: var(--user-bubble); border-bottom-right-radius: 4px; }
#log li.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
#log li.pending { color: var(--muted); font-style: italic; }
#log li.error { color: var(--danger); }

#composer {
  display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: var(--surface);
}
#composer textarea { resize: none; max-height: 40vh; }

.row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.row h2 { margin: 0; font-size: 1.1rem; }
#facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#facts li { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
#facts .meta { display: block; color: var(--muted); font-size: 0.8rem; }
#facts .empty { color: var(--muted); border-style: dashed; }

a.button { display: inline-block; text-decoration: none; border-radius: 10px; }
a.button.primary { background: var(--accent); color: var(--accent-text); padding: 8px 16px; font-weight: 600; }
.cards { list-style: none; margin: 0 0 16px; padding: 0; }
.cards li { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.cards .meta { display: block; color: var(--muted); font-size: 0.85rem; }
.cards .actions { display: flex; gap: 12px; align-items: center; }