.controls-header-wrapper,
.mcq-layout-controls,
.text-size-controls {
    display: flex;
    flex-wrap: wrap; /* Allows items to drop to a new line */
    gap: 8px;
    align-items: center;
    max-width: 100%;
}

@media (max-width: 768px) {
    /* 1. Force the main lesson container to be 'Self-Containing' */
    .lesson-container, .markdown-body {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        /* box-sizing ensures padding doesn't push width over 100% */
        box-sizing: border-box !important;
    }

    /* 2. Prevent child elements from punching through the walls */
    .lesson-container > *, .markdown-body > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
    }

    /* 3. Special fix for Tables and Code blocks (common overflow culprits) */
    table, pre, code {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important; /* Allow internal scrolling only for these */
        white-space: pre-wrap !important;
    }
}

#main-content, .container {
    overflow-x: hidden; /* Hard stop for side-scrolling */
    padding-left: 10px;
    padding-right: 10px;
}