/* One full-screen conversation, with only the message history scrolling. */
#social-root:not([hidden]){position:fixed;inset:var(--conversation-top,0px) 0 auto;z-index:100;width:100%;height:var(--conversation-height,100dvh);display:block;background:var(--surface,#101e41);overscroll-behavior:none}
#social-root .social-panel{width:100%;height:100%;max-height:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:0;border:0;border-radius:0;overflow:hidden;background:var(--surface,#101e41);color:var(--text);box-shadow:none}
.conversation-open{overscroll-behavior:none}
#social-root .social-heading{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:8px max(12px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--line)}
.social-heading h2{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(16px,2vw,20px);font-weight:600;line-height:1.3}
.voice-toolbar,.game-voice-controls{display:flex;align-items:center;flex-wrap:nowrap;gap:0;flex-shrink:0}
#social-root .voice-toolbar .icon-button,#voice-dock .icon-button,.game-voice-controls .icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:13px;border:0;border-radius:10px;background:transparent;color:var(--text)}
#social-root .voice-toolbar svg,#voice-dock svg,.game-voice-controls svg{width:18px;height:18px;flex-shrink:0}
#social-root .microphone-toggle[aria-pressed=true],#voice-dock [data-social=mute-live][aria-pressed=true],.game-voice-controls [data-social=mute-live][aria-pressed=true]{color:var(--green,#99d4bb);background:#75d6ab1a}
.listening-toggle[aria-pressed=true]{color:var(--gold)!important}
#social-root .resume-audio{margin:0;color:var(--gold)}
#social-root .live-voice{grid-column:1;grid-row:2;min-width:0;max-height:none;margin:0;padding:6px max(16px,env(safe-area-inset-left));overflow:hidden;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;display:flex;align-items:center;gap:12px}
#social-root .live-status{flex-shrink:0;max-width:100%;min-height:0;margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
#social-root .voice-warning{flex-wrap:wrap}
#social-root .voice-warning .live-status{flex-shrink:1;color:var(--gold)}
.voice-participants{display:flex;align-items:center;gap:12px;min-width:0;overflow-x:auto;flex-wrap:nowrap;margin:0;scrollbar-width:thin}
.voice-person{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;padding:0;border:0;border-radius:0;background:transparent;font-size:12px;line-height:1.5;color:var(--text)}
.voice-person svg{width:13px;height:13px}.voice-person.muted{color:var(--muted)}
#social-root .conversation-options{grid-column:1;grid-row:3;max-height:35dvh;overflow:auto;padding:8px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:var(--surface2)}
.conversation-options[hidden],#social-root [hidden]{display:none!important}
.host-conversation{padding:0;margin:0;border:0}.host-conversation>summary{cursor:pointer;min-height:44px;align-content:center;color:var(--gold);font-size:14px}
.conversation-channels{display:flex;flex-wrap:wrap;gap:6px}.conversation-channels button{flex:1;min-width:125px;display:flex;align-items:center;gap:7px;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--text);font-size:13px;text-align:left}.conversation-channels svg{width:17px}.conversation-channels button>span{margin-inline-start:auto;font-size:11px;color:var(--muted)}.conversation-channels [aria-pressed=true]{border-color:var(--gold)}
.host-all-microphones{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 0;background:transparent;color:var(--text);font-size:13px;text-align:left}.host-all-microphones svg{width:18px}.host-all-microphones[aria-pressed=true]{color:var(--danger)}
.host-microphones{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:0 16px}.host-microphones>div{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}.host-microphones .icon-button{width:44px;min-width:44px;height:44px;padding:12px}.host-microphones [aria-pressed=true]{color:var(--danger)}
.conversation-options [data-report-player]{min-height:44px;font-size:12px;margin:0}
#social-root .social-messages{grid-column:1;grid-row:4;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;min-height:0;margin:0;padding:20px max(16px,calc((100vw - 900px)/2));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-anchor:auto}
#social-root .chat-message.text-message,#social-root .chat-message.audio-message{position:relative;flex:0 0 auto;align-self:flex-start;width:fit-content;max-width:min(85%,680px);min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow-wrap:anywhere}
#social-root .chat-message.mine{align-self:flex-end;margin-inline-start:auto}
#social-root .chat-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:3px}
#social-root .chat-meta strong{min-width:0;max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--gold)}
#social-root .chat-meta time{white-space:nowrap;font-size:11px;color:var(--muted)}
#social-root .chat-message .text-bubble{display:block;width:fit-content;max-width:100%;margin:0;padding:8px 11px;border-radius:4px 13px 13px;background:var(--surface2);color:var(--text);font-size:16px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
#social-root .chat-message.mine .text-bubble{margin-inline-start:auto;border-radius:13px 4px 13px 13px;background:#24456d}
.empty-chat{margin:auto;max-width:30ch;text-align:center;font-size:14px;color:var(--muted);line-height:1.5}
#social-root .audio-message .voice-message{display:flex;align-items:center;gap:8px;min-height:44px;min-width:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text);font-size:13px}
.audio-message [data-audio-icon]{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px}.voice-message svg{width:20px;height:20px}.voice-message progress{width:clamp(75px,22vw,200px);height:3px;border:0;border-radius:4px;overflow:hidden;background:var(--line);accent-color:var(--gold)}.voice-message progress::-webkit-progress-bar{background:var(--line)}.voice-message progress::-webkit-progress-value{background:var(--gold)}.voice-message [data-audio-time]{font-variant-numeric:tabular-nums;white-space:nowrap}
#social-root .chat-composer{grid-column:1;grid-row:5;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin:0;padding:10px max(12px,calc((100vw - 920px)/2)) max(10px,env(safe-area-inset-bottom));min-width:0;border-top:1px solid var(--line);background:var(--surface)}
#social-root .chat-composer textarea{grid-column:1;grid-row:1;width:100%;height:46px;min-height:46px;max-height:100px;resize:none;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--text);font-family:inherit;font-size:16px;line-height:1.5}
.composer-actions{grid-column:2;grid-row:1;display:flex;align-items:center;gap:2px;margin:0}.composer-actions .icon-button,.recording-preview .icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:12px}.composer-actions svg{width:18px;height:18px}.composer-actions .send-message{background:var(--gold);color:var(--gold-ink);border-radius:12px}
.recording-status{font-size:12px;color:var(--muted);line-height:1.4}.recording-status:empty{display:none}.recording-preview{grid-column:1;grid-row:1;display:flex;align-items:center;gap:8px;min-height:46px;font-size:13px}.recording-preview [data-social=cancel-recording]{margin-inline-start:auto}
#voice-dock{position:fixed;inset:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) auto auto;z-index:85;display:flex;align-items:center;flex-wrap:nowrap;gap:0;max-width:none;padding:2px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 4px 18px #0003}
#modal-root #voice-dock{position:static;inset:auto;margin:0 0 8px auto;padding:0;border:0;box-shadow:none;background:transparent}
.game-route .game-topline .game-voice-controls .icon-button{width:36px;min-width:36px;height:44px;min-height:44px;padding:9px}.game-route .game-topline .game-voice-controls svg{width:18px;height:18px}.game-voice-controls{border-inline-start:1px solid var(--line);margin-inline-start:2px;padding-inline-start:2px}
body:has(> #voice-dock) .app-shell:not(.game-route) .topbar{padding-inline-end:154px}
@media(max-width:600px){#social-root .social-heading{padding-block:4px}#social-root .social-heading h2{font-size:16px}#social-root .voice-toolbar svg{width:17px;height:17px}#social-root .live-voice{gap:7px;padding-block:5px}#social-root .live-status,.voice-person{font-size:11px}#social-root .social-messages{padding-block:14px;gap:12px}#social-root .chat-message.text-message,#social-root .chat-message.audio-message{max-width:90%}#social-root .chat-composer{gap:4px}.game-route .game-topline{flex-wrap:wrap}.game-route .game-topline>.row{margin-inline-start:auto}.game-route .game-topline .game-voice-controls .icon-button{width:32px;min-width:32px;padding:7px}}
@media(max-width:350px){#social-root .social-heading{padding-inline:8px}#social-root .social-heading h2{font-size:15px}#social-root .social-messages{padding-inline:12px}}
@media(max-height:500px){#social-root .social-heading{padding-block:0}#social-root .live-voice{padding-block:2px}#social-root .social-messages{padding-block:10px}#social-root .chat-composer{padding-block:5px}}
/* Keep the round title readable beside the two added voice controls. */
@media(max-width:600px){body[data-route=game] .game-route .game-topline .icon-button{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:12px!important}body[data-route=game] .game-route .game-topline .game-voice-controls .icon-button{width:36px!important;min-width:36px!important;padding:9px!important}body[data-route=game] .game-title{min-width:115px;flex:1 0 115px}}

/* The game and the salon remain visible behind the conversation glass. */
#social-root:not([hidden]){background:rgba(7,17,35,.16);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
#social-root .social-panel{background:rgba(12,27,53,.22);border:1px solid rgba(235,245,255,.18)}
#social-root .social-heading,#social-root .live-voice,#social-root .social-messages{background:transparent}
#social-root .chat-composer{background:rgba(14,30,56,.14);border-top:1px solid rgba(235,245,255,.18)}
#social-root .chat-composer textarea,#social-root .chat-composer input{background:rgba(255,255,255,.07);border-color:rgba(235,245,255,.24)}
#social-root .chat-message .text-bubble{background:rgba(7,18,37,.42);border:1px solid rgba(235,245,255,.16)}
#social-root .chat-message.mine .text-bubble{background:rgba(19,39,65,.46);border-color:rgba(255,226,159,.24)}

#voice-dock{background:rgba(12,27,53,.22)!important;backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(235,245,255,.2)}
#social-root details,#social-root .social-tools{background:transparent}

#social-root .chat-composer{position:relative}
.chat-emoji-picker{position:absolute;inset-inline-end:max(12px,calc((100vw - 920px)/2));bottom:calc(100% + 8px);width:min(370px,calc(100vw - 24px));padding:8px 12px 12px;background:rgba(17,35,66,.94);backdrop-filter:blur(20px);border:1px solid #c6dbff55;border-radius:18px;box-shadow:0 12px 36px #02081766;z-index:2}
.chat-emoji-picker[hidden]{display:none!important}.emoji-heading{display:flex;align-items:center;justify-content:space-between;font-size:14px}.emoji-heading .icon-button{width:44px;height:44px;padding:12px}.emoji-scroll{max-height:min(290px,38dvh);overflow-y:auto;overscroll-behavior:contain}.emoji-scroll section+section{margin-top:14px}.emoji-scroll h3{font-size:12px;font-weight:500;color:var(--muted);margin:0 0 6px}.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.emoji-grid button{width:44px;min-width:44px;height:44px;min-height:44px;padding:5px;border-radius:9px;background:transparent;font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;font-size:25px;line-height:1}.emoji-grid button:hover,.emoji-grid button:focus-visible{background:#ffffff12;outline-color:var(--gold)}
.voice-quality{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap}.voice-quality:before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor}.voice-quality[data-level=good]{color:#b1ebd5}.voice-quality[data-level=fair]{color:#ffdc92}.voice-quality[data-level=weak]{color:#ffb9c5}.voice-quality[hidden]{display:none!important}
#social-root .live-voice{flex-wrap:wrap}.voice-quality{margin-inline-start:auto}
@media(max-width:370px){.emoji-grid{grid-template-columns:repeat(6,1fr)}#social-root .composer-actions{gap:0}}
#reaction-tray{display:grid;grid-template-columns:repeat(6,44px);gap:2px;max-height:min(320px,60dvh);overflow-y:auto}