/* ==========================
   CHAT BUTTON
========================== */

.chat-btn{
    position: fixed;
    bottom: 40px;
    /* right: 100px; */
    left: 10px;
    width: 60px;
    height: 60px;

    border-radius: 50%;
    background: linear-gradient(135deg,#0a7cff,#0056d6);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 28px;
    color: #fff;

    cursor: pointer;

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

    z-index: 9999;

    transition: .3s;
}

.chat-btn:hover{
    transform: scale(1.08);
}

/* ==========================
   CHAT WINDOW
========================== */

.chat-box{

    position: fixed;

    bottom:30px;
    /* right: 25px; */
    left: 10px;
    width: 360px;
    height: 520px;

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    display: none;
    flex-direction: column;

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

    z-index: 999999;

}

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

.chat-header{

    background:#000000;
    color:#fff;

    padding:18px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:17px;
    font-weight:bold;

}

#closeChat{
    cursor:pointer;
    font-size:24px;
}

/* ==========================
   BODY
========================== */

.chat-body{

    flex:1;

    padding:15px;

    background:#f6f9ff;

    overflow-y:auto;

}


/* ==========================
   MESSAGE
========================== */

.bot,
.user{

    padding:12px 16px;

    border-radius:15px;

    margin-bottom:12px;

    max-width:80%;

    word-break:break-word;

}

.bot{

    background:#fff;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.user{

    background:#0a7cff;
    color:#fff;

    margin-left:auto;

}

/* ==========================
   FOOTER
========================== */

.chat-footer{

    display:flex;

    padding:12px;

    border-top:1px solid #ddd;

    background:#fff;

}

.chat-footer input{

    flex:1;

    padding:12px;

    border:1px solid #ccc;

    border-radius:10px;

    outline:none;

}

.chat-footer button{

    margin-left:10px;

    padding:12px 18px;

    border:none;

    background:#0a7cff;

    color:#fff;

    border-radius:10px;

    cursor:pointer;

}

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

@media(max-width:768px){

.chat-box{

width:95%;
height:80vh;

right:2.5%;
bottom:90px;

}
.chat-btn{
    position: fixed;
    bottom: 30px;
    /* right: 80px; */
    left: 10px;
    width: 50px;
    height: 50px;

    border-radius: 50%;
    background: linear-gradient(135deg,#0a7cff,#0056d6);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 25px;
    color: #fff;

    cursor: pointer;

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

    z-index: 9999;

    transition: .3s;
}

}