/* 1. Base Container */
#mtlx-viewer-container {
    position: relative !important;
    width: 100% !important;
    /* This forces the container to maintain a 16:9 ratio regardless of page content */
    aspect-ratio: 16 / 9; 
    height: auto !important; 
    overflow: hidden !important;
    background: #000;
}

/* 2. UI Overlay (Tweakpane) */
#mtlx-viewer-container .tp-rotv {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 280px !important;
    z-index: 100 !important;
    height: auto; 
    max-height: 90vh; /* Allow it to grow, but keep it in the window */
    overflow-y: auto;
}

/* 3. The WebGPU Canvas */
#mtlx-viewer-container canvas {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    /* 'contain' ensures the whole scene is visible, 
       'cover' ensures the canvas is completely filled. 
       Usually, for 3D viewers, 'contain' is safer. */
    object-fit: contain !important;
    /* Force the canvas to be a block element so it doesn't take on text-line-heights */
    display: block !important;
    z-index: 1 !important;
}

/* 4. Horizontal Mobile Constraint */
@media (orientation: landscape) and (max-device-height: 500px) {
    #mtlx-viewer-container {
        height: 75vh !important; 
        aspect-ratio: auto !important; /* Prevents width blowout */
    }
}

/* =========================================
   NATIVE FULLSCREEN OVERRIDES 
   ========================================= */

/* Standard Native Fullscreen */
#mtlx-viewer-container:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000 !important;
    aspect-ratio: auto !important; /* Kills 16:9 inside native FS */
}

/* Safari/WebKit Native Fullscreen */
#mtlx-viewer-container:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000 !important;
    aspect-ratio: auto !important; /* Kills 16:9 inside native FS */
}

/* Ensure canvas stretches cleanly in Fullscreen */
#mtlx-viewer-container:fullscreen canvas,
#mtlx-viewer-container:-webkit-full-screen canvas {
    width: 100% !important;
    height: 100% !important;
}

/* =========================================
   🖥️ DESKTOP THEATER MODE
   ========================================= */

/* 🎯 Chained ID + Class selector forces specificity override */
#mtlx-viewer-container.mtlx-desktop-theater-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    aspect-ratio: auto !important;
    z-index: 2147483647 !important;
    background-color: #000 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#mtlx-viewer-container.mtlx-desktop-theater-mode canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}