/* ===========================
   HITT AI Assistant CSS
=========================== */

#chat-button{
position:fixed;
bottom:20px;
right:20px;
width:65px;
height:65px;
background:#0d6efd;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
box-shadow:0 5px 20px rgba(0,0,0,.3);
z-index:999999;
transition:.3s;
}

#chat-button:hover{
transform:scale(1.1);
}

#chat-button img{
width:60px;
height:60px;
border-radius:50%;
}

/* ================= Chat Box ================= */

#chat-box{
position:fixed;
right:20px;
bottom:95px;
width:380px;
height:600px;
background:#fff;
border-radius:20px;
overflow:hidden;
display:none;
flex-direction:column;
box-shadow:0 10px 35px rgba(0,0,0,.35);
z-index:999999;
}

/* ================= Header ================= */

.chat-header{
height:75px;
background:linear-gradient(135deg,#005bea,#00c6fb);
display:flex;
justify-content:space-between;
align-items:center;
padding:15px;
color:#fff;
}

.chat-header .left{
display:flex;
align-items:center;
}

.chat-header img{
width:50px;
height:50px;
border-radius:50%;
margin-right:10px;
}

.chat-header h4{
margin:0;
font-size:20px;
}

.chat-header span{
font-size:13px;
color:#d6ffd6;
}

#close-chat{
background:none;
border:none;
color:#fff;
font-size:30px;
cursor:pointer;
}

/* ================= Chat Body ================= */

#chat-body{
flex:1;
overflow-y:auto;
padding:15px;
background:#f5f7fb;
display:flex;
flex-direction:column;
scroll-behavior:smooth;
}

/* Scroll */

#chat-body::-webkit-scrollbar{
width:6px;
}

#chat-body::-webkit-scrollbar-thumb{
background:#0d6efd;
border-radius:20px;
}

/* ================= Messages ================= */

.bot-message{
background:linear-gradient(135deg,#0d6efd,#00c6fb);
color:#fff;
padding:12px 15px;
border-radius:15px;
margin-bottom:10px;
max-width:85%;
line-height:24px;
word-wrap:break-word;
}

.user-message{
background:#16a34a;
color:#fff;
padding:12px 15px;
border-radius:15px;
margin-left:auto;
margin-bottom:10px;
max-width:85%;
text-align:right;
word-wrap:break-word;
}

/* ================= Footer ================= */

.chat-footer{
display:flex;
padding:10px;
background:#fff;
border-top:1px solid #ddd;
gap:10px;
}

#user-message{
flex:1;
padding:12px;
border:1px solid #ccc;
border-radius:30px;
outline:none;
font-size:15px;
}

#user-message:focus{
border-color:#0d6efd;
}

#send-btn{
width:48px;
height:48px;
background:#0d6efd;
color:#fff;
border:none;
border-radius:50%;
cursor:pointer;
font-size:18px;
transition:.3s;
}

#send-btn:hover{
background:#004fc4;
}

/* ================= Quick Buttons ================= */

.quick-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:10px;
margin-bottom:15px;
}

.quick-btn{
padding:10px;
background:#fff;
border:1px solid #0d6efd;
border-radius:30px;
cursor:pointer;
font-size:13px;
font-weight:bold;
color:#0d6efd;
transition:.3s;
}

.quick-btn:hover{
background:#0d6efd;
color:#fff;
}

/* ================= Mobile ================= */

@media(max-width:768px){

#chat-box{

width:95%;
height:90%;
right:2.5%;
bottom:5%;
border-radius:15px;

}

#chat-button{

width:60px;
height:60px;
right:15px;
bottom:15px;

}

#chat-button img{

width:55px;
height:55px;

}

.quick-buttons{

grid-template-columns:1fr;

}

.chat-header h4{

font-size:18px;

}

#user-message{

font-size:14px;

}

}

/* ================= Social Icons ================= */

.whatsapp,
.call,
.location,
.instagram,
.facebook,
.youtube{

z-index:1000 !important;

}