:root{--bg:#0d1014;--panel:#171b21;--panel2:#1f242c;--line:#2a3039;--ink:#eef1f5;--mute:#9aa4b2;--accent:#5b8cff;--accent2:#7c5cff;--ok:#38d39f;--bad:#ff5d5d;--r:16px;
font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}html,body{margin:0;height:100%}body{display:flex;flex-direction:column;min-height:100dvh}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:650;letter-spacing:.2px}
.mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:800}
.room-label{color:var(--mute);font-size:14px;font-variant-numeric:tabular-nums}
main{flex:1;display:flex;flex-direction:column;min-height:0}
h1{margin:0 0 6px;font-size:26px;letter-spacing:-.3px}
input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;font-size:16px}
input::placeholder{color:#7d8797}
input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.primary{margin-top:14px;width:100%;padding:13px;border:0;border-radius:12px;background:var(--accent);color:#fff;font-weight:650;font-size:16px}
.primary:hover{filter:brightness(1.08)}.primary:disabled{opacity:.6;cursor:wait}
.ghost{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink)}
.err{color:var(--bad);margin:12px 0 0;font-size:14px}
.lobby{flex:1;display:flex;align-items:center;justify-content:center;gap:56px;padding:24px 40px 48px;flex-wrap:wrap}
.pv{flex:1 1 560px;max-width:760px}
.pv-tile{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:radial-gradient(130% 120% at 30% 15%,#202838,#11151c 65%);border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.pv-avatar{--lvl:0;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;font-size:50px;font-weight:700;color:#fff;background:linear-gradient(135deg,#3b4a6b,#2a3247);box-shadow:0 0 0 calc(4px + var(--lvl)*18px) rgba(56,211,159,calc(.10 + var(--lvl)*.35));transition:box-shadow 80ms linear}
.pv-avatar.has-name{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.pv-avatar:empty::before,#pvInitials:empty::before{content:"";width:46px;height:46px;background:#c9d2e3;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-9 2.2-9 5v3h18v-3c0-2.8-4.6-5-9-5z"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-9 2.2-9 5v3h18v-3c0-2.8-4.6-5-9-5z"/></svg>') center/contain no-repeat;display:block}
.pv-controls{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;align-items:center;gap:14px}
.pv-controls .round{background:rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.pv-controls .round.off{background:var(--bad)}
.meter{display:flex;align-items:flex-end;gap:3px;height:22px;padding:6px 10px;border-radius:12px;background:rgba(0,0,0,.35)}
.meter i{width:4px;height:4px;border-radius:2px;background:#5a6475;transition:height 70ms linear,background 70ms}
.meter i.on{background:var(--ok)}
.join{flex:0 1 360px;display:flex;flex-direction:column;align-items:center;text-align:center}
.join h1{font-size:30px;font-weight:600;letter-spacing:-.4px;margin:0 0 18px}
.here{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:64px;margin-bottom:22px}
.faces{display:flex;gap:10px}
.face{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;color:#fff;background:#3a4560}.face.agent{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.face .ai{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);font-size:9px;line-height:1;font-weight:800;padding:2px 5px;border-radius:6px;background:#fff;color:#3b3fc4;letter-spacing:.4px;box-shadow:0 0 0 2px var(--bg)}
.names{color:var(--mute);font-size:14px;line-height:1.4;max-width:320px}
.names b{color:var(--ink);font-weight:600}
.lobby{position:relative}
.privacy{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:12px;color:#6c7686;text-decoration:none}
.privacy:hover,.privacy:focus-visible{color:var(--ink);text-decoration:underline}
.face.pending{opacity:.55}
.here .empty{color:#6c7686;font-size:14px;margin-top:20px}
#joinForm{width:100%;display:flex;flex-direction:column;gap:12px}
#joinForm .primary{margin:0;border-radius:999px;padding:14px}
#joinForm input{text-align:center;border-radius:999px;padding:14px 18px}
.call{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 16px 96px}
.status{color:var(--mute);font-size:14px;text-align:center;min-height:20px;padding:4px 0 10px}
.grid{flex:1;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));grid-auto-rows:minmax(180px,1fr);align-content:center;min-height:0}
.tile{position:relative;background:var(--panel);border:2px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;place-items:center;transition:border-color .12s,box-shadow .12s}
.tile.speaking{border-color:var(--ok);box-shadow:0 0 0 3px rgba(56,211,159,.25)}
.tile.agent{background:radial-gradient(120% 120% at 30% 20%,#23305a,#141824 60%)}
.avatar{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:700;background:var(--panel2);color:var(--ink)}
.agent .avatar{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.nameplate{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;align-items:center;padding:5px 10px;border-radius:9px;background:rgba(0,0,0,.55);font-size:14px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nameplate .muted{width:8px;height:8px;border-radius:50%;background:var(--bad)}
.tag{font-size:11px;padding:1px 6px;border-radius:6px;background:rgba(91,140,255,.3);color:#cfe0ff}
.bar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:14px;padding:14px calc(14px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));background:linear-gradient(transparent,rgba(13,16,20,.95) 35%)}
.round{width:54px;height:54px;border-radius:50%;border:0;background:var(--panel2);display:grid;place-items:center}
.round:hover{background:#2a313b}.round.off{background:#3a2226}.round.leave{background:var(--bad);width:68px;border-radius:27px}
.round:focus-visible,.primary:focus-visible,.ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ico{width:22px;height:22px;background:var(--ink);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico.mic{--m:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V22h2v-3.1A7 7 0 0 0 19 12z"/></svg>')}
.off .ico.mic{--m:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 12a7 7 0 0 1-1.2 3.9l-1.5-1.5A5 5 0 0 0 17 12zM15 6v5.2L9 5.3V6a3 3 0 0 1 6 0zM3.3 2 2 3.3l7 7V12a3 3 0 0 0 4.7 2.5l1.5 1.5A5 5 0 0 1 7 12H5a7 7 0 0 0 6 6.9V22h2v-3.1a7 7 0 0 0 3.6-1.4l4.1 4.1 1.3-1.3z"/></svg>')}
.ico.link{--m:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.6 13.4a1 1 0 0 1 0-1.4l3.5-3.5a1 1 0 1 1 1.4 1.4L12 13.4a1 1 0 0 1-1.4 0zM8.5 19a4.5 4.5 0 0 1-3.2-7.7l2.1-2.1 1.4 1.4-2.1 2.1a2.5 2.5 0 0 0 3.5 3.5l2.1-2.1 1.4 1.4-2.1 2.1A4.5 4.5 0 0 1 8.5 19zm8.1-4.2-1.4-1.4 2.1-2.1a2.5 2.5 0 0 0-3.5-3.5l-2.1 2.1-1.4-1.4 2.1-2.1a4.5 4.5 0 0 1 6.4 6.4z"/></svg>')}
.ico.leave{--m:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 9c-1.6 0-3.2.3-4.6.7v3.1c0 .4-.2.7-.6.9-1 .5-1.9 1.1-2.7 1.8a1 1 0 0 1-1.4 0L.3 13a1 1 0 0 1 0-1.4C3.4 8.7 7.5 7 12 7s8.6 1.7 11.7 4.6a1 1 0 0 1 0 1.4l-2.4 2.5a1 1 0 0 1-1.4 0c-.8-.7-1.7-1.3-2.7-1.8a1 1 0 0 1-.6-.9V9.7C15.2 9.3 13.6 9 12 9z"/></svg>')}
.ask{position:fixed;right:20px;bottom:96px;width:min(360px,calc(100% - 40px));background:var(--panel);border:1px solid var(--accent);border-radius:18px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.45);z-index:5}
.ask-from{margin:0;color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}.ask-q{margin:6px 0 12px;font-size:16px;line-height:1.4}
.ask-row{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}.ask-row .primary{width:auto;margin:0;padding:10px 18px}
.enable-audio{position:fixed;left:50%;top:76px;transform:translateX(-50%);padding:10px 16px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-weight:650;z-index:6}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);padding:10px 16px;border-radius:12px;font-size:14px;z-index:7}
@media (max-width:600px){.lobby{gap:28px;padding:12px 16px 32px}.pv{flex-basis:100%}.pv-avatar{width:96px;height:96px;font-size:36px}.join h1{font-size:26px}.grid{grid-auto-rows:minmax(140px,1fr)}.avatar{width:64px;height:64px;font-size:26px}.ask{right:12px;left:12px;width:auto}}
@media (prefers-reduced-motion:reduce){.tile{transition:none}}