@media (max-width: 768px) {

    /* Main Layout */
    .index-container {
        flex-direction: column;
    }

    .col-old,
    .col-new {
        width: 100%;
        min-width: 100%;
    }

    /* Verse Rows - Adaptive Columns with Horizontal Scroll for Multiple Translations */
    .bible-reader-scroll-wrapper.multiple-translations {
        overflow-x: auto !important;
        width: 100%;
        margin: 0 -15px;
        padding: 0 15px;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    .bible-reader-scroll-wrapper.single-translation {
        overflow-x: visible !important;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .bible-reader-scroll-wrapper.multiple-translations .translation-headers-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content;
        min-width: 100%;
        padding: 8px 5px !important;
        gap: 20px !important;
        position: relative !important;
        top: auto !important;
        margin-bottom: 15px !important;
        box-shadow: none !important;
    }

    .translation-header-col {
        width: 46vw !important;
        max-width: 46vw !important;
        min-width: 46vw !important;
        flex: 0 0 46vw !important;
        padding: 0 10px;
        box-sizing: border-box;
        border-right: 1px solid var(--border-color) !important;
        text-align: left;
    }

    .translation-header-col:last-child {
        border-right: none !important;
    }

    .verse-row {
        flex-direction: column !important;
        padding: 10px 5px;
        border-bottom: 1px solid var(--border-color);
        align-items: flex-start;
    }

    .bible-reader-scroll-wrapper.multiple-translations .verse-content-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content;
        min-width: 100%;
        gap: 20px !important;
    }
    
    .bible-reader-scroll-wrapper.single-translation .verse-content-wrapper {
        display: block !important;
        width: 100% !important;
    }

    .verse-col {
        padding: 5px 10px !important;
        box-sizing: border-box;
    }

    .verse-col:not(:only-child) {
        width: 46vw !important;
        max-width: 46vw !important;
        min-width: 46vw !important;
        flex: 0 0 46vw !important;
        border-right: 1px solid var(--border-color) !important;
    }

    .verse-col:only-child {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        border-right: none !important;
    }

    .verse-actions-bar {
        position: sticky;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        margin-top: 8px;
    }

    /* Dim subsequent translations slightly for contrast */
    .verse-col:not(:first-child) {
        color: #555;
    }

    .verse-col:not(:first-child) .verse-number {
        display: none;
    }

    /* Bottom Navigation - Horizontal Swipe */
    .bottom-nav {
        padding: 5px 0;
    }

    .bottom-nav .chapters-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 5px 10px;
    }

    .bottom-nav .chapter-link {
        scroll-snap-align: center;
        flex: 0 0 auto;
    }

    /* Cloud Nav Collapse */
    .cloud-nav .nav-inner {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 8px;
    }

    .nav-back-link {
        width: 34px !important;
        height: 34px !important;
        margin-right: 0 !important;
    }

    .menu-trigger-btn {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

    .lang-select-btn {
        padding: 5px 10px !important;
        font-size: 0.85rem !important;
    }

    .lang-popup {
        width: calc(100vw - 30px);
        left: auto;
        right: 0;
        top: 100%;
        box-sizing: border-box;
    }

    /* Interpretations drawer mobile responsiveness */
    .interpretations-drawer {
        width: 100%;
        max-width: 100%;
        right: -100%;
    }

    .interpretations-drawer.active {
        right: 0;
    }

    /* Content Layout Compact overrides */
    main.main {
        padding: 10px 0 !important;
    }

    .index-header-banner {
        padding: 20px 15px !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        border-radius: 8px !important;
    }

    .index-header-banner h1 {
        font-size: 1.6rem !important;
    }

    .index-header-banner p {
        font-size: 0.85rem !important;
    }

    .index-container {
        gap: 15px !important;
    }

    .book-group-title {
        font-size: 1.15rem !important;
        margin: 15px 0 10px 0 !important;
    }

    .index-group-block {
        margin-bottom: 12px !important;
        padding: 12px !important;
        border-radius: 6px !important;
    }

    .index-group-name {
        font-size: 0.85rem !important;
        margin-bottom: 8px !important;
        padding-bottom: 4px !important;
    }

    .index-books-list {
        grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
        gap: 6px !important;
    }

    .book-index-link {
        font-size: 0.8rem !important;
        padding: 5px 8px !important;
    }

    /* Floating bottom dock for mobile navigation */
    .bottom-nav-bar {
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 40px !important;
        padding: 10px 15px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
        z-index: 9999 !important;
        width: auto !important;
    }

    .bottom-nav-inner {
        width: 100% !important;
        padding: 0 !important;
        justify-content: space-around !important;
        gap: 15px !important;
    }

    .bottom-nav-bar .btn-label {
        display: none !important;
    }

    .nav-prev-btn,
    .nav-next-btn,
    .nav-index-btn,
    .nav-first-btn {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
        margin: 0 !important;
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    }

    .nav-prev-btn:hover,
    .nav-next-btn:hover,
    .nav-index-btn:hover,
    .nav-first-btn:hover {
        background: var(--bg-color) !important;
        border-color: var(--accent-color) !important;
    }

    .nav-prev-btn:disabled,
    .nav-next-btn:disabled,
    .nav-first-btn:disabled {
        opacity: 0.25 !important;
        background: #fafafa !important;
    }

    /* Decrease reader header font size on mobile */
    .reader-header h2 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
}