:root { --bg: #f7f7f5; --card: #fff; --ink: #1d1d1f; --muted: #6b6b70; --accent: #2f5bea; --me: #e8eefc; --line: #e2e2e0; --err: #b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg: #151517; --card: #1f1f22; --ink: #ececee; --muted: #9a9aa0; --accent: #7c9cff; --me: #263052; --line: #333338; --err: #ff8a80; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.wrap { max-width: 680px; margin: 0 auto; padding: 24px 16px 40px; }
h1 { margin: 0 0 4px; font-size: 26px; }
.sub, .muted { color: var(--muted); }
.small { font-size: 13px; }
label { display: block; margin: 20px 0 8px; font-weight: 600; }
input, textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; }
button { margin-top: 12px; padding: 11px 20px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
.link { background: none; color: var(--muted); padding: 0; text-decoration: underline; font-weight: 400; }
.error { color: var(--err); min-height: 1.5em; }
#log { margin: 20px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 12px 14px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
.msg.me { align-self: flex-end; background: var(--me); }
.msg.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); }
.msg.note { color: var(--muted); }
.msg.wait { color: var(--muted); font-style: italic; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row button { margin-top: 8px; }