:root{color-scheme:dark;font-family:system-ui;background:#10131b;color:#e7eaf5}*{box-sizing:border-box}body{margin:0}main{max-width:900px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between}h1{font-size:24px}#role,.hint{color:#aeb6cb;font-size:14px}.toolbar{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}details{flex:1;min-width:240px;background:#19202d;padding:12px;border-radius:12px}summary{cursor:pointer}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}#messages{display:flex;flex-direction:column;gap:12px;padding:28px 0;min-height:40vh}article{padding:12px 16px;max-width:78%;width:fit-content;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 2px 8px #0002}article.user{align-self:flex-end;background:#274c76;border-radius:18px 18px 4px 18px}article.assistant{align-self:flex-start;background:#202b3a;border-radius:18px 18px 18px 4px}article small{display:block;color:#b9c9de;margin-bottom:6px;font-size:11px}#form{position:sticky;bottom:0;background:#10131bf5;padding:12px 0;border-top:1px solid #293347}textarea{display:block;width:100%;margin:10px 0;background:#1b2232;color:inherit;border:1px solid #45516b;border-radius:16px;padding:12px;font:inherit;resize:vertical}button{background:#89b4fa;border:0;border-radius:16px;padding:10px 16px;color:#10131b;cursor:pointer}button:disabled{opacity:.5}select{display:block;width:100%;margin:10px 0;padding:10px;background:#1b2232;border:1px solid #45516b;border-radius:8px;color:inherit}#status{color:#aeb6cb;font-size:13px}#error{color:#f38ba8}[hidden]{display:none!important}@media(max-width:600px){main{padding:14px}article{max-width:88%}h1{font-size:21px}}