/* MotionUnseen Connect — routed immersive media mode.
   Live and Playback own the complete mobile-landscape viewport. The Camera
   image remains aspect-correct because the existing canvas renderers contain
   the source image inside this full-viewport canvas. */

.mu-immersive-only {
    display: none !important;
}


.mu-immersive-controls-toggle {
    display: none;
}

.mu-playback-load-status {
    position: absolute;
    left: 50%;
    bottom: 58px;
    z-index: 25;
    transform: translateX(-50%);
    max-width: min(92%, 620px);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
}

@media screen and (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
    body#PageBody.mu-immersive-media-active {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        background: #000 !important;
    }

    body#PageBody.mu-immersive-media-active .rm-skip-link,
    body#PageBody.mu-immersive-media-active #rmAppSidebar,
    body#PageBody.mu-immersive-media-active #rmAppHeader,
    body#PageBody.mu-immersive-media-active #globalAppBottomNavbar {
        display: none !important;
        visibility: hidden !important;
    }

    body#PageBody.mu-immersive-media-active #rmAppShell {
        position: fixed !important;
        inset: 0 !important;
        display: block !important;
        visibility: visible !important;
        width: 100dvw !important;
        height: 100dvh !important;
        min-width: 100dvw !important;
        min-height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    body#PageBody.mu-immersive-media-active #rmMainContent,
    body#PageBody.mu-immersive-media-active #rmMainContent > .rm-main-inner {
        position: fixed !important;
        inset: 0 !important;
        display: block !important;
        width: 100dvw !important;
        height: 100dvh !important;
        min-width: 100dvw !important;
        min-height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    body#PageBody.mu-immersive-live-active #divContentHolder_LIVE[aria-hidden="false"],
    body#PageBody.mu-immersive-playback-active #divContentHolder_LIBRARY_PLAY[aria-hidden="false"] {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483000 !important;
        display: block !important;
        visibility: visible !important;
        width: 100dvw !important;
        height: 100dvh !important;
        min-width: 100dvw !important;
        min-height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    body#PageBody.mu-immersive-live-active #divContentHolder_LIVE[aria-hidden="false"] > .mu-live-page,
    body#PageBody.mu-immersive-playback-active #divContentHolder_LIBRARY_PLAY[aria-hidden="false"] > .mu-playback-page,
    body#PageBody.mu-immersive-media-active .mu-media-shell,
    body#PageBody.mu-immersive-media-active .mu-media-body,
    body#PageBody.mu-immersive-playback-active .mu-player-column {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    body#PageBody.mu-immersive-media-active .mu-video-viewport,
    body#PageBody.mu-immersive-live-active #divConnectLiveParent,
    body#PageBody.mu-immersive-playback-active .mu-playback-viewport {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        aspect-ratio: auto !important;
        clip-path: none !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    body#PageBody.mu-immersive-media-active .mu-video-viewport > canvas,
    body#PageBody.mu-immersive-media-active .mu-video-viewport > img,
    body#PageBody.mu-immersive-live-active #canvasVideo,
    body#PageBody.mu-immersive-playback-active #PlayCanvas {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        aspect-ratio: auto !important;
        clip-path: none !important;
        background: #000 !important;
    }

    /* Spatial playback remains available in portrait/desktop. In immersive
       landscape the evidence canvas deliberately owns the viewport. */
    body#PageBody.mu-immersive-playback-active .mu-perspective-scene-map {
        display: none !important;
    }

    body#PageBody.mu-immersive-media-active .mu-media-topbar {
        position: fixed !important;
        z-index: 2147483100 !important;
        top: max(8px, env(safe-area-inset-top)) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        right: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: auto !important;
        max-width: min(68dvw, 620px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 6px !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        border-radius: 12px !important;
        background: rgba(0,0,0,.56) !important;
        color: #fff !important;
        box-shadow: 0 5px 20px rgba(0,0,0,.22) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }

    body#PageBody.mu-immersive-live-active .mu-live-connection-state {
        max-width: 44dvw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-align: left !important;
        color: rgba(255,255,255,.82) !important;
    }

    body#PageBody.mu-immersive-media-active .mu-immersive-only {
        display: inline-flex !important;
    }

    body#PageBody.mu-immersive-media-active .mu-back-button,
    body#PageBody.mu-immersive-media-active .mu-live-chip,
    body#PageBody.mu-immersive-media-active .mu-captured-chip {
        flex: 0 0 auto !important;
        min-height: 34px !important;
        margin: 0 !important;
    }

    body#PageBody.mu-immersive-media-active .mu-media-actions {
        position: fixed !important;
        z-index: 2147483100 !important;
        top: max(54px, calc(env(safe-area-inset-top) + 54px)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 5px !important;
        width: clamp(112px, 18dvw, 148px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100dvh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        padding: 6px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        border-radius: 12px !important;
        background: rgba(0,0,0,.54) !important;
        box-shadow: 0 5px 20px rgba(0,0,0,.22) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        transform: none !important;
    }

    body#PageBody.mu-immersive-media-active .mu-media-actions[style*="display:none"],
    body#PageBody.mu-immersive-media-active .mu-media-actions[style*="display: none"] {
        display: none !important;
    }

    body#PageBody.mu-immersive-media-active .mu-media-actions .mu-action {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 7px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: .58rem !important;
        line-height: 1.05 !important;
    }

    body#PageBody.mu-immersive-live-active #divConnectLiveActionsZones .mu-action {
        height: auto !important;
        min-height: 42px !important;
        white-space: normal !important;
    }

    body#PageBody.mu-immersive-playback-active .mu-timeline {
        position: fixed !important;
        z-index: 2147483100 !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(132px, calc(18dvw + 24px + env(safe-area-inset-right))) !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 14px 10px 7px !important;
        border-radius: 12px !important;
        background: linear-gradient(transparent, rgba(0,0,0,.72)) !important;
        opacity: .82 !important;
    }

    body#PageBody.mu-immersive-playback-active .mu-timeline:focus-within,
    body#PageBody.mu-immersive-playback-active .mu-playback-viewport:active .mu-timeline {
        opacity: 1 !important;
    }

    body#PageBody.mu-immersive-playback-active .mu-timeline input[type="range"] {
        width: 100% !important;
        min-width: 0 !important;
    }
    body#PageBody.mu-immersive-media-active #btnImmersiveControlsToggle {
        position: fixed !important;
        z-index: 2147483200 !important;
        top: 50% !important;
        left: max(6px, env(safe-area-inset-left)) !important;
        display: grid !important;
        place-items: center !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 999px !important;
        background: rgba(0,0,0,.48) !important;
        color: #fff !important;
        font: 800 14px/1 system-ui, sans-serif !important;
        box-shadow: 0 4px 16px rgba(0,0,0,.22) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        opacity: .72 !important;
    }

    body#PageBody.mu-immersive-media-active #btnImmersiveControlsToggle:focus-visible,
    body#PageBody.mu-immersive-media-active #btnImmersiveControlsToggle:active {
        opacity: 1 !important;
    }

    body#PageBody.mu-immersive-media-active .mu-media-topbar,
    body#PageBody.mu-immersive-media-active .mu-media-actions,
    body#PageBody.mu-immersive-playback-active .mu-timeline {
        transition: opacity .18s ease, visibility .18s ease !important;
    }

    body#PageBody.mu-immersive-controls-minimised .mu-media-topbar,
    body#PageBody.mu-immersive-controls-minimised .mu-media-actions,
    body#PageBody.mu-immersive-controls-minimised .mu-timeline {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body#PageBody.mu-immersive-playback-active .mu-playback-load-status {
        position: fixed !important;
        z-index: 2147483150 !important;
        left: 50% !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;
        max-width: min(74dvw, 620px) !important;
        background: rgba(0,0,0,.72) !important;
    }

}