/* ============================================
   UI ELEMENTS POSITIONING
   ============================================ */

/* Desktop Layout */
@media (min-width: 769px) {
    /* Language Selector - Top Right */
    .lang-selector {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 100000 !important;
    }
    
    /* Theme Switcher - Right Side Middle */
    .theme-switcher {
        position: fixed !important;
        top: 50% !important;
        right: 20px !important;
        transform: translateY(-50%) !important;
        z-index: 1000 !important;
    }
    
    /* AI Chatbot - Bottom Right */
    .ai-chatbot {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 1000 !important;
    }
    
    /* Hide mobile language switcher */
    body > .language-switcher {
        display: none !important;
    }
}

/* Mobile Layout */
@media (max-width: 768px) {
    /* Language Selector - Top Center */
    .lang-selector {
        position: fixed !important;
        top: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 100000 !important;
    }
    
    /* Theme Switcher - Bottom Left */
    .theme-switcher {
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        right: auto !important;
        z-index: 1000 !important;
    }
    
    /* AI Chatbot - Bottom Right */
    .ai-chatbot {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 1000 !important;
    }
    
    /* Hide desktop language switcher in nav */
    .nav-container .language-switcher {
        display: none !important;
    }
    
    /* Hide duplicate language switchers */
    body > .language-switcher {
        display: none !important;
    }
    
    /* Adjust navbar for language selector */
    .navbar {
        top: 50px !important;
    }
}

/* Ensure proper stacking order */
.lang-selector,
.lang-dropdown {
    z-index: 100000 !important;
}

.theme-switcher,
.ai-chatbot {
    z-index: 10000 !important;
}

.navbar {
    z-index: 9999 !important;
}

/* Chat window positioning */
.chat-window {
    z-index: 10001 !important;
}

/* Video and text modals */
.video-modal,
.text-modal {
    z-index: 20000 !important;
}

/* Transition overlays */
.lang-transition,
#matrixTransition,
#smokeTransition {
    z-index: 99999 !important;
}

/* Remove all old language switchers */
.language-switcher:not(.lang-selector) {
    display: none !important;
}

/* Ensure language selector is always visible */
.lang-selector {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Navbar adjustments */
.navbar {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Mobile menu should be fullscreen */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0 !important;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: var(--dark-secondary);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-lg);
        transition: var(--transition-medium);
        z-index: 9998 !important;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-link {
        font-size: 1.25rem;
        padding: 1rem 0;
    }
}

/* Pull to refresh indicator positioning */
.pull-to-refresh {
    z-index: 99998 !important;
}

/* Ensure proper language in all states */
html[data-lang="en"] *[lang]:not([lang="en"]) { display: none !important; }
html[data-lang="ru"] *[lang]:not([lang="ru"]) { display: none !important; }
html[data-lang="es"] *[lang]:not([lang="es"]) { display: none !important; }
html[data-lang="zh"] *[lang]:not([lang="zh"]) { display: none !important; }
html[data-lang="fr"] *[lang]:not([lang="fr"]) { display: none !important; }

/* Smooth transitions for all UI elements */
.lang-selector,
.theme-switcher,
.ai-chatbot {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Prevent overlap on small screens */
@media (max-height: 600px) {
    .theme-switcher {
        bottom: 80px !important;
    }
    
    .ai-chatbot {
        bottom: 80px !important;
    }
}