/* Room-only viewing controls. Media sizing always uses contain. */
:root:not([data-theme="frutiger-aero"]) svg[data-mowe-icon] { fill:currentColor!important;stroke:none!important;stroke-width:0!important;overflow:visible; }
:root:not([data-theme="frutiger-aero"]) svg[data-mowe-icon] > g { fill:currentColor;stroke:none; }
@property --portrait-x { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --portrait-y { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --portrait-sx { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --portrait-sy { syntax: '<number>'; inherits: true; initial-value: 1; }
#room { background: #08080c; overflow:clip; }
#room::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 75% 15%, rgba(16,185,129,.14), transparent 34%), radial-gradient(circle at 15% 80%, rgba(34,197,94,.10), transparent 30%), #09090c; opacity: 1; transition: opacity .6s ease; }
#room.ambilight-on::before { opacity: 0; }
#room .room-body { --sidebar-width: 250px; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); transition: grid-template-columns .42s cubic-bezier(.22,1,.36,1); }
#room.sidebar-collapsed .room-body { grid-template-columns: 0px minmax(0, 1fr); }
#room .people-sidebar { width: var(--sidebar-width); transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .25s; }
#room.sidebar-collapsed .people-sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
#room .sidebar-people-icon { cursor: pointer; }
#room .sidebar-people-icon:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
#room .stage-shell { padding: 14px 22px 94px; background: transparent; transition: padding .46s cubic-bezier(.22,1,.36,1); }
#room .stage-topbar { position: relative; z-index: 4; height: 38px; gap: 10px; margin-bottom: 10px; transition: opacity .3s, height .46s cubic-bezier(.22,1,.36,1), margin-bottom .46s cubic-bezier(.22,1,.36,1); }
#room .stage-title { flex: 1; min-width: 0; }
#room .stage-title span { display: none; }
#room .stage-view-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
#room .view-toggles { display: flex; padding: 3px; border: 1px solid var(--stroke); border-radius: 10px; background: #101016; }
#room .view-toggles .view-btn, #room .layout-switcher .layout-btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; width: auto; height: 30px; padding: 0 9px; font: 600 11px Inter, system-ui, sans-serif; }
#room .view-button-label { white-space: nowrap; }
#room .view-btn { width: 34px; height: 30px; border: 0; border-radius: 7px; display: grid; place-items: center; cursor: pointer; color: #92929f; background: transparent; }
#room .view-btn svg { width: 17px; height: 17px; }
#room .view-btn:hover { background: #23232d; color: white; }
#room .view-btn.active { color: #66e4a0; background: rgba(34,197,94,.12); }
#room .layout-btn:disabled { opacity: .35; cursor: default; }
#room .popover-pill:disabled { opacity: .38; cursor: not-allowed; }
#room .stream-quality-popover { max-width: calc(100vw - 24px); overflow-y: auto; }
#room .room-controls-wrap:has(.stream-quality-popover:not(.hidden)) { z-index: 50; }
#room .stage-shell:has(.stream-quality-popover:not(.hidden)) { z-index: 41; }
#room .people-toggle { border: 1px solid var(--stroke); background: #14141b; }
#room:not(.sidebar-collapsed) .people-toggle { display: none; }
#room button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#room .stream-grid { padding: 18px; gap: 14px; }
#room .stream-grid.layout-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
#room .stream-grid .stream-tile { width: var(--tile-width,100%) !important; height: var(--tile-height,100%) !important; max-height: none !important; max-width: none; align-self: center; justify-self: center; }
#room .stream-grid.layout-grid.one-stream .stream-tile.focused { grid-column: auto; grid-row: auto; }
#room .stream-grid.layout-grid .stream-tile.grid-picture { position: absolute; left: var(--grid-x,18px); top: var(--grid-y,18px); margin: 0; }
#room .tile-picture { display: contents; }
#room .stream-position { display: contents; }
#room .stream-tile.grid-picture, #room.ambilight-on .stream-tile.grid-picture.focused { background: #111116 !important; }
#room .grid-picture .tile-picture { display: block; position: absolute; width: var(--picture-width,100%); height: var(--picture-height,100%); left: var(--picture-left,0px); top: var(--picture-top,0px); border-radius: inherit; }
#room .grid-picture .tile-picture > video { border-radius: 0; background: transparent !important; }
#room .grid-picture:is(.phone-portrait-picture,.picture-tiny) .tile-picture { display: contents; }
#room .grid-picture:is(.phone-portrait-picture,.picture-tiny) .tile-picture > video { inset: auto; left: var(--picture-left); top: var(--picture-top); width: var(--picture-width); height: var(--picture-height); border-radius: inherit; }
#room .grid-picture .tile-gradient { border-radius: 0 0 16px 16px; max-height: 100%; }
#room .grid-picture.picture-compact .tile-badge .tile-quality { flex-shrink: 1; white-space: normal; text-align: right; }
#room .grid-picture .tile-actions { top: calc(10px - var(--picture-top,0px)); right: calc(10px - var(--picture-left,0px)); }
#room .grid-picture:is(.phone-portrait-picture,.picture-tiny) .tile-actions { top: 10px; right: 10px; }
#room .stream-grid.layout-focus { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); overflow: hidden; scrollbar-width: thin; }
#room .stream-grid.layout-focus .stream-tile.focused { grid-row: 1 / -1; grid-column: 1; position: sticky; align-self: start; justify-self: start; top: var(--main-top,18px); left: var(--main-left,18px); margin-top: calc(var(--main-top,18px) - var(--grid-padding,18px)); margin-left: calc(var(--main-left,18px) - var(--grid-padding,18px)); }
#room .stream-grid.layout-focus.has-secondary.focus-beside { grid-template-columns: minmax(0,1fr) var(--thumb-side,180px); grid-template-rows: repeat(var(--thumb-count,1),var(--thumb-height,116px)); align-content: start; overflow-y: auto !important; overflow-x: hidden; }
#room .stream-grid.layout-focus.focus-beside .stream-tile:not(.focused) { grid-column: 2; grid-row: auto; }
#room .stream-grid.layout-focus.focus-beside .stream-tile.focused { left: auto; }
#room .stream-grid.layout-focus.has-secondary.focus-beside .stream-tile:not(.focused) { justify-self: end; position: relative; top: var(--side-stack-offset,0px); }
#room .stream-grid.layout-focus.has-secondary.focus-below { grid-template-columns: minmax(0,1fr) repeat(var(--thumb-count,1),var(--thumb-card-width,160px)) minmax(0,1fr); grid-template-rows: var(--main-height,1fr) var(--thumb-height,116px); align-content: center; overflow-x: auto !important; overflow-y: hidden; }
#room .stream-grid.layout-focus.focus-below { align-self: center; width: var(--focus-stage-width,100%) !important; max-width: 100%; scrollbar-width: none; }
#room .stream-grid.layout-focus.focus-below::-webkit-scrollbar { display: none; }
#room .stream-grid.layout-focus.focus-below .stream-tile.focused { grid-column: 1 / -1; grid-row: 1; top: auto; }
#room .stream-grid.layout-focus.focus-below .stream-tile:not(.focused) { grid-row: 2; grid-column: calc(var(--thumb-index,0) + 2); justify-self: center; }
#room .stream-grid.layout-focus.focus-below .stream-position:has(> .focused) { display: block; position: absolute; left: calc(var(--main-left,18px) + var(--main-scroll-x,0px)); top: var(--main-anchor-top,18px); margin: 0; width: var(--main-width); height: var(--main-height); }
#room .stream-grid.layout-focus.focus-below .stream-position > .stream-tile.focused { position: relative; inset: auto; margin: 0; will-change: transform; }
#room .stream-grid.layout-focus.has-secondary .stream-tile:not(.focused) { display: flex !important; }
#room .stream-grid.layout-focus .stream-tile:not(.focused), #room .stream-grid.layout-focus .stream-tile:not(.focused) video { background: #111116 !important; }
#room .stream-grid.layout-focus:not(.has-secondary) .stream-tile:not(.focused) { display: none !important; }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .tile-quality { display: none; }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .tile-badge { max-width: calc(100% - 18px); }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .tile-actions { opacity: 0 !important; pointer-events: none; }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .tile-label { left: 7px; right: 7px; bottom: 6px; }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .tile-label > span:not(.tile-media-icon):not(.tile-audio) { min-width: 0; width: 100%; }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .tile-label strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .tile-label small { display: none; }
#room .stream-grid.one-stream, #room.cinema .stream-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
#room.cinema .stream-grid { overflow: hidden; }
#room.cinema .stream-tile:not(.focused) { display: none; }
#room .tile-action.cinema-action.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--bg)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
#room .stream-tile { min-height: 0; aspect-ratio: auto; background: #08080c; border: 0; box-shadow: none; transition: background-color .55s; }
#room .stream-tile video { background: #08080c; transition: background-color .55s; }
#room .stream-tile.picture-moving { overflow: visible; z-index: 6; }
#room .stream-tile.picture-moving video, #room .stream-grid.layout-focus .stream-tile.picture-moving video { background: transparent !important; transition: none !important; transform-origin: 50% 50%; pointer-events: none; }
#room .stream-tile.thumbnail-leaving { pointer-events: none; }
#room .stream-tile.portrait-opening { z-index: 6; transform-origin: 50% 50%; transform: translate(var(--portrait-x),var(--portrait-y)) scale(var(--portrait-sx),var(--portrait-sy)); border-radius: calc(var(--portrait-radius,16px) / var(--portrait-sx)) / calc(var(--portrait-radius,16px) / var(--portrait-sy)); }
#room .stream-tile.portrait-opening video { transform-origin: 50% 50%; transform: scaleX(calc(var(--portrait-sy) / var(--portrait-sx))); pointer-events: none; background: transparent !important; }
#room .portrait-opening .tile-label, #room .portrait-opening .tile-badge, #room .portrait-opening .tile-actions, #room .portrait-opening .tile-volume { opacity: 0 !important; }
#room.ambilight-on .stream-tile.focused, #room.ambilight-on .stream-tile.focused video { background: transparent; }
#room.ambilight-on .stream-tile:fullscreen video, #room.ambilight-on .stream-tile:-webkit-full-screen video { background: transparent; }
#room .stream-tile.focused { box-shadow: none; }
#room .layout-grid .stream-tile:focus { outline: none; }
#room .layout-grid .stream-tile:focus-visible { outline: 1px solid #ffffff55; outline-offset: 3px; }
#room .tile-actions { opacity: 0; pointer-events: none; transform: none; transition: opacity .2s ease; }
#room .stream-tile:hover .tile-actions, #room .stream-tile:focus-visible .tile-actions, #room .tile-actions:has(:focus-visible) { opacity: 1; pointer-events: auto; transform: none; }
#room .tile-action, #room .tile-action:hover, #room .tile-action:active { transform: none; transition: background-color .15s,color .15s,border-color .15s; }
@media (hover: none), (pointer: coarse) {
  #room .tile-actions { opacity: 1 !important; pointer-events: auto; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  #room .tile-actions { opacity: 0 !important; pointer-events: none; }
  #room .stream-tile:hover .tile-actions, #room .stream-tile:focus-visible .tile-actions, #room .tile-actions:has(:focus-visible) { opacity: 1 !important; pointer-events: auto; }
}
#room.viewing-idle .stream-tile, #room.viewing-idle .stream-tile.focused { border-color: transparent; box-shadow: none; }
.ambience-layer { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.ambience-layer canvas { position: absolute; opacity: 0; filter: blur(72px) saturate(1.55) contrast(1.12) brightness(.98); transition: opacity .55s; }
.ambience-layer.has-frame canvas { opacity: .7; }
.ambience-layer .grid-ambience, .ambience-layer.has-frame .grid-ambience { opacity: 0; }
.ambience-layer.has-grid-frame .grid-ambience { opacity: .7; }
.ambience-layer.has-grid-frame .single-ambience { opacity: 0; }
#room .stream-tile:fullscreen .ambience-layer, #room .stream-tile:-webkit-full-screen .ambience-layer { z-index: 0; }
#room .stream-tile:fullscreen video, #room .stream-tile:-webkit-full-screen video { z-index: 1; }
#room .room-controls-wrap { transition: opacity .38s ease, transform .46s cubic-bezier(.22,1,.36,1); will-change: transform, opacity; }
#room .room-header { height: 56px; transition: height .46s cubic-bezier(.22,1,.36,1), opacity .3s, transform .46s cubic-bezier(.22,1,.36,1); }
#room.viewing-idle .stage-shell { padding-bottom: 56px; }
#room.viewing-idle .room-controls-wrap { opacity: 0; transform: translate(-50%,calc(100% + 24px)); pointer-events: none; }
#room.viewing-idle .room-header { height: 0; opacity: 0; transform: translateY(-100%); pointer-events: none; border-bottom-width: 0; }
#room.viewing-idle .stage-topbar { opacity: 0; height: 0; margin-bottom: 0; pointer-events: none; overflow: hidden; }
#room .tile-label, #room .tile-badge, #room .tile-actions, #room .tile-gradient, #room .muted-badge { transition: opacity .35s; }
#room .tile-badge { position: absolute; top: auto; left: auto; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; gap: 0; max-width: calc(100% - 24px); padding: 4px 6px; border: 0; border-radius: 6px; background: #090c10b3; color: #c4cec8; font: 500 10px/1.3 Inter,system-ui,sans-serif; box-shadow: none; opacity: .65; pointer-events: none; white-space: nowrap; }
#room .tile-badge:has(.tile-quality:empty), #room .layout-focus .stream-tile:not(.focused) .tile-badge { display: none; }
#room .tile-label { right: var(--label-quality-space,108px); bottom: 12px; min-height: 21px; line-height: 1.3; gap: 6px; align-items: center; min-width: 0; }
#room .tile-gradient { height: clamp(64px,28%,180px); max-height: 100%; background: linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.48) 18%,rgba(0,0,0,.29) 38%,rgba(0,0,0,.13) 59%,rgba(0,0,0,.035) 79%,transparent 100%); }
#room .tile-volume { position: absolute; right: calc(12px + var(--volume-quality-width,0px)); bottom: calc(12px + var(--volume-bottom-shift,0px)); z-index: 12; width: 24px; height: 21px; color: #c4cec8; }
#room .tile-badge, #room.viewing-idle .tile-badge { max-width: calc(100% - 24px - var(--audio-footer-space,0px)); }
#room .tile-volume.hidden { display: none; }
#room .volume-toggle, #room .volume-indicator { width: 24px; height: 21px; padding: 3px; display: grid; place-items: center; border: 0; border-radius: 6px; background: #090c10b3; color: inherit; opacity: .65; }
#room .volume-toggle { cursor: pointer; }
#room .tile-volume svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#room .volume-toggle:hover, #room .volume-toggle:focus-visible, #room .tile-volume.volume-open .volume-toggle { opacity: .65; background: #090c10b3; }
#room .tile-volume[data-boost=yellow] .volume-toggle { color: #f4c95d; }
#room .tile-volume[data-boost=red] .volume-toggle { color: #ef6a76; }
#room .volume-popover { position: absolute; right: calc(-1 * var(--volume-quality-width,0px)); bottom: calc(100% + 8px); width: min(186px,calc(var(--tile-width,186px) - 24px)); box-sizing: border-box; padding: 9px; border: 1px solid #ffffff20; border-radius: 10px; background: #12171af5; color: #d7e5dd; box-shadow: 0 6px 22px #0005; opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none; transition: opacity .16s ease,transform .16s ease,visibility .16s; }
#room .volume-row { display: flex; align-items: center; gap: 8px; }
#room .tile-volume[data-unavailable=true] .volume-toggle { opacity: .3; cursor: default; }
.menu-volume-control[data-unavailable=true] .vol-slider-row, #room .tile-volume[data-unavailable=true] .volume-row, #room .tile-volume.local-audio .volume-row { opacity: .4; }
.vol-slider:disabled, .vol-mute-btn:disabled, #room .volume-mute:disabled { cursor: default; }
.volume-note { display: block; margin-top: 8px; color: #9898a8; font: 500 10px/1.4 Inter,system-ui,sans-serif; }
.volume-note[hidden] { display: none; }
#room .volume-popover::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 9px; }
#room .volume-open .volume-popover { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
#room .volume-mute { flex: 0 0 22px; padding: 3px; width: 22px; height: 24px; display: grid; place-items: center; background: transparent; color: inherit; border: 0; border-radius: 5px; cursor: pointer; }
#room .volume-mute:hover { background: #ffffff12; }
#room .volume-slider { min-width: 0; width: 0; touch-action: pan-y; }
#room .volume-value { flex: 0 0 32px; color: var(--volume-tone,#22c55e); font: 500 10px/1.3 Inter,system-ui,sans-serif; text-align: right; }
#room .picture-compact .volume-value { display: none; }
#room .layout-focus .stream-tile:not(.focused) .tile-volume { display: none; }
#room .stream-tile:fullscreen .volume-popover, #room .stream-tile:-webkit-full-screen .volume-popover { width: min(186px,calc(100vw - 24px)); }
#room.viewing-idle .tile-volume { pointer-events: none; }
.vol-slider { background: linear-gradient(to right,transparent 0 var(--volume-fill,50%),#232330 var(--volume-fill,50%) 100%),linear-gradient(to right,#22c55e 0 50%,#f4c95d 50% 75%,#ef6a76 75% 100%); }
.vol-slider::-webkit-slider-thumb { background: var(--volume-tone,#22c55e); box-shadow: none; }
.vol-slider::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--volume-tone,#22c55e); }
#room .tile-label > span:not(.tile-media-icon):not(.tile-audio) { flex: 1 1 0; min-width: 0; overflow: hidden; }
#room .stream-tile.label-above-quality .tile-label { right: var(--label-inset,12px) !important; bottom: var(--label-above-bottom,39px) !important; }
#room .tile-label strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#room .tile-media-icon { flex: 0 0 14px; width: 14px !important; color: #c3d0c9; display: inline-flex; }
#room .tile-media-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#room .tile-kind { overflow: hidden; text-overflow: ellipsis; }
#room .tile-audio { display: inline-flex; flex: 0 0 13px; width: 13px !important; color: #a5d8bb; }
#room .tile-audio svg { width: 13px; height: 13px; }
#room .tile-badge .tile-quality { flex-shrink: 0; font-size: 10px; font-weight: 500; color: #c4cec8; background: none; border: 0; padding: 0; margin: 0; border-radius: 0; }
#room.viewing-idle .tile-label, #room.viewing-idle .tile-gradient, #room.viewing-idle .muted-badge { opacity: 0; }
#room.viewing-idle .tile-badge { opacity: .65; top: auto; left: auto; right: 12px; bottom: 12px; gap: 0; padding: 4px 6px; border: 0; border-radius: 6px; background: #090c10b3; box-shadow: none; max-width: calc(100% - 24px); }
#room.viewing-idle .tile-kind, #room.viewing-idle .tile-audio { display: none; }
#room.viewing-idle .tile-badge .tile-quality { border: 0; padding: 0; color: #c4cec8; font-size: 10px; }
#room.viewing-idle .tile-badge:has(.tile-quality:empty), #room.viewing-idle .layout-focus .stream-tile:not(.focused) .tile-badge { opacity: 0; }
#room.viewing-idle .stream-tile .tile-actions { opacity: 0 !important; pointer-events: none; }
.people-dock { --dock-faces-limit: min(330px,calc(40vw - 64px)); position: absolute; left: 16px; bottom: max(var(--dock-bottom,16px), env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: flex-end; gap: 8px; visibility: hidden; opacity: 0; transform: translateX(-12px); transition: opacity .3s, transform .4s, bottom .45s; }
.fullscreen-chrome { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
#room .fullscreen-chrome :is(.people-dock,.people-sidebar,.room-controls-wrap) { pointer-events: auto; }
#room .fullscreen-chrome .room-controls-wrap { bottom: max(44px,env(safe-area-inset-bottom)) !important; }
#room .fullscreen-chrome .people-dock { bottom: max(44px,env(safe-area-inset-bottom)); }
#room .stream-tile:is(:fullscreen,:-webkit-full-screen) .tile-volume { z-index: 55; }
#room .stream-tile:is(:fullscreen,:-webkit-full-screen) .zoom-panel { bottom: 96px; }
#room.viewing-idle .fullscreen-chrome .room-controls-wrap { pointer-events: none; }
#room .fullscreen-chrome .people-sidebar { position: absolute; inset: 0 auto 0 0; height: 100%; z-index: 45; background: #101018; box-shadow: 12px 0 60px #0008; }
#room.sidebar-collapsed .people-dock { visibility: visible; opacity: 1; transform: translateX(0); }
#room.viewing-idle.sidebar-collapsed .people-dock { opacity: .6; }
#room.viewing-idle:not(.sidebar-collapsed) .people-sidebar { opacity: .7; }
.people-dock-faces { display: flex; gap: 6px; overflow: visible; padding: 11px 3px; }
.people-dock-faces:empty { display: none; }
.people-dock-faces.all-faces-hidden { display: none; }
.dock-face[hidden], .dock-more[hidden], .dock-overflow-list[hidden] { display: none !important; }
.dock-capacity { position: absolute; width: var(--dock-faces-limit); height: 0; visibility: hidden; pointer-events: none; }
.dock-overflow { position: relative; flex: 0 0 auto; padding-block: 11px; }
.dock-overflow:has(.dock-more[hidden]) { display: none; }
.dock-more { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff29; border-radius: 11px; background: #24242e; color: #dcece2; font: 700 12px Inter,system-ui,sans-serif; cursor: pointer; transition: background .2s,border-color .2s; }
.dock-more:hover, .dock-more[aria-expanded=true] { background: #30303b; border-color: #99bbaa; }
.dock-overflow-list { position: absolute; bottom: calc(100% + 8px); left: var(--dock-list-left,0px); width: min(260px,calc(100vw - 24px)); max-height: min(320px,var(--dock-list-height,320px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px; border: 1px solid #ffffff20; border-radius: 14px; background: #14141bf5; box-shadow: 0 12px 40px #0009; backdrop-filter: blur(14px); animation: dock-list-in .16s ease-out; }
.dock-overflow-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 8px; border: 0; border-radius: 9px; background: transparent; color: #dcece2; text-align: left; cursor: pointer; font: 600 12px Inter,system-ui,sans-serif; }
.dock-overflow-person:hover, .dock-overflow-person:focus-visible { background: #ffffff0a; }
.dock-person-avatar { position: relative; flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #24242e; }
.dock-person-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dock-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#room.viewing-idle.sidebar-collapsed .people-dock.overflow-open { opacity: 1; }
@keyframes dock-list-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.dock-face { flex: 0 0 36px; width: 36px; height: 36px; position: relative; display: grid; place-items: center; border-radius: 11px; padding: 0; border: 1px solid rgba(255,255,255,.16); background: #24242e; color: #dcece2; font: 700 12px Inter, sans-serif; cursor: pointer; box-shadow: none; transition: border-color .2s, transform .2s; }
.dock-face img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.dock-face:hover { transform: translateY(-2px); border-color: #99bbaa; }
.stream-status { position:absolute; right:-2px; bottom:-10px; z-index:4; display:inline-flex; align-items:center; justify-content:center; gap:2px; width:16px; height:16px; padding:1px; box-sizing:border-box; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--panel-solid)); border-radius:5px; background:var(--panel-solid); color:var(--accent); pointer-events:none; }
.stream-status[data-stream-kind="both"] { width:30px; }
.stream-status-icon { display:block; flex:0 0 12px; width:12px; height:12px; }
.stream-status-icon svg { display:block; width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.stream-status[data-stream-kind="screen"] .stream-status-camera,
.stream-status[data-stream-kind="camera"] .stream-status-screen { display:none; }
.dock-expand { flex: 0 0 34px; width: 34px; height: 28px; border-radius: 9px; border: 1px solid var(--stroke); background: var(--panel-solid); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.people-dock > .dock-expand { margin-bottom:11px; }
.dock-expand svg { width: 16px; height: 16px; }
.thumbnails-toggle { display: none; }
@media (max-width: 1100px) { #room .room-body { --sidebar-width: 220px; } #room .stage-shell { padding-left: 12px; padding-right: 12px; } #room .stream-grid { padding: 12px; } }
@media (max-width: 680px), (orientation: landscape) and (max-height: 540px) {
  #room { height: 100dvh; min-height: 0; overflow: hidden; }
  #room .room-body, #room.sidebar-collapsed .room-body { display: grid; grid-template-columns: minmax(0,1fr); min-height: 0; height: auto; overflow: hidden; }
  #room .people-sidebar { position: absolute; inset: 0 auto 0 0; z-index: 45; width: min(280px,85vw); height: 100%; min-height: 0; padding: 16px 14px; border-top: 0; border-right: 1px solid var(--stroke); transform: none; background: #101018; box-shadow: 12px 0 60px #0008; }
  #room.sidebar-collapsed .people-sidebar { transform: translateX(-105%); }
  #room .stage-shell { height: 100%; min-height: 0; max-height: 100%; padding: 10px 8px 132px; overflow: hidden; }
  #room .stage-topbar { height: 74px; margin-bottom: 4px; gap: 4px 8px; display: grid; grid-template-columns: 29px minmax(0,1fr); grid-template-rows: 30px 36px; }
  #room .stage-title span { display: none; }
  #room .stage-title strong { font-size: 12px; }
  #room .stage-view-actions { grid-column: 1 / -1; width: 100%; justify-content: space-between; gap: 8px; }
  #room .view-toggles, #room .layout-switcher { flex: 1; }
  #room .view-toggles .view-btn, #room .layout-switcher .layout-btn { flex: 1; gap: 4px; padding: 0 6px; font-size: 10px; }
  #room .view-toggles svg, #room .layout-switcher svg { width: 14px; height: 14px; }
  #room .view-btn { width: 29px; }
  #room .stream-grid { display: grid; height: 100%; min-height: 0; max-height: 100%; padding: 8px; gap: 8px; }
  #room .stream-grid.one-stream, #room.cinema .stream-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
  #room .stream-grid.one-stream .stream-tile.focused, #room.cinema .stream-grid .stream-tile.focused { grid-column: 1; grid-row: 1; }
  #room .stream-tile { min-height: 0; height: 100%; aspect-ratio: auto; border-radius: 12px; }
  #room .room-controls-wrap { position: absolute; left: 8px; right: 8px; bottom: max(8px,env(safe-area-inset-bottom)); padding: 0; transform: none; background: transparent; }
  #room .screen-control-group, #room .camera-control-group { flex: 1 1 0; min-width: 0; }
  #room .screen-control-group .control-btn, #room .camera-control-group .control-btn { flex: 1 1 0; min-width: 0; width: auto; height: 48px; }
  #room .control-dropdown-btn { flex: 0 0 32px; width: 32px; height: 48px; }
  #room #leaveBtn, #room #switchCameraBtn { flex: 0 0 48px; width: 48px; min-width: 0; height: 48px; }
  #room.viewing-idle .room-controls-wrap { transform: translateY(calc(100% + 24px)); }
  #room .people-dock { --dock-faces-limit: min(240px,calc(100vw - 65px)); bottom: max(78px,calc(72px + env(safe-area-inset-bottom))); left: 12px; }
  #room .fullscreen-chrome .people-dock { bottom: max(110px,env(safe-area-inset-bottom)); }
  #room .stream-tile:is(:fullscreen,:-webkit-full-screen) .zoom-panel { bottom: 164px; }
  #room .people-dock-faces { flex-wrap: nowrap; padding: 3px 3px 7px; }
  #room .dock-face { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; }
  #room .dock-face img { border-radius: 10px; }
  #room .people-dock { flex-direction: row; align-items: center; gap: 5px; }
  #room.viewing-idle .people-dock { bottom: max(14px,env(safe-area-inset-bottom)); }
  #room .tile-label small { display: none; }
  #room .grid-picture .tile-gradient { border-radius: 0 0 12px 12px; }
  #room .room-header { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; height: 54px; }
  #room .room-meta { position: static; transform: none; }
  #room .room-code { font-size: 11px; }
  #room .header-right { gap: 6px; }
  #room .net-stats-pill { gap: 4px; padding: 6px; }
  #room .net-stats-quality { font-size: 9px; }
  #room .net-stats-text, #room .net-stats-loss { display: none; }
  #room .tile-badge, #room.viewing-idle .tile-badge { top: auto; left: auto; right: 8px; bottom: 8px; padding: 4px 6px; gap: 0; font-size: 10px; }
  #room .tile-label { left: 8px; bottom: 8px; }
  #room .tile-volume { right: calc(8px + var(--volume-quality-width,0px)); bottom: calc(8px + var(--volume-bottom-shift,0px)); }
  .ambience-layer canvas { filter: blur(48px) saturate(1.55) contrast(1.12) brightness(.98); }
}
/* Override the previous landscape fullscreen rules without changing the landing page. */
@media (orientation: landscape) and (max-height: 540px) {
  html:has(#room:not(.hidden)), body:has(#room:not(.hidden)), #app:has(#room:not(.hidden)), #room { height: 100dvh !important; max-height: 100dvh !important; }
  #room .room-body { display: grid !important; height: 100% !important; max-height: 100% !important; }
  #room .stage-shell { width: 100% !important; height: 100% !important; max-height: 100% !important; padding: 8px 14px 62px !important; }
  #room .stage-topbar { display: flex !important; position: relative; left: auto; right: auto; top: auto; z-index: 25; }
  #room .stage-topbar { height: 38px; }
  #room .stage-view-actions { width: auto; }
  #room .view-toggles, #room .layout-switcher { flex: none; }
  #room .stage-title { visibility: hidden; }
  #room.has-thumbnails .thumbnails-toggle { position: absolute; display: grid; place-items: center; right: 6px; top: var(--thumb-toggle-top,50%); transform: translateY(-50%); z-index: 5; width: 30px; height: 52px; padding: 0; border: 1px solid #ffffff20; border-radius: 10px; background: #12121ddd; color: #c9dacf; cursor: pointer; transition: opacity .3s; }
  #room .thumbnails-toggle svg { width: 17px; height: 17px; transition: transform .25s; }
  #room.thumbnails-hidden .thumbnails-toggle svg { transform: rotate(180deg); }
  #room:has(.focus-below) .thumbnails-toggle svg { transform: rotate(90deg); }
  #room.thumbnails-hidden:has(.focus-below) .thumbnails-toggle svg { transform: rotate(-90deg); }
  #room.viewing-idle .thumbnails-toggle { opacity: 0; pointer-events: none; }
  #room .stream-grid { display: grid !important; height: 100% !important; width: 100% !important; padding: 12px !important; gap: 8px !important; }
  #room .stream-grid.one-stream, #room.cinema .stream-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
  #room.cinema .stream-grid .stream-tile:not(.focused) { display: none !important; }
  #room .stream-tile { border-radius: 12px !important; background: #08080c !important; }
  #room.ambilight-on .stream-tile.focused { background: transparent !important; }
  #room .people-sidebar { position: absolute !important; inset: 0 auto 0 0 !important; height: 100% !important; min-height: 0 !important; transform: none !important; }
  #room.sidebar-collapsed .people-sidebar { transform: translateX(-105%) !important; }
  #room .room-controls-wrap { position: absolute !important; left: auto !important; right: 12px; bottom: 8px !important; transform: none !important; }
  #room .screen-control-group, #room .camera-control-group { flex: none; }
  #room .screen-control-group .control-btn, #room .camera-control-group .control-btn, #room #leaveBtn, #room #switchCameraBtn { flex: 0 0 40px; width: 40px !important; height: 38px !important; }
  #room .control-dropdown-btn { height: 38px; }
  #room.viewing-idle .room-controls-wrap { opacity: 0 !important; transform: translateY(calc(100% + 20px)) !important; }
  #room.viewing-idle .stage-shell { padding-bottom: 16px !important; }
  #room.viewing-idle .stage-topbar { height: 0; }
  #room .people-dock { left: 12px; bottom: 12px; }
  #room .fullscreen-chrome .people-dock { bottom: max(44px,env(safe-area-inset-bottom)); }
  #room .stream-tile:is(:fullscreen,:-webkit-full-screen) .zoom-panel { bottom: 96px; }
  #room .people-dock { --dock-faces-limit: min(240px,calc(100vw - 260px)); }
}
@media (hover:none), (pointer:coarse) {
  #room #cameraDeviceDropdownBtn { display:none; }
  #room .room-controls-wrap { left:50%!important;right:auto!important;width:max-content;max-width:calc(100% - 24px);transform:translateX(-50%)!important; }
  #room .room-controls { width:max-content;max-width:100%;align-items:center;border-radius:16px!important;padding:6px!important;gap:8px!important; }
  #room :is(.screen-control-group,.camera-control-group) { flex:0 0 auto;align-items:center;border-radius:12px; }
  #room .camera-control-group { gap:6px;background:transparent!important;box-shadow:none!important; }
  :root:not([data-theme="frutiger-aero"]) #room #cameraBtn.active { color:var(--broadcast-ink);background:var(--broadcast-gradient);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent); }
  :root:not([data-theme="frutiger-aero"]) #room #switchCameraBtn { background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--stroke); }
  #room :is(#screenBtn,#cameraBtn,#switchCameraBtn,#leaveBtn) { flex:0 0 48px;width:48px!important;min-width:48px;height:48px!important;justify-content:center;gap:0;padding:0!important;border-radius:12px; }
  #room .camera-control-group.has-dropdown #cameraBtn { border-radius:12px; }
  #room .screen-control-group.is-streaming #screenBtn { border-radius:12px 0 0 12px; }
  #room .control-dropdown-btn { flex:0 0 28px;width:28px;height:48px!important;border-radius:0 12px 12px 0; }
  #room .control-icon { display:grid;place-items:center;flex:0 0 28px;width:28px!important;height:28px!important;background:transparent; }
  #room .control-icon svg { display:block;width:24px!important;height:24px!important; }
  #room .control-text { display:none; }
  #room.viewing-idle .room-controls-wrap { transform:translate(-50%,calc(100% + 32px))!important; }
  #room .fullscreen-chrome .room-controls-wrap { left:50%!important;right:auto!important;width:max-content;max-width:calc(100% - 24px);bottom:max(24px,env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important; }
  #room.viewing-idle .fullscreen-chrome .room-controls-wrap { transform:translate(-50%,calc(100% + 32px))!important; }
  #room .fullscreen-chrome .dock-face { flex:0 0 36px;width:36px;height:36px; }
  #room .fullscreen-chrome .dock-expand { margin:0;flex-basis:28px; }
  #room.viewing-idle .fullscreen-chrome .people-dock { opacity:0!important;pointer-events:none!important; }
}
@media (orientation:landscape) and (hover:none), (orientation:landscape) and (pointer:coarse) {
  #room .fullscreen-chrome .people-dock { left:max(10px,env(safe-area-inset-left))!important;right:auto;bottom:max(110px,calc(100px + env(safe-area-inset-bottom)))!important;flex-direction:column;align-items:center;gap:4px;max-width:48px; }
  #room .fullscreen-chrome .people-dock-faces { flex-direction:column;gap:16px;padding:10px 3px; }
  #room .fullscreen-chrome .dock-capacity { width:0;height:clamp(52px,calc(100dvh - 228px),624px); }
  #room .fullscreen-chrome .dock-overflow { padding-block:4px; }
}
@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse) {
  #room .fullscreen-chrome .room-controls-wrap { bottom:max(88px,calc(80px + env(safe-area-inset-bottom)))!important; }
  #room .fullscreen-chrome .people-dock { left:50%!important;right:auto;bottom:max(14px,env(safe-area-inset-bottom))!important;transform:translateX(-50%);flex-direction:row;align-items:center;gap:8px;max-width:calc(100% - 24px); }
  #room .fullscreen-chrome .people-dock-faces { flex-direction:row;gap:8px;padding:10px 3px; }
  #room .fullscreen-chrome .dock-capacity { width:clamp(42px,calc(100vw - 120px),800px);height:0; }
}
#room.viewing-idle .room-header { height: 0; }
#room .stream-tile:fullscreen, #room .stream-tile:-webkit-full-screen { width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .dock-overflow-list { animation: none; }
  #room::before, #room .room-body, #room .people-sidebar, #room .stage-shell, #room .room-controls-wrap, #room .room-header, #room .stage-topbar, #room .people-dock, #room .tile-label, #room .tile-badge, #room .tile-actions, #room .tile-gradient, #room .stream-tile, #room .stream-tile video, .ambience-layer canvas { transition: none !important; }
}
/* Presence occupies the opposite corner from the screen/camera badge. */
.presence-status { position:absolute; top:-10px; left:-3px; z-index:5; display:grid; place-items:center; box-sizing:border-box; width:16px; height:16px; border:1px solid var(--stroke); border-radius:50%; background:var(--panel-solid); color:var(--accent); pointer-events:auto; }
.presence-status svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
:is(.dock-face,.dock-person-avatar) .presence-status { width:15px; height:15px; }

/* Stable placeholders retain their video element and geometry while negotiating. */
#room .tile-watch-cover { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; padding:32px 16px 48px; border-radius:inherit; background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--accent) 9%,var(--panel-solid)),var(--bg)); color:var(--text); text-align:center; }
#room .tile-watch-cover[hidden] { display:none; }
#room .watch-mark { position:relative; width:48px; height:48px; flex-shrink:0; display:grid; place-items:center; }
#room .watch-mark img { width:27px; height:27px; object-fit:contain; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 25%,transparent)); }
#room .watch-mark i { position:absolute; inset:0; border:2px solid color-mix(in srgb,var(--accent) 16%,transparent); border-top-color:var(--accent); border-radius:36%; }
#room .stream-tile[data-watch-state="loading"] .watch-mark i { animation:mowe-connection-orbit 1.6s linear infinite; }
#room .watch-message { font:500 13px/1.4 Inter,system-ui,sans-serif; max-width:100%; }
#room .watch-buttons { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
#room .watch-buttons button { min-height:34px; padding:7px 13px; border:1px solid var(--stroke); border-radius:9px; font:600 12px/1.3 Inter,system-ui,sans-serif; color:var(--text); background:var(--panel); cursor:pointer; }
#room .watch-buttons button[hidden] { display:none; }
#room .watch-buttons .watch-stream { background:var(--accent); color:var(--primary-ink,#071b12); border-color:var(--accent); }
#room .watch-buttons button:hover { filter:brightness(1.08); }
#room .watch-buttons button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#room .stream-tile:not([data-watch-state="ready"]) video { opacity:0; }
#room .stream-tile:not([data-watch-state="ready"]) :is(.tile-actions,.tile-badge,.tile-volume,.tile-gradient,.fullscreen-chrome,.reaction-dock,.zoom-panel,.zoom-map,.pause-frame) { visibility:hidden !important; pointer-events:none !important; }
#room .stream-tile:not([data-watch-state="ready"]) .tile-label { z-index:6; color:var(--text); }
#room .stream-tile:not([data-watch-state="ready"]) .tile-label strong:not([data-profile-custom="true"]) { color:var(--text) !important; text-shadow:none; }
#room .stream-tile:not([data-watch-state="ready"]) .tile-media-icon { color:var(--muted); }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .tile-watch-cover { gap:6px; padding:12px 8px 30px; }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .watch-mark { display:none; }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .watch-message { font-size:11px; }
#room .stream-grid.layout-focus .stream-tile:not(.focused) .watch-buttons button { min-height:27px; padding:4px 8px; font-size:11px; }
@keyframes mowe-connection-orbit { to { transform:rotate(360deg); } }
:root[data-motion="off"] #room .watch-mark i { animation:none !important; }
@media(max-width:480px) { #room .watch-mark { width:36px; height:36px; } #room .tile-watch-cover { gap:9px; } #room .watch-message { font-size:12px; } }