/* CHAT ICON */

#chatbot-icon{
position:fixed;
bottom:25px;
right:25px;
width:60px;
height:60px;
background:#ff6a3d;
color:white;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:26px;
cursor:pointer;
z-index:9999;
}


/* CHAT WINDOW */

#chatbot-box{
position:fixed;
bottom:100px;
right:25px;
width:360px;
height:500px;
background:#111;
border-radius:15px;
display:none;
flex-direction:column;
z-index:9999;
overflow:hidden;
}


/* HEADER */

.chat-header{
padding:16px;
background:#ff6a3d;
color:white;
font-weight:600;
flex-shrink:0;
}


/* CHAT BODY */

.chat-body{
position:absolute;
top:60px;
bottom:60px;
left:0;
right:0;

overflow-y:auto;

padding:15px;

display:flex;
flex-direction:column;

gap:10px;

}


/* BOT MESSAGE */

.bot{
background:#2a2a2a;
padding:12px;
border-radius:10px;
max-width:75%;
color:white;
}


/* USER MESSAGE */

.user{
background:#ff6a3d;
padding:12px;
border-radius:10px;
margin-left:auto;
max-width:75%;
color:white;
}


/* INPUT AREA */

.chat-input{

position:absolute;

bottom:0;
left:0;

width:100%;

display:flex;

border-top:1px solid #333;

background:#1a1a1a;

}


/* INPUT */

.chat-input input{

flex:1;

border:none;

padding:14px;

background:#1a1a1a;

color:white;

outline:none;

}


/* BUTTON */

.chat-input button{

background:#ff6a3d;

border:none;

padding:0 18px;

color:white;

cursor:pointer;

}


/* TIME */

.time{

font-size:10px;

opacity:.6;

display:block;

margin-top:4px;

}