/* ================================================================
   LinguaAI Unified Application Shell v1.0
   UI-PB-001

   Purpose:
   One authoritative layout layer for the authenticated LinguaAI app.
   Loaded after legacy CSS while the old styles are migrated gradually.
   ================================================================ */

:root {
    --lai-shell-sidebar-width: 240px;
    --lai-shell-content-max: 1100px;
    --lai-shell-gutter: 24px;
    --lai-shell-mobile-gutter: 12px;
    --lai-shell-topbar-height: 56px;
    --lai-shell-bottom-nav-height: 58px;
}

/* Keep app surfaces inside their own box model. */
.linguaai-sidebar,
.linguaai-topbar,
.linguaai-mobile-bottom-bar,
#linguaai-app,
#linguaai-vocab-v2,
#linguaai-grammar,
#linguaai-stories,
#linguaai-podcasts,
#linguaai-dialogues,
#linguaai-chat,
#linguaai-profile,
#linguaai-sentence-practice,
#linguaai-vocab,
#linguaai-wordlist,
.linguaai-mentor-container,
.linguaai-main-container {
    box-sizing: border-box;
}

/* ---------------- Desktop / tablet shell ---------------- */
@media (min-width: 861px) {
    .linguaai-sidebar {
        inset-block: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        width: var(--lai-shell-sidebar-width) !important;
        height: auto !important;
    }

    .linguaai-sidebar .sidebar-menu {
        max-height: none !important;
        min-height: 0;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    #linguaai-app,
    #linguaai-vocab-v2,
    #linguaai-grammar,
    #linguaai-stories,
    #linguaai-podcasts,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-profile,
    #linguaai-sentence-practice,
    #linguaai-vocab,
    #linguaai-wordlist,
    .linguaai-mentor-container,
    .linguaai-main-container,
    .lai-verbs-simple,
    .linguaai-topbar {
        width: auto !important;
        max-width: var(--lai-shell-content-max) !important;
        margin-inline-start: calc(
            var(--lai-shell-sidebar-width) +
            max(var(--lai-shell-gutter), calc((100vw - var(--lai-shell-sidebar-width) - var(--lai-shell-content-max)) / 2))
        ) !important;
        margin-inline-end: var(--lai-shell-gutter) !important;
    }

    .linguaai-topbar {
        min-height: var(--lai-shell-topbar-height) !important;
        height: auto !important;
        margin-block-start: 24px !important;
        margin-block-end: 20px !important;
        top: 16px !important;
    }

    /* Mirror the shell for Arabic/RTL without changing module internals. */
    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-sidebar {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
    }

    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-app,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-vocab-v2,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-grammar,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-stories,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-podcasts,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-dialogues,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-chat,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-profile,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-sentence-practice,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-vocab,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-wordlist,
    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-mentor-container,
    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-main-container,
    body:has(.linguaai-sidebar[dir="rtl"]) .lai-verbs-simple,
    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-topbar {
        margin-inline-start: var(--lai-shell-gutter) !important;
        margin-inline-end: calc(
            var(--lai-shell-sidebar-width) +
            max(var(--lai-shell-gutter), calc((100vw - var(--lai-shell-sidebar-width) - var(--lai-shell-content-max)) / 2))
        ) !important;
    }
}

/* ---------------- Mobile shell ---------------- */
@media (max-width: 860px) {
    /* Legacy CSS adds bottom space to both body and modules. Keep one owner. */
    body:has(.linguaai-mobile-bottom-bar) {
        padding-bottom: 0 !important;
        overflow-x: hidden;
    }

    .linguaai-sidebar {
        position: fixed !important;
        inset-block: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        width: min(86vw, 320px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        padding: max(18px, env(safe-area-inset-top)) 14px 18px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        color: #334155 !important;
        align-items: stretch !important;
        transform: translateX(-105%) !important;
        overflow: hidden !important;
        box-shadow: 12px 0 36px rgba(15, 23, 42, 0.16) !important;
    }

    .linguaai-sidebar.open {
        transform: translateX(0) !important;
    }

    .linguaai-sidebar .sidebar-logo {
        flex: 0 0 auto;
    }

    .linguaai-sidebar .sidebar-menu {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-sidebar {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        transform: translateX(105%) !important;
        box-shadow: -12px 0 36px rgba(15, 23, 42, 0.16) !important;
    }

    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-sidebar.open {
        transform: translateX(0) !important;
    }

    #linguaai-app,
    #linguaai-vocab-v2,
    #linguaai-grammar,
    #linguaai-stories,
    #linguaai-podcasts,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-profile,
    #linguaai-sentence-practice,
    #linguaai-vocab,
    #linguaai-wordlist,
    .linguaai-mentor-container,
    .linguaai-main-container,
    .lai-verbs-simple {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: var(--lai-shell-mobile-gutter) !important;
        padding-bottom: calc(var(--lai-shell-bottom-nav-height) + max(16px, env(safe-area-inset-bottom))) !important;
    }

    .linguaai-topbar {
        position: sticky !important;
        top: max(8px, env(safe-area-inset-top)) !important;
        width: auto !important;
        max-width: none !important;
        min-height: var(--lai-shell-topbar-height) !important;
        height: auto !important;
        margin: 8px var(--lai-shell-mobile-gutter) 14px !important;
        padding: 6px 10px !important;
        border-radius: 14px !important;
        gap: 8px;
    }

    .linguaai-topbar .topbar-left {
        min-width: 0;
        flex: 1 1 auto;
    }

    .linguaai-topbar .topbar-page-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .linguaai-topbar .topbar-right {
        flex: 0 0 auto;
        gap: 6px !important;
    }

    .linguaai-topbar .topbar-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px !important;
        padding: 0 !important;
    }

    .linguaai-mobile-bottom-bar {
        min-height: var(--lai-shell-bottom-nav-height) !important;
        height: auto !important;
        padding-block-start: 4px !important;
        padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right)) !important;
        padding-block-end: max(4px, env(safe-area-inset-bottom)) !important;
    }

    .linguaai-mobile-bottom-bar .mobile-bottom-item {
        min-height: 48px;
        min-width: 44px;
    }

    .linguaai-bottom-sheet {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .bottom-sheet-content {
        max-height: calc(100dvh - max(24px, env(safe-area-inset-top)));
    }
}

@media (max-width: 380px) {
    :root {
        --lai-shell-mobile-gutter: 10px;
    }

    .linguaai-topbar .topbar-badge.streak-badge {
        display: none !important;
    }
}


/* ================================================================
   Mobile UX stabilization v1.1 — Task B (Hata 2, 3, 4, 7)
   ================================================================ */
.linguaai-mobile-bottom-bar { display: none; }
.bottom-sheet-close {
    width: 42px; height: 42px; border: 0; border-radius: 12px;
    background: #f1f5f9; color: #334155; font-size: 1rem; cursor: pointer;
}
.bottom-sheet-item.active { background: #eef2ff; color: #4338ca; }
.bottom-sheet-logout .bottom-sheet-icon { background: #fff1f2; color: #be123c; }
html.linguaai-menu-open, html.linguaai-menu-open body { overflow: hidden !important; }

@media (max-width: 860px) {
    .linguaai-topbar {
        z-index: 9000 !important;
        isolation: isolate;
        box-shadow: 0 8px 24px rgba(15,23,42,.08) !important;
    }
    .linguaai-topbar .topbar-hamburger {
        font-size: 1.45rem !important;
        font-weight: 800 !important;
        border-radius: 12px !important;
        background: #eef2ff !important;
        color: #4338ca !important;
        border: 1px solid #c7d2fe !important;
        box-shadow: 0 3px 10px rgba(79,70,229,.12) !important;
    }
    .linguaai-topbar .topbar-center { display: none !important; }
    .linguaai-topbar .topbar-badge.lang-badge .badge-text { display: none !important; }
    .linguaai-topbar .topbar-badge { padding-inline: 8px !important; }

    .linguaai-mobile-bottom-bar { display: flex !important; }
    .linguaai-mobile-bottom-bar .mobile-bottom-item {
        border: 0 !important;
        background: transparent !important;
        font-family: inherit !important;
        cursor: pointer !important;
        min-width: 0 !important;
    }

    .linguaai-sidebar { z-index: 100001 !important; }
    .linguaai-sidebar .sidebar-menu {
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
        scroll-padding-bottom: 32px;
    }
    .linguaai-sidebar .sidebar-item { min-height: 48px !important; }

    /* Prevent sticky header / bottom nav from covering module content. */
    #linguaai-app, #linguaai-vocab-v2, #linguaai-grammar, #linguaai-stories,
    #linguaai-podcasts, #linguaai-dialogues, #linguaai-chat, #linguaai-profile,
    #linguaai-sentence-practice, #linguaai-vocab, #linguaai-wordlist,
    .linguaai-mentor-container, .linguaai-main-container {
        scroll-margin-top: calc(var(--lai-shell-topbar-height) + 24px);
        overflow-x: clip;
    }

    /* Dialogue player control row: wrap cleanly instead of overflowing. */
    #linguaai-dialogues .study-header-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }
    #linguaai-dialogues .study-header-bar .dashboard-back-btn {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 0 !important;
        justify-content: center !important;
        white-space: normal !important;
    }
    #linguaai-dialogues .dialogue-mode-switcher {
        order: 2;
        flex: 1 1 calc(100% - 58px) !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    #linguaai-dialogues .dialogue-mode-switcher::-webkit-scrollbar { display: none; }
    #linguaai-dialogues .dialogue-mode-switcher .mode-pill {
        flex: 1 0 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        padding: 8px 12px !important;
    }
    #linguaai-dialogues .study-header-bar .story-category-badge {
        order: 3;
        flex: 0 0 auto;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .bottom-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bottom-sheet-content { padding-inline: 16px; }
    .linguaai-topbar .topbar-right .streak-badge { display: none !important; }
    .linguaai-topbar .topbar-page-title { font-size: .95rem !important; }
}

/* ================================================================
   Linguataal Unified Desktop Canvas v1.1 — 2.4.45.35
   Approved 100% desktop layout: sidebar and content form one canvas.
   This layer intentionally changes spacing/layout only; module internals
   keep their existing component styles and behavior.
   ================================================================ */
@media (min-width: 1180px) {
    :root {
        --lai-shell-sidebar-width: 240px;
        --lai-shell-content-max: none;
        --lai-shell-gutter: 22px;
        --lai-shell-page-max: 1480px;
    }

    body {
        overflow-x: hidden;
    }

    .linguaai-sidebar {
        width: var(--lai-shell-sidebar-width) !important;
        border-inline-end: 1px solid #e9edf5 !important;
        box-shadow: 4px 0 20px rgba(15, 23, 42, .035) !important;
    }

    #linguaai-app,
    #linguaai-vocab-v2,
    #linguaai-grammar,
    #linguaai-stories,
    #linguaai-podcasts,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-profile,
    #linguaai-sentence-practice,
    #linguaai-vocab,
    #linguaai-wordlist,
    #linguaai-praatcafe,
    #linguaai-knm-wrap,
    #linguaai-contact-page,
    #linguaai-blog-page,
    .linguaai-mentor-container,
    .linguaai-main-container,
    .lai-verbs-simple,
    .linguaai-topbar {
        width: auto !important;
        max-width: var(--lai-shell-page-max) !important;
        margin-inline-start: calc(var(--lai-shell-sidebar-width) + var(--lai-shell-gutter)) !important;
        margin-inline-end: var(--lai-shell-gutter) !important;
    }

    .linguaai-topbar {
        margin-block-start: 18px !important;
        margin-block-end: 18px !important;
        top: 12px !important;
    }

    /* Main module roots should align to the same left/right rails as header. */
    #linguaai-app,
    #linguaai-vocab-v2,
    #linguaai-grammar,
    #linguaai-stories,
    #linguaai-podcasts,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-profile,
    #linguaai-sentence-practice,
    #linguaai-vocab,
    #linguaai-wordlist,
    #linguaai-praatcafe,
    #linguaai-knm-wrap,
    #linguaai-contact-page,
    #linguaai-blog-page,
    .linguaai-mentor-container,
    .linguaai-main-container {
        padding-inline: 0 !important;
    }

    /* Prevent old module-specific max-width/auto-margin rules from making
       inner pages look detached from the global shell. */
    #linguaai-app > .container,
    #linguaai-vocab-v2 > .container,
    #linguaai-grammar > .container,
    #linguaai-stories > .container,
    #linguaai-podcasts > .container,
    #linguaai-dialogues > .container,
    #linguaai-profile > .container,
    #linguaai-sentence-practice > .container,
    #linguaai-vocab > .container,
    #linguaai-wordlist > .container,
    #linguaai-praatcafe > .container,
    #linguaai-knm-wrap > .container,
    .linguaai-main-container > .container {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-app,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-vocab-v2,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-grammar,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-stories,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-podcasts,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-dialogues,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-chat,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-profile,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-sentence-practice,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-vocab,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-wordlist,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-praatcafe,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-knm-wrap,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-contact-page,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-blog-page,
    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-mentor-container,
    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-main-container,
    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-topbar {
        margin-inline-start: var(--lai-shell-gutter) !important;
        margin-inline-end: calc(var(--lai-shell-sidebar-width) + var(--lai-shell-gutter)) !important;
    }
}

/* Keep the same rhythm on smaller desktop/tablet widths without squeezing cards. */
@media (min-width: 861px) and (max-width: 1179px) {
    :root {
        --lai-shell-sidebar-width: 220px;
        --lai-shell-gutter: 18px;
        --lai-shell-content-max: none;
    }

    #linguaai-praatcafe,
    #linguaai-contact-page,
    #linguaai-blog-page {
        width: auto !important;
        max-width: none !important;
        margin-inline-start: calc(var(--lai-shell-sidebar-width) + var(--lai-shell-gutter)) !important;
        margin-inline-end: var(--lai-shell-gutter) !important;
    }
}

/* ================================================================
   Linguataal Compact Product UI v1.2 — 2.4.45.36
   Approved 100% desktop reference.
   Goal: one calm, professional visual rhythm across authenticated pages.
   Layout + density only; learning behaviour is untouched.
   ================================================================ */
@media (min-width: 861px) {
    :root {
        --lai-shell-sidebar-width: 220px;
        --lai-shell-content-max: 1240px;
        --lai-shell-gutter: 18px;
        --lai-shell-page-max: 1240px;
        --lai-shell-topbar-height: 54px;
    }

    body:has(.linguaai-sidebar) {
        background: #f7f8fc !important;
    }

    .linguaai-sidebar {
        width: var(--lai-shell-sidebar-width) !important;
        padding: 20px 14px !important;
        gap: 14px !important;
        background: rgba(255,255,255,.96) !important;
        border-inline-end: 1px solid #e7eaf1 !important;
        box-shadow: 2px 0 16px rgba(15,23,42,.025) !important;
    }
    .linguaai-sidebar .sidebar-logo-img { height: 42px !important; }
    .linguaai-sidebar .sidebar-logo-text { font-size: 1.35rem !important; }
    .linguaai-sidebar .sidebar-menu { gap: 3px !important; padding-right: 2px !important; }
    .linguaai-sidebar .sidebar-item {
        min-height: 42px !important;
        padding: 9px 12px !important;
        gap: 10px !important;
        margin-bottom: 2px !important;
        border-radius: 10px !important;
        font-size: .84rem !important;
        line-height: 1.2 !important;
    }
    .linguaai-sidebar .sidebar-item .item-icon { font-size: 1rem !important; }

    /* Center one maximum-width canvas in the space remaining after sidebar. */
    #linguaai-app,
    #linguaai-vocab-v2,
    #linguaai-grammar,
    #linguaai-stories,
    #linguaai-podcasts,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-profile,
    #linguaai-sentence-practice,
    #linguaai-vocab,
    #linguaai-wordlist,
    #linguaai-praatcafe,
    #linguaai-knm-wrap,
    #linguaai-contact-page,
    #linguaai-blog-page,
    .linguaai-mentor-container,
    .linguaai-main-container,
    .linguaai-topbar {
        width: auto !important;
        max-width: var(--lai-shell-page-max) !important;
        margin-inline-start: calc(
            var(--lai-shell-sidebar-width) +
            max(var(--lai-shell-gutter), calc((100vw - var(--lai-shell-sidebar-width) - var(--lai-shell-page-max)) / 2))
        ) !important;
        margin-inline-end: var(--lai-shell-gutter) !important;
        box-sizing: border-box !important;
    }

    .linguaai-topbar {
        min-height: 54px !important;
        height: 54px !important;
        margin-block-start: 18px !important;
        margin-block-end: 18px !important;
        padding: 0 18px !important;
        top: 10px !important;
        border-radius: 14px !important;
        border: 1px solid #e7eaf1 !important;
        background: rgba(255,255,255,.94) !important;
        box-shadow: 0 7px 22px rgba(15,23,42,.035) !important;
    }
    .linguaai-topbar .topbar-page-title { font-size: 1.12rem !important; letter-spacing: -.015em !important; }
    .linguaai-topbar .topbar-right { gap: 8px !important; }
    .linguaai-topbar .topbar-badge { padding: 5px 10px !important; }
    .linguaai-topbar .topbar-badge .badge-text { font-size: .74rem !important; }
    .linguaai-topbar .topbar-avatar { width: 32px !important; height: 32px !important; }

    /* Common page density. */
    #linguaai-app,
    #linguaai-vocab-v2,
    #linguaai-grammar,
    #linguaai-stories,
    #linguaai-podcasts,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-profile,
    #linguaai-sentence-practice,
    #linguaai-vocab,
    #linguaai-wordlist,
    .linguaai-mentor-container,
    .linguaai-main-container {
        font-size: 15px !important;
        padding-inline: 0 !important;
        padding-bottom: 36px !important;
    }

    /* Standard module intro: compact, never a second oversized hero. */
    #linguaai-vocab-v2 > .linguaai-header,
    #linguaai-grammar > .linguaai-header,
    #linguaai-stories > .linguaai-header,
    #linguaai-dialogues > .linguaai-header,
    #linguaai-podcasts > .linguaai-header,
    #linguaai-chat > .linguaai-header,
    #linguaai-profile > .linguaai-header,
    #linguaai-sentence-practice > .linguaai-header,
    #linguaai-vocab > .linguaai-header,
    #linguaai-wordlist > .linguaai-header {
        min-height: 92px !important;
        margin: 0 0 20px !important;
        padding: 18px 22px !important;
        border-radius: 16px !important;
        border: 1px solid #e7eaf1 !important;
        box-shadow: 0 6px 22px rgba(15,23,42,.03) !important;
    }
    .linguaai-header h1,
    .linguaai-header .linguaai-header-content h1 {
        font-size: 1.52rem !important;
        line-height: 1.18 !important;
        margin: 0 0 5px !important;
        letter-spacing: -.025em !important;
    }
    .linguaai-header p,
    .linguaai-header .linguaai-header-content p {
        font-size: .88rem !important;
        line-height: 1.45 !important;
        margin: 0 !important;
    }
    .linguaai-header-badge img { width: 44px !important; height: 44px !important; }

    /* Vocabulary home: preserve information, reduce oversized dashboard blocks. */
    #linguaai-vocab-v2 #vocab-dashboard {
        padding: 22px 24px !important;
        margin-bottom: 22px !important;
        border-radius: 18px !important;
        box-shadow: 0 7px 24px rgba(15,23,42,.035) !important;
    }
    #linguaai-vocab-v2 .dashboard-user-bar { margin-bottom: 17px !important; }
    #linguaai-vocab-v2 .dashboard-user-bar h2 { font-size: 1.35rem !important; }
    #linguaai-vocab-v2 .vocab-widgets-grid { gap: 14px !important; margin-bottom: 20px !important; }
    #linguaai-vocab-v2 .dashboard-card {
        padding: 17px 18px !important;
        border-radius: 16px !important;
        box-shadow: none !important;
    }
    #linguaai-vocab-v2 .dashboard-card:hover { transform: translateY(-1px) !important; }
    #linguaai-vocab-v2 .card-icon { font-size: 1.55rem !important; margin-bottom: 7px !important; }
    #linguaai-vocab-v2 .dashboard-card h3 { font-size: 1rem !important; margin-bottom: 7px !important; }
    #linguaai-vocab-v2 .progress-ratio,
    #linguaai-vocab-v2 .progress-percent { font-size: 1.1rem !important; }
    #linguaai-vocab-v2 .due-count { font-size: 1.55rem !important; }
    #linguaai-vocab-v2 .dashboard-action-btn { padding: 9px 13px !important; border-radius: 10px !important; font-size: .82rem !important; }
    #linguaai-vocab-v2 .dashboard-section { margin-top: 22px !important; }
    #linguaai-vocab-v2 .category-grid { gap: 12px !important; }
    #linguaai-vocab-v2 .cat-card { padding: 16px !important; border-radius: 15px !important; }

    /* Grammar: more topics visible at 100% zoom; cards become navigation tiles. */
    #linguaai-grammar .grammar-level-selector { gap: 8px !important; margin-bottom: 20px !important; }
    #linguaai-grammar .level-tab-btn {
        padding: 9px 13px !important;
        border-radius: 11px !important;
        font-size: .84rem !important;
        box-shadow: none !important;
    }
    #linguaai-grammar .grammar-topic-section { margin-bottom: 26px !important; }
    #linguaai-grammar .grammar-topic-section h3 { font-size: 1.18rem !important; margin-bottom: 13px !important; }
    #linguaai-grammar .topic-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
        gap: 12px !important;
    }
    #linguaai-grammar .topic-card {
        min-height: 142px !important;
        padding: 15px 16px !important;
        gap: 7px !important;
        border-radius: 16px !important;
        box-shadow: none !important;
    }
    #linguaai-grammar .topic-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(15,23,42,.06) !important; }
    #linguaai-grammar .topic-card-icon { width: 40px !important; height: 40px !important; font-size: 1.25rem !important; border-radius: 11px !important; }
    #linguaai-grammar .topic-card h4 { font-size: .94rem !important; line-height: 1.3 !important; }
    #linguaai-grammar .topic-card-badge { font-size: .7rem !important; padding: 3px 8px !important; }
    #linguaai-grammar .grammar-theory-card,
    #linguaai-grammar .grammar-box,
    #linguaai-grammar .grammar-completion-card { border-radius: 18px !important; }

    /* Word list / My Vocabulary: controls should read as toolbar, not stacked giant cards. */
    #linguaai-wordlist .wl-filter-panel,
    #linguaai-wordlist .wordlist-filters,
    #linguaai-wordlist .filters-panel {
        padding: 18px 20px !important;
        border-radius: 16px !important;
        margin-bottom: 18px !important;
    }
    #linguaai-wordlist .wl-selection-bar { border-radius: 14px !important; }

    /* Stories/dialogues: keep library cards compact and consistent. */
    #linguaai-stories .story-card,
    #linguaai-dialogues .dialogue-card,
    #linguaai-dialogues .topic-card {
        border-radius: 16px !important;
        box-shadow: none !important;
    }

    /* Shared surfaces: one radius/shadow vocabulary across the product. */
    #linguaai-vocab-v2 :where(.dashboard-card,.cat-card),
    #linguaai-grammar :where(.topic-card,.grammar-theory-card,.grammar-box),
    #linguaai-wordlist :where(.word-card,.wl-card),
    #linguaai-stories :where(.story-card),
    #linguaai-dialogues :where(.dialogue-card) {
        border-color: #e5e9f1 !important;
    }

    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-app,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-vocab-v2,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-grammar,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-stories,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-podcasts,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-dialogues,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-chat,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-profile,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-sentence-practice,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-vocab,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-wordlist,
    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-mentor-container,
    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-main-container,
    body:has(.linguaai-sidebar[dir="rtl"]) .linguaai-topbar {
        margin-inline-start: var(--lai-shell-gutter) !important;
        margin-inline-end: calc(
            var(--lai-shell-sidebar-width) +
            max(var(--lai-shell-gutter), calc((100vw - var(--lai-shell-sidebar-width) - var(--lai-shell-page-max)) / 2))
        ) !important;
    }
}

/* 100% zoom on common laptop widths: do not let density collapse into giant cards. */
@media (min-width: 1180px) and (max-width: 1500px) {
    #linguaai-app.lai-dashboard-v2 .lai-dash-module-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
    #linguaai-app.lai-dashboard-v2 .lai-dash-module-card { min-height: 168px !important; }
}


/* ================================================================
   KNM layout protection — 2.4.45.37
   KNM has its own approved modern landing-page composition. Keep it
   outside the compact product-density rules so the topic cards and
   intro do not get visually squeezed at 100% zoom.
   ================================================================ */
@media (min-width: 1180px) {
    #linguaai-knm-wrap .knm-main-panel {
        padding: 30px 34px !important;
        border-radius: 22px !important;
    }
    #linguaai-knm-wrap .knm-welcome {
        padding: 22px 12px 18px !important;
    }
    #linguaai-knm-wrap .knm-welcome h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }
    #linguaai-knm-wrap .knm-welcome > p {
        max-width: 820px !important;
        margin: 0 auto !important;
        font-size: .98rem !important;
        line-height: 1.65 !important;
    }
    #linguaai-knm-wrap .knm-welcome-features {
        max-width: 1040px !important;
        margin: 30px auto 30px !important;
        gap: 24px !important;
        padding: 20px 0 !important;
    }
    #linguaai-knm-wrap .knm-topic-heading {
        margin: 8px 0 18px !important;
    }
    #linguaai-knm-wrap .knm-topic-heading h3 {
        font-size: 1.15rem !important;
    }
    #linguaai-knm-wrap .knm-welcome-grid {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 18px !important;
    }
    #linguaai-knm-wrap .knm-welcome-card {
        min-height: 132px !important;
        padding: 20px !important;
        grid-template-columns: 60px 1fr 36px !important;
        gap: 15px !important;
        border-radius: 18px !important;
    }
    #linguaai-knm-wrap .knm-welcome-card .knm-card-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.9rem !important;
    }
    #linguaai-knm-wrap .knm-welcome-card h4 {
        font-size: .98rem !important;
        line-height: 1.4 !important;
    }
    #linguaai-knm-wrap .knm-card-meta {
        font-size: .8rem !important;
        line-height: 1.5 !important;
    }
    #linguaai-knm-wrap .knm-welcome-guide {
        margin-top: 24px !important;
        padding: 17px 20px !important;
        font-size: .86rem !important;
    }
}

@media (min-width: 861px) and (max-width: 1179px) {
    #linguaai-knm-wrap .knm-main-panel { padding: 24px 22px !important; }
    #linguaai-knm-wrap .knm-welcome-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}


/* ================================================================
   Dashboard alignment + 4-4-2 modules + mobile header safety — 2.4.45.39
   ================================================================ */
@media (min-width: 861px) {
    /* The dashboard content must share the exact same shell rail as the topbar.
       Do not re-center the page independently inside the viewport. */
    #linguaai-app.lai-dashboard-v2 {
        width: auto !important;
        max-width: var(--lai-shell-content-max) !important;
        margin-inline-start: calc(
            var(--lai-shell-sidebar-width) +
            max(var(--lai-shell-gutter), calc((100vw - var(--lai-shell-sidebar-width) - var(--lai-shell-content-max)) / 2))
        ) !important;
        margin-inline-end: var(--lai-shell-gutter) !important;
    }

    #linguaai-app.lai-dashboard-v2 .lai-dash-module-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 860px) {
    /* A sticky application header was covering the first content rows on phones.
       Keep it in normal document flow on mobile so content can never render below it. */
    .linguaai-topbar {
        position: relative !important;
        top: auto !important;
        inset-block-start: auto !important;
        margin-block-end: 14px !important;
    }
}

/* ================================================================
   Responsive Gold Pass — Phase 1 / 2.4.45.56
   Global mobile shell + overflow hardening + critical learning surfaces.
   Desktop behavior is intentionally left unchanged.
   ================================================================ */
@media (max-width: 860px) {
    :root {
        --lai-shell-mobile-gutter: clamp(10px, 3.2vw, 14px);
        --lai-shell-topbar-height: 64px;
        --lai-shell-bottom-nav-height: 64px;
    }

    /* One predictable mobile canvas: no module may create viewport overflow. */
    #linguaai-app,
    #linguaai-vocab-v2,
    #linguaai-grammar,
    #linguaai-stories,
    #linguaai-podcasts,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-profile,
    #linguaai-sentence-practice,
    #linguaai-vocab,
    #linguaai-wordlist,
    #linguaai-praatcafe,
    #linguaai-knm-wrap,
    #linguaai-contact-page,
    #linguaai-blog-page,
    .linguaai-mentor-container,
    .linguaai-main-container {
        min-width: 0 !important;
        overflow-x: clip !important;
    }

    #linguaai-app *,
    #linguaai-vocab-v2 *,
    #linguaai-grammar *,
    #linguaai-stories *,
    #linguaai-podcasts *,
    #linguaai-dialogues *,
    #linguaai-chat *,
    #linguaai-profile *,
    #linguaai-sentence-practice *,
    #linguaai-vocab *,
    #linguaai-wordlist *,
    #linguaai-praatcafe *,
    #linguaai-knm-wrap *,
    #linguaai-contact-page *,
    #linguaai-blog-page *,
    .linguaai-mentor-container *,
    .linguaai-main-container * {
        box-sizing: border-box;
        min-width: 0;
    }

    /* Mobile topbar stays in document flow so it can never cover content. */
    .linguaai-topbar {
        position: relative !important;
        inset: auto !important;
        min-height: 0 !important;
        margin: 6px var(--lai-shell-mobile-gutter) 10px !important;
        padding: 5px 8px !important;
        border-radius: 14px !important;
    }
    .linguaai-topbar .topbar-left { gap: 7px !important; }
    .linguaai-topbar .topbar-hamburger {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 1.25rem !important;
    }
    .linguaai-topbar .topbar-page-title {
        font-size: clamp(.9rem, 3.7vw, 1.05rem) !important;
        line-height: 1.15 !important;
    }
    .linguaai-topbar .topbar-avatar {
        width: 40px !important;
        height: 40px !important;
    }
    .linguaai-topbar .topbar-badge {
        min-height: 36px !important;
        padding-inline: 7px !important;
    }

    /* Internal module hero headers must not float beneath the shell. */
    #linguaai-vocab-v2 > .linguaai-header,
    #linguaai-grammar > .linguaai-header,
    #linguaai-stories > .linguaai-header,
    #linguaai-dialogues > .linguaai-header,
    #linguaai-podcasts > .linguaai-header,
    #linguaai-chat > .linguaai-header,
    #linguaai-profile > .linguaai-header,
    #linguaai-sentence-practice > .linguaai-header,
    #linguaai-vocab > .linguaai-header,
    #linguaai-wordlist > .linguaai-header {
        position: relative !important;
        inset: auto !important;
        margin-top: 0 !important;
    }

    /* Bottom nav: stable icon/label baseline even when a label wraps. */
    .linguaai-mobile-bottom-bar {
        align-items: stretch !important;
        gap: 0 !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-item {
        flex: 1 1 20% !important;
        width: 20% !important;
        min-height: 58px !important;
        padding: 5px 2px 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        overflow: hidden !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-icon {
        flex: 0 0 24px !important;
        height: 24px !important;
        display: grid !important;
        place-items: center !important;
        line-height: 1 !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-label {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 100% !important;
        min-height: 2.25em !important;
        max-height: 2.25em !important;
        overflow: hidden !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.1 !important;
        font-size: clamp(.62rem, 2.6vw, .72rem) !important;
    }

    /* More sheet is a clean mobile navigation surface, not a link cloud. */
    .bottom-sheet-content {
        border-radius: 24px 24px 0 0 !important;
        padding: 10px 14px max(18px, env(safe-area-inset-bottom)) !important;
    }
    .bottom-sheet-header {
        padding: 4px 2px 12px !important;
        align-items: center !important;
    }
    .bottom-sheet-header strong {
        font-size: 1.05rem !important;
        color: #0f172a !important;
    }
    .bottom-sheet-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .bottom-sheet-item {
        min-height: 86px !important;
        padding: 10px 6px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        background: #fff !important;
        text-decoration: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        text-align: center !important;
        box-shadow: 0 3px 10px rgba(15,23,42,.045) !important;
    }
    .bottom-sheet-item.active {
        border-color: #c7d2fe !important;
        background: #eef2ff !important;
    }
    .bottom-sheet-icon {
        width: 34px !important;
        height: 34px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
        font-size: 1.2rem !important;
    }
    .bottom-sheet-label {
        width: 100% !important;
        line-height: 1.15 !important;
        font-size: .76rem !important;
        font-weight: 750 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-decoration: none !important;
    }
    .bottom-sheet-logout {
        border-color: #fecdd3 !important;
        background: #fff7f8 !important;
        color: #be123c !important;
    }

    /* Generic mobile content hardening for long localized text. */
    .linguaai-header h1,
    .linguaai-header h2,
    .linguaai-header p,
    .linguaai-card,
    .linguaai-card *,
    button,
    a,
    label,
    p,
    h1,h2,h3,h4,h5,h6 {
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* Sentence Practice — no drifting cards/options/actions on narrow phones. */
    #linguaai-sentence-practice {
        padding-inline: var(--lai-shell-mobile-gutter) !important;
    }
    #linguaai-sentence-practice .sp-practice-box,
    #linguaai-sentence-practice .sp-question-card,
    #linguaai-sentence-practice .sp-duo-topbar,
    #linguaai-sentence-practice .sp-duo-mascot-card,
    #linguaai-sentence-practice .sp-section-header {
        width: 100% !important;
        max-width: 100% !important;
    }
    #linguaai-sentence-practice .sp-question-card > div:first-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #linguaai-sentence-practice .sp-focus-tag,
    #linguaai-sentence-practice #sp-sub-level-badge {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    #linguaai-sentence-practice .sp-question-prompt {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
    }
    #linguaai-sentence-practice .sp-answer-area,
    #linguaai-sentence-practice .sp-words-basket {
        width: 100% !important;
        max-width: 100% !important;
    }
    #linguaai-sentence-practice .sp-choice-btn,
    #linguaai-sentence-practice .sp-word-chip,
    #linguaai-sentence-practice .sp-text-input {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
    #linguaai-sentence-practice .sp-choice-btn {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-height: 48px !important;
        height: auto !important;
    }
    #linguaai-sentence-practice .sp-footer-buttons {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    #linguaai-sentence-practice .sp-footer-buttons > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    #linguaai-sentence-practice .sp-report-btn,
    #linguaai-sentence-practice .sp-check-btn,
    #linguaai-sentence-practice .sp-next-btn {
        min-height: 46px !important;
        height: auto !important;
        white-space: normal !important;
    }

    /* AI Chat — mobile app mode: keep a compact, audio-reactive Emma stage visible. */
    #linguaai-chat .chat-workspace-layout {
        display: block !important;
        margin-top: 12px !important;
    }
    #linguaai-chat .chat-workspace-left {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
    }
    #linguaai-chat .chat-workspace-left .avatar-card {
        padding: 12px !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 26px rgba(15,23,42,.18) !important;
    }
    #linguaai-chat .chat-workspace-left .avatar-card > div:first-child {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }
    #linguaai-chat .emma-stage {
        min-height: 184px !important;
        height: 184px !important;
        margin: 8px 0 !important;
        border-radius: 16px !important;
    }
    #linguaai-chat .emma-3d-mount {
        width: 132px !important;
        height: 138px !important;
        align-items: center !important;
    }
    #linguaai-chat .emma-identity-orb {
        width: 104px !important;
        height: 104px !important;
    }
    #linguaai-chat .emma-orb-core {
        width: 56px !important;
        height: 56px !important;
        border-radius: 18px !important;
        font-size: 1.55rem !important;
    }
    #linguaai-chat .emma-stage-label {
        left: 10px !important;
        right: 10px !important;
        bottom: 8px !important;
        padding: 6px 8px !important;
    }
    #linguaai-chat .emma-audio-pulse {
        top: 10px !important;
        right: 10px !important;
        height: 26px !important;
    }
    #linguaai-chat #chat-avatar-status-overlay {
        min-height: 40px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        font-size: .8rem !important;
    }
    #linguaai-chat .chat-workspace-right {
        width: 100% !important;
        max-width: 100% !important;
    }
    #linguaai-chat .emma-mode-panel {
        margin-block: 10px 12px !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }
    #linguaai-chat .emma-mode-heading {
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    #linguaai-chat .emma-mode-heading h2 {
        font-size: 1.05rem !important;
        margin-bottom: 2px !important;
    }
    #linguaai-chat .emma-mode-heading p {
        font-size: .82rem !important;
        line-height: 1.35 !important;
    }
    #linguaai-chat .emma-mode-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
    }
    #linguaai-chat .emma-mode-card {
        min-height: 76px !important;
        height: auto !important;
        padding: 10px !important;
        align-items: flex-start !important;
    }
    #linguaai-chat .emma-mode-copy strong,
    #linguaai-chat .emma-mode-copy small {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    #linguaai-chat .chat-box {
        width: 100% !important;
        height: clamp(230px, 38dvh, 360px) !important;
        min-height: 230px !important;
        max-height: 42dvh !important;
        padding: 14px !important;
        margin-bottom: 10px !important;
        border-radius: 18px !important;
        gap: 10px !important;
    }
    #linguaai-chat .chat-bubble {
        max-width: 88% !important;
        padding: 11px 13px !important;
        overflow-wrap: anywhere !important;
    }
    #linguaai-chat .emma-tools {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    #linguaai-chat .emma-tools button {
        width: 100% !important;
        min-height: 44px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }
    #linguaai-chat .chat-input-area {
        width: 100% !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    #linguaai-chat .chat-input {
        width: 100% !important;
        min-height: 48px !important;
        padding: 11px 12px !important;
    }
    #linguaai-chat .chat-send-btn {
        min-width: 82px !important;
        padding: 11px 13px !important;
        white-space: normal !important;
    }
}

@media (max-width: 420px) {
    .bottom-sheet-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .bottom-sheet-item { min-height: 80px !important; }

    #linguaai-chat .emma-mode-grid {
        grid-template-columns: 1fr !important;
    }
    #linguaai-chat .emma-mode-card {
        min-height: 64px !important;
    }
    #linguaai-chat .chat-box {
        height: clamp(220px, 34dvh, 300px) !important;
    }
    #linguaai-chat .emma-stage {
        min-height: 166px !important;
        height: 166px !important;
    }
    #linguaai-chat .emma-identity-orb {
        width: 92px !important;
        height: 92px !important;
    }
    #linguaai-chat .emma-orb-core {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.4rem !important;
    }
    #linguaai-sentence-practice .sp-progress-bar-container {
        gap: 8px !important;
    }
    #linguaai-sentence-practice .sp-exit-btn {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }
    #linguaai-sentence-practice .sp-progress-counter {
        font-size: .88rem !important;
        flex: 0 0 auto !important;
    }
    #linguaai-sentence-practice .sp-footer-buttons > div,
    #linguaai-sentence-practice .sp-report-btn,
    #linguaai-sentence-practice .sp-check-btn,
    #linguaai-sentence-practice .sp-next-btn {
        width: 100% !important;
    }
}

/* ================================================================
   Responsive Gold Pass — Phase 2 / 2.4.45.57
   Cross-module mobile/tablet alignment, localization-safe wrapping,
   grouped More sheet, form/grid hardening, and regression guardrails.
   ================================================================ */
@media (max-width: 1024px) {
    /* Keep all first-party learning surfaces inside the viewport. */
    #linguaai-app,
    #linguaai-vocab-v2,
    #linguaai-grammar,
    #linguaai-stories,
    #linguaai-podcasts,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-profile,
    #linguaai-sentence-practice,
    #linguaai-vocab,
    #linguaai-wordlist,
    #linguaai-praatcafe,
    #linguaai-knm-wrap,
    #linguaai-contact-page,
    #linguaai-blog-page,
    .linguaai-mentor-container,
    .linguaai-main-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid/flex children are allowed to shrink instead of forcing overflow. */
    :is(#linguaai-app,#linguaai-vocab-v2,#linguaai-grammar,#linguaai-stories,#linguaai-podcasts,#linguaai-dialogues,#linguaai-chat,#linguaai-profile,#linguaai-sentence-practice,#linguaai-vocab,#linguaai-wordlist,#linguaai-praatcafe,#linguaai-knm-wrap,#linguaai-contact-page,#linguaai-blog-page,.linguaai-mentor-container,.linguaai-main-container)
    :is(.grid,.row,[class*="grid"],[class*="row"],[class*="cards"],[class*="list"],[class*="content"],[class*="panel"]) > * {
        min-width: 0 !important;
        max-width: 100%;
    }

    /* Media can never stretch cards wider than their parent. */
    :is(#linguaai-app,#linguaai-vocab-v2,#linguaai-grammar,#linguaai-stories,#linguaai-podcasts,#linguaai-dialogues,#linguaai-chat,#linguaai-profile,#linguaai-sentence-practice,#linguaai-vocab,#linguaai-wordlist,#linguaai-praatcafe,#linguaai-knm-wrap,#linguaai-contact-page,#linguaai-blog-page,.linguaai-mentor-container,.linguaai-main-container)
    :is(img,video,iframe,canvas,svg) {
        max-width: 100% !important;
    }

    :is(#linguaai-podcasts,#linguaai-praatcafe) iframe,
    :is(#linguaai-podcasts,#linguaai-praatcafe) video {
        width: 100% !important;
    }

    /* Forms: prevent fixed-width controls and long placeholders from escaping. */
    :is(#linguaai-profile,#linguaai-contact-page,.linguaai-main-container,#linguaai-chat,#linguaai-sentence-practice)
    :is(input,select,textarea) {
        width: 100%;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Long localized badges/chips must wrap safely. */
    :is(.badge,[class*="badge"],[class*="chip"],[class*="pill"],[class*="tag"]) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 860px) {
    /* Bottom nav is one authoritative size including iOS safe area. */
    body:has([id^="linguaai-"]) {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
    .linguaai-mobile-bottom-bar {
        height: calc(64px + env(safe-area-inset-bottom)) !important;
        min-height: calc(64px + env(safe-area-inset-bottom)) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* Grouped More sheet: hierarchy first, icons second. */
    .bottom-sheet-groups {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .bottom-sheet-group {
        min-width: 0 !important;
    }
    .bottom-sheet-group-title {
        margin: 0 2px 8px !important;
        font-size: .74rem !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        letter-spacing: .045em !important;
        text-transform: uppercase !important;
        color: #64748b !important;
    }
    .bottom-sheet-logout-wide {
        width: 100% !important;
        min-height: 52px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        text-align: start !important;
    }
    .bottom-sheet-logout-wide .bottom-sheet-icon {
        flex: 0 0 34px !important;
    }
    .bottom-sheet-logout-wide .bottom-sheet-label {
        text-align: start !important;
        font-size: .82rem !important;
    }

    /* Common card rhythm across learning modules. */
    :is(.topic-card,.dialogue-card,.grammar-card,.story-card,.cat-card,.sentence-card,
        .mentor-stat-card,.mentor-report-card,.mentor-hero-card,
        .knm-topic-card,.knm-card,.vocab-card,[class*="lesson-card"]) {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    /* Flex headers/actions wrap instead of pushing buttons out of cards. */
    :is(.dialogue-header-row,.vocab-hero-header,.mentor-chat-header,.sp-section-header,
        .knm-section-header,[class*="card-header"],[class*="section-header"],[class*="toolbar"]) {
        max-width: 100% !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }

    /* Generic action groups become safe wrapping rows. */
    :is(.card-actions,.dialogue-actions,.story-actions,.grammar-actions,.vocab-actions,
        .mentor-actions,.knm-actions,[class*="button-row"],[class*="actions-row"]) {
        display: flex;
        flex-wrap: wrap !important;
        gap: 8px !important;
        max-width: 100% !important;
    }

    /* Dialogues: bubbles and speaker rows must stay readable on narrow screens. */
    #linguaai-dialogues :is(.dialogue-bubble,.speech-bubble,.message-bubble,[class*="bubble"]) {
        max-width: min(88%, 560px) !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }
    #linguaai-dialogues :is(.dialogue-line,.dialogue-message,[class*="speaker-row"]) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Stories / grammar / vocabulary: long titles and controls do not collide. */
    :is(#linguaai-stories,#linguaai-grammar,#linguaai-vocab-v2,#linguaai-wordlist)
    :is(h1,h2,h3,h4,p,a,button,span) {
        overflow-wrap: anywhere;
    }

    /* Mentor: two-column widgets collapse safely on phones. */
    .linguaai-mentor-container :is(.mentor-stats-grid,[class*="mentor-grid"],[class*="roadmap-grid"]) {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    .linguaai-mentor-container :is(.mentor-report-card,.mentor-hero-card) {
        padding: 16px !important;
    }

    /* KNM: legacy visual design remains, only responsive flow is hardened. */
    #linguaai-knm-wrap :is(.knm-welcome-grid,.knm-topic-grid,.knm-grid,[class*="knm-grid"]) {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    #linguaai-knm-wrap :is(.knm-main-panel,.knm-content-panel) {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Profile/contact/auth-style forms stack their label/control rows. */
    :is(#linguaai-profile,#linguaai-contact-page,.linguaai-main-container)
    :is(.form-row,.field-row,[class*="form-grid"],[class*="fields-grid"]) {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }

    /* Tables may scroll locally; they must not force the whole page horizontally. */
    :is(#linguaai-profile,#linguaai-knm-wrap,.linguaai-mentor-container,#linguaai-vocab-v2)
    :is(.table-wrap,.table-responsive,[class*="table-container"]) {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 640px) {
    /* One-column card grids where text density makes 2 columns unstable. */
    :is(#linguaai-dialogues,#linguaai-stories,#linguaai-grammar,#linguaai-wordlist)
    :is(.topic-grid,.dialogue-grid,.story-grid,.grammar-grid,[class*="cards-grid"]) {
        grid-template-columns: 1fr !important;
    }

    /* Sentence Practice: answer UI remains vertically stable with long sentences. */
    #linguaai-sentence-practice .sp-answer-choice-area {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    #linguaai-sentence-practice .sp-choice-btn {
        min-height: 56px !important;
        padding: 12px 14px !important;
        text-align: start !important;
        line-height: 1.35 !important;
    }
    #linguaai-sentence-practice :is(.sp-answer-fill-area,.sp-fill-sentence,.sp-answer-write-area) {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }
    #linguaai-sentence-practice .sp-inline-input {
        max-width: 100% !important;
    }

    /* AI chat: input owns the row; action button stays tappable without squeezing text. */
    #linguaai-chat .chat-input-area {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto !important;
    }
    #linguaai-chat .chat-send-btn {
        min-width: 64px !important;
    }

    .linguaai-mentor-container :is(.mentor-stats-grid,[class*="mentor-grid"],[class*="roadmap-grid"]),
    #linguaai-knm-wrap :is(.knm-welcome-grid,.knm-topic-grid,.knm-grid,[class*="knm-grid"]) {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 390px) {
    /* Small-phone fallback: preserve usability before visual density. */
    .bottom-sheet-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
    .bottom-sheet-item {
        min-height: 76px !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-item {
        padding-inline: 1px !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-label {
        font-size: .6rem !important;
    }
    #linguaai-chat .emma-tools {
        grid-template-columns: 1fr !important;
    }
}

/* RTL regression guard: structural direction follows the page, not hard-coded left/right. */
@media (max-width: 860px) {
    [dir="rtl"] .bottom-sheet-logout-wide,
    body:has(.linguaai-sidebar[dir="rtl"]) .bottom-sheet-logout-wide {
        text-align: right !important;
    }
    [dir="rtl"] .bottom-sheet-logout-wide .bottom-sheet-label,
    body:has(.linguaai-sidebar[dir="rtl"]) .bottom-sheet-logout-wide .bottom-sheet-label {
        text-align: right !important;
    }
}

/* ================================================================
   Responsive Gold Pass P1 Hotfix — mobile topbar must never cover
   the first module content. The topbar stays in normal document flow
   on phones/tablets; no fixed/sticky overlay is allowed <= 860px.
   ================================================================ */
@media (max-width: 860px) {
    .linguaai-topbar {
        position: relative !important;
        top: auto !important;
        inset: auto !important;
        transform: none !important;
        margin: 4px var(--lai-shell-mobile-gutter) 16px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 30 !important;
    }

    /* The first app/module surface must start after the topbar in flow. */
    .linguaai-topbar + :is(
        #linguaai-app,
        #linguaai-vocab-v2,
        #linguaai-grammar,
        #linguaai-stories,
        #linguaai-podcasts,
        #linguaai-dialogues,
        #linguaai-chat,
        #linguaai-profile,
        #linguaai-sentence-practice,
        #linguaai-vocab,
        #linguaai-wordlist,
        .linguaai-mentor-container,
        .linguaai-main-container,
        .lai-verbs-simple
    ) {
        margin-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Dashboard and module intro cards may never slide under the shell. */
    #linguaai-app.lai-dashboard-v2 > .lai-dash-hero,
    #linguaai-vocab-v2 > .linguaai-header,
    #linguaai-grammar > .linguaai-header,
    #linguaai-stories > .linguaai-header,
    #linguaai-dialogues > .linguaai-header,
    #linguaai-podcasts > .linguaai-header,
    #linguaai-chat > .linguaai-header,
    #linguaai-profile > .linguaai-header,
    #linguaai-sentence-practice > .linguaai-header,
    #linguaai-vocab > .linguaai-header,
    #linguaai-wordlist > .linguaai-header {
        position: relative !important;
        top: auto !important;
        inset: auto !important;
        transform: none !important;
    }
}


/* ================================================================
   2.4.45.63 — definitive mobile topbar contract
   No authenticated mobile page may render the app topbar as an overlay.
   ================================================================ */
@media (max-width: 860px) {
    .linguaai-topbar {
        position: static !important;
        top: auto !important;
        inset: auto !important;
        transform: none !important;
        float: none !important;
        width: calc(100% - (2 * var(--lai-shell-mobile-gutter))) !important;
        max-width: none !important;
        margin: 8px var(--lai-shell-mobile-gutter) 18px !important;
        z-index: auto !important;
    }
    :is(#linguaai-app,#linguaai-vocab-v2,#linguaai-grammar,#linguaai-stories,#linguaai-podcasts,#linguaai-dialogues,#linguaai-chat,#linguaai-profile,#linguaai-sentence-practice,#linguaai-vocab,#linguaai-wordlist,.linguaai-mentor-container,.linguaai-main-container) {
        margin-top: 0 !important;
        clear: both !important;
    }
}

/* 2.4.45.64 — runtime cleanup: internal build badges are never user-facing. */
.lai-ui-build-badge { display: none !important; }


/* ================================================================
   Responsive Gold Pass Phase 4 — v2.4.45.81
   One mobile/tablet contract for 320 / 360 / 390 / 430 / tablet.
   Scope: global shell, bottom navigation, More sheet, dashboard,
   Sentence Practice, Grammar, Emma Chat, Vocabulary, Stories,
   Dialogues and KNM. Behaviour/content is intentionally untouched.
   ================================================================ */

/* Tablet bridge: prevent the desktop sidebar rail from squeezing content
   between common iPad portrait/landscape sizes. */
@media (min-width: 861px) and (max-width: 1024px) {
    :root {
        --lai-shell-sidebar-width: 204px;
        --lai-shell-gutter: 14px;
    }

    .linguaai-sidebar {
        width: var(--lai-shell-sidebar-width) !important;
        padding-inline: 10px !important;
    }

    .linguaai-sidebar .sidebar-item {
        padding-inline: 10px !important;
        gap: 8px !important;
    }

    #linguaai-app,
    #linguaai-vocab-v2,
    #linguaai-grammar,
    #linguaai-stories,
    #linguaai-podcasts,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-profile,
    #linguaai-sentence-practice,
    #linguaai-vocab,
    #linguaai-wordlist,
    #linguaai-praatcafe,
    #linguaai-knm-wrap,
    #linguaai-contact-page,
    #linguaai-blog-page,
    .linguaai-mentor-container,
    .linguaai-main-container,
    .linguaai-topbar {
        min-width: 0 !important;
        margin-inline-start: calc(var(--lai-shell-sidebar-width) + var(--lai-shell-gutter)) !important;
        margin-inline-end: var(--lai-shell-gutter) !important;
    }

    #linguaai-chat .chat-workspace-layout,
    #linguaai-vocab-v2 .vocab-widgets-grid,
    #linguaai-app :is(.lai-dash-grid,.dashboard-grid,[class*="dashboard-grid"]) {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

@media (max-width: 860px) {
    :root {
        --lai-shell-mobile-gutter: clamp(10px, 3vw, 16px);
        --lai-shell-bottom-nav-height: 68px;
    }

    html, body {
        max-width: 100%;
        overflow-x: clip !important;
    }

    body:has(.linguaai-mobile-bottom-bar) {
        padding-bottom: calc(var(--lai-shell-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
    }

    /* Authoritative mobile page rail. */
    #linguaai-app,
    #linguaai-vocab-v2,
    #linguaai-grammar,
    #linguaai-stories,
    #linguaai-podcasts,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-profile,
    #linguaai-sentence-practice,
    #linguaai-vocab,
    #linguaai-wordlist,
    #linguaai-praatcafe,
    #linguaai-knm-wrap,
    #linguaai-contact-page,
    #linguaai-blog-page,
    .linguaai-mentor-container,
    .linguaai-main-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        padding-inline: var(--lai-shell-mobile-gutter) !important;
        padding-bottom: 20px !important;
        overflow: visible !important;
    }

    /* Topbar must remain in normal flow and readable with long localization. */
    .linguaai-topbar {
        position: static !important;
        width: calc(100% - (2 * var(--lai-shell-mobile-gutter))) !important;
        min-width: 0 !important;
        margin: 8px var(--lai-shell-mobile-gutter) 14px !important;
        padding: 7px 9px !important;
        grid-template-columns: minmax(0,1fr) auto !important;
        column-gap: 6px !important;
    }
    .linguaai-topbar .topbar-left,
    .linguaai-topbar .topbar-page-title { min-width: 0 !important; }
    .linguaai-topbar .topbar-page-title {
        font-size: clamp(.9rem, 3.8vw, 1.05rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .linguaai-topbar .topbar-right { gap: 4px !important; }
    .linguaai-topbar .topbar-badge { min-width: 38px; justify-content: center; }

    /* Fixed bottom navigation: five equal safe hit areas, never overlaps content. */
    .linguaai-mobile-bottom-bar {
        position: fixed !important;
        inset-inline: 0 !important;
        bottom: 0 !important;
        z-index: 100000 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0,1fr)) !important;
        width: 100% !important;
        min-height: calc(var(--lai-shell-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
        height: auto !important;
        padding: 4px max(3px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(3px, env(safe-area-inset-left)) !important;
        background: rgba(255,255,255,.97) !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -8px 28px rgba(15,23,42,.08) !important;
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 4px 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        border-radius: 11px !important;
        overflow: hidden !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-icon {
        flex: 0 0 auto !important;
        font-size: clamp(1.12rem, 5vw, 1.35rem) !important;
        line-height: 1 !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-label {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        font-size: clamp(.62rem, 2.7vw, .72rem) !important;
        font-weight: 700 !important;
        line-height: 1.08 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
    }

    /* More sheet: content owns its scrolling; footer/nav never hides last item. */
    .linguaai-bottom-sheet { z-index: 100100 !important; }
    .bottom-sheet-content {
        width: 100% !important;
        max-width: 620px !important;
        max-height: calc(92dvh - env(safe-area-inset-top)) !important;
        padding: 10px var(--lai-shell-mobile-gutter) calc(18px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .bottom-sheet-grid {
        display: grid !important;
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 8px !important;
    }
    .bottom-sheet-item {
        min-width: 0 !important;
        min-height: 76px !important;
        padding: 8px 6px !important;
        overflow: hidden !important;
    }
    .bottom-sheet-label {
        max-width: 100% !important;
        font-size: .76rem !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Shared localized text safety. */
    :is(#linguaai-app,#linguaai-vocab-v2,#linguaai-grammar,#linguaai-stories,#linguaai-podcasts,#linguaai-dialogues,#linguaai-chat,#linguaai-profile,#linguaai-sentence-practice,#linguaai-vocab,#linguaai-wordlist,#linguaai-praatcafe,#linguaai-knm-wrap,#linguaai-contact-page,#linguaai-blog-page,.linguaai-mentor-container,.linguaai-main-container)
    :is(h1,h2,h3,h4,h5,p,li,a,button,label,strong,small,span) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Dashboard: cards should breathe, not retain desktop two-column minima. */
    #linguaai-app :is(.lai-dash-grid,.dashboard-grid,[class*="dashboard-grid"],.quick-actions-grid,[class*="quick-grid"]) {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    #linguaai-app :is(.lai-dash-hero,.dashboard-card,[class*="dash-card"],[class*="hero-card"]) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Grammar: prevent 4 tabs from becoming unreadably narrow. */
    #linguaai-grammar .grammar-level-selector {
        grid-template-columns: repeat(4,minmax(0,1fr)) !important;
        gap: 6px !important;
    }
    #linguaai-grammar .level-tab-btn {
        min-width: 0 !important;
        padding: 10px 6px !important;
        font-size: .82rem !important;
        white-space: normal !important;
    }
    #linguaai-grammar .topic-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    #linguaai-grammar :is(.grammar-theory-card,.grammar-box,.grammar-completion-card,.topic-card) {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    #linguaai-grammar :is(.grammar-explanation-text,.ai-explanation,.grammar-feedback) {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    /* Sentence Practice: all answer modes and feedback remain above bottom nav. */
    #linguaai-sentence-practice .sp-practice-box {
        width: 100% !important;
        max-width: 760px !important;
        margin: 8px auto 16px !important;
        padding: clamp(16px,4vw,24px) !important;
        border-radius: 22px !important;
    }
    #linguaai-sentence-practice :is(.sp-question-card,.sp-answer-area,.sp-words-basket,.sp-answer-choice-area,.sp-feedback,.sp-explanation-card) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #linguaai-sentence-practice .sp-word-chip {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    #linguaai-sentence-practice .sp-footer-buttons {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding-bottom: 2px !important;
    }
    #linguaai-sentence-practice .sp-footer-buttons > * {
        min-width: 0 !important;
    }

    /* Emma chat: one column on mobile; avatar never steals conversation width. */
    #linguaai-chat .chat-workspace-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    #linguaai-chat .chat-workspace-left,
    #linguaai-chat .chat-workspace-right,
    #linguaai-chat .chat-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    #linguaai-chat .emma-stage { min-height: 190px !important; }
    #linguaai-chat .chat-bubble {
        max-width: 88% !important;
        overflow-wrap: anywhere !important;
    }
    #linguaai-chat .chat-input-area {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Vocabulary: avoid 140px card minima breaking 320px screens. */
    #linguaai-vocab-v2 .category-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
    #linguaai-vocab-v2 :is(.dashboard-card,.cat-card,.flashcard-wrapper,.vocab-card) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Stories + Dialogues: one stable rail; action rows may wrap. */
    :is(#linguaai-stories,#linguaai-dialogues) :is(.story-grid,.dialogue-grid,.topic-grid,[class*="cards-grid"]) {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    #linguaai-dialogues .study-header-bar,
    #linguaai-stories :is(.story-actions,[class*="actions"]) {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    /* KNM: preserve approved design, only make layout fluid. */
    #linguaai-knm-wrap :is(.knm-welcome-grid,.knm-topic-grid,.knm-grid,[class*="knm-grid"]) {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    #linguaai-knm-wrap :is(.knm-main-panel,.knm-content-panel,.knm-welcome-card,.knm-card) {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 640px) {
    #linguaai-app :is(.lai-dash-grid,.dashboard-grid,[class*="dashboard-grid"],.quick-actions-grid,[class*="quick-grid"]),
    #linguaai-grammar .topic-grid,
    :is(#linguaai-stories,#linguaai-dialogues) :is(.story-grid,.dialogue-grid,.topic-grid,[class*="cards-grid"]),
    #linguaai-knm-wrap :is(.knm-welcome-grid,.knm-topic-grid,.knm-grid,[class*="knm-grid"]) {
        grid-template-columns: 1fr !important;
    }

    #linguaai-sentence-practice .sp-footer-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    #linguaai-sentence-practice .sp-footer-buttons > :only-child,
    #linguaai-sentence-practice .sp-footer-buttons > .sp-next-btn:last-child {
        grid-column: auto !important;
    }

    #linguaai-chat .emma-mode-grid,
    #linguaai-chat .emma-tools {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 430px) {
    :root { --lai-shell-mobile-gutter: 10px; }

    .linguaai-topbar .topbar-badge.lang-badge,
    .linguaai-topbar .topbar-badge.streak-badge { display: none !important; }

    #linguaai-grammar .grammar-level-selector {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    #linguaai-sentence-practice .sp-practice-box {
        padding: 15px 12px !important;
        border-radius: 18px !important;
    }
    #linguaai-sentence-practice .sp-progress-bar-container { gap: 8px !important; }
    #linguaai-sentence-practice .sp-progress-bar-track { min-width: 0 !important; }
    #linguaai-sentence-practice .sp-footer-buttons {
        grid-template-columns: 1fr !important;
    }
    #linguaai-sentence-practice :is(.sp-report-btn,.sp-check-btn,.sp-next-btn) {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
    }

    .bottom-sheet-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 360px) {
    .linguaai-mobile-bottom-bar .mobile-bottom-label { font-size: .59rem !important; }
    .linguaai-mobile-bottom-bar .mobile-bottom-icon { font-size: 1.08rem !important; }
    .linguaai-mobile-bottom-bar .mobile-bottom-item { padding-inline: 1px !important; }

    #linguaai-vocab-v2 .category-grid { grid-template-columns: 1fr !important; }
    #linguaai-chat .chat-bubble { max-width: 94% !important; }
}

@media (max-width: 320px) {
    :root { --lai-shell-mobile-gutter: 8px; }
    .linguaai-topbar .topbar-hamburger {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
    .linguaai-topbar .topbar-avatar { width: 30px !important; height: 30px !important; }
    .linguaai-mobile-bottom-bar .mobile-bottom-label { font-size: .56rem !important; }
    .bottom-sheet-content { padding-inline: 10px !important; }
    .bottom-sheet-item { min-height: 70px !important; }
}

/* RTL: keep the responsive layout logical rather than hard-coded left/right. */
@media (max-width: 860px) {
    [dir="rtl"] #linguaai-chat .chat-bubble,
    body:has(.linguaai-sidebar[dir="rtl"]) #linguaai-chat .chat-bubble {
        text-align: right;
    }
}


/* ================================================================
   Dashboard Native-like Mobile Polish — v2.4.45.82
   Runtime feedback pass: restore professional page rails, compact the
   hero, align section headings, and reclaim vertical space from bottom nav.
   ================================================================ */
@media (max-width: 860px) {
    :root { --lai-shell-bottom-nav-height: 62px; }

    .linguaai-mobile-bottom-bar {
        min-height: calc(62px + env(safe-area-inset-bottom)) !important;
        padding-top: 2px !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-item {
        min-height: 52px !important;
        padding-block: 2px !important;
        gap: 1px !important;
    }

    #linguaai-app.lai-dashboard-v2 {
        padding-inline: clamp(14px, 4vw, 18px) !important;
        padding-bottom: 14px !important;
    }
    #linguaai-app.lai-dashboard-v2 > .lai-dash-hero {
        margin-inline: 0 !important;
        margin-bottom: 14px !important;
        padding: 18px 17px !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 24px rgba(79,70,229,.13) !important;
    }
    #linguaai-app.lai-dashboard-v2 .lai-dash-section-head {
        margin-inline: 2px !important;
    }
    #linguaai-app.lai-dashboard-v2 :is(.lai-dash-metrics,.lai-dash-next-action,.lai-dash-module-grid) {
        width: 100% !important;
        margin-inline: 0 !important;
    }
}

@media (max-width: 380px) {
    #linguaai-app.lai-dashboard-v2 { padding-inline: 12px !important; }
    #linguaai-app.lai-dashboard-v2 > .lai-dash-hero { padding: 16px 14px !important; }
    #linguaai-app.lai-dashboard-v2 .lai-dash-metrics { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}


/* ================================================================
   Grammar Mobile Table Readability Hotfix — v2.4.45.87
   Runtime feedback: focused lesson entry, full-width topic heading,
   modern lossless tables, compact examples and cleaner mobile rhythm.
   ================================================================ */
#linguaai-grammar > .linguaai-header .linguaai-header-content {
    width: 100%;
    min-width: 0;
}

#linguaai-grammar .theory-card-header {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "back title toggle";
    align-items: center !important;
    gap: 12px !important;
}
#linguaai-grammar .theory-card-header > .toggle-theory-btn:first-child { grid-area: back; margin-right: 0 !important; }
#linguaai-grammar #theory-title { grid-area: title; min-width: 0; }
#linguaai-grammar #toggle-theory-btn { grid-area: toggle; }
#linguaai-grammar .theory-title-main,
#linguaai-grammar .theory-title-parenthetical { display: inline; }
#linguaai-grammar .theory-title-parenthetical {
    margin-inline-start: .38em;
    color: #64748b;
    font-size: .76em;
    font-weight: 700;
}

#linguaai-grammar .grammar-start-practice-wrap {
    margin-top: 26px;
    text-align: center;
}
#linguaai-grammar .grammar-start-practice-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    padding: 12px 30px;
    font-size: 1.05rem;
    box-shadow: 0 4px 15px rgba(16,185,129,.22);
}

#linguaai-grammar .theory-card-body .grammar-modern-table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(15,23,42,.045);
}
#linguaai-grammar .theory-card-body .grammar-modern-table th {
    background: #f8fafc;
    color: #334155;
    border-bottom: 1px solid #dbe4ef;
}
#linguaai-grammar .theory-card-body .grammar-modern-table tr:last-child td { border-bottom: 0; }

@media (max-width: 860px) {
    #linguaai-grammar {
        padding-inline: clamp(12px,3.8vw,18px) !important;
    }
    #linguaai-grammar > .linguaai-header {
        padding: 14px 16px !important;
        margin-bottom: 14px !important;
    }
    #linguaai-grammar > .linguaai-header .linguaai-header-badge { display: none !important; }

    #linguaai-grammar .grammar-theory-card {
        padding: 17px 16px 20px !important;
        border-radius: 18px !important;
        margin-bottom: 22px !important;
    }
    #linguaai-grammar .theory-card-header {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "title title"
            "back toggle" !important;
        gap: 10px 8px !important;
        padding-bottom: 13px !important;
        margin-bottom: 16px !important;
    }
    #linguaai-grammar #theory-title {
        width: 100% !important;
        font-size: clamp(1.18rem,5vw,1.48rem) !important;
        line-height: 1.22 !important;
        letter-spacing: -.018em;
    }
    #linguaai-grammar .theory-title-parenthetical {
        font-size: .72em !important;
        color: #64748b !important;
        font-weight: 650 !important;
        white-space: nowrap;
    }
    #linguaai-grammar .theory-card-header .toggle-theory-btn {
        min-height: 40px !important;
        padding: 8px 11px !important;
        font-size: .82rem !important;
        line-height: 1.15 !important;
    }

    #linguaai-grammar .theory-card-body {
        font-size: 1rem !important;
        line-height: 1.58 !important;
    }
    #linguaai-grammar .theory-card-body h3 {
        margin: 22px 0 10px !important;
        font-size: 1.16rem !important;
        line-height: 1.3 !important;
    }
    #linguaai-grammar .theory-card-body p { margin-bottom: 13px !important; }
    #linguaai-grammar .theory-card-body ul,
    #linguaai-grammar .theory-card-body ol {
        margin: 8px 0 16px 17px !important;
        padding-left: 0 !important;
    }
    #linguaai-grammar .theory-card-body li {
        margin-bottom: 7px !important;
        padding-left: 1px !important;
    }
    #linguaai-grammar .grammar-example-list {
        margin-left: 13px !important;
    }
    #linguaai-grammar .grammar-example-list li {
        line-height: 1.5 !important;
    }
    #linguaai-grammar .grammar-example-list small {
        display: inline;
        color: #64748b;
        font-size: .88em;
        line-height: 1.45;
    }

    /* Grammar mobile tables — v2.4.45.87
       Preserve the real table relationship on phones. Do not squeeze or split
       grammatical words; allow deliberate horizontal scrolling when a table
       genuinely needs more width. */
    #linguaai-grammar .theory-card-body .grammar-table-shell {
        width: 100%;
        max-width: 100%;
        margin: 14px 0 20px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(15,23,42,.045);
        scrollbar-width: thin;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table,
    #linguaai-grammar .theory-card-body .grammar-modern-table tbody {
        display: table-row-group !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table {
        display: table !important;
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        table-layout: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        background: #fff !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table .grammar-table-header-row {
        display: table-row !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table .grammar-table-data-row {
        display: table-row !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table th,
    #linguaai-grammar .theory-card-body .grammar-modern-table td {
        display: table-cell !important;
        width: auto !important;
        max-width: none !important;
        min-width: 112px;
        padding: 10px 11px !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f6 !important;
        border-right: 1px solid #edf1f6 !important;
        vertical-align: top !important;
        text-align: left !important;
        font-size: .86rem !important;
        line-height: 1.38 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table th {
        min-width: 96px;
        background: #f8fafc !important;
        color: #334155 !important;
        font-size: .78rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table th:first-child,
    #linguaai-grammar .theory-card-body .grammar-modern-table td:first-child {
        min-width: 86px;
        width: 1%;
        white-space: nowrap !important;
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fbfcff !important;
        font-weight: 800 !important;
        color: #172033 !important;
        box-shadow: 1px 0 0 #e2e8f0;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table th:first-child {
        z-index: 3;
        background: #f1f5f9 !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table td:nth-child(n+2) {
        min-width: 128px;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table td:nth-child(n+3) {
        min-width: 155px;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table td::before {
        content: none !important;
        display: none !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table td strong {
        color: #111827;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table tr:last-child td {
        border-bottom: 0 !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table th:last-child,
    #linguaai-grammar .theory-card-body .grammar-modern-table td:last-child {
        border-right: 0 !important;
    }

}

@media (max-width: 380px) {
    #linguaai-grammar .grammar-theory-card { padding-inline: 13px !important; }
    #linguaai-grammar #theory-title { font-size: 1.16rem !important; }
    #linguaai-grammar .theory-card-body .grammar-modern-table th,
    #linguaai-grammar .theory-card-body .grammar-modern-table td {
        padding: 9px 10px !important;
        font-size: .82rem !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table th {
        font-size: .74rem !important;
    }
    #linguaai-grammar .theory-card-body .grammar-modern-table th:first-child,
    #linguaai-grammar .theory-card-body .grammar-modern-table td:first-child {
        min-width: 80px;
    }
}


/* ================================================================
   Sentence Practice native-like focus mode — v2.4.45.88
   During an active exercise, app chrome is intentionally reduced on
   phones/tablets so the learner's attention stays on the current task.
   ================================================================ */
@media (max-width: 860px) {
    body.sp-focus-mode .linguaai-topbar,
    body.sp-focus-mode .linguaai-mobile-bottom-bar {
        display: none !important;
    }
    body.sp-focus-mode {
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
    body.sp-focus-mode #linguaai-sentence-practice {
        padding-top: max(6px, env(safe-area-inset-top)) !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
    body.sp-focus-mode #linguaai-sentence-practice .sp-duo-topbar,
    body.sp-focus-mode #linguaai-sentence-practice .sp-duo-mascot-card,
    body.sp-focus-mode #linguaai-sentence-practice #sp-emma-review-card {
        display: none !important;
    }
    #linguaai-sentence-practice .sp-practice-box {
        scroll-margin-top: max(6px, env(safe-area-inset-top));
    }
    #linguaai-sentence-practice .sp-question-card {
        padding-inline: clamp(12px, 4vw, 20px) !important;
    }
    #linguaai-sentence-practice .sp-question-prompt {
        font-size: clamp(1.22rem, 5vw, 1.55rem) !important;
    }
    #linguaai-sentence-practice .sp-footer-buttons {
        justify-content: stretch !important;
    }
    #linguaai-sentence-practice .sp-primary-actions {
        width:100%; margin-left:0;
    }
    #linguaai-sentence-practice .sp-primary-actions .sp-check-btn,
    #linguaai-sentence-practice .sp-primary-actions .sp-next-btn {
        flex:1 1 100%; width:100%; min-height:52px;
    }
    #linguaai-sentence-practice .sp-report-row {
        justify-content:center; margin-top:10px;
    }
    #linguaai-sentence-practice .sp-hint-help {
        margin-bottom:8px !important;
    }
}


/* ================================================================
   Navigation stabilization pass — 2.4.45.91.6.27.1
   One icon language (outline SVG), predictable geometry across pages.
   ================================================================ */
.linguaai-sidebar .item-icon,
.linguaai-mobile-bottom-bar .mobile-bottom-icon,
.linguaai-bottom-sheet .bottom-sheet-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    color: currentColor !important;
    line-height: 1 !important;
}
.linguaai-sidebar .item-icon { width: 22px !important; height: 22px !important; }
.linguaai-mobile-bottom-bar .mobile-bottom-icon,
.linguaai-bottom-sheet .bottom-sheet-icon { width: 21px !important; height: 21px !important; }
.lai-nav-svg { width: 100% !important; height: 100% !important; display: block !important; overflow: visible; }
.linguaai-sidebar .sidebar-item {
    min-height: 42px !important;
    gap: 12px !important;
    align-items: center !important;
}
.linguaai-sidebar .sidebar-item .item-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
@media (min-width: 861px) {
    .linguaai-sidebar { width: var(--lai-shell-sidebar-width, 220px) !important; }
}


/* ================================================================
   Bugfix v3 — one-row mobile navigation + safe learning controls
   ================================================================ */
@media (max-width: 860px) {
    :root { --lai-shell-bottom-nav-height: 72px; }
    .linguaai-mobile-bottom-bar {
        display:grid !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        grid-auto-flow:column !important;
        grid-auto-columns:minmax(0,1fr) !important;
        flex-wrap:nowrap !important;
        overflow:visible !important;
        min-height:72px !important;
        max-height:calc(72px + env(safe-area-inset-bottom,0px)) !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-item {
        width:100% !important; min-width:0 !important; max-width:none !important;
        padding:5px 2px !important; margin:0 !important;
        display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-label {
        font-size:.62rem !important; line-height:1.08 !important; white-space:normal !important; text-align:center !important;
        overflow:visible !important; text-overflow:clip !important;
    }
    .linguaai-mobile-bottom-bar .mobile-bottom-icon { width:22px !important; height:22px !important; }
    body:has(.linguaai-mobile-bottom-bar) {
        padding-bottom:calc(72px + max(8px,env(safe-area-inset-bottom))) !important;
    }
}


/* ==========================================================================
   v31 responsive / installed-PWA guard rails
   Root cause: modules evolved with independent inline/CSS layout rules. On narrow
   viewports a child with an intrinsic/fixed width can enlarge the page, while
   sticky controls may sit behind the persistent bottom navigation.
   ========================================================================== */
@media (max-width: 860px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .linguaai-main-container,
    #linguaai-dashboard,
    #linguaai-vocab-v2,
    #linguaai-wordlist,
    #linguaai-sentence-practice,
    #linguaai-grammar,
    #linguaai-dialogues,
    #linguaai-chat,
    #linguaai-mentor,
    #linguaai-stories,
    #linguaai-knm,
    #linguaai-profile {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .linguaai-main-container *,
    #linguaai-dashboard *,
    #linguaai-vocab-v2 *,
    #linguaai-wordlist *,
    #linguaai-sentence-practice *,
    #linguaai-grammar *,
    #linguaai-dialogues *,
    #linguaai-chat *,
    #linguaai-mentor *,
    #linguaai-stories *,
    #linguaai-knm *,
    #linguaai-profile * {
        min-width: 0;
        box-sizing: border-box;
    }

    img, video, canvas, svg {
        max-width: 100%;
    }

    input, textarea, select, button {
        max-width: 100%;
    }

    .linguaai-mobile-bottom-bar {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    /* Chat input must stay above, not behind, the persistent app navigation. */
    #linguaai-chat .chat-input-area {
        bottom: calc(var(--lai-shell-bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Give focused learning surfaces a reliable final scroll area in browser/PWA. */
    #linguaai-vocab-v2,
    #linguaai-sentence-practice,
    #linguaai-grammar,
    #linguaai-dialogues,
    #linguaai-chat {
        padding-bottom: calc(var(--lai-shell-bottom-nav-height) + max(22px, env(safe-area-inset-bottom, 0px))) !important;
    }
}

@media (max-width: 430px) {
    .linguaai-header h1,
    #linguaai-grammar .theory-title-main,
    #linguaai-sentence-practice h1,
    #linguaai-vocab-v2 h1 {
        overflow-wrap: anywhere;
    }
}