/* Reference: local WaveShield MultiStreamViewer dimensions and dark theme. */
#view-multistream { --ms-bg:oklch(.08 .04 240); --ms-fg:oklch(.9 .04 240); --ms-muted:oklch(.7 .06 240); --ms-border:oklch(.26 .07 240); --ms-side:oklch(.15 .05 240); --ms-accent:oklch(.32 .15 240); --ms-primary:oklch(.6 .25 240); color:var(--ms-fg); background:var(--ms-bg); height:calc(100dvh - 64px); min-height:500px; font-size:12px; position:relative; }
#view-multistream *, #view-multistream *::before { box-sizing:border-box; }
#view-multistream button, #view-multistream input, #view-multistream select { font-family:inherit; }
.xms-header { height:56px; display:flex; gap:8px; align-items:center; padding:0 16px; }
.xms-breadcrumb { height:36px; display:flex; align-items:center; gap:14px; padding:0 12px; border:1px solid var(--ms-border); border-radius:6px; font-size:14px; }
.xms-breadcrumb button { padding:0; border:0; background:none; color:var(--ms-muted); cursor:pointer; }
.xms-breadcrumb>span:first-of-type { color:var(--ms-muted); }
.xms-layout { height:calc(100% - 56px); display:grid; grid-template-columns:minmax(0,1fr) 320px; padding:8px 8px 8px 0; }
.xms-stage { min-width:0; height:100%; overflow-y:auto; scrollbar-width:none; padding:0 16px 16px; }
.xms-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-height:100%; align-content:start; }
.xms-grid.single { grid-template-columns:minmax(0,1fr); }
.xms-grid.triple { grid-template-columns:repeat(3,minmax(0,1fr)); }
.xms-grid:has(.xms-empty) { display:flex; }
.xms-empty { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:24px; min-height:360px; }
.xms-empty svg { width:64px; height:64px; color:var(--ms-muted); margin-bottom:16px; stroke-width:1.5; }
.xms-empty strong { font-size:20px; font-weight:600; }
.xms-empty span { margin-top:8px; color:var(--ms-muted); font-size:14px; }
.xms-picker { min-width:0; display:flex; flex-direction:column; height:100%; border:1px solid oklch(.3 .07 240); border-radius:8px; background:var(--ms-side); overflow:hidden; }
.xms-picker-head { display:flex; align-items:center; justify-content:space-between; padding:8px; gap:8px; min-height:40px; }
.xms-picker-head>div { display:flex; align-items:center; gap:8px; }
.xms-picker-head strong { font-size:14px; font-weight:500; }
.xms-users-icon { font-size:18px; }
.xms-users-icon svg { width:16px; height:16px; }
.xms-search svg, .xms-filter-title svg { width:12px; height:12px; }
.xms-filter-title { display:flex; align-items:center; gap:4px; }
.xms-filters input { appearance:none; border:1px solid var(--ms-border); border-radius:4px; background:transparent; display:grid; place-items:center; }
.xms-filters input:checked { background:var(--ms-accent); border-color:var(--ms-accent); }
.xms-filters input:checked::after { content:'✓'; color:var(--ms-fg); font-size:11px; }
.xms-badge { font-size:12px; border-radius:5px; background:var(--ms-accent); padding:1px 7px; }
.xms-icon-btn { display:inline-grid; place-items:center; width:28px; height:28px; border:1px solid var(--ms-border); border-radius:6px; background:transparent; color:var(--ms-fg); cursor:pointer; flex-shrink:0; padding:0; }
.xms-icon-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.xms-icon-btn:hover, .xms-button:hover { background:var(--ms-accent); }
.xms-picker-head .xms-icon-btn { border:0; width:24px; height:24px; font-size:19px; }
.xms-picker-controls { display:flex; flex-direction:column; gap:8px; padding:8px; }
.xms-search { height:28px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--ms-border); border-radius:6px; background:color-mix(in oklch,var(--ms-accent) 50%,transparent); }
.xms-search input { width:100%; min-width:0; background:none; border:0; outline:none; color:var(--ms-fg); font-size:12px; }
.xms-search input::placeholder { color:var(--ms-muted); }
.xms-sort-row, .xms-selection-actions { display:flex; gap:4px; }
.xms-sort-row select { flex:1; min-width:0; height:28px; color:var(--ms-fg); border:1px solid var(--ms-border); border-radius:6px; background:var(--ms-side); padding:0 8px; font-size:12px; }
.xms-button { flex:1; height:24px; font-size:12px; border:1px solid var(--ms-border); border-radius:5px; background:color-mix(in oklch,var(--ms-accent) 50%,transparent); color:var(--ms-fg); cursor:pointer; }
.xms-filters { display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--ms-border); padding:8px; }
.xms-filter-title { font-weight:500; color:var(--ms-muted); margin-bottom:6px; }
.xms-filters label { display:flex; align-items:center; gap:8px; min-height:18px; font-size:12px; cursor:pointer; }
.xms-filters input { width:14px; height:14px; margin:0; accent-color:#008dff; }
.xms-filters label:has(input:disabled) { opacity:.4; cursor:help; }
.xms-player-list { min-height:0; flex:1; overflow-y:auto; padding:8px; border-top:1px solid var(--ms-border); display:flex; flex-direction:column; gap:4px; scrollbar-width:thin; scrollbar-color:var(--ms-accent) transparent; }
.xms-player { border:0; border-left:2px solid transparent; border-radius:6px; padding:8px; min-height:50px; width:100%; flex-shrink:0; background:none; color:var(--ms-fg); cursor:pointer; text-align:left; }
.xms-player:hover { background:color-mix(in oklch,var(--ms-accent) 80%,transparent); }
.xms-player.selected { border-left-color:var(--ms-primary); background:color-mix(in oklch,var(--ms-primary) 10%,transparent); }
.xms-player-copy { display:flex; align-items:center; gap:4px; min-width:0; margin-bottom:4px; }
.xms-player-copy span { font:12px ui-monospace,monospace; color:var(--ms-muted); }
.xms-player-copy strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; font-weight:500; }
.xms-player-badges { display:flex; flex-wrap:wrap; gap:4px; }
.xms-player-tag { border:1px solid var(--ms-border); border-radius:4px; padding:0 4px; height:16px; font-size:10px; display:inline-flex; gap:3px; align-items:center; }
.xms-player-tag.threat { color:#23c774; border-color:currentColor; }
.xms-player-tag.warning { color:#fb923c; }
.xms-player-tag.recent { background:var(--ms-accent); }
.xms-player-tag.new { background:#008dff; border-color:#008dff; color:#000; }
.xms-status { font-size:11px; padding:0 8px; color:var(--ms-muted); }
.xms-status:not(:empty) { padding:8px; }
.xms-tile { min-width:0; background:var(--ms-bg); border:1px solid var(--ms-border); border-radius:8px; overflow:hidden; }
.xms-tile-head { padding:4px 8px; border-bottom:1px solid var(--ms-border); background:color-mix(in oklch,oklch(.17 .06 240) 30%,transparent); }
.xms-tile-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.xms-tile-title { font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xms-ping { display:flex; align-items:center; gap:4px; color:#22c55e; font:12px ui-monospace,monospace; flex-shrink:0; }
.xms-ping svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7; }
.xms-video-wrap { position:relative; aspect-ratio:16/9; background:black; overflow:hidden; }
.xms-video-wrap:fullscreen { aspect-ratio:auto; width:100vw; height:100dvh; }
.xms-video-wrap video { display:none; width:100%; height:100%; object-fit:contain; }
.xms-video-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; text-align:center; background:#000b; color:white; font-size:14px; }
.xms-spinner { width:32px; height:32px; border:2px solid #ffffff30; border-top-color:#fff; border-radius:50%; animation:xms-spin .8s linear infinite; }
@keyframes xms-spin { to { transform:rotate(360deg); } }
.xms-video-actions { position:absolute; top:16px; right:16px; display:flex; gap:8px; }
.xms-video-actions .xms-icon-btn, .xms-playback .xms-icon-btn { color:white; background:#0008; border:0; width:32px; height:32px; backdrop-filter:blur(4px); }
.xms-playback { position:absolute; bottom:16px; right:16px; display:flex; gap:8px; align-items:center; }
.xms-live { display:flex; align-items:center; gap:4px; background:#0008; color:#4ade80; border-radius:6px; padding:5px 8px; font-size:12px; }
.xms-live::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.xms-live.connecting { color:#94a3b8; }
.xms-live.error { color:#f87171; }
.xms-player-menu { position:absolute; z-index:3; top:54px; right:48px; padding:4px; min-width:155px; border:1px solid var(--ms-border); border-radius:6px; background:var(--ms-side); box-shadow:0 6px 20px #0008; }
.xms-player-menu button { display:block; width:100%; border:0; background:none; color:var(--ms-fg); text-align:left; padding:8px; cursor:pointer; }
.xms-player-menu button:hover { background:var(--ms-accent); }
.xms-mobile-toggle { display:none; }
#view-multistream.picker-collapsed .xms-layout { grid-template-columns:minmax(0,1fr) 48px; }
#view-multistream.picker-collapsed .xms-picker>*:not(.xms-picker-head), #view-multistream.picker-collapsed .xms-picker-head>div { display:none; }
#view-multistream.picker-collapsed .xms-picker-head { justify-content:center; }
@media(max-width:767px) {
 .xms-layout, #view-multistream.picker-collapsed .xms-layout { display:block; padding:8px; }
 .xms-stage { padding:0; }
 .xms-grid, .xms-grid.triple { grid-template-columns:1fr; }
 .xms-picker { position:absolute; right:8px; top:56px; bottom:8px; width:min(320px,calc(100% - 16px)); height:auto; z-index:10; box-shadow:0 12px 36px #000a; }
 #view-multistream.picker-collapsed .xms-picker { display:none; }
 .xms-mobile-toggle { display:grid; position:absolute; top:12px; right:12px; z-index:11; background:var(--ms-side); }
 .xms-breadcrumb { max-width:calc(100% - 80px); overflow:hidden; white-space:nowrap; font-size:12px; }
 .xms-breadcrumb button, .xms-breadcrumb>span:first-of-type { display:none; }
}

#view-multistream {
 --ms-bg:#f7f9fc; --ms-fg:#17243a; --ms-muted:#7b8da5;
 --ms-border:#dce5f0; --ms-side:#fff; --ms-accent:#edf4ff; --ms-primary:#398bea;
 height:auto; min-height:0; background:transparent;
}
.admin-viewport:has(#view-multistream.active) {
 display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
#view-multistream.active {
 display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden;
}
#view-multistream .admin-feature-heading,
#view-multistream > .admin-connection { flex-shrink:0; }
#view-multistream .xms-header { display:none; }
#view-multistream .xms-layout {
 display:grid; flex:1; height:auto; min-height:0; padding:0; gap:12px;
 grid-template-rows:minmax(0,1fr);
}
#view-multistream .xms-stage { min-height:0; height:100%; padding:0; overflow:hidden; }
#view-multistream .xms-grid,
#view-multistream .xms-grid.triple {
 height:100%; min-height:0; grid-template-columns:repeat(2,minmax(0,1fr));
 grid-auto-rows:minmax(0,1fr); align-content:stretch;
}
#view-multistream .xms-grid.single { grid-template-columns:minmax(0,1fr); }
#view-multistream .xms-empty { min-height:0; overflow:auto; }
#view-multistream .xms-tile {
 display:flex; flex-direction:column; min-height:0; height:100%;
 border-color:#dce5f0; background:#fff;
}
#view-multistream .xms-tile-head { flex-shrink:0; color:#17243a; }
#view-multistream .xms-video-wrap { flex:1; min-height:0; aspect-ratio:auto; background:#111b2c; }
#view-multistream .xms-video-wrap:fullscreen { flex:none; width:100vw; height:100dvh; }
#view-multistream .xms-picker {
 min-height:0; max-height:100%; overflow-y:auto;
 border-color:#dce5f0; box-shadow:0 8px 24px #1838560b;
}
#view-multistream .xms-picker-head,
#view-multistream .xms-picker-controls { flex-shrink:0; }
#view-multistream .xms-player-list { flex-basis:80px; }
#view-multistream .xms-player.selected { background:#edf4ff; border-color:#c5d9f5; }
#view-multistream .xms-player-menu { background:#fff; color:#17243a; border-color:#dce5f0; }
#view-multistream .xms-video-placeholder { color:#dce5f0; }
#view-multistream .xms-video-actions,
#view-multistream .xms-playback { color:#fff; }
#view-multistream .xms-sort-row select,
#view-multistream .xms-search { background:#f7f9fc; color:#17243a; border-color:#dce5f0; }
@media(max-width:767px) {
 #view-multistream .xms-layout,
 #view-multistream.picker-collapsed .xms-layout { grid-template-columns:minmax(0,1fr); }
 #view-multistream .xms-video-actions { top:8px; right:8px; gap:4px; }
 #view-multistream .xms-playback { bottom:8px; right:8px; gap:4px; }
 #view-multistream .xms-video-actions .xms-icon-btn,
 #view-multistream .xms-playback .xms-icon-btn { width:24px; height:24px; }
}

#view-multistream .xms-tile-head{background:#fff}#view-multistream .xms-player.selected{border:1px solid #c5d9f5}