/* =====================================
   AFTER2AM CHATBOT - STYLE FLOTTANT
   ===================================== */


/* Bouton ouverture */

#chatbot-button {

    position:fixed;

    top:25px;

    right:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#001522;

    border:2px solid #00ccff;

    color:#00ccff;

    font-size:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:99999;

    box-shadow:
    0 0 10px #00ccff,
    inset 0 0 10px #003344;

}


#chatbot-button:hover {

    box-shadow:
    0 0 25px #00ccff,
    inset 0 0 15px #006688;

}



/* Fenêtre */

#chatbot-window {

    position:fixed;

    top:95px;

    right:25px;

    width:360px;

    height:500px;

    background:#020b12;

    border:2px solid #00ccff;

    border-radius:20px;

    display:none;

    z-index:99999;

    box-shadow:
    0 0 25px #00ccff;

    overflow:hidden;

}



/* En-tête */

#chatbot-header {

    height:45px;

    background:#001f33;

    color:#00ccff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 15px;

    font-weight:bold;

}



/* Fermeture */

#chatbot-close {

    cursor:pointer;

    font-size:25px;

}



/* Zone messages */

#chatbot-messages {

    height:370px;

    padding:15px;

    overflow-y:auto;

    overflow-x:hidden;

    box-sizing:border-box;

    font-size:14px;

}



/* Bulles messages */

.user-message,
.bot-message {

    display:block;

    box-sizing:border-box;

    max-width:90%;

    padding:10px;

    margin:10px 0;

    border-radius:15px;

    white-space:pre-wrap;

    overflow-wrap:anywhere;

    word-break:break-word;

}



/* Message visiteur */

.user-message {

    background:#003344;

    color:white;

    margin-left:auto;

    text-align:right;

}



/* Message AFTER2AM */

.bot-message {

    background:#001522;

    color:#00ccff;

    border:1px solid #006688;

    margin-right:auto;

}



/* Zone saisie */

#chatbot-input {

    display:flex;

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    box-sizing:border-box;

    padding:10px;

    background:#00101a;

}



/* Champ texte */

#chatbot-text {

    flex:1;

    min-width:0;

    height:90px;

    resize:none;

    background:#000;

    color:#00ffcc;

    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;

}



/* Scroll */

#chatbot-messages::-webkit-scrollbar {

    width:6px;

}


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

    background:#00ccff;

    border-radius:10px;

}



/* ==========================
   IDENTITE VISITEUR AFTER2AM
   ========================== */


#chatbot-identite {

    text-align:center;

    padding:20px;

}



#chatbot-pseudo {

    width:90%;

    height:40px;

    margin-top:15px;

    background:#000;

    color:#00ffcc;

    border:1px solid #00ccff;

    border-radius:15px;

    padding:10px;

    outline:none;

    font-size:14px;

    text-align:center;

}



#chatbot-valider-pseudo {

    margin-top:15px;

    padding:10px 25px;

    border:none;

    border-radius:20px;

    background:#00ccff;

    color:#000;

    cursor:pointer;

    font-weight:bold;

}



#chatbot-valider-pseudo:hover {

    opacity:0.8;

}