/* ===================================================
   CHATBOT WIDGET - CORRECTIFS RESPONSIVE
   =================================================== */
/*
   Problème identifié:
   - Font-size trop grande (1.5em → texte en colonne verticale)
   - Pas de word-wrapping (overflow sur mots longs)
   - Badges/onglets débordent (pas de flex-wrap)
   - Box-sizing non défini (calculs incohérents)

   Solution:
   - Réduction police à 14px base (responsive)
   - Ajout word-wrap + overflow-wrap
   - Box-sizing: border-box sur tout le widget
   - Flex-wrap pour badges/onglets
   - Élimination overflow horizontal
*/

/* ========== 1. BOX-SIZING GLOBAL WIDGET ========== */
/* Force border-box pour calculs cohérents (padding inclus dans width) */
.chatbot-container,
.chatbot-container * {
    box-sizing: border-box;
}

/* ========== 2. RÉDUCTION TAILLE POLICE ========== */
/* Remplace font-size: 1.5em (24px) par 14px base */
.chatbot-container {
    font-size: 14px !important; /* Override chatbot-enhanced.css */
    line-height: 1.5;
    max-width: 100%;
    overflow-x: hidden; /* Évite scroll horizontal */
}

/* Header */
.chatbot-header h3 {
    font-size: 1.1rem !important; /* 15.4px au lieu de 1.65rem (26.4px) */
}

/* Messages */
.message-content {
    font-size: 14px !important; /* Override 1.425rem (22.8px) */
    line-height: 1.5;
    padding: 12px !important; /* Réduit de 1.5rem (36px) → 12px */
    max-width: 100%; /* Permet utilisation complète de l'espace */
}

.message-content p {
    line-height: 1.5 !important; /* Réduit de 1.8 */
    margin-bottom: 8px;
}

.message-content ul,
.message-content li {
    font-size: 13px !important; /* Réduit de 1.35rem (21.6px) */
    line-height: 1.4;
}

/* Input */
.chatbot-input input {
    font-size: 14px !important; /* Override 1.425rem */
    padding: 10px 14px !important; /* Réduit de 1.125rem 1.5rem */
}

.chatbot-input button {
    font-size: 14px !important; /* Override 1.2rem */
    padding: 10px 18px !important; /* Réduit de 1.125rem 2.25rem */
}

/* Disclaimer */
.chatbot-disclaimer {
    font-size: 12px !important; /* Réduit de 1.2rem (19.2px) */
    padding: 10px 12px;
}

/* ========== 3. WORD WRAPPING ET OVERFLOW ========== */
/* Permet au texte de s'enrouler correctement sans overflow */
.message-content,
.message-content *,
.chatbot-input input,
.chatbot-disclaimer {
    overflow-wrap: anywhere; /* Casse les mots longs si nécessaire */
    word-break: normal; /* Évite cassure agressive */
    white-space: normal; /* Override tout nowrap éventuel */
    max-width: 100%;
}

/* Zone messages sans overflow horizontal */
.chatbot-messages {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px !important; /* Réduit de 2.25rem (48.6px) */
}

/* Messages individuels */
.chat-message {
    margin-bottom: 16px !important; /* Réduit de 2.25rem */
    max-width: 100%;
}

/* ========== 4. BADGES/ONGLETS WRAPPING ========== */
/* Si badges/onglets existent (ajoutés dynamiquement par JS) */
.chatbot-header .tabs,
.chatbot-header .badges,
.chatbot-messages .tabs,
.chatbot-messages .badges {
    display: flex;
    flex-wrap: wrap; /* Retour à la ligne au lieu de déborder */
    gap: 6px;
    max-width: 100%;
}

.chatbot-header .tab,
.chatbot-header .badge,
.chatbot-messages .tab,
.chatbot-messages .badge {
    font-size: 12px;
    padding: 4px 10px;
    white-space: nowrap; /* Badge ne casse pas son texte interne */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== 5. RESPONSIVE MOBILE ========== */
@media (max-width: 768px) {
    /* Police légèrement réduite sur mobile */
    .chatbot-container {
        font-size: 13px !important;
    }

    .message-content {
        font-size: 13px !important;
        padding: 10px !important;
        max-width: 90%; /* Plus large sur mobile */
    }

    .message-content ul,
    .message-content li {
        font-size: 12px !important;
    }

    .chatbot-input input {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    .chatbot-messages {
        padding: 12px !important;
    }
}

@media (max-width: 375px) {
    /* Très petits écrans (iPhone SE, etc.) */
    .chatbot-container {
        font-size: 12px !important;
    }

    .message-content {
        font-size: 12px !important;
        padding: 8px !important;
        max-width: 95%;
    }

    .chatbot-header h3 {
        font-size: 14px !important;
    }
}

/* ========== 6. ÉLIMINATION OVERFLOW HORIZONTAL ========== */
/* Sécurité: rien ne doit déborder horizontalement */
.chatbot-container,
.chatbot-header,
.chatbot-messages,
.chatbot-input,
.chatbot-disclaimer,
.chat-message,
.message-content,
.message-avatar {
    overflow-x: hidden;
    max-width: 100%;
}

/* Empêche les images/vidéos de déborder */
.message-content img,
.message-content video,
.message-content iframe {
    max-width: 100%;
    height: auto;
}

/* Empêche le code/pre de déborder */
.message-content pre,
.message-content code {
    max-width: 100%;
    overflow-x: auto; /* Scroll horizontal uniquement pour code long */
    word-wrap: normal; /* Code garde son format */
    white-space: pre-wrap; /* Permet retour ligne dans code */
}

/* ========== 7. AJUSTEMENTS ESTHÉTIQUES ========== */
/* Compense réduction police pour garder look équilibré */

/* Avatar: Styles déplacés vers fixes-ui.css (maintenant une image au lieu d'emoji) */

/* Spacing réduit proportionnellement */
.chatbot-header {
    padding: 14px !important;
}

.chatbot-input {
    padding: 12px !important;
    gap: 8px;
}

/* Bouton close */
.chatbot-close {
    width: 28px;
    height: 28px;
    font-size: 16px;
}

/* ========== 8. CONSERVATION COULEURS ALTERNÉES ========== */
/* Garde les couleurs Bleu Azure / Jaune Or définies dans chatbot-enhanced.css */
/* (Pas de modification, juste confirmation qu'elles restent actives) */

/* NOTE: Les styles de chatbot-enhanced.css pour les couleurs restent actifs:
   - .chat-message.bot:nth-child(odd) → Bleu Azure (#007FFF)
   - .chat-message.bot:nth-child(even) → Jaune Or (#FFD700)
*/