/* kb_chat_view_mobile.css - DESIGN CONVERSATION RESPONSIVE (PHOTO 1-4) */

@media (max-width: 1024px) {
    /* 1. HEADER NOIR ÉPURÉ (PHOTO 1) */
    body .conversation-actions-bar {
        background-color: #000000 !important;
        height: 64px !important;
        padding: 0 2px 0 10px !important; /* Bord droit collé pour décaler les icônes */
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: none !important;
        position: relative !important;
        z-index: 1001 !important;
        box-sizing: border-box !important;
    }

    body #btn-back-mobile {
        display: flex !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        padding: 8px !important;
        cursor: pointer !important;
        width: 40px !important;
        flex-shrink: 0 !important;
    }

    body .conversation-actions-center {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 230px !important; /* Ajusté pour laisser plus de place à droite */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 1005 !important;
        pointer-events: none !important;
    }

    body .conversation-title {
        color: #ffffff !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        pointer-events: none !important;
        cursor: default !important;
    }

    body .conversation-actions-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important; /* Réduit pour rapprocher l'étoile du bord droit */
        width: auto !important;
        flex-shrink: 0 !important;
        padding-right: 0 !important;
    }

    body #btn-star-mobile {
        display: flex !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        padding: 8px !important;
        margin: 0 !important;
        cursor: pointer !important;
    }

    body #btn-star-mobile.active {
        color: #fbbc04 !important;
        fill: #fbbc04 !important;
    }

    body #btn-kebab-mobile {
        display: flex !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        padding: 8px !important;
        cursor: pointer !important;
    }

    /* Cache les éléments desktop dans le header */
    body .desktop-only {
        display: none !important;
    }

    /* 🛡️ EXCEPTION : Afficher le bouton download dans le header mobile UNIQUEMENT pendant le téléchargement */
    body #conv-btn-download:not([data-download-state="idle"]) {
        display: flex !important;
        position: relative !important;
        margin-right: 10px !important;
        z-index: 1002 !important;
    }

    /* 2. ZONE CENTRALE (MESSAGES) */
    body .messages-container {
        padding: 20px 15px 120px 15px !important;
        background-color: #ffffff !important;
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Force l'adaptation de la largeur des bulles */
    body .message {
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }

    body .message-bubble {
        max-width: 100% !important;
        width: auto !important;
        word-break: break-word !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    }

    /* Images et tableaux sans débordement */
    body .message-bubble img, 
    body .message-bubble iframe,
    body .message-bubble table {
        max-width: 100% !important;
        height: auto !important;
    }

    body .message-bubble table {
        display: block !important;
        overflow-x: auto !important;
    }

    /* 🛡️ FIX CARTES GÉOGRAPHIQUES : Empêche le débordement des cartes Leaflet */
    body .message-bubble .map-container,
    body .message-bubble .leaflet-container,
    body .message-bubble [id^="leaflet-"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 250px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        margin: 10px 0 !important;
        overflow: hidden !important;
    }

    /* Ajuste la bulle de message de l'assistant pour mobile */
    body .message.assistant .message-bubble {
        max-width: 88% !important; /* Un peu plus large pour plus de confort */
        overflow: hidden !important; /* TRÈS IMPORTANT : Coupe tout débordement */
        display: block !important; /* Évite les comportements Flex bizarres pour les enfants larges */
    }

    /* 3. FOOTER FIXE (PHOTO 1) */
    body .conversation-input-wrapper {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        border-top: 1px solid #f1f3f4 !important;
        padding: 12px 15px 30px 15px !important;
        z-index: 1002 !important;
        box-shadow: 0 -10px 20px rgba(0,0,0,0.08) !important;
    }

    /* 🛡️ FIX : Empêche la conversation de déborder sous le footer (Photo 2) */
    body .conversation-input-wrapper::after {
        content: "" !important;
        position: absolute !important;
        bottom: -100px !important;
        left: 0 !important;
        width: 100% !important;
        height: 100px !important;
        background-color: #ffffff !important;
        z-index: -1 !important;
    }

    /* Sélecteur LLM dans le footer */
    body .llm-selector-container-conv {
        padding-left: 0 !important;
        justify-content: center !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }

    body .segmented-control {
        width: 100% !important;
        max-width: 100% !important;
        background: #f1f3f4 !important;
        border-radius: 12px !important;
        padding: 4px !important;
    }

    body .segment {
        flex: 1 !important;
        text-align: center !important;
        padding: 10px 5px !important;
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
    }

    body .segment.active {
        background: #ffffff !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
        border-radius: 8px !important;
    }

    /* Conteneur de saisie */
    body .conversation-input-container {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        background: #f8fbff !important;
        border: 1px solid #e0e8f0 !important;
        border-radius: 28px !important;
        padding: 5px 5px 5px 15px !important;
        min-height: 60px !important;
    }

    body .web-toggle-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        margin-right: 8px !important;
        min-width: 45px !important;
    }

    body .toggle-label {
        font-size: 11px !important;
        text-transform: lowercase !important;
        color: #70757a !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    body .conversation-input {
        flex: 1 !important;
        border: none !important;
        background: transparent !important;
        font-size: 0.95rem !important;
        padding: 12px 0 !important;
        line-height: 1.3 !important;
        min-height: 60px !important; 
        max-height: 150px !important;
        outline: none !important;
        overflow-y: auto !important;
        resize: none !important;
    }

    /* Ajustement spécifique pour le placeholder (Photo 2) */
    body .conversation-input::placeholder {
        line-height: 1.3 !important;
        color: #9aa0a6 !important;
        white-space: normal !important;
    }

    /* 🛡️ FIX : Suppression du double effet visuel LLM (Photo 4) */
    body .tooltip-enhanced {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Bouton d'envoi noir (Photo 1) - TAILLE RÉDUITE (PHOTO 3) */
    body .btn-send-message {
        width: 30px !important;
        height: 30px !important;
        background-color: #000000 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        border: none !important;
        flex-shrink: 0 !important;
        margin-right: 2px !important; /* Petite marge pour l'équilibre */
        padding: 0 !important;
    }

    body .btn-send-message svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* 4. POPUPS (PHOTO 2 & 3) */
    body .mobile-popup-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.6) !important; /* Grisage renforcé (Photo 4) */
        z-index: 2000 !important;
        backdrop-filter: blur(2px) !important;
    }

    /* Menu Actions (Photo 3) */
    body .mobile-actions-popup {
        position: fixed !important;
        top: 70px !important;
        right: 15px !important;
        width: 220px !important;
        background-color: #1e1e1e !important; /* Sombre comme la photo */
        border-radius: 16px !important;
        padding: 8px !important;
        z-index: 99999 !important; /* Priorité maximale (au-dessus de l'overlay) */
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body .mobile-popup-item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        width: 100% !important;
        text-align: left !important;
        border-radius: 10px !important;
    }

    /* Support pour l'animation de téléchargement dans le popup mobile */
    body .mobile-action-icon-wrapper {
        position: relative !important;
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body #mobile-action-download .download-icon,
    body #mobile-action-download .progress-ring,
    body #mobile-action-download .check-icon {
        position: absolute !important;
        display: none !important;
        opacity: 0 !important;
    }

    body #mobile-action-download[data-download-state="idle"] .download-icon {
        display: block !important;
        opacity: 1 !important;
    }

    body #mobile-action-download[data-download-state="downloading"] .progress-ring {
        display: block !important;
        opacity: 1 !important;
    }

    body #mobile-action-download[data-download-state="complete"] .check-icon {
        display: block !important;
        opacity: 1 !important;
    }

    body #mobile-action-download[data-download-state="downloading"] {
        pointer-events: none !important;
    }

    body .mobile-popup-item:active {
        background-color: rgba(255,255,255,0.1) !important;
    }

    body .mobile-popup-item.delete {
        color: #ff5252 !important;
    }

    body .mobile-popup-divider {
        height: 1px !important;
        background-color: rgba(255,255,255,0.1) !important;
        margin: 4px 8px !important;
    }

    /* Sélecteur de Modèle (Photo 2) */
    body .mobile-model-popup {
        position: fixed !important;
        bottom: 100px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 280px !important;
        background-color: #1e1e1e !important;
        border-radius: 20px !important;
        padding: 12px !important;
        z-index: 2001 !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    }

    body .model-option {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 18px !important;
        color: #ffffff !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
        cursor: pointer !important;
    }

    body .model-option.selected {
        background-color: rgba(255,255,255,0.05) !important;
    }

    body .model-option .checkmark {
        color: #1a73e8 !important;
        display: none !important;
    }

    body .model-option.selected .checkmark {
        display: block !important;
    }

    /* 5. LANDING PAGE PROMPT (PHOTO 1) */
    body .prompt-landing-page {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        z-index: 100 !important;
        padding: 20px 15px 20px 15px !important;
        display: none !important; /* CACHÉ PAR DÉFAUT (Correction Root Cause) */
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
    }

    /* Affichage conditionnel basé sur l'état de l'app */
    body .app-container.in-prompt .prompt-landing-page {
        display: flex !important;
    }

    body .app-container.in-conversation .conversation-view {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 1000 !important;
        background: #ffffff !important;
        flex-direction: column !important;
    }

    body #btn-back-prompt-mobile {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        display: flex !important;
        background: transparent !important;
        border: none !important;
        color: #9aa0a6 !important; /* Gris comme sur la photo 1 */
        padding: 10px !important;
        cursor: pointer !important;
        z-index: 101 !important;
    }

    body .prompt-hero {
        margin-top: 12vh !important; /* Abaisse l'icône de ~30-40% (Correction 1) */
        margin-bottom: 0 !important;
    }

    body .prompt-icon-circle {
        width: 120px !important;
        height: 120px !important;
        background: #1a73e8 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 10px 30px rgba(26, 115, 232, 0.3) !important;
    }

    body .prompt-icon-circle svg {
        width: 50px !important;
        height: 50px !important;
    }

    body .prompt-title {
        font-size: 1.8rem !important;
        font-weight: 500 !important;
        color: #202124 !important;
        text-align: center !important;
        margin-top: 50px !important; /* Augmentation espace icône-titre (Correction 2) */
        margin-bottom: 0 !important;
        padding: 0 10px !important;
        line-height: 1.2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    body .prompt-title .highlight {
        color: #1a73e8 !important;
        font-weight: 700 !important;
        font-size: 2.2rem !important;
        margin-top: 5px !important;
    }

    /* Sélecteur LLM Landing Page */
    body .prompt-landing-page .llm-selector-container {
        width: 100% !important;
        max-width: 340px !important;
        margin-top: 8vh !important; /* Abaisse considérablement les boutons (Correction 2) */
        margin-bottom: 0 !important;
        padding-left: 0 !important;
    }

    /* Réutilisation du style segmented-control */
    body .prompt-landing-page .segmented-control {
        background: #f1f3f4 !important;
        border-radius: 12px !important;
        padding: 4px !important;
        display: flex !important;
        width: 100% !important;
    }

    body .prompt-landing-page .segment {
        flex: 1 !important;
        text-align: center !important;
        padding: 12px 2px !important;
        font-size: 0.65rem !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        color: #70757a !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: none !important;
    }

    body .prompt-landing-page .segment.active {
        background: #ffffff !important;
        color: #202124 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    }

    /* Zone de saisie Landing Page (Correction 3) */
    body .prompt-input-container {
        width: 100% !important;
        max-width: 340px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        background: #ffffff !important;
        border: 1px solid #e8eaed !important;
        border-radius: 35px !important;
        padding: 5px 8px 5px 15px !important; /* Réduit le padding vertical du parent */
        min-height: 72px !important; /* Augmenté de 64px à 72px pour 2 lignes de placeholder */
        box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
        margin-top: 30px !important; /* Réduit de 45px à 30px pour remonter la barre */
        margin-bottom: 40px !important;
    }

    body .prompt-landing-page .web-toggle-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        margin-right: 5px !important;
        min-width: 40px !important;
    }

    body .prompt-landing-page .toggle-label {
        font-size: 10px !important;
        text-transform: lowercase !important;
        font-weight: 500 !important;
        color: #70757a !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Switch toggle plus petit pour la landing */
    body .prompt-landing-page .web-toggle {
        width: 32px !important;
        height: 18px !important;
    }

    body .prompt-landing-page .toggle-slider::before {
        height: 14px !important;
        width: 14px !important;
        left: 2px !important;
        bottom: 2px !important;
    }

    body .prompt-landing-page input:checked + .toggle-slider::before {
        transform: translateX(14px) !important;
    }

    body .prompt-input {
        flex: 1 !important;
        border: none !important;
        background: transparent !important;
        font-size: 0.9rem !important;
        padding: 8px 0 8px 10px !important; /* Ajout de padding-left pour décaler le texte (Correction) */
        line-height: 1.3 !important; 
        min-height: 44px !important;
        max-height: 100px !important;
        outline: none !important;
        overflow-y: auto !important;
        resize: none !important;
        color: #202124 !important;
    }

    body .prompt-input::placeholder {
        color: #9aa0a6 !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        white-space: normal !important; /* Autorise le retour à la ligne du placeholder */
    }

    /* Réutilisation du bouton send noir */
    body #btn-send-prompt-mobile {
        display: flex !important;
        width: 30px !important; /* Réduit de 36px à 30px */
        height: 30px !important; /* Réduit de 36px à 30px */
        background-color: #000000 !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        border: none !important;
        flex-shrink: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    body #btn-send-prompt-mobile svg {
        width: 14px !important; /* Adapté à la nouvelle taille */
        height: 14px !important;
    }

    /* Copyright en bas (Photo 1) */
    body .prompt-footer-mobile {
        width: 100% !important;
        text-align: center !important;
        font-size: 11px !important;
        color: #9aa0a6 !important;
        margin-top: auto !important; /* Pousse le copyright au bas de l'écran */
        padding-top: 40px !important;
        padding-bottom: 20px !important;
        display: block !important;
    }

    /* États cachés */
    body .hidden {
        display: none !important;
    }
    
    body .mobile-model-popup {
        z-index: 99999 !important; /* Priorité maximale */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 85% !important; /* Plus large pour mobile */
        max-width: 320px !important;
    }

    body .mobile-popup-overlay {
        z-index: 99998 !important; /* Juste en dessous de la popup */
        background: rgba(0,0,0,0.75) !important; /* Grisage plus intense pour bien marquer le premier plan */
    }

    /* ➕ FAVORIS : Bouton "+" inactif sur mobile */
    body .btn-add-favorite {
        pointer-events: none !important;
        opacity: 0.5 !important;
        cursor: default !important;
    }

    /* 🛡️ FIX SETTINGS : Masquer l'option paramètres sur mobile même pour les admins */
    body .admin-settings-link {
        display: none !important;
    }
}

/* Protection Desktop (Obsolète ici, déplacée vers kb_chat_messaging.css) */
@media (min-width: 1025px) {
    .btn-back-mobile, 
    .btn-star-mobile, 
    .btn-kebab-mobile,
    .mobile-actions-popup,
    .mobile-model-popup,
    .mobile-popup-overlay,
    #btn-back-prompt-mobile,
    #btn-send-prompt-mobile,
    .prompt-footer-mobile {
        display: none !important;
    }
}