:root{--bg:#f9fafb;--text:#030712;--text-soft:#6b7280;--border:#0000001a;--bubble-bg:#fff;--control-bg:#f3f4f6;--control-text:#1f2937;--control-disabled-bg:#d1d5db;--btn-bg:#030712;--btn-text:#f9fafb;--modal-bg:#fff;--accent:#a78bfa;--blob-a:#fbe2e3;--blob-b:#dbd7fb}@media (prefers-color-scheme:dark){:root{--bg:#111827;--text:#f9fafbe6;--text-soft:#9ca3af;--bubble-bg:#ffffff0d;--control-bg:#ffffff1a;--control-text:#d1d5db;--control-disabled-bg:#ffffff59;--btn-bg:#f9fafb;--btn-text:#111827;--modal-bg:#1f2937;--blob-a:#946263;--blob-b:#676394}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--text);background:var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.backdrop{pointer-events:none;z-index:-10;transition:opacity .6s;position:fixed;inset:0;overflow:hidden}.backdrop-hidden{opacity:0}.blob{filter:blur(10rem);border-radius:9999px;width:68.75rem;height:31.25rem;position:absolute;transform:translateZ(0)}.blob-a{background:var(--blob-a);top:-6rem;right:11rem}.blob-b{background:var(--blob-b);top:-1rem;left:-15rem}#chat-app{height:100dvh;padding:12rem 4rem 4rem}.layout{flex-direction:column;max-width:48rem;height:100%;margin:0 auto;padding:0 1rem;display:flex}@media (width<=40rem){#chat-app{padding:6rem 1.25rem 1.25rem}.layout{padding:0}}.messages{flex-direction:column;flex:2 1 0;gap:1rem;padding:1.5rem 0;display:flex;overflow-y:auto}.layout.has-messages .messages{flex:4 1 0}.empty-state{text-align:center;color:var(--text-soft);margin:auto}.empty-state h1{color:var(--text);margin:0 0 .25rem;font-size:1.6rem;font-weight:600}.empty-state .avatar{object-fit:cover;border:.35rem solid #fff;border-radius:9999px;width:6rem;height:6rem;margin:0 auto 1rem;display:block;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.message{white-space:pre-wrap;overflow-wrap:break-word;line-height:1.6}.message.user{background:var(--bubble-bg);border:1px solid var(--border);border-radius:1.25rem;align-self:flex-end;max-width:80%;padding:.6rem 1rem}.message.assistant{align-self:flex-start}.cursor{background:var(--text-soft);vertical-align:text-bottom;width:.5em;height:1em;margin-left:2px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.error-banner{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:.5rem;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.5rem;margin-bottom:.5rem;padding:.5rem .75rem;font-size:.9rem;display:flex}.error-banner .dismiss{color:inherit;cursor:pointer;background:0 0;border:none;font-size:1rem}.composer{flex-direction:column;align-items:flex-start;gap:.6rem;padding:.75rem 0 1.25rem;display:flex}.composer-row{align-items:center;gap:.5rem;width:100%;display:flex}.composer textarea{resize:none;font:inherit;color:var(--text);border:1px solid var(--border);background:var(--control-bg);border-radius:1rem;outline:none;flex:1;padding:.7rem 1rem}.composer textarea::placeholder{color:var(--text-soft)}.composer textarea:focus{border-color:var(--accent)}.composer textarea:disabled{background:var(--control-disabled-bg);color:var(--control-text)}.composer-row button{font:inherit;background:var(--btn-bg);color:var(--btn-text);cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:1rem;padding:.55rem 1.1rem;font-weight:500}.composer-row button:disabled{opacity:.5;cursor:default}.composer-row button:not(:disabled):hover{opacity:.85}.suggestion{font:inherit;color:#fff;cursor:pointer;background:#030712;border:none;border-radius:9999px;max-width:100%;padding:.4rem 1rem;font-size:.85rem}.suggestion-text{animation:.35s both suggestion-in;display:inline-block}@keyframes suggestion-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.composer-spacer{flex:1 1 0}.composer-actions{padding:0 0 1.25rem;display:flex}.export{font:inherit;border:1px solid var(--border);color:var(--text-soft);cursor:pointer;background:#000;border-radius:.75rem;padding:.35rem .9rem;font-size:.85rem}.export:hover{color:var(--text);border-color:var(--text-soft)}.clear{font:inherit;border:1px solid var(--border);color:#fff;cursor:pointer;background:#6e0000;border-radius:.75rem;margin-left:.5rem;padding:.35rem .9rem;font-size:.85rem}.clear:hover{color:#991b1b;border-color:#b91c1c}@media (prefers-color-scheme:dark){.clear{color:#f87171}.clear:hover{color:#fca5a5;border-color:#f87171}.empty-state .avatar{box-shadow:none;border-color:#fff3}}.modal-overlay{z-index:10;background:#0006;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal{background:var(--modal-bg);border:1px solid var(--border);border-radius:1rem;width:100%;max-width:26rem;padding:1.5rem;position:relative;box-shadow:0 1.5rem 3rem #0003}.modal h2{margin:0 0 .5rem;font-size:1.1rem;font-weight:600}.modal p{color:var(--text-soft);margin:0 0 1.25rem;line-height:1.5}.modal-actions{justify-content:flex-end;gap:.5rem;display:flex}.modal-close{width:1.75rem;height:1.75rem;color:var(--text-soft);cursor:pointer;background:0 0;border:none;border-radius:.5rem;font-size:2rem;line-height:1;position:absolute;top:.75rem;right:.75rem}.modal-close:hover{color:var(--text);background:var(--control-disabled-bg)}.modal .confirm{font:inherit;color:#fff;cursor:pointer;background:#b91c1c;border:1px solid #0000;border-radius:.75rem;padding:.45rem 1rem;font-weight:500}.modal .confirm:hover{border:1px solid var(--border);background:#991b1b}
