.camera-video-controls { position: relative; isolation: isolate; }
.video-control-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; font-family: inherit; }
.video-control-layer [hidden] { display: none !important; }
.video-control-layer button { font: inherit; color: #fff; -webkit-tap-highlight-color: transparent; }
.video-touch-zones { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.video-edge { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgb(0 0 0 / .035); pointer-events: auto; touch-action: pan-y pinch-zoom; }
.video-edge span { position: absolute; font-size: 24px; line-height: 1; text-shadow: 0 1px 5px #000, 0 0 3px #000; opacity: .65; }
.video-edge:active { background: rgb(87 211 194 / .2); }
.video-edge:focus-visible { outline: none; background: rgb(87 211 194 / .3); }
.video-edge:disabled { pointer-events: none; opacity: 0; }
.edge-up { clip-path: polygon(0 0, 100% 0, 72% 28%, 28% 28%); }
.edge-left { clip-path: polygon(0 0, 28% 28%, 28% 72%, 0 100%); }
.edge-right { clip-path: polygon(100% 0, 100% 100%, 72% 72%, 72% 28%); }
.edge-down { clip-path: polygon(28% 72%, 72% 72%, 100% 100%, 0 100%); }
.edge-up span { top: 7%; left: calc(50% - 8px); }
.edge-down span { bottom: 7%; left: calc(50% - 8px); }
.edge-left span { left: 5%; top: calc(50% - 12px); }
.edge-right span { right: 5%; top: calc(50% - 12px); }
.video-fullscreen { position: absolute; right: 8px; top: 8px; width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; pointer-events: auto; background: rgb(10 12 12 / .78); border: 1px solid rgb(255 255 255 / .28); border-radius: 8px; cursor: pointer; }
.video-fullscreen span { font-family: system-ui, sans-serif; font-size: 27px; line-height: 1; }
.video-fullscreen:disabled { opacity: .5; cursor: default; }
.video-desktop-pad { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: min(340px, calc(100% - 16px)); display: flex; gap: 3px; padding: 4px; background: rgb(10 12 12 / .78); border: 1px solid rgb(255 255 255 / .2); border-radius: 9px; pointer-events: auto; }
.video-desktop-pad button { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 3px 2px; border: 1px solid rgb(255 255 255 / .18); border-radius: 5px; background: rgb(255 255 255 / .06); cursor: pointer; }
.video-desktop-pad [data-video-stop] { font-size: 13px; color: #efbf65; }
.video-control-layer button:hover:not(:disabled) { color: #fff; background: rgb(25 54 50 / .95); }
.video-control-layer .video-edge:hover:not(:disabled) { background: rgb(0 0 0 / .04); }
.video-control-layer .video-edge:active:not(:disabled) { background: rgb(87 211 194 / .2); }
.video-control-layer [data-video-stop]:hover:not(:disabled) { color: #efbf65; }
.video-desktop-pad button:disabled { opacity: .4; cursor: default; }
.camera-video-controls:fullscreen, .camera-video-controls.video-fullscreen-fallback { width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; background: #000; border: 0 !important; border-radius: 0 !important; }
.camera-video-controls.video-fullscreen-fallback { position: fixed !important; inset: 0 !important; z-index: 2147483646; }
.camera-video-controls.video-expanded > img, .camera-video-controls.video-expanded > video { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; }
.camera-video-controls.video-expanded .video-fullscreen { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.camera-video-controls.video-expanded .video-desktop-pad { bottom: max(14px, env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .video-control-layer * { transition: none !important; } }