:root{font-family:Inter,system-ui,sans-serif;color:#edf1f7;background:#0c0f14}*{box-sizing:border-box}body{margin:0}main{height:100dvh;display:grid;grid-template-rows:64px 1fr auto;max-width:900px;margin:auto;background:#10141c}header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #27303c}header div{display:flex;flex-direction:column}small{color:#8490a2}button{border:0;border-radius:14px;background:#6d5dfc;color:white;font-size:20px;padding:10px 16px;cursor:pointer}#chat{overflow:auto;padding:28px 18px;display:flex;flex-direction:column;gap:14px}.welcome{text-align:center;margin:auto;color:#98a4b6}.welcome h1{color:#fff}article{white-space:pre-wrap;line-height:1.55;padding:14px 16px;border-radius:18px;max-width:82%}.user{align-self:flex-end;background:#6656e8}.assistant{align-self:flex-start;background:#202733}form{display:flex;gap:10px;padding:12px 16px max(12px,env(safe-area-inset-bottom));border-top:1px solid #27303c}textarea,input{flex:1;border:1px solid #344052;border-radius:16px;background:#181e28;color:#fff;padding:14px;font:inherit;resize:none}dialog{border:1px solid #344052;border-radius:20px;background:#151b24;color:#fff;padding:22px}dialog form{border:0;display:grid;gap:12px;min-width:min(320px,80vw)}@media(max-width:600px){article{max-width:92%}}