/* Mobile Layout Enhancements */

/* KaTeX equations: Allow horizontal scrolling for very wide formulas if rbFitMath doesn't scale them enough. */
.katex-display {
    overflow: visible !important;
    overflow-x: auto !important;
    padding-bottom: 0 !important;
    max-width: 100%;
}


/* Multi-exam content safety: HTML tables (UPSC/GATE match-the-column, gas tables,
   etc.) stay inside the card on mobile by scrolling within their own wrapper —
   never blowing out the page width or clipping text. */
.solution-content-block, .main-question-field, .option-text-content { max-width: 100%; }
.solution-content-block table, .main-question-field table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-size: 0.85em;
}
.solution-content-block td, .solution-content-block th,
.main-question-field td, .main-question-field th {
    padding: 3px 8px;
    border: 1px solid rgba(128,128,128,0.25);
    white-space: nowrap;
}
/* Long inline math should shrink rather than overflow the viewport edge. */
.main-question-field .katex, .solution-content-block .katex, .option-text-content .katex {
    max-width: 100%;
}

/* Ensure MCQ options stack nicely and don't overflow */
.opt-action-trigger {
    min-height: 48px; /* minimum touch target size */
    word-break: break-word; /* Ensure text wraps */
}

/* If an option contains block math, make the math scrollable */
.opt-action-trigger .katex-display {
    margin: 0.5rem 0;
    max-width: 100%;
}

/* --- Native Mobile Drawers & Panels --- */

/* Drawer transitions */
.mobile-drawer-overlay {
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}
.mobile-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-drawer-panel {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-drawer-left {
    transform: translateX(-100%);
}
.mobile-drawer-right {
    transform: translateX(100%);
}
.mobile-drawer-panel.active {
    transform: translateX(0);
}

/* Non-card feel overrides for sidebars when viewed on mobile */
@media (max-width: 1023px) {
    .native-mobile-panel {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    /* Ensure body doesn't scroll when drawer is open */
    body.drawer-open {
        overflow: hidden;
    }
}

/* Deep Fix for Text Overflow and Flex Containers on Narrow Mobiles */
@media (max-width: 768px) {
    /* Prevent unbroken text from bleeding out of its container */
    p, span, h1, h2, h3, h4, h5, h6, div, a {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Target specific components that render dynamic user/DB content */
    .main-question-field, 
    .opt-action-trigger, 
    .numerical-feedback {
        word-break: break-word;
        white-space: normal !important; /* Ensure options wrap even if they are buttons */
    }

    /* 
     * Critical Flexbox Fix: 
     * Prevents flex items from expanding beyond their parent's width 
     * when they contain long, unbreakable words or code blocks.
     */
    .flex > div, 
    .flex > span,
    .flex > a,
    .flex > article,
    .flex > section {
        min-width: 0;
    }

    /* 
     * Force wrapping on inline badge/meta containers so they stack 
     * neatly on iPhone SE (320px) screens instead of blowing out the width.
     * REMOVED globally applied gap-2/gap-3 wrappers to prevent navigation/buttons from becoming bulky.
     */

    /* Allow buttons with long text to wrap naturally instead of breaking screen width */
    button {
        white-space: normal;
        word-break: break-word;
    }
    
    /* Allow specifically marked mobile flex containers to remain nowrap if absolutely necessary */
    .flex-nowrap-mobile {
        flex-wrap: nowrap !important;
    }

    /* Force KaTeX inline math to wrap on mobile (fixes long text inside options) */
    .option-text-content .katex, 
    .option-text-content .katex-html, 
    .option-text-content .base {
        white-space: normal !important;
        display: inline !important;
        overflow-wrap: break-word !important;
        width: auto !important;
    }


}