/* kb_chat_mobile.css - DESIGN HEADER ÉPURÉ ET SIDEBAR (FIX FINAL V2) */

@media (max-width: 1024px) {
    /* 1. HEADER NOIR PUR (PHOTO 1) */
    body .header {
        background-color: #000000 !important;
        height: 64px !important;
        padding: 0 15px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: none !important;
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        z-index: 1000 !important;
    }

    /* Masquage des menus Desktop */
    body .header-nav .nav-item, 
    body .header-nav a:not(.header-logo-mobile) {
        display: none !important;
    }

    /* 👤 Avatar - VISIBILITÉ RÉTABLIE (DESIGN ROBUSTE) */
    body .user-menu-container {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        z-index: 1001 !important;
        position: relative !important;
        overflow: visible !important;
    }

    body .user-avatar-btn {
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background: #202124 !important; /* Fond de secours pour visibilité */
        border: 1px solid #3c4043 !important;
    }

    body .user-avatar {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 🍔 Hamburger - VISIBILITÉ ET CLIC GARANTIS */
    body .btn-mobile-menu {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 24px !important;
        height: 18px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 1001 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        flex-basis: 32px !important; /* Fixé pour le centrage du logo */
    }

    body .btn-mobile-menu span {
        width: 100% !important;
        height: 2px !important;
        background-color: #ffffff !important;
        display: block !important;
    }

        /* 🎯 Logo au centre - ABSOLU */
        body .header-logo-mobile {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
            text-decoration: none !important;
            visibility: visible !important;
            pointer-events: auto !important;
            z-index: 1000 !important;
        }

        /* 🛡️ FIX : Empêche le header de la liste de rester visible en conversation ou prompt */
        body .app-container.in-conversation .header,
        body .app-container.in-prompt .header {
            display: none !important;
        }

        body .header-logo-mobile .logo {
        width: 32px !important;
        height: 32px !important;
    }

    body .header-logo-mobile .logo-text {
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 1.4rem !important;
    }

    /* 2. SIDEBAR MOBILE (FIX DISPLAY NONE) */
    body .messaging-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 280px !important;
        height: 100vh !important;
        background-color: #1a1a1a !important;
        z-index: 9999 !important; /* Priorité maximale */
        display: flex !important; /* Écrase le display: none de kb_chat_messaging.css */
        visibility: visible !important;
        pointer-events: auto !important;
        flex-direction: column !important;
        padding: 24px !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    body .messaging-sidebar.open {
        left: 0 !important;
        box-shadow: 10px 0 30px rgba(0,0,0,0.5) !important;
    }

    body .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.8) !important;
        z-index: 1500 !important;
        display: none !important;
    }

    body .sidebar-overlay.active {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* 3. SUPPRESSION FOOTER (DEMANDE UTILISATEUR) */
    body .footer {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* 🛡️ FIX SETTINGS : Masquer l'option paramètres sur mobile pour les admins */
    body .admin-settings-link {
        display: none !important;
    }
}
