/* ==========================================
   MBOACOIN - MESSAGING
========================================== */

/* Zone des messages */

.chat-container{

    height:600px;

    overflow-y:auto;

    padding:25px;

    background:#f8fafc;

}

/* Bulles */

.message{

    max-width:70%;

    padding:14px 18px;

    border-radius:20px;

    margin-bottom:18px;

    word-break:break-word;

    animation:fadeMessage .25s ease;

}

/* Message envoyé */

.message.sent{

    margin-left:auto;

    background:var(--mboa-primary);

    color:white;

    border-bottom-right-radius:6px;

}

/* Message reçu */

.message.received{

    margin-right:auto;

    background:white;

    color:#222;

    border-bottom-left-radius:6px;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

}

/* Heure */

.message-time{

    font-size:12px;

    opacity:.75;

    margin-top:8px;

    text-align:right;

}

/* Formulaire */

.chat-form{

    background:white;

    padding:18px;

    border-top:1px solid #e5e7eb;

}

/* Champ */

.chat-form textarea{

    resize:none;

    border-radius:15px;

    min-height:55px;

}

/* Bouton */

.chat-form button{

    border-radius:15px;

    padding:12px 20px;

}

/* Scroll */

.chat-container::-webkit-scrollbar{

    width:8px;

}

.chat-container::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;

}

/* Animation */

@keyframes fadeMessage{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}