/* Styles de base pour le widget bouton et le conteneur du chatbot */
.chatbot-widget-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px; /* Taille par défaut du bouton */
    height: 60px;
    background-color: #007bff; /* Couleur du bouton */
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Assurez-vous qu'il est au-dessus des autres éléments */
    transition: all 0.3s ease;
}

.chatbot-widget-button:hover {
    background-color: #0056b3;
}

.chatbot-container-fixed {
    position: fixed;
    bottom: 90px; /* Au-dessus du bouton */
    right: 20px;
    width: 350px; /* Largeur par défaut du conteneur du chatbot */
    height: 500px; /* Hauteur par défaut */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999;
    /* Cachez le conteneur par défaut */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.chatbot-container-fixed.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Styles pour l'en-tête, le corps et le pied de page du chatbot */
.chatbox-header {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.chatbox-header i {
    margin-right: 10px;
    font-size: 1.2em;
}

.chatbox-header h2 {
    margin: 0;
    font-size: 1.2em;
    flex-grow: 1;
}

.close-chatbot-button {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 0 5px;
}

.chatbox-body {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #f9f9f9;
}

.chatbox-footer {
    display: flex;
    padding: 10px 15px;
    border-top: 1px solid #eee;
    background-color: #fff;
}

.chatbox-footer input {
    flex-grow: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 15px;
    margin-right: 10px;
    font-size: 0.9em;
}

.chatbox-footer button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}

.chatbox-footer button:hover {
    background-color: #0056b3;
}

/* Styles pour les messages */
.message {
    margin-bottom: 15px; /* Espace entre les messages */
    display: flex; /* Rend chaque message un conteneur flex */
    align-items: flex-start; /* Aligne les éléments en haut */
    max-width: 100%; /* Permet au conteneur de prendre toute la largeur disponible */
}

/* Styles pour les messages de l'utilisateur (à droite) */
.user-message {
    justify-content: flex-end; /* Aligne le contenu (texte) à droite */
    margin-left: auto; /* Pousse le message vers la droite */
}

/* Bulle de message pour l'utilisateur */
.user-message p {
    background-color: #007bff;
    color: white;
    padding: 12px 18px;
    border-radius: 22px;
    max-width: 80%; /* Limite la largeur de la bulle */
    word-wrap: break-word;
    font-size: 0.95em;
    line-height: 1.4;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    margin: 0; /* Supprime les marges par défaut */
}

/* Styles pour les messages du bot (à gauche) */
.bot-message {
    justify-content: flex-start; /* Aligne le contenu (avatar + bulle) à gauche */
    margin-right: auto; /* Pousse le message vers la gauche */
}

/* Avatar du bot */
.bot-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* Empêche l'avatar de rétrécir */
    margin-right: 10px; /* Espace entre l'avatar et la bulle de message */
    margin-top: 2px; /* Ajustement vertical si nécessaire */
}

/* Bulle de message du bot */
.message-bubble {
    background-color: #e2e6ea;
    color: #333;
    padding: 12px 18px;
    border-radius: 22px;
    max-width: calc(80% - 38px); /* 80% de la largeur du parent moins (avatar_width + margin_right) */
    word-wrap: break-word;
    font-size: 0.95em;
    line-height: 1.4;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* Ajustement pour le texte dans la bulle */
.message-bubble p {
    margin: 0; /* Supprime les marges par défaut du paragraphe */
}

/* ==================================== */
/* MEDIA QUERIES POUR MOBILE   */
/* ==================================== */

@media (max-width: 768px) {
    /* Ajustements pour les tablettes et petits écrans */
    .chatbot-container-fixed {
        width: 320px; /* Légèrement plus petit sur des écrans moyens */
        height: 450px;
        bottom: 80px; /* Remonte un peu le conteneur */
        right: 15px;
    }

    .chatbot-widget-button {
        width: 55px; /* Bouton légèrement plus petit */
        height: 55px;
        font-size: 1.8em;
        bottom: 15px;
        right: 15px;
    }
}

@media (max-width: 576px) {
    /* Ajustements spécifiques pour les téléphones mobiles (très petits écrans) */
    .chatbot-container-fixed {
        width: 90vw; /* Prend 90% de la largeur du viewport */
        height: 80vh; /* Prend 80% de la hauteur du viewport */
        bottom: 10px; /* Placé très proche du bas */
        right: 5vw; /* Centré horizontalement */
        left: 5vw;
        border-radius: 15px 15px 0 0; /* Coins supérieurs arrondis, inférieurs plats pour une intégration plus "native" */
        box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* Ombre vers le haut */
    }

    .chatbot-widget-button {
        width: 50px;
        height: 50px;
        font-size: 1.6em;
        bottom: 10px;
        right: 10px;
    }

    /* La règle suivante a été supprimée, car le JavaScript gère déjà la visibilité du bouton d'ouverture. */
    /*
    .chatbot-container-fixed.active + .chatbot-widget-button {
        opacity: 0;
        pointer-events: none;
    }
    */

    .chatbox-header h2 {
        font-size: 1.1em; /* Réduire la taille du titre */
    }

    .chatbox-footer input {
        font-size: 0.85em; /* Réduire la taille de la police de l'input */
        padding: 6px 12px;
    }

    .chatbox-footer button {
        font-size: 0.9em; /* Réduire la taille de la police du bouton Envoyer */
        padding: 6px 12px;
    }

    .message {
        padding: 0; /* Supprime le padding du conteneur parent */
        margin-bottom: 10px; /* Ajuste la marge */
    }

    .bot-avatar {
        width: 24px; /* Légèrement plus petit sur mobile */
        height: 24px;
        margin-right: 8px; /* Moins d'espace */
    }

    .message-bubble {
        padding: 10px 15px; /* Ajuste le padding de la bulle */
        max-width: calc(100% - 32px); /* Ajuste la largeur max (100% - avatar_width - margin_right) */
    }

    .user-message p {
        padding: 10px 15px; /* Ajuste le padding de la bulle utilisateur */
    }
}

/* Styles pour le mode paysage sur mobile (souvent similaire aux tablettes) */
@media (max-height: 500px) and (orientation: landscape) {
    .chatbot-container-fixed {
        height: 90vh; /* Utilise plus de hauteur sur les écrans paysages */
        width: 60vw; /* Utilise moins de largeur */
    }
}