:root{--bg:#f7f8f6;--surface:#ffffffc7;--surface-strong:#fff;--surface-muted:#eff3f1;--line:#1d2a2e1f;--line-strong:#1d2a2e2e;--text:#12191b;--muted:#627073;--faint:#879194;--accent:#087c70;--accent-strong:#075f57;--accent-soft:#dff3ee;--send:#c4651c;--danger:#b3261e;--shadow-soft:0 18px 56px #1c272b1a;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(180deg, #ffffffe0, #fff3 34%), linear-gradient(135deg, #087c7014, transparent 42%), var(--bg);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button,input{transition:border-color .16s,background .16s,box-shadow .16s,color .16s,transform .16s}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #087c7038}.app-shell{grid-template-rows:auto 1fr;min-height:100vh;display:grid}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(18px)saturate(1.1);backdrop-filter:blur(18px)saturate(1.1);background:#f7f8f6c7;justify-content:space-between;align-items:center;gap:18px;min-height:68px;padding:0 clamp(16px,3vw,34px);display:flex}.brand{color:var(--text);align-items:center;gap:10px;font-size:21px;font-weight:800;display:inline-flex}.brand svg{color:var(--accent)}.session-strip{justify-content:flex-end;align-items:center;gap:8px;min-width:0;display:flex}.pill{border:1px solid var(--line);min-width:0;max-width:260px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;background:#ffffff9e;border-radius:8px;align-items:center;gap:7px;padding:7px 10px;font-size:12px;font-weight:650;display:inline-flex;overflow:hidden}.pill svg{color:var(--accent);flex:none}.join-layout{place-items:center;padding:clamp(18px,5vw,52px);display:grid}.join-panel{border:1px solid var(--line);background:var(--surface);width:min(100%,430px);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(20px)saturate(1.05);backdrop-filter:blur(20px)saturate(1.05);border-radius:8px;gap:15px;padding:clamp(18px,4vw,26px);display:grid}label{color:var(--muted);gap:7px;font-size:12px;font-weight:760;display:grid}input{border:1px solid var(--line-strong);width:100%;min-width:0;color:var(--text);background:#ffffffbd;border-radius:8px;outline:none;padding:12px 13px}input::placeholder{color:var(--faint)}input:focus{background:#fff;border-color:#087c7094;box-shadow:0 0 0 4px #087c701a}.field-row{gap:10px;display:grid}.field-row.split{grid-template-columns:1fr 44px;align-items:end}.primary-action,.secondary-action,.danger-action,.icon-button{border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:42px;font-weight:780;display:inline-flex}.primary-action{color:#fff;background:var(--accent);padding:0 16px;box-shadow:0 10px 22px #087c702e}.primary-action:hover:not(:disabled){background:var(--accent-strong);transform:translateY(-1px)}.primary-action.compact{min-height:38px}.secondary-action,.icon-button.secondary{color:#223033;border-color:var(--line);background:#ffffff9e}.secondary-action{padding:0 13px}.secondary-action:hover,.icon-button.secondary:hover{border-color:var(--line-strong);background:#fff}.danger-action{color:#fff;background:var(--danger);padding:0 14px}.danger-action:hover{background:#8f1e18}.icon-button{width:44px;padding:0}.icon-button.send{color:#fff;background:var(--send);box-shadow:0 10px 20px #c4651c2e}.icon-button.send:hover:not(:disabled){background:#a85619;transform:translateY(-1px)}.notice{color:#7b5700;margin:0;font-size:13px;line-height:1.45}.notice.inline{padding:0 4px}.room-layout{grid-template-columns:minmax(230px,280px) minmax(0,1fr);min-height:0;display:grid}.side-panel{border-right:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffff94;grid-template-rows:auto 1fr auto;gap:18px;min-height:0;padding:22px;display:grid}.panel-heading{color:var(--text);align-items:center;gap:9px;font-weight:800;display:flex}.panel-heading svg{color:var(--accent)}.participants{scrollbar-width:thin;align-content:start;gap:8px;min-height:0;display:grid;overflow:auto}.participant{border:1px solid var(--line);background:#ffffff94;border-radius:8px;justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:10px;display:flex}.participant div{gap:3px;min-width:0;display:grid}.participant strong,.participant span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.participant strong{color:#1d282b;font-size:14px}.participant span{color:var(--muted);font-size:12px}.status-dot{background:#a7b1b3;border-radius:999px;flex:0 0 9px;width:9px;height:9px;box-shadow:0 0 0 3px #a7b1b324}.status-dot.online{background:#0c9c68;box-shadow:0 0 0 3px #0c9c6829}.side-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.chat-panel{grid-template-rows:auto 1fr auto auto;gap:14px;min-width:0;min-height:0;padding:clamp(16px,3vw,28px);display:grid}.voice-bar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:14px;min-height:48px;padding:0 0 12px;display:flex}.voice-bar div{color:var(--muted);align-items:baseline;gap:5px;display:inline-flex}.voice-bar strong{color:var(--text);font-size:24px;line-height:1}.messages{scrollbar-width:thin;flex-direction:column;gap:10px;min-height:0;padding-right:4px;display:flex;overflow:auto}.empty-state{color:var(--faint);margin:auto}.message{border:1px solid var(--line);background:#fffc;border-radius:8px;align-self:flex-start;gap:6px;max-width:min(620px,82%);padding:11px 12px;display:grid;box-shadow:0 8px 24px #1a25280d}.message.mine{background:var(--accent-soft);border-color:#087c7038;align-self:flex-end}.message.failed{background:#fff2ec;border-color:#b3512a47}.message header{color:var(--muted);justify-content:space-between;align-items:center;gap:14px;font-size:12px;display:flex}.message header span,.message header time{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.message p{color:var(--text);overflow-wrap:anywhere;white-space:pre-wrap;margin:0;line-height:1.45}.compose{border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffff9e;border-radius:8px;grid-template-columns:1fr 44px;gap:10px;padding:8px;display:grid}.compose input{background:0 0;border-color:#0000;padding:9px 10px}.compose input:focus{box-shadow:none;background:0 0}audio{display:none}@media (width<=760px){.topbar{flex-direction:column;align-items:flex-start;min-height:64px;padding:14px 16px}.session-strip{justify-content:flex-start;width:100%;overflow-x:auto}.room-layout{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}.side-panel{border-right:0;border-bottom:1px solid var(--line);grid-template-rows:auto auto auto;gap:12px;padding:14px 16px}.participants{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-height:170px}.chat-panel{padding:14px 16px 16px}.message{max-width:94%}}