/* Fixed mode control; reserve its footprint so the last controls stay reachable. */
:root{--mode-dock-bottom:max(15px,env(safe-area-inset-bottom));--mode-dock-height:calc(64px + 15px + var(--mode-dock-bottom))}
body:has([data-mode-selector]) #app>.screen:not(.home-dashboard){height:var(--motv-phone-height,100dvh);min-height:0;padding-bottom:var(--mode-dock-height);overflow:hidden}
/* Audio scrolls behind the shared backdrop; its document reserves the final controls' space. */
body:has([data-mode-selector]) #app>.screen.audio-screen{padding-bottom:0}
body:has([data-mode-selector]) #app>.screen>.content{min-height:0}
body:has([data-mode-selector]) .dashboard-main{padding-bottom:calc(var(--mode-dock-height) + 20px)}
body:has([data-mode-selector]) #app>.screen>iframe{min-height:0;flex:1;height:100%!important}
.mode-selector{position:fixed;z-index:24;bottom:0;left:0;right:0;width:100%;height:var(--mode-dock-height);box-sizing:border-box;padding:15px 0 var(--mode-dock-bottom);background:transparent;color:#f3f5f8;user-select:none;-webkit-user-select:none;isolation:isolate}
/* Fade only the backdrop, leaving the selected icon crisp above its soft edge. */
.mode-selector{border-radius:0;border:0;box-shadow:none}
.mode-selector::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(12,16,23,.7);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);mask-image:linear-gradient(to bottom,transparent 0px,rgba(0,0,0,.06) 16px,rgba(0,0,0,.4) 32px,#000 56px);-webkit-mask-image:linear-gradient(to bottom,transparent 0px,rgba(0,0,0,.06) 16px,rgba(0,0,0,.4) 32px,#000 56px)}
.mode-wheel{position:relative;width:min(100%,360px);height:64px;margin:0 auto;touch-action:pan-y;cursor:grab}
.mode-wheel:active{cursor:grabbing}
.mode-selector .mode-choice{position:absolute;left:calc(50% - 32px);top:0;width:64px;height:64px;min-height:0;padding:0;border-radius:14px;border:0;background:transparent;box-shadow:none;display:grid;place-items:center;cursor:pointer;transition:transform .35s ease,opacity .35s ease,filter .35s ease;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.mode-selector .mode-choice:disabled{cursor:not-allowed}.mode-selector .mode-choice:disabled img{filter:grayscale(1);opacity:.35}
.mode-selector .mode-choice:focus-visible{outline:2px solid #fff;outline-offset:1px}
.mode-selector .mode-choice img,.mode-selector .mode-choice svg{width:56px!important;height:56px!important;pointer-events:none}
.mode-selector.is-dragging .mode-choice,.mode-selector.is-settling .mode-choice{transition:none}.mode-selector.is-dragging .mode-wheel{cursor:grabbing}
.mode-readout{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.cameras-screen>.topbar{min-height:64px;box-sizing:border-box}
.cameras-screen .source-monitor{position:relative;width:100%;aspect-ratio:16/9;background:#090c10;border-radius:12px;overflow:hidden;margin:8px 0 14px;display:flex;align-items:center;justify-content:center}
.camera-source-heading{padding:12px 14px}.camera-source-heading label{display:grid;gap:7px;font-size:12px;color:var(--ink-dim)}.camera-source-heading select{min-height:44px;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);padding:8px 12px}.camera-source-heading h2{font-size:16px;margin:0}.camera-empty-control{padding:0 14px 14px;color:var(--ink-dim);font-size:13px}
.mode-settings{padding:16px;margin-bottom:14px}.mode-settings h2{font-size:16px;margin:0}.mode-settings p,.mode-settings small{font-size:12px;color:var(--ink-dimmer);line-height:1.5}.mode-settings label{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;border-bottom:1px solid var(--line)}.mode-settings input{width:24px;height:24px;accent-color:var(--accent)}.mode-settings small{display:block;margin-top:12px}
@media(prefers-reduced-motion:reduce){.mode-selector .mode-choice{transition:none}}
.camera-grid{padding:0 12px 14px;min-width:0}.camera-grid .camera-tile{appearance:none;min-width:0;min-height:56px;padding:7px 6px;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:600 11px var(--sans);cursor:pointer;touch-action:manipulation}
.camera-tile-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.25;max-width:100%}.camera-tile-kind{font-size:9px;font-weight:500;line-height:1.4;color:var(--ink-dimmer);margin-top:4px}
.camera-grid .camera-tile.is-camera-active{border-color:#6caaff;box-shadow:inset 0 0 0 1px #6caaff;background:#23539b38}.camera-grid .camera-tile:focus-visible{outline:2px solid #8cbdff;outline-offset:2px}.camera-grid .camera-tile.is-camera-active .camera-tile-kind{color:#8cbdff}
.cameras-screen .source-console .camera-grid{order:0}.cameras-screen .source-console .camera-empty-control{order:1}

.pos-screen{width:100%;max-width:none!important}.pos-screen iframe{display:block;width:100%;border:0;flex:1;min-height:0;background:var(--bg)}

.camera-grid .tv-pages-viewport{touch-action:pan-x pan-y}
/* Keep the selected feed visible while reaching PTZ below a full camera page. */
.motv-phone .cameras-screen .source-monitor{position:sticky;top:0;z-index:6}
@media(max-width:767px){.cameras-screen .source-monitor{position:sticky;top:0;z-index:6}}

/* POS owns its canvas and has its own exit back to MoTV. */
body:has(#pos-panel) [data-mode-selector]{display:none}
body:has(#pos-panel) #app>.screen.pos-screen{padding-bottom:0;height:var(--motv-phone-height,100dvh)}