:root{
--main:#4f46e5;
--main-light:#6366f1;
--bg:#f9fafb;
--border:#e5e7eb;
}

/* notification bubble */

#chat-notification{
position:fixed;
bottom:100px;
right:30px;
background:var(--main);
color:white;
padding:12px 20px;
border-radius:15px;
cursor:pointer;
z-index:9999;
box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
font-size:13px;
animation:slideIn .5s ease-out;
font-family:'Vazir',sans-serif;
transform:translateZ(0);
will-change:transform;
backface-visibility:hidden;
}

/* chatbot window */

#chatbot-window{
position:fixed;
bottom:100px;
right:30px;
width:330px;
height:450px;
background:white;
border-radius:20px;
box-shadow:0 25px 40px rgba(0,0,0,.12);
display:flex;
flex-direction:column;
z-index:9999;
overflow:hidden;
border:1px solid #f1f1f1;
font-family:'Vazir',sans-serif;

transform:translateZ(0);
will-change:transform;
backface-visibility:hidden;
contain:layout style paint;
}

/* header */

.chatbot-header{
background:linear-gradient(135deg,#4f46e5,#6366f1);
padding:15px;
color:white;
display:flex;
justify-content:space-between;
align-items:center;
}

.chatbot-close{
background:none;
border:none;
color:white;
font-size:20px;
cursor:pointer;
opacity:.8;
transition:.2s;
}

.chatbot-close:hover{
opacity:1;
}

/* messages */

#chatbot-messages{
flex:1;
padding:15px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:10px;
background:#f9fafb;
}

/* input area */

.chatbot-input-wrapper{
padding:10px;
border-top:1px solid #f3f4f6;
}

#chatbot-input-field{
width:100%;
border:1px solid #e5e7eb;
padding:10px;
border-radius:12px;
outline:none;
font-size:13px;
transition:.2s;
}

/* chatbot button */

.chatbot-btn{
position:fixed;
bottom:30px;
right:30px;
width:60px;
height:60px;
border-radius:50%;
background:var(--main);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all .25s ease;
z-index:9999;

will-change:transform;
transform:translateZ(0);
backface-visibility:hidden;
}

.chatbot-btn:hover{
transform:scale(1.08) rotate(5deg);
box-shadow:0 20px 40px rgba(79,70,229,.55);
}

.chatbot-btn::after{
content:'';
position:absolute;
width:100%;
height:100%;
border-radius:50%;
border:2px solid rgba(99,102,241,.4);
animation:pulse 2s infinite;
}

.chat-badge{
position:absolute;
top:6px;
right:6px;
width:10px;
height:10px;
background:#22c55e;
border-radius:50%;
box-shadow:0 0 0 2px white;
}

/* bubbles */

.bot-bubble{
align-self:flex-start;
background:white;
color:#1f2937;
padding:10px 14px;
border-radius:15px 15px 2px 15px;
font-size:13px;
max-width:85%;
border:1px solid var(--border);
animation:fadeUp .25s ease;
}

.user-bubble{
align-self:flex-end;
background:var(--main);
color:white;
padding:10px 14px;
border-radius:15px 15px 15px 2px;
font-size:13px;
max-width:85%;
animation:fadeUp .25s ease;
}

/* option buttons */

.option-btn{
background:white;
border:1px solid var(--main);
color:var(--main);
padding:6px 12px;
border-radius:10px;
cursor:pointer;
font-size:12px;
margin-top:5px;
font-weight:bold;
transition:.2s;
}

.option-btn:hover{
background:var(--main);
color:white;
transform:translateY(-1px);
box-shadow:0 6px 12px rgba(0,0,0,.1);
}

/* hidden */

.hidden{
display:none!important;
}

/* typing */

.typing{
display:flex;
gap:4px;
}

.typing span{
width:6px;
height:6px;
background:#999;
border-radius:50%;
animation:typing 1s infinite;
}

.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}

/* animations */

@keyframes pulse{
0%{transform:scale(1);opacity:.7;}
70%{transform:scale(1.5);opacity:0;}
100%{opacity:0;}
}

@keyframes typing{
0%{opacity:.2;transform:translateY(0)}
50%{opacity:1;transform:translateY(-3px)}
100%{opacity:.2;transform:translateY(0)}
}

@keyframes fadeUp{
from{
opacity:0;
transform:translate3d(0,10px,0);
}
to{
opacity:1;
transform:translate3d(0,0,0);
}
}

@keyframes slideIn{
from{
transform:translate3d(0,20px,0);
opacity:0;
}
to{
transform:translate3d(0,0,0);
opacity:1;
}
}

.chatbot-animate{
animation:fadeUp .3s ease;
}

/* scrollbar */

#chatbot-messages::-webkit-scrollbar{width:6px}

#chatbot-messages::-webkit-scrollbar-thumb{
background:#d1d5db;
border-radius:10px;
}

#chatbot-messages::-webkit-scrollbar-thumb:hover{
background:#9ca3af;
}

/* mobile */

@media(max-width:600px){

#chatbot-window{
right:0!important;
bottom:0!important;
width:100%!important;
height:65%!important;
border-radius:20px 20px 0 0!important;
}

}