/* Main Canvas controls: keep the playback bar in a dedicated bottom slot. */
@media (min-width: 993px) {
    #preview-box > .preview-stage-wrap { display: flex !important; flex-direction: column !important; min-height: 0 !important; }
    #preview-box > .preview-stage-wrap > #video-preview { position: relative !important; flex: 1 1 auto !important; min-height: 200px !important; }
    #preview-box > .preview-stage-wrap > #interactive-preview-controls { position: static !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: none !important; margin: 10px 0 0 !important; flex: 0 0 auto !important; box-sizing: border-box !important; }
}
@media (max-width: 992px) {
    #preview-box > .preview-stage-wrap > #interactive-preview-controls { position: static !important; inset: auto !important; transform: none !important; width: 100% !important; max-width: none !important; margin: 10px 0 0 !important; box-sizing: border-box !important; }
}
#preview-box > .preview-stage-wrap > #video-preview { z-index: 1 !important; }
#preview-box > .preview-stage-wrap > #interactive-preview-controls { z-index: 2 !important; }
@media (prefers-reduced-motion: reduce) { #preview-box > .preview-stage-wrap > #interactive-preview-controls { transition: none !important; } }
/* Fix marker: controls occupy the final flow slot below the preview. */
/* ===== END MAIN CANVAS BOTTOM CONTROLS ===== */
/* Slightly raise the control cluster while keeping it below the video. */
#preview-box > .preview-stage-wrap > #interactive-preview-controls {
    margin-top: 4px !important;
}
/* The seek row and buttons remain in normal flow; this only reduces the gap above them. */
/* Fix marker: controls raised slightly below the preview. */
/* Keep the complete source preview and its runtime controls inside Main Canvas. */
@media (min-width: 993px) {
    #preview-box.preview-ready { display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow: hidden !important; }
    #preview-box.preview-ready > .preview-stage-wrap { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-height: 0 !important; height: auto !important; overflow: visible !important; }
    #preview-box.preview-ready > .preview-stage-wrap > #video-preview { flex: 1 1 auto !important; min-height: 0 !important; max-height: 100% !important; height: auto !important; margin: 0 auto !important; }
    #preview-box.preview-ready > .preview-stage-wrap > #interactive-preview-controls { flex: 0 0 auto !important; margin: 4px 0 0 !important; }
}
@media (max-width: 992px) {
    #preview-box.preview-ready { display: flex !important; flex-direction: column !important; min-height: 0 !important; max-height: calc(100dvh - var(--header-height) - 1.5rem) !important; overflow: hidden !important; }
    #preview-box.preview-ready > .preview-stage-wrap { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-height: 0 !important; height: auto !important; overflow: visible !important; }
    #preview-box.preview-ready > .preview-stage-wrap > #video-preview { flex: 1 1 auto !important; min-height: 0 !important; max-height: 100% !important; height: auto !important; }
    #preview-box.preview-ready > .preview-stage-wrap > #interactive-preview-controls { flex: 0 0 auto !important; margin: 4px 0 0 !important; }
}
/* Fix marker: preview media and all controls fit inside the panel. */
/* ===== END PREVIEW VISIBILITY FIT ===== */
@supports not (height: 100dvh) {
    @media (max-width: 992px) { #preview-box.preview-ready { max-height: calc(100vh - var(--header-height) - 1.5rem) !important; } }
}
/* Compact mobile hamburger: preserve the touch target while reducing the visual icon. */
@media (max-width: 768px) {
    .app-header .hamburger { padding: 6px !important; border-radius: 10px !important; }
    .app-header .hamburger svg { width: 26px !important; height: 26px !important; }
}
/* ===== END COMPACT MOBILE HAMBURGER ===== */
/* Keep the compact mobile hamburger fully inside the viewport. */
@media (max-width: 768px) {
    .app-header { padding-left: 12px !important; padding-right: 12px !important; }
    .app-header .hamburger {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
        overflow: visible !important;
    }
    .app-header .hamburger svg {
        display: block !important;
        width: 26px !important;
        height: 26px !important;
    }
}
/* ===== END FULLY VISIBLE MOBILE HAMBURGER ===== */

/* ===== PREVIEW SEEK TRACK RESET =====
/* Avoid the browser's default white range track in the Main Canvas. */
#interactive-preview-controls .preview-seek {
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 4px !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
}
#interactive-preview-controls .preview-seek::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(255,255,255,0.12);
    border: 0;
    border-radius: 999px;
}
#interactive-preview-controls .preview-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(238,69,64,0.22);
}
#interactive-preview-controls .preview-seek::-moz-range-track {
    height: 4px;
    background: rgba(255,255,255,0.12);
    border: 0;
    border-radius: 999px;
}
#interactive-preview-controls .preview-seek::-moz-range-progress {
    height: 4px;
    background: var(--accent);
    border: 0;
    border-radius: 999px;
}
#interactive-preview-controls .preview-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(238,69,64,0.22);
}
/* ===== END PREVIEW SEEK TRACK RESET ===== */