/* Keep the approved mobile language segments inside their shared 36px frame.
 * The 28px segments leave visible breathing room on every edge, including
 * iOS Safari where native button metrics can otherwise look clipped. */
@layer fuuvo-mobile-design {
@media (max-width: 920px) {
    html body :is(
        .fs-top-language, .ms-top-language, .fd-top-language, .wt-top-language,
        .an-top-language, .mresearch-language, .mtranslation-language, .mwriting-language
    ) {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
        width: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 3px 2px !important;
        gap: 1px !important;
        overflow: hidden !important;
    }

    html body :is(
        .fs-top-language, .ms-top-language, .fd-top-language, .wt-top-language,
        .an-top-language, .mresearch-language, .mtranslation-language, .mwriting-language
    ) > :is(a, button) {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 29px !important;
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        margin: 0 !important;
        padding: 0 5px !important;
        border: 0 !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        writing-mode: horizontal-tb !important;
        text-decoration: none !important;
        touch-action: manipulation;
    }

    html body :is(
        .fs-top-language, .ms-top-language, .fd-top-language, .wt-top-language,
        .an-top-language, .mresearch-language, .mtranslation-language, .mwriting-language
    ) > :is(a, button):focus-visible {
        outline: 2px solid currentColor !important;
        outline-offset: -2px !important;
    }

    /* The approved login header uses plain text with a 44px touch target.
     * Its frame must fit those links instead of the legacy 42px segment. */
    html body .auth-page.auth-prototype .auth-language-switch {
        box-sizing: border-box !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
    html body .auth-page.auth-prototype .auth-language-switch > a {
        box-sizing: border-box !important;
        height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
    }
}

/* The shared application topbar uses the same dropdown on phones. This layer
 * wins over the legacy mobile topbar geometry without changing the touch target
 * or the position of the surrounding header. */
@media (max-width: 920px) {
    /* The shared mobile topbar clips its contents during the initial paint.
     * Let an opened dropdown extend below the 56px header instead of hiding
     * the menu immediately below the trigger. */
    html body header[data-fuuvo-shared-topbar="1"]:has(details.ui-language-menu[open]) {
        overflow: visible !important;
    }

    html body header[data-fuuvo-shared-topbar="1"] :is(.ui-language-menu, .creation-language.ui-language-menu, .portal-language.ui-language-menu),
    html body .mobile-chat-actions .ui-language-menu {
        display: inline-block !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    html body header[data-fuuvo-shared-topbar="1"] :is(.ui-language-menu, .creation-language.ui-language-menu, .portal-language.ui-language-menu) .ui-language-menu-trigger,
    html body .mobile-chat-actions .ui-language-menu .ui-language-menu-trigger {
        display: inline-flex !important;
        width: auto !important;
        min-width: 64px !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 10px !important;
        border: 1px solid var(--mobile-line, #d8e1ee) !important;
        border-radius: 10px !important;
        background: var(--mobile-surface, #f8fafc) !important;
        color: var(--mobile-ink, #334155) !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    html body header[data-fuuvo-shared-topbar="1"] :is(.ui-language-menu, .creation-language.ui-language-menu, .portal-language.ui-language-menu) .ui-language-menu-panel,
    html body .mobile-chat-actions .ui-language-menu .ui-language-menu-panel {
        top: calc(100% + 7px) !important;
        right: 0 !important;
        width: 204px !important;
        max-width: calc(100vw - 20px) !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 8px !important;
        border-radius: 12px !important;
        overflow: visible !important;
    }

    html body header[data-fuuvo-shared-topbar="1"] :is(.ui-language-menu, .creation-language.ui-language-menu, .portal-language.ui-language-menu) .ui-language-menu-option,
    html body .mobile-chat-actions .ui-language-menu .ui-language-menu-option {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 42px !important;
        max-height: none !important;
        padding: 0 10px !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        flex: 0 0 auto !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }

    html body[data-ui-theme="dark"] header[data-fuuvo-shared-topbar="1"] .ui-language-menu .ui-language-menu-trigger,
    html body[data-theme="dark"] header[data-fuuvo-shared-topbar="1"] .ui-language-menu .ui-language-menu-trigger {
        border-color: #334155 !important;
        background: #172131 !important;
        color: #d6e2f5 !important;
    }
}
}