/* Focused playback: content-sized people panel.
   Screen geometry, persistent media players and the mixer keep their ownership. */
.stream-viewer:not(:fullscreen).has-stream-participants {grid-template-columns:minmax(0,1fr) minmax(250px,285px);gap:18px}
.stream-participants-panel {align-self:start;grid-template-rows:auto minmax(0,1fr) auto;height:auto;max-height:100%;border-color:rgba(var(--theme-border-subtle-rgb,140,140,150),.25);background:var(--theme-surface-card,#0d0d10);color:var(--theme-text-primary,#f1f1f4);animation:stream-panel-in .18s ease-out both}
.stream-viewer:not(:fullscreen) .stream-participants-panel {border-color:rgba(var(--theme-border-subtle-rgb,140,140,150),.25);border-radius:16px}
.stream-participants-panel header {min-height:56px;padding:0 14px;border-color:rgba(var(--theme-border-subtle-rgb,140,140,150),.16)}
.stream-participants-heading {display:flex;align-items:center;gap:8px;min-width:0}
.stream-participants-heading>svg {width:18px;height:18px;color:var(--theme-text-secondary,#bdbdc8)}
.stream-participants-heading strong {font-size:13px;font-weight:750}
.stream-participants-count {display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:7px;font-size:10px;font-weight:700;background:rgba(var(--theme-surface-interactive-rgb,130,130,140),.35);color:var(--theme-text-secondary,#babac5)}
.stream-participants-panel ul {gap:4px;margin:0;padding:10px;scrollbar-width:thin}
.stream-participant-row {grid-template-columns:36px minmax(0,1fr) auto;gap:9px;min-height:58px;padding:9px 7px;border:1px solid transparent;border-radius:11px;transition:background .16s ease,border-color .16s ease}
.stream-participant-row:hover {background:rgba(var(--theme-surface-hover-rgb,135,135,145),.14)}
.stream-participant-row>.avatar {width:36px;height:36px;font-size:12px}
.stream-participant-row.is-speaking {border-color:rgba(var(--theme-success-rgb,35,194,139),.22);background:rgba(var(--theme-success-rgb,35,194,139),.055)}
.stream-participant-copy {min-width:0}
.stream-participant-copy>strong {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.stream-participant-status {display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px}
.stream-participant-status small {font-size:9px;color:var(--theme-text-muted,#93939e);margin:0}
.stream-participant-status .stream-participant-sharing {display:inline-flex;align-items:center;gap:3px;color:var(--theme-link,#88b9ff)}
.stream-participant-sharing svg {width:11px;height:11px}
.stream-participant-state {display:flex;align-items:center;gap:5px}
.stream-participant-mic {display:grid;place-items:center;color:var(--theme-text-muted,#a3a3af)}
.stream-participant-mic.is-muted {color:var(--theme-danger,#ee8e9e)}
.stream-participant-mic svg {width:16px;height:16px}
.stream-speaking-bars {display:flex;gap:2px;align-items:center;height:14px;color:var(--theme-success,#28c28c)}
.stream-speaking-bars[hidden] {display:none}
.stream-speaking-bars i {width:2px;height:6px;border-radius:2px;background:currentColor;animation:stream-speaking .75s ease-in-out infinite alternate}
.stream-speaking-bars i:nth-child(2) {height:12px;animation-delay:-.3s}
.stream-speaking-bars i:nth-child(3) {height:8px;animation-delay:-.5s}
.stream-participants-panel .stream-participants-close {min-height:36px;margin:4px 12px 12px;padding:7px 12px;border-radius:10px;border-color:rgba(var(--theme-border-subtle-rgb,140,140,150),.3);background:transparent;color:inherit;font-size:11px;transition:background .16s ease,transform .16s ease}
.stream-participants-panel .stream-participants-close:hover {background:rgba(var(--theme-surface-hover-rgb,135,135,145),.2);transform:translateY(-1px)}
.stream-participants-panel .stream-participants-close:active {transform:scale(.98)}
@keyframes stream-panel-in {from {opacity:0;transform:translateY(5px)} to {opacity:1;transform:none}}
@keyframes stream-speaking {to {transform:scaleY(.5)}}
@media (max-width:760px) {
 .stream-viewer:not(:fullscreen).has-stream-participants {grid-template-columns:minmax(0,1fr) minmax(180px,32%);gap:10px}
 .stream-participants-heading {gap:5px}
 .stream-participants-heading>svg {display:none}
 .stream-participants-panel header {padding:0 10px}
 .stream-participant-row {grid-template-columns:30px minmax(0,1fr) auto;padding:7px 3px;gap:6px}
 .stream-participant-row>.avatar {width:30px;height:30px}
 .stream-participants-panel ul {padding:7px}
 .stream-participant-status {gap:3px}
}
@media (prefers-reduced-motion:reduce) {
 .stream-participants-panel,.stream-speaking-bars i {animation:none}
 .stream-participant-row,.stream-participants-panel .stream-participants-close {transition:none}
}

/* Screen visibility uses the same blue switch as the rest of NEXO. */
.stream-selection summary {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 11px;border-radius:11px;font-weight:730;background:rgba(var(--theme-surface-interactive-rgb,17,29,50),.66);transition:background .18s,border-color .18s}
.stream-selection summary::-webkit-details-marker {display:none}
.stream-selection summary>svg {width:16px;height:16px;flex:none}
.stream-selection summary>svg:last-child {width:13px;height:13px;color:var(--theme-text-secondary);transition:transform .2s}
.stream-selection[open] summary>svg:last-child {transform:rotate(180deg)}
.stream-selection summary:hover,.stream-selection[open] summary {background:var(--theme-surface-hover);border-color:var(--theme-border-strong)}
.stream-selection summary:focus-visible {outline:2px solid #3498ff;outline-offset:3px}
.stream-selection-count {display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:5px;background:var(--theme-surface-interactive);color:var(--theme-text-secondary);font-size:10px}
.stream-selection>.stream-selection-menu {width:210px;min-width:0;max-width:calc(100vw - 24px);max-height:min(360px,65dvh);overflow:auto;padding:6px;border-radius:11px;animation:stream-panel-in .16s ease-out both}
.stream-selection .stream-selection-heading {display:block;padding:4px 7px 5px;color:var(--theme-text-secondary);font-size:10px;font-weight:650}
.stream-selection label {min-height:38px;gap:10px;padding:6px 7px;border-radius:7px;transition:background .16s}
.stream-selection label:hover {background:var(--theme-surface-hover)}
.stream-selection-person {display:flex;align-items:center;gap:7px;min-width:0;font-weight:650}
.stream-selection-person>svg {width:15px;height:15px;flex:none;color:var(--theme-text-secondary)}
.stream-selection-person>span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stream-selection input[role=switch] {position:relative;display:block;width:34px;min-width:34px;height:20px;min-height:20px;border:1px solid var(--theme-border-strong,#727783);border-radius:99px;background:var(--theme-text-muted,#626772);transition:background .18s,border-color .18s}
.stream-selection input[role=switch]::after {content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s cubic-bezier(.22,.8,.25,1)}
.stream-selection input[role=switch]:checked {background:#3498ff;border-color:#3498ff}
.stream-selection input[role=switch]:checked::after {transform:translateX(14px)}
.stream-selection input[role=switch]:focus-visible {outline:2px solid #3498ff;outline-offset:3px}
/* Cinema covers the full client area, including the custom window chrome. */
body:has(.cinema-mode) #desktop-window-chrome {display:none;pointer-events:none}
body:has(#desktop-window-chrome:not([hidden])) .cinema-mode {top:0}
#desktop-window-chrome .desktop-window-close {border-radius:0}
#desktop-window-chrome .desktop-window-close::before {content:none}
#desktop-window-chrome .desktop-window-close:hover,#desktop-window-chrome .desktop-window-close:focus-visible {color:#fff;background:#e81123!important}
@media(max-width:760px) {.stream-selection summary {min-height:34px;padding:0 9px;font-size:11px}.cinema-header {flex-wrap:wrap}.cinema-header>div:last-child {min-width:0;flex-wrap:wrap;justify-content:flex-start}}
@media(prefers-reduced-motion:reduce) {.stream-selection>.stream-selection-menu {animation:none}.stream-selection summary,.stream-selection summary>svg:last-child,.stream-selection label,.stream-selection input[role=switch],.stream-selection input[role=switch]::after {transition:none}}