@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--bg:#f7f7f8;--panel:#fff;--text:#0f172a;--muted:#64748b;--border:#e5e7eb;--ai:#f1f5f9;--user:#2563eb}body.dark{--bg:#0f172a;--panel:#020617;--text:#e5e7eb;--muted:#94a3b8;--border:#1e293b;--ai:#020617;--user:#3b82f6}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,system-ui,sans-serif;transition:background .3s,color .3s}.chat{-webkit-overflow-scrolling:touch}.page{justify-content:center;height:100%;display:flex}.app{flex-direction:column;width:100%;max-width:900px;height:100%;display:flex}.top-bar{background:var(--panel);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:56px;padding:0 18px;display:flex}.brand{font-weight:600}.switch{width:42px;height:22px;position:relative}.switch input{display:none}.slider{background:#94a3b8;border-radius:999px;position:absolute;inset:0}.slider:before{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:all .25s;position:absolute;top:3px;left:3px}.switch input:checked+.slider{background:#22c55e}.switch input:checked+.slider:before{transform:translate(20px)}.chat{flex:1;padding:24px 16px 120px;overflow-y:auto}.chat.center{color:var(--muted);justify-content:center;align-items:center;font-size:18px;display:flex}.row{gap:12px;margin-bottom:18px;display:flex}.row.user{justify-content:flex-end}.avatar{border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:13px;font-weight:600;display:flex}.avatar.ai{background:var(--ai);border:1px solid var(--border)}.avatar.user{background:var(--user);color:#fff}.bubble{background:var(--ai);border:1px solid var(--border);white-space:pre-wrap;border-radius:16px;max-width:75%;padding:14px 16px;line-height:1.6}.row.user .bubble{background:var(--user);color:#fff;border:none}.bubble.subtle{opacity:.6;font-style:italic}.input{background:linear-gradient(to top, var(--bg), transparent);padding:16px;position:sticky;bottom:0}.input.floating{width:50%;position:absolute;bottom:35%}.input textarea{resize:none;border:1px solid var(--border);background:var(--panel);width:100%;color:var(--text);border-radius:14px;padding:14px 52px 14px 16px}.input button{color:#fff;background:#3b82f6;border:none;border-radius:10px;width:36px;height:36px;font-size:18px;position:absolute;bottom:28px;right:26px}@media (max-width:768px){.bubble{max-width:85%;font-size:14px}.avatar{width:28px;height:28px;font-size:11px}.input.floating{bottom:30%}}