/* Settings Video only. One preview; the call keeps ownership of its own track. */
.call-shell:has(.video-settings) { grid-template-rows:112px minmax(0,1fr) auto; }
.call-shell:has(.video-settings) > #participant-volume-host { display:contents; }
.call-workspace.panel-open:has(> .video-settings) { grid-template-columns:40px 114px 16px minmax(0,1fr) 20px; }
.call-workspace.panel-open > .video-settings { grid-column:4; grid-row:1; width:100%; height:auto; max-height:100%; align-self:start; z-index:2; }
/* Hidden media must not allocate an implicit grid column behind settings.
   Keep the DOM and media ownership intact while excluding it from layout. */
#app > .call-shell > .call-workspace:has(> .video-settings) > .call-main { display:none; }
.settings-popover.video-settings { display:flex; flex-direction:column; background:var(--theme-surface-elevated,#101824); }
.video-settings .panel-header { display:flex; flex:none; gap:20px; min-height:68px; padding:0 22px; }
.video-settings .panel-header h2 { margin:0; font-size:24px; }
.video-settings .settings-tabs { display:grid; flex:1; padding:0; margin-left:auto; max-width:720px; align-self:stretch; }
.video-settings .settings-tabs button { font-size:14px; min-width:0; border-radius:8px 8px 0 0; }
.video-settings .settings-tabs button.is-active { border-color:var(--theme-text-primary,#edf2fa); background:var(--theme-surface-interactive,#182133); }
.video-settings .panel-header > .icon-button { flex:none; }
.video-fields { min-height:0; overflow:auto; padding:16px clamp(18px,6vw,100px) 24px; }
.video-camera-card { padding:16px 20px 20px; border:1px solid var(--theme-border-subtle,#293245); border-radius:14px; }
.video-camera-card h3 { margin:0 0 6px; font-size:18px; }
.video-camera-card > p { margin:0 0 14px; font-size:13px; color:var(--theme-text-secondary,#b8c6da); line-height:1.5; }
.video-camera-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr); gap:28px; }
.video-preview { position:relative; width:100%; min-width:0; min-height:240px; aspect-ratio:3.15; border:1px solid var(--theme-border-subtle,#293245); border-radius:11px; overflow:hidden; background:var(--theme-surface-card,#111b2b); }
.video-preview video { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.video-preview[data-fit=contain] video { object-fit:contain; }
.video-preview-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; padding:18px; text-align:center; }
.video-preview-empty > svg { width:40px; height:40px; color:var(--theme-text-secondary,#b8c6da); }
.video-preview-empty p { margin:0; color:var(--theme-text-secondary,#b8c6da); font-size:14px; line-height:1.7; }
.video-settings .button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; gap:9px; padding:0 18px; font-size:13px; }
.video-settings .button-primary { color:var(--theme-on-primary,#fff); background:var(--theme-primary,#6556ed); }
.video-preview [hidden] { display:none; }
#camera-preview-facts { position:absolute; left:10px; bottom:10px; padding:3px 5px; border-radius:4px; color:var(--theme-text-primary,#edf2fa); background:var(--theme-surface-elevated,#101824); font-size:12px; pointer-events:none; }
#camera-preview-facts:empty { display:none; }
#stop-camera-preview { position:absolute; right:14px; bottom:14px; color:var(--theme-danger-text,#ff526d); border:1px solid var(--theme-danger,#ff526d); background:var(--theme-surface-elevated,#101824); border-radius:10px; }
.video-camera-controls { display:flex; flex-direction:column; min-width:0; align-self:start; }
.video-camera-controls > label:first-child { font-size:13px; font-weight:650; margin:0 0 6px; }
.video-camera-controls select { min-width:0; width:100%; height:40px; padding:0 12px; border:1px solid var(--theme-border-strong,#4d5c75); border-radius:10px; color:var(--theme-text-primary,#edf2fa); background:var(--theme-input,#111c30); font:inherit; font-size:13px; }
.video-mirror { display:flex; align-items:center; gap:15px; padding:16px; min-height:76px; margin:18px 0; border:1px solid var(--theme-border-subtle,#293245); border-radius:11px; cursor:pointer; }
.video-mirror-symbol { width:28px; height:28px; flex:none; }
.video-mirror strong,.video-mirror small { display:block; font-size:13px; }
.video-mirror small { color:var(--theme-text-secondary,#b8c6da); margin-top:5px; font-weight:400; }
.video-mirror input { appearance:none; flex:none; margin:0 0 0 auto; width:44px; min-width:44px; height:26px; min-height:26px; padding:0; border:1px solid var(--theme-border-strong,#4d5c75); border-radius:99px; background:var(--theme-input,#111c30); cursor:pointer; }
.video-mirror input::after { content:''; display:block; width:18px; height:18px; margin:3px; border-radius:50%; background:var(--theme-knob,#fff); transition:transform .15s; }
.video-mirror input:checked { background:var(--theme-primary,#6556ed); border-color:var(--theme-primary,#6556ed); }
.video-mirror input:checked::after { transform:translateX(18px); }
.video-preview-fit { border:0; padding:0; margin:0; min-width:0; }
.video-preview-fit legend { margin-bottom:7px; font-size:13px; font-weight:650; }
.video-preview-fit > div { display:flex; gap:10px; }
.video-preview-fit button { flex:1; min-width:0; height:40px; color:var(--theme-text-primary,#edf2fa); border:1px solid var(--theme-border-subtle,#293245); background:var(--theme-surface-interactive,#182133); border-radius:9px; font:inherit; font-size:12px; font-weight:650; cursor:pointer; }
.video-preview-fit button[aria-pressed=true] { border-color:var(--theme-focus,#9b8aff); background:var(--theme-selection,#27204f); }
.video-settings :focus-visible { outline:2px solid var(--theme-focus,#9b8aff); outline-offset:3px; }
.home-settings-overlay .video-settings { width:min(1250px,calc(100vw - 40px)); height:min(650px,calc(100dvh - 40px)); transform:none; }
@media(max-width:1100px) { .video-fields { padding:16px; } .video-camera-layout { gap:20px; } .video-settings .panel-header h2 { font-size:20px; } }
@media(max-width:900px) { .video-camera-layout { grid-template-columns:minmax(0,1fr); } .video-preview { aspect-ratio:auto; height:220px; min-height:220px; } .video-settings .panel-header { flex-wrap:wrap; gap:0; padding:12px 18px 0; } .video-settings .settings-tabs { order:3; flex-basis:100%; max-width:none; min-height:42px; } .video-settings .panel-header > .icon-button { margin-left:auto; } }
@media(max-width:760px) {
  .call-workspace.panel-open:has(> .video-settings) { grid-template-columns:12px minmax(0,1fr) 12px; }
  .call-workspace.panel-open > .video-settings,body:has(#desktop-window-chrome[hidden]) .call-workspace.panel-open > .video-settings { position:fixed; inset:82px 12px 96px; width:auto; height:auto; grid-column:auto; z-index:25; }
  .video-camera-card { padding:14px; } .video-fields { padding:12px; } .video-preview { min-height:240px; aspect-ratio:auto; }
  .video-camera-card > p { font-size:12px; } .video-mirror { padding:12px; gap:10px; }
  #stop-camera-preview { right:8px; bottom:38px; } #camera-preview-facts { bottom:8px; }
}