*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f5f5;color:#181818}
.shell{min-height:100vh;display:grid;place-items:center;padding:16px}
.chat{width:min(100%,440px);height:min(720px,92vh);background:white;border:1px solid #ddd;border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.08)}
header{padding:16px 18px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}
header div{display:flex;flex-direction:column;gap:2px}
header small,footer{color:#666}
.status{font-size:12px}
.messages{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:84%;padding:11px 13px;border-radius:14px;line-height:1.4;white-space:pre-wrap}
.user{align-self:flex-end;background:#222;color:white}
.assistant{align-self:flex-start;background:#f0f0f0}
.system{align-self:center;background:#fffbe8;border:1px solid #eee4b8;font-size:13px}
form{padding:12px;border-top:1px solid #eee;display:flex;gap:8px}
textarea{flex:1;resize:none;border:1px solid #ccc;border-radius:12px;padding:10px;font:inherit}
button{border:0;border-radius:12px;padding:0 16px;background:#222;color:white;font-weight:600;cursor:pointer}
button:disabled{opacity:.5;cursor:wait}
footer{padding:0 14px 14px;font-size:11px;text-align:center}