/* ==========================================
   AFTER2AM CHATBOT - STYLE FLOTTANT
   
   Fichier : chatbot-float.css
   
   Ce fichier gère uniquement :
   - l'apparence du bouton 💬
   - la fenêtre du chatbot
   - les bulles de messages
   - la zone de saisie
   - l'identification visiteur
   
   Les couleurs principales :
   Cyan      = identité AFTER2AM
   Noir      = fond spatial
   Turquoise = textes importants
   ========================================== */






/* ==========================================
   BOUTON D'OUVERTURE DU CHATBOT
   
   Le bouton rond 💬 visible sur le site
   ========================================== */


#chatbot-button {


    /* Position fixe dans la page */

    position:fixed;


    /* Distance depuis le haut */

    top:25px;


    /* Distance depuis la droite */

    right:25px;



    /* Taille du bouton */

    width:60px;

    height:60px;



    /* Forme ronde */

    border-radius:50%;



    /* Couleur du fond */

    background:#001522;



    /* Contour lumineux */

    border:2px solid #00ccff;



    /* Couleur du symbole 💬 */

    color:#00ccff;



    /* Taille du symbole */

    font-size:30px;



    display:flex;


    align-items:center;


    justify-content:center;



    /* Curseur souris */

    cursor:pointer;



    /* Passe devant tous les éléments */

    z-index:99999;



    /* Effet néon */

    box-shadow:

    0 0 10px #00ccff,

    inset 0 0 10px #003344;


}







/* Effet quand la souris passe dessus */


#chatbot-button:hover {


    box-shadow:


    0 0 25px #00ccff,


    inset 0 0 15px #006688;


}









/* ==========================================
   FENÊTRE PRINCIPALE DU CHATBOT
   
   Toute la boîte AFTER2AM
   ========================================== */


#chatbot-window {


    /* Position flottante */

    position:fixed;


    top:95px;


    right:25px;




    /* Dimensions */

    width:360px;


    height:500px;




    /* Fond général */

    background:#020b12;




    /* Bordure extérieure */

    border:2px solid #00ccff;




    /* Coins arrondis */

    border-radius:20px;




    /* Cachée au démarrage */

    display:none;




    /* Passe au-dessus du site */

    z-index:99999;




    /* Halo lumineux */

    box-shadow:

    0 0 25px #00ccff;




    /* Empêche les débordements */

    overflow:hidden;


}









/* ==========================================
   BARRE DU HAUT
   
   Texte : ✦ AFTER2AM Assistant
   ========================================== */


#chatbot-header {


    height:45px;



    /* Fond du bandeau */

    background:#001f33;



    /* Couleur du texte */

    color:#00ccff;



    display:flex;


    align-items:center;


    justify-content:space-between;



    padding:0 15px;



    font-weight:bold;


}









/* ==========================================
   BOUTON FERMER ×
   ========================================== */


#chatbot-close {


    cursor:pointer;


    font-size:25px;


}









/* ==========================================
   ZONE D'AFFICHAGE DES MESSAGES
   
   Contient :
   - messages visiteur
   - réponses AFTER2AM
   ========================================== */


#chatbot-messages {


    height:370px;



    padding:15px;



    /* Scroll vertical */

    overflow-y:auto;



    /* Empêche scroll horizontal */

    overflow-x:hidden;



    box-sizing:border-box;



    font-size:14px;


}









/* ==========================================
   STYLE COMMUN DES BULLES
   
   Utilisé par :
   .user-message
   .bot-message
   ========================================== */


.user-message,
.bot-message {


    display:block;



    max-width:90%;



    padding:10px;



    margin:10px 0;



    border-radius:15px;



    /* Respecte les retours à la ligne */

    white-space:normal;



    /* Coupe les longs textes */

    overflow-wrap:anywhere;


    word-break:break-word;


}










/* ==========================================
   MESSAGE DU VISITEUR
   
   Exemple :
   Loan : Bonjour
   ========================================== */


.user-message {


    /* Couleur de la bulle visiteur */

    background:#213344;



    /* Couleur du texte */

    color:white;



    /* Position à droite */

    margin-left:auto;



    text-align:left;


}









/* ==========================================
   MESSAGE AFTER2AM
   
   Réponse automatique ou administrateur
   ========================================== */


.bot-message {


    /* Couleur de fond */

    background:#001522;



    /* Couleur texte AFTER2AM */

    color:#88ccff;



    /* Contour */

    border:1px solid #006688;



    /* Position gauche */

    margin-right:auto;


}









/* ==========================================
   ZONE DE SAISIE DU MESSAGE
   ========================================== */


#chatbot-input {


    display:flex;



    position:absolute;



    bottom:0;


    left:0;



    width:100%;



    box-sizing:border-box;



    padding:10px;



    /* Fond de la zone écriture */

    background:#00101a;


}









/* ==========================================
   CHAMP TEXTE VISITEUR
   
   Zone où la personne écrit son message
   ========================================== */


#chatbot-text {



    flex:1;



    min-width:0;



    height:90px;



    resize:none;




    /* Fond */

    background:#000;



    /* Couleur du texte tapé */

    color:#00ffcc;



    /* Bordure */

    border:1px solid #00ccff;



    border-radius:15px;



    padding:10px;



    outline:none;



    font-family:Arial,sans-serif;



    font-size:20px;


}









/* ==========================================
   BOUTON ENVOYER ➤
   ========================================== */


#chatbot-send {


    margin-left:8px;



    width:45px;



    flex-shrink:0;



    border-radius:50%;



    background:#001f33;



    border:1px solid #00ccff;



    color:#00ccff;



    cursor:pointer;



    font-size:20px;


}









/* ==========================================
   BARRE DE DEFILEMENT
   ========================================== */


#chatbot-messages::-webkit-scrollbar {


    width:6px;


}



#chatbot-messages::-webkit-scrollbar-thumb {


    background:#00ccff;


    border-radius:10px;


}









/* ==========================================
   IDENTIFICATION VISITEUR
   
   Première fenêtre :
   "Comment souhaitez-vous être appelé ?"
   ========================================== */


#chatbot-identite {


    text-align:center;


    padding:20px;


}









/* Champ pseudo */


#chatbot-pseudo {


    width:90%;


    height:40px;



    margin-top:15px;




    /* Fond */

    background:#000;




    /* Texte pseudo */

    color:#00ffcc;




    border:1px solid #00ccff;



    border-radius:15px;



    padding:10px;



    outline:none;



    font-size:14px;



    text-align:center;


}









/* ==========================================
   BOUTON VALIDATION PSEUDO
   
   Bouton "Continuer"
   ========================================== */


#chatbot-valider-pseudo {



    margin-top:15px;



    padding:10px 25px;



    border:none;



    border-radius:20px;



    /* Fond bouton */

    background:#00ccff;



    /* Texte bouton */

    color:#000;



    cursor:pointer;



    font-weight:bold;


}









/* Effet souris bouton pseudo */


#chatbot-valider-pseudo:hover {


    opacity:0.8;


}


.user-message b,
.bot-message b{
    display:block;
    margin-bottom:0;
    line-height:2.5;
}


.user-message span,
.bot-message span{
    display:block;
    margin-top:0;
    line-height:1.3;
}