:root{--canvas: #eceef0;--surface: #ffffff;--surface-muted: #f4f5f6;--ink: #17181a;--ink-soft: #3a3d42;--muted: #8a8f98;--muted-strong: #5c626b;--line: #e2e4e8;--line-strong: #d4d7dd;--hairline: #e8eaed;--primary: #6d5ef0;--primary-hover: #5b4ce0;--primary-press: #4a3cc8;--primary-soft: #e7e2ff;--primary-tint: #f3f1ff;--primary-ink: #ffffff;--green: #a4f5a6;--danger: #c14a3a;--danger-soft: #fbe4e0;--radius-card: 22px;--radius-tile: 13px;--radius-chip: 999px;--shadow-sm: 0 1px 2px rgba(23, 24, 26, .05);--shadow-lift: 0 10px 28px rgba(23, 24, 26, .08);--font-body: "Fustat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);color:var(--ink);background-color:var(--canvas);background-image:radial-gradient(1200px 800px at 8% -10%,rgb(162 142 249 / .16),transparent 60%),radial-gradient(1000px 700px at 95% 8%,rgb(164 245 166 / .13),transparent 55%),radial-gradient(900px 700px at 50% 110%,rgb(255 216 157 / .1),transparent 60%);background-attachment:fixed;-webkit-font-smoothing:antialiased}.shell{position:relative;z-index:1;height:100%;display:grid;place-items:center;padding:24px}.phone{width:100%;max-width:440px;height:min(820px,92vh);display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-lift)}.topbar{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--surface);border-bottom:1px solid var(--hairline)}.avatar{width:42px;height:42px;border-radius:var(--radius-chip);display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-hover);font-weight:700;font-size:18px;letter-spacing:.02em}.who{display:flex;flex-direction:column;line-height:1.3}.who strong{font-weight:600;font-size:16px;letter-spacing:-.01em}.who span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-strong)}.who span[data-online=true]:before{content:"";width:7px;height:7px;border-radius:999px;background:var(--green);box-shadow:0 0 0 2.5px #a4f5a659}.thread{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:8px;background:var(--canvas)}.thread::-webkit-scrollbar{width:6px}.thread::-webkit-scrollbar-track{background:transparent}.thread::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px}.row{display:flex}.row.user{justify-content:flex-end}.row.assistant{justify-content:flex-start}.bubble{max-width:82%;padding:10px 14px;border-radius:var(--radius-tile);font-size:14.5px;line-height:1.55;word-wrap:break-word;white-space:pre-wrap;animation:rise .45s cubic-bezier(.16,1,.3,1) both}.row.assistant .bubble{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);border-bottom-left-radius:4px}.row.user .bubble{background:var(--primary-soft);border:1px solid rgb(109 94 240 / .25);color:var(--ink);border-bottom-right-radius:4px;white-space:normal}.bubble :is(h1,h2,h3){font-weight:600;margin:0 0 6px;font-size:1.05em}.bubble :is(p,ul,ol){margin:0 0 6px}.bubble :is(p,ul,ol):last-child{margin-bottom:0}.bubble ul,.bubble ol{padding-left:18px}.bubble a{color:var(--primary-hover);font-weight:600;text-decoration:none}.bubble a:hover{color:var(--primary-press);text-decoration:underline;text-underline-offset:3px}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.picker{justify-content:center;gap:10px;padding:24px}.picker p{margin:0 0 8px;text-align:center;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink-soft)}.picker button{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:none;border-radius:var(--radius-tile);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line),var(--shadow-sm);font-family:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;transition:box-shadow .15s ease,transform .1s ease;animation:rise .45s cubic-bezier(.16,1,.3,1) both}.picker button:nth-child(3){animation-delay:.06s}.picker button:nth-child(4){animation-delay:.12s}.picker button:nth-child(5){animation-delay:.18s}.picker button:hover{box-shadow:inset 0 0 0 1.5px var(--primary),var(--shadow-sm)}.picker button:active{transform:translateY(1px)}.picker button strong{font-weight:600;font-size:15px}.picker button span{font-size:12.5px;color:var(--muted-strong)}.typing{display:inline-flex;gap:4px;align-items:center}.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite both}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.3}40%{opacity:1}}.error{align-self:center;font-size:12.5px;font-weight:500;color:var(--danger);background:var(--danger-soft);padding:6px 12px;border-radius:var(--radius-chip)}.composer{display:flex;gap:8px;padding:12px;background:var(--surface);border-top:1px solid var(--hairline)}.composer input{flex:1;border:none;background:var(--surface);border-radius:var(--radius-tile);padding:11px 15px;font-size:14.5px;font-family:inherit;color:var(--ink);outline:none;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .15s ease}.composer input::placeholder{color:var(--muted-strong)}.composer input:hover:not(:disabled):not(:focus){box-shadow:inset 0 0 0 1.5px var(--line-strong)}.composer input:focus{box-shadow:inset 0 0 0 1.5px var(--primary)}.composer input:disabled{background:var(--surface-muted);color:var(--muted);cursor:not-allowed}.composer button{width:46px;height:46px;border:none;border-radius:var(--radius-chip);background:var(--primary);color:var(--primary-ink);font-size:16px;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .1s ease}.composer button:hover:not(:disabled){background:var(--primary-hover);box-shadow:0 6px 16px -8px #17181a73}.composer button:active:not(:disabled){background:var(--primary-press);transform:translateY(1px);box-shadow:none}.composer button:disabled{opacity:.4;cursor:not-allowed}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}