/* ============================================================
   MOBILE & TABLET LAYOUT (<= 992px)
   ============================================================ */
@media (max-width: 992px) {
    .qif-body {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - var(--navbar-height));
        overflow: hidden;
    }

    .left-stack {
        order: 2 !important;
        flex: 1 1 auto;
        overflow-y: auto !important;
        width: 100% !important;
    }

    .layout-main {
        margin-left: 0 !important;
    }

    .mobile-backdrop {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 1500;
    }

        .mobile-backdrop.visible {
            opacity: 1;
            pointer-events: auto;
        }
}


/* FINAL MOBILE OVERRIDE — enforce viewer on top for small phones */
@media (max-width: 767px) {
    .qif-body {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - var(--navbar-height));
        overflow: hidden;
    }

    .viewer-panel {
        order: 1 !important;
        height: 45vh !important;
        min-height: 300px;
    }

    .context-panel {
        order: 2 !important;
        flex: 1 1 auto;
        overflow-y: auto !important;
        width: 100% !important;
    }

    .resize-handle {
        display: none !important;
    }
}