:root{color-scheme:light;--bg: #f3efe6;--panel: #fffdf8;--ink: #1c1a16;--muted: #6b6458;--line: #d9d0c0;--user: #e8f0ea;--assistant: #fff7e8;--system: #efe9df;--accent: #245c45;--accent-ink: #f7fff9;font-family:Iowan Old Style,Palatino Linotype,Palatino,Book Antiqua,serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:radial-gradient(circle at top left,#efe4c8 0%,transparent 40%),linear-gradient(180deg,#f7f2e8,#ebe4d6);color:var(--ink)}.app{max-width:840px;margin:0 auto;height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:16px}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 4px}.header h1{margin:0;font-size:1.5rem;letter-spacing:.02em}.chat{overflow-y:auto;background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}.bubble{max-width:85%;padding:10px 12px;border-radius:14px;border:1px solid var(--line)}.bubble.user{align-self:flex-end;background:var(--user)}.bubble.assistant{align-self:flex-start;background:var(--assistant)}.bubble.system{align-self:center;background:var(--system);max-width:95%}.meta{font-size:.75rem;color:var(--muted);margin-bottom:6px;font-family:Avenir Next,Segoe UI,sans-serif}.content{margin:0;white-space:pre-wrap;word-break:break-word;font-family:IBM Plex Mono,SF Mono,Menlo,monospace;font-size:.92rem;line-height:1.45}.composer{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}textarea{width:100%;resize:vertical;min-height:72px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit}button{border:none;border-radius:12px;padding:12px 18px;background:var(--accent);color:var(--accent-ink);font-family:Avenir Next,Segoe UI,sans-serif;font-weight:600;cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}button.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);padding:8px 12px}@media(max-width:640px){.composer{grid-template-columns:1fr}.bubble{max-width:100%}}
