:root {
  --bg: #f6f4ef; --panel: #ffffff; --ink: #1f2421; --muted: #6b716c;
  --line: #dedbd2; --accent: #2f5d50; --accent-ink: #ffffff; --mine: #e3ece7; --bad: #9b2c2c;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151816; --panel: #1e2320; --ink: #e8ebe6; --muted: #98a09a;
    --line: #2e3531; --accent: #7fb8a4; --accent-ink: #10201b; --mine: #26342e; --bad: #f0a3a3;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
button, textarea, input { font: inherit; color: inherit; }

/* Chat */
.app { display: flex; flex-direction: column; height: 100dvh; max-width: 760px; margin: 0 auto; }
header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--line);
}
header h1 { font-size: 18px; margin: 0; letter-spacing: 0.02em; }
header .actions { display: flex; gap: 8px; }
.quiet {
  background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px;
  min-height: 36px; color: var(--muted); cursor: pointer;
}
#log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--mine); border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.note { align-self: center; color: var(--muted); font-size: 14px; padding: 0; }
.msg.error { align-self: center; color: var(--bad); font-size: 15px; text-align: center; }
.meta { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.empty { margin: auto; color: var(--muted); text-align: center; }
form.compose {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
}
textarea {
  flex: 1; resize: none; max-height: 40dvh; min-height: 44px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
textarea:focus, input:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.send {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer;
}
.send:disabled { opacity: 0.5; cursor: default; }

/* Login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login form { width: 100%; max-width: 340px; display: grid; gap: 12px; }
.login h1 { margin: 0 0 4px; font-size: 22px; }
.login input {
  width: 100%; min-height: 48px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.login .send { min-height: 48px; }
.login .error { color: var(--bad); margin: 0; min-height: 1.5em; }