/* Approved normal overview for three/four streams only.
   Geometry follows the native frame; chrome overlays do not consume video rows.
   Cinema, individual/detached players and remote control keep their own styles. */
@media (min-width:761px) {
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card[data-stream-grid-card] { grid-template-rows:auto; }
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card > .stream-card-top,
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card > footer {
  position:absolute; left:0; right:0; z-index:5; height:0; min-height:0;
  padding:0; border:0; background:none; overflow:visible;
 }
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card > .stream-card-top { top:0; }
 .streams-grid:is(.count-3,.count-4) .stream-card-top > .stream-grid-owner {
  position:absolute; top:7px; left:7px; padding:4px 7px; border-radius:7px;
  background:rgba(var(--theme-media-surface-rgb,8,16,31),.82);
 }
 .streams-grid:is(.count-3,.count-4) .stream-card-top > .stream-live-badge { position:absolute; top:10px; right:10px; }
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card > footer {
  bottom:0; flex-wrap:wrap; align-content:flex-end; align-items:flex-end; transform:translateY(-6px); opacity:0; pointer-events:none;
  transition:opacity .14s ease;
 }
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card:hover > footer,
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card:focus-within > footer { opacity:1; pointer-events:auto; }
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card > footer > * {
  background:rgba(var(--theme-media-surface-rgb,8,16,31),.9);
  border-radius:6px; padding:3px 6px;
 }
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card > footer > .stream-card-metrics { margin-left:7px; }
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card > footer > .stream-exit-button { margin-right:7px; }
}
@media (prefers-reduced-motion:reduce) {
 .streams-grid:is(.count-3,.count-4) > .stream-grid-card > footer { transition:none; }
}

/* Each card owns its audio level. The audience stays at the right edge while
   the volume control expands to the left, without covering adjacent actions. */
:is(.streams-grid,.cinema-grid) .stream-grid-card > footer { container-type:inline-size; }
.stream-grid-card .stream-card-actions { display:flex; align-items:center; flex:none; gap:6px; margin-left:auto; }
.stream-card-actions > [data-stream-watchers] { flex:none; }
.stream-card-actions .stream-exit-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.stream-card-actions .stream-exit-button > svg { display:none; width:14px; height:14px; flex:none; }
.stream-card-actions .stream-volume-grid {
 display:flex; align-items:center; flex:none; width:28px; height:28px;
 overflow:hidden; border:1px solid var(--theme-border-subtle,#45454a); border-radius:999px;
 color:var(--theme-text-primary,#f1f1f4); background:var(--theme-surface-interactive,#151518);
 transition:width 240ms cubic-bezier(.22,1,.36,1),background 160ms,border-color 160ms;
}
.stream-card-actions .stream-volume-grid.is-expanded { width:clamp(116px,26cqw,164px); border-color:var(--theme-border-strong,#676770); background:var(--theme-surface-hover,#202024); }
.stream-card-actions .stream-volume-grid .stream-volume-toggle {
 flex:0 0 26px; width:26px; height:26px; min-height:26px; min-width:26px; padding:0;
 border:0; border-radius:50%; color:inherit; background:transparent; box-shadow:none; backdrop-filter:none;
}
.stream-card-actions .stream-volume-grid .stream-volume-toggle svg { width:16px; height:16px; }
.stream-card-actions .stream-volume-grid .stream-volume-toggle:focus-visible { outline:2px solid var(--theme-functional,#3498ff); outline-offset:-3px; }
.stream-volume-grid .stream-volume-muted { display:none; }
.stream-volume-grid.is-muted .stream-volume-audible { display:none; }
.stream-volume-grid.is-muted .stream-volume-muted { display:block; color:var(--theme-text-secondary,#bdbdc8); }
.stream-grid-volume-details { display:flex; align-items:center; flex:1; min-width:0; gap:6px; padding-right:9px; opacity:0; visibility:hidden; transition:opacity 160ms ease,visibility 160ms; }
.stream-volume-grid.is-expanded .stream-grid-volume-details { opacity:1; visibility:visible; }
.stream-grid-volume-details output { flex:none; min-width:29px; text-align:right; font-size:10px; font-weight:650; font-variant-numeric:tabular-nums; }
.stream-grid-volume-details input[type="range"] {
 appearance:none; -webkit-appearance:none; flex:1; min-width:24px; width:100%; height:26px; min-height:26px; margin:0; padding:0; border:0; cursor:pointer;
 background:linear-gradient(to right,var(--theme-functional,#3498ff) 0 var(--stream-volume-progress,0%),var(--theme-border-strong,#676770) var(--stream-volume-progress,0%) 100%) center / calc(100% - 10px) 3px no-repeat;
}
.stream-grid-volume-details input[type="range"]::-webkit-slider-runnable-track { height:3px; border:0; border-radius:999px; background:transparent; }
.stream-grid-volume-details input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:10px; margin-top:-3.5px; border:0; border-radius:50%; background:var(--theme-text-primary,#fff); box-shadow:0 1px 3px rgba(var(--theme-shadow-rgb,0,0,0),.2); }
.stream-grid-volume-details input[type="range"]::-moz-range-track { height:3px; border:0; background:transparent; }
.stream-grid-volume-details input[type="range"]::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:var(--theme-text-primary,#fff); }
.stream-grid-volume-details input[type="range"]:focus-visible { outline:2px solid var(--theme-functional,#3498ff); outline-offset:-2px; border-radius:5px; }
@container (max-width:420px) {
 .stream-card-actions .stream-exit-button > svg { display:block; }
 .stream-card-actions .stream-exit-button > span { display:none; }
 :is(.streams-grid,.cinema-grid) .stream-card-metrics { min-width:0; gap:5px; }
 .stream-card-metrics > span { min-width:0; }
 .stream-card-metrics strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@container (max-width:260px) {
 .stream-card-actions { gap:4px; }
 .stream-card-actions .stream-volume-grid.is-expanded { width:106px; }
 .stream-grid-volume-details { gap:4px; padding-right:6px; }
}
@media (prefers-reduced-motion:reduce) {
 .stream-card-actions .stream-volume-grid,.stream-grid-volume-details { transition:none; }
}