/* =====================================================
   TOP BROD - Assistant préparation de projet
   Design premium
   PrestaShop 8.2
===================================================== */



/* ===============================
   BOUTON FLOTTANT
================================ */


#chatia-fab {


    position:fixed;


    right:30px;


    bottom:30px;


    height:72px;


    padding:0 28px 0 14px;


    border-radius:40px;


    background:#111111;


    display:flex;


    align-items:center;


    gap:14px;


    cursor:pointer;


    z-index:99999;


    box-shadow:
    0 15px 40px rgba(0,0,0,.30);


    transition:.3s ease;


}




#chatia-fab:hover {


    transform:translateY(-3px);


    box-shadow:
    0 20px 50px rgba(0,0,0,.40);


}




.chatia-fab-icon {


    width:50px;


    height:50px;


    display:flex;


    align-items:center;


    justify-content:center;


}



.chatia-fab-icon svg {


    width:50px;


    height:50px;


}



.chatia-fab-text {


    color:#ffffff;


    font-size:15px;


    font-weight:600;


    white-space:nowrap;


    letter-spacing:.3px;


}









/* ===============================
   FENETRE CHAT
================================ */


#chatia-window {


    position:fixed;


    right:30px;


    bottom:120px;


    width:280px;


    max-height:400px;


    background:#ffffff;


    border-radius:22px;


    overflow:hidden;


    display:flex;


    flex-direction:column;


    z-index:99999;


    box-shadow:
    0 25px 70px rgba(0,0,0,.30);


}



.hidden {


    display:none!important;


}









/* ===============================
 HEADER
================================ */


.chatia-header {


    background:#111111;


    color:white;


    padding:7px 10px;


    display:flex;


    justify-content:space-between;


    align-items:center;


}



.chatia-brand {


    display:flex;


    align-items:center;


    gap:8px;


}




.chatia-avatar {


    width:36px;


    height:36px;


}



.chatia-avatar svg {


    width:36px;


    height:36px;


}




.chatia-title {


    display:flex;


    flex-direction:column;


}



.chatia-title strong {


    font-size:17px;


}



.chatia-title span {


    font-size:12px;


    opacity:.8;


}









.chatia-actions button {


    background:none;


    border:none;


    color:white;


    font-size:25px;


    cursor:pointer;


}









/* ===============================
 MESSAGES
================================ */


#chatia-messages {


    padding:18px;


    background:#f7f7f7;


    overflow-y:auto;


    flex:1;


}




.chatia-msg {


    max-width:88%;


    padding:14px 17px;


    border-radius:18px;


    margin-bottom:15px;


    line-height:1.5;


    font-size:14px;


    white-space:pre-line;


}



.chatia-bot {


    background:white;


    border:1px solid #e5e5e5;


}



.chatia-user {


    background:#111111;


    color:white;


    margin-left:auto;


}









/* ===============================
 INPUT
================================ */


.chatia-input {


    display:flex;


    background:white;


    border-top:1px solid #ddd;


}



#chatia-text {


    flex:1;


    border:none;


    padding:16px;


    outline:none;


}




#chatia-send {


    width:60px;


    border:none;


    background:#111111;


    color:white;


    font-size:20px;


}









/* ===============================
 LOGO
================================ */


.chatia-files-area {


    padding:15px;


    border-top:1px solid #eee;


}



#chatia-files {


    width:100%;


}









/* ===============================
 FORMULAIRE
================================ */


#chatia-client-form {


    padding:20px;


}



#chatia-client-form input {


    width:100%;


    padding:14px;


    margin-bottom:12px;


    border:1px solid #ddd;


    border-radius:10px;


}




#chatia-submit-quote {


    width:100%;


    min-height:60px;


    border:none;


    border-radius:14px;


    background:#111111;


    color:white;


    font-size:16px;


    font-weight:600;


    cursor:pointer;


}



#chatia-submit-quote:hover {


    background:#333333;


}









/* ===============================
 MOBILE
================================ */


@media(max-width:600px){


    #chatia-window {


        left:15px;


        right:15px;


        width:auto;


        bottom:100px;


    }



    #chatia-fab {


        right:15px;


        bottom:15px;


    }


}