:root{font-family:system-ui,-apple-system,sans-serif;line-height:1.5;color-scheme:light dark}*{box-sizing:border-box}body{margin:0}main:not(.chat){padding:2rem 1rem;max-width:480px;margin:0 auto}main.chat{display:flex;flex-direction:column;height:100dvh;max-width:720px;margin:0 auto}.chat-header{display:flex;justify-content:space-between;align-items:baseline;padding:.75rem 1rem;border-bottom:1px solid color-mix(in srgb,currentColor 15%,transparent)}.chat-header h1{margin:0;font-size:1.125rem}.status{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.dot{width:.5rem;height:.5rem;border-radius:50%;display:inline-block}.dot.connected{background:#2ea043}.dot.disconnected{background:#d1242f}.messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.msg{max-width:80%;padding:.5rem .75rem;border-radius:.5rem;background:color-mix(in srgb,currentColor 8%,transparent);align-self:flex-start}.msg.mine{align-self:flex-end;background:color-mix(in srgb,#2563eb 70%,transparent);color:#fff}.msg .meta{font-size:.75rem;opacity:.75;display:flex;justify-content:space-between;gap:1rem;margin-bottom:.125rem}.msg .body{white-space:pre-wrap;word-wrap:break-word}.composer{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid color-mix(in srgb,currentColor 15%,transparent)}.composer input{flex:1;padding:.5rem .75rem;font:inherit;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:.25rem;background:transparent;color:inherit}.composer button{padding:.5rem 1rem;font:inherit;border:none;background:#2563eb;color:#fff;border-radius:.25rem;cursor:pointer}.composer button:disabled{opacity:.5;cursor:not-allowed}.btn{display:inline-block;padding:.5rem 1rem;background:#2563eb;color:#fff;text-decoration:none;border-radius:.25rem}