/*
|--------------------------------------------------------------------------
| V262 mobile safety fixes
|--------------------------------------------------------------------------
| Keeps language menu inside viewport and prevents AI chat / back-to-top overlap.
*/

@media (max-width: 820px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /*
     * Language dropdown / locale menu.
     * Broad selectors because the layout has changed through several versions.
     */
    .language-dropdown,
    .language-menu,
    .lang-dropdown,
    .lang-menu,
    .locale-dropdown,
    .locale-menu,
    .language-switcher .dropdown-menu,
    .lang-switcher .dropdown-menu,
    .locale-switcher .dropdown-menu,
    [data-language-menu],
    [data-lang-menu],
    [data-locale-menu],
    [aria-label*="language" i] + .dropdown-menu,
    [aria-label*="idioma" i] + .dropdown-menu,
    [aria-label*="language" i] ~ .dropdown-menu,
    [aria-label*="idioma" i] ~ .dropdown-menu {
        position: fixed !important;
        top: 134px !important;
        right: 10px !important;
        left: auto !important;
        width: min(210px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        max-height: min(360px, calc(100vh - 160px)) !important;
        overflow-y: auto !important;
        transform: none !important;
        translate: none !important;
        z-index: 999999 !important;
        border-radius: 22px !important;
        box-shadow: 0 18px 60px rgba(2, 6, 23, .22) !important;
    }

    .language-dropdown a,
    .language-menu a,
    .lang-dropdown a,
    .lang-menu a,
    .locale-dropdown a,
    .locale-menu a,
    .language-switcher .dropdown-menu a,
    .lang-switcher .dropdown-menu a,
    .locale-switcher .dropdown-menu a,
    [data-language-menu] a,
    [data-lang-menu] a,
    [data-locale-menu] a {
        white-space: nowrap !important;
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        padding: 10px 16px !important;
    }

    /*
     * Back-to-top button. Keep it above the AI chat.
     */
    .back-to-top,
    .backtop,
    .back-top,
    .scroll-top,
    .scroll-to-top,
    .to-top,
    #backToTop,
    #back-to-top,
    [data-back-to-top],
    [aria-label*="back to top" i],
    [aria-label*="topo" i] {
        position: fixed !important;
        right: 14px !important;
        bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 99990 !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        border-radius: 999px !important;
    }

    /*
     * Abner AI / chat widget. Keep it lower and compact on mobile.
     */
    .abner-ai-widget,
    .abner-ai-chat,
    .ai-chat-widget,
    .ai-assistant-widget,
    .chat-widget,
    .chatbot-widget,
    .maya-chat,
    #abnerAiWidget,
    #abner-ai-widget,
    #aiChatWidget,
    #chat-widget,
    [data-ai-chat],
    [data-chat-widget] {
        position: fixed !important;
        right: 12px !important;
        bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 99980 !important;
        max-width: min(250px, calc(100vw - 24px)) !important;
    }

    /*
     * If the AI widget is a large pill, keep it visible but smaller.
     */
    .abner-ai-widget,
    .abner-ai-chat,
    .ai-chat-widget,
    .ai-assistant-widget,
    .chat-widget,
    .chatbot-widget {
        transform-origin: bottom right !important;
    }
}

@media (max-width: 520px) {
    .language-dropdown,
    .language-menu,
    .lang-dropdown,
    .lang-menu,
    .locale-dropdown,
    .locale-menu,
    .language-switcher .dropdown-menu,
    .lang-switcher .dropdown-menu,
    .locale-switcher .dropdown-menu,
    [data-language-menu],
    [data-lang-menu],
    [data-locale-menu] {
        top: 126px !important;
        right: 8px !important;
        width: min(190px, calc(100vw - 16px)) !important;
    }

    .back-to-top,
    .backtop,
    .back-top,
    .scroll-top,
    .scroll-to-top,
    .to-top,
    #backToTop,
    #back-to-top,
    [data-back-to-top],
    [aria-label*="back to top" i],
    [aria-label*="topo" i] {
        right: 12px !important;
        bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }

    .abner-ai-widget,
    .abner-ai-chat,
    .ai-chat-widget,
    .ai-assistant-widget,
    .chat-widget,
    .chatbot-widget,
    .maya-chat,
    #abnerAiWidget,
    #abner-ai-widget,
    #aiChatWidget,
    #chat-widget,
    [data-ai-chat],
    [data-chat-widget] {
        right: 10px !important;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: min(224px, calc(100vw - 20px)) !important;
    }
}