/* ===== CHAT WIDGET ===== */

#chatbot{
position:fixed;
bottom:20px;
right:20px;
font-family:Arial;
z-index:999999;
}

/* Floating Button */
#chatBtn{
width:60px;
height:60px;
background:#00b686;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
cursor:pointer;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* Chat Box */
#chatBox{
width:320px;
height:420px;
background:white;
position:absolute;
bottom:70px;
right:0;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
display:none;
overflow:hidden;
}

/* Header */
#chatHeader{
background:#00b686;
color:white;
padding:10px;
display:flex;
justify-content:space-between;
align-items:center;
}

/* Messages */
#chatBody{
height:300px;
overflow-y:auto;
padding:10px;
background:#f5f7fb;
}

.bot{
background:#fff;
padding:8px;
border-radius:8px;
margin-bottom:8px;
width:fit-content;
}

.user{
background:#00b686;
color:white;
padding:8px;
border-radius:8px;
margin-bottom:8px;
margin-left:auto;
width:fit-content;
}

/* Input */
#chatInputBox{
display:flex;
padding:8px;
gap:5px;
}

#chatInput{
flex:1;
padding:8px;
border:1px solid #ddd;
border-radius:6px;
}

#sendBtn{
background:#00b686;
color:white;
border:none;
padding:8px 12px;
border-radius:6px;
cursor:pointer;
}

/* Close button */
#closeBtn{
cursor:pointer;
}

/* FLOATING PULSE EFFECT (DOES NOT MOVE POSITION) */

#chatBtn{
    animation:pulseGlow 2.5s infinite;
}

/* soft glow */
@keyframes pulseGlow{

0%{
box-shadow:0 0 0 0 rgba(0,182,134,.5);
transform:scale(1);
}

50%{
box-shadow:0 0 0 15px rgba(0,182,134,0);
transform:scale(1.05);
}

100%{
box-shadow:0 0 0 0 rgba(0,182,134,0);
transform:scale(1);
}

}
    
    
    .chat-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
}

.chat-options button {
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f4f4f4;
    color: #333;
    text-align: left;
    cursor: pointer;
    transition: 0.2s ease;
}

.chat-options button:hover {
    background: #e8e8e8;
}


.dashboard-logo{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #8B5CF6;
    background:#fff;
    padding:3px;
    transition:.3s ease;
}

.dashboard-logo:hover{
    transform:scale(1.08);
    box-shadow:0 0 15px rgba(139,92,246,.45);
}