.social-trigger{background:#202832;border:1px solid #3e4955;color:#f3f5f6;border-radius:12px;padding:10px 14px;font-weight:600;display:flex;gap:8px;align-items:center}.social-count{background:#dcf76f;color:#182016;border-radius:10px;padding:1px 6px;font-size:11px}.social-panel{position:fixed;inset:0 0 0 auto;width:min(450px,100%);background:#121820;border-left:1px solid #35424d;z-index:10010;box-shadow:-20px 0 80px #0007;display:flex;flex-direction:column}.social-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 14px;border-bottom:1px solid #2b343d}.social-head h2{font-size:23px}.social-head small{color:#99aab8;font-size:12px}.social-icon-btn{border:0;background:#252f3a;color:white;border-radius:9px;min-width:36px;min-height:36px}.social-tabs{display:flex;padding:12px 18px;gap:6px;border-bottom:1px solid #29323c}.social-tabs button{flex:1;border:0;border-radius:9px;background:transparent;color:#9dacbb;padding:10px}.social-tabs button.active{background:#2b3520;color:#e1fa83}.social-scroll{overflow:auto;flex:1;padding:18px;overscroll-behavior:contain}.social-scroll h3{margin:18px 0 12px;font-size:15px}.social-search{display:flex;gap:6px;margin-bottom:14px}.social-search input,.social-compose input,.social-create input{min-width:0;flex:1;background:#0b1016;border:1px solid #39434e;color:white;border-radius:9px;padding:11px}.social-search button,.social-compose button,.social-create button{border:0;border-radius:9px;background:#d9f76c;color:#17200e;padding:10px 13px;font-weight:700}.social-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #29313a}.social-avatar{flex:none;width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#2c3a4b;color:#e1f881;font-weight:700}.social-row-info{flex:1;min-width:0}.social-row-info b{display:block;overflow:hidden;text-overflow:ellipsis}.social-row-info small{display:block;color:#8e9fb0;margin-top:4px;font-size:12px}.social-row button{font-size:12px}.social-row .secondary{padding:8px 10px}.social-dot{display:inline-block;width:7px;height:7px;background:#8593a3;border-radius:50%;margin-right:5px}.social-dot.online{background:#d9f76c}.social-actions{display:flex;gap:6px;flex-wrap:wrap}.social-empty{padding:24px 4px;color:#a9b5c0;line-height:1.7}.social-chat-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}.social-chat-head h3{margin:0;flex:1}.social-history{display:flex;flex-direction:column;gap:10px;min-height:220px}.social-message{align-self:flex-start;background:#27323d;padding:11px 12px;border-radius:12px;max-width:90%;overflow-wrap:anywhere}.social-message.mine{align-self:flex-end;background:#2b3727}.social-message p{white-space:pre-wrap;font-size:14px;line-height:1.5}.social-message small{display:block;font-size:10px;color:#aab6c0;margin-top:5px}.social-message button{background:none;color:#a9b4be;border:0;font-size:10px;padding:3px}.social-compose{display:flex;gap:6px;padding:14px 0;position:sticky;bottom:-18px;background:#121820}.social-note{font-size:12px;color:#92a3b3;line-height:1.6;margin:10px 0}.social-create{display:flex;gap:6px;flex-wrap:wrap}.lobby-card{border:1px solid #3d4d36;border-radius:15px;background:linear-gradient(140deg,#22301f,#171e29);padding:17px}.lobby-card h3{font-size:20px;margin:0 0 8px}.lobby-members{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}.lobby-members span{background:#313f36;border-radius:20px;padding:6px 10px;font-size:12px}.voice-bubble{position:fixed;right:22px;bottom:22px;z-index:10020;width:270px;border:1px solid #75963b;border-radius:18px;background:#172019;box-shadow:0 8px 35px #0008;touch-action:none;overflow:hidden}.voice-drag{padding:13px 15px;background:#263722;cursor:grab;display:flex;align-items:center;gap:9px;user-select:none}.voice-drag strong{flex:1;font-size:14px}.voice-drag button{touch-action:manipulation}.voice-body{padding:12px 14px}.voice-body p{font-size:12px;color:#bbcfaa;line-height:1.5}.voice-controls{display:flex;gap:7px;margin-top:12px}.voice-controls button{background:#2e3c30;color:white;border:1px solid #53604b;border-radius:8px;min-height:36px;padding:8px 10px;font-size:12px}.voice-controls .hangup{background:#733432;border-color:#9b4d46}.voice-bubble.compact{width:86px;border-radius:40px}.voice-bubble.compact .voice-body{display:none}.voice-bubble.compact .voice-drag{padding:17px 12px}.voice-bubble.compact .voice-drag strong{font-size:0}.voice-bubble.compact .voice-drag strong:before{content:'🎙';font-size:20px}.voice-bubble.compact .voice-drag .voice-symbol{display:none}.social-error{color:#ffb2a5;padding:8px 0;font-size:13px;line-height:1.5}.social-own-code{padding:12px;background:#202a35;border-radius:10px;font-size:13px;color:#cbd9e5;letter-spacing:1px}.social-footer{font-size:11px;color:#8496a7;border-top:1px solid #29313a;padding:12px 20px;line-height:1.6}.social-mobile-backdrop{position:fixed;inset:0;background:#0008;z-index:10009}.game-stage{position:fixed;inset:0;z-index:1000;background:#090d11;display:flex;flex-direction:column}.game-stage-header{height:52px;flex:none;display:flex;align-items:center;gap:12px;padding:7px 14px;background:#121820;border-bottom:1px solid #39404a}.game-stage-header b{flex:1;font-size:14px}.game-stage-header button{font-size:13px;padding:8px 12px}.game-stage iframe{flex:1;width:100%;border:0;min-height:0}.overlay-body{background:transparent;min-width:0}.overlay-body .social-panel{position:fixed;width:100%;border:1px solid #35424d;border-radius:16px}.overlay-body .social-trigger{display:none}.overlay-body .voice-bubble{right:0;bottom:0}.voice-only{background:transparent}.voice-only .voice-bubble{position:relative;inset:auto;width:100%;min-height:88px;box-shadow:none;-webkit-app-region:no-drag}.voice-only .voice-drag{-webkit-app-region:drag;cursor:move}.voice-only button{-webkit-app-region:no-drag}.voice-only .voice-bubble.compact{width:100%}.voice-only .voice-bubble.compact .voice-drag{min-height:86px}.voice-only .voice-body{padding:14px}.voice-participants{font-size:11px;color:#b6c9ae;margin-top:9px;max-height:45px;overflow:auto}@media(max-width:700px){.social-trigger{padding:9px 10px;font-size:0}.social-trigger .social-label{font-size:0}.social-trigger .social-symbol{font-size:17px}.voice-bubble{width:230px;right:12px;bottom:12px}.social-panel{width:100%}.social-head{padding-top:max(18px,env(safe-area-inset-top))}.social-footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}.game-stage-header b{max-width:110px;overflow:hidden}.game-stage-header{gap:6px}}

/* Compact transparent voice presentation. No transport/auth behavior here. */
.voice-bubble{opacity:var(--voice-opacity,.55);transition:opacity .15s;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;touch-action:pan-y}
.voice-bubble:hover,.voice-bubble:focus-within,.voice-bubble.voice-moving{opacity:1}
.voice-bubble[hidden],.voice-bubble.voice-hidden-by-user{display:none!important;pointer-events:none!important}
.voice-drag{touch-action:none;min-height:44px;box-sizing:border-box;padding:8px;gap:5px}
.voice-drag button,.voice-controls button{min-width:44px;min-height:44px;box-sizing:border-box}
.voice-bubble.compact{width:148px;min-height:60px;border-radius:30px}
.voice-bubble.compact .voice-drag{min-height:58px;padding:7px}
.voice-bubble.compact .voice-drag strong{font-size:0;min-width:28px}
.voice-bubble.compact .voice-drag strong:before{font-size:18px}
.voice-display-options{font-size:12px;margin-top:10px}
.voice-display-options summary{cursor:pointer;min-height:28px}
.voice-display-options label{display:block}.voice-display-options input{width:100%;min-height:44px;accent-color:#d9f578;touch-action:pan-x;box-sizing:border-box}
.voice-display-options button{background:#29362b;color:white;border:1px solid #697453;border-radius:8px;width:100%;min-height:44px;font:12px system-ui}
.voice-safe-area{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.social-overlay-recovery summary{margin-top:10px;min-height:28px;cursor:pointer}.social-overlay-recovery p{line-height:1.5}.social-overlay-recovery a{display:inline-block;color:#e1fa83;min-height:32px;padding:8px;box-sizing:border-box}
@media(prefers-reduced-motion:reduce){.voice-bubble{transition:none}}