/* // /chatbot/chatbot.css   */

html,
body {
    overflow-x: hidden;
}

body.chat-open {
    overflow: hidden;
}
/* Hint Bubble */

#chatbot-hint{
    position: fixed;
    bottom: calc(65px + 40px);
    right: 30px;
    background: #005eff;
    color: white;
    padding: 8px 14px;
    border-radius: 15px;
    font-size: 13px;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    z-index: 99999;
    pointer-events: none;
}

/* Show hint */

#chatbot-hint.show{
    opacity: 1;
    transform: translateY(0);
}

/* Bounce animation */

@keyframes fabBounce{
    0%{transform:translateY(0)}
    30%{transform:translateY(-8px)}
    60%{transform:translateY(0)}
}

/* Apply bounce */

.fab-attention{
    animation: fabBounce 0.6s ease;
}

/* Floating Button */

#chatbot-fab{
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg,#005eff,#00c2ff);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 15px 30px rgba(0,0,0,.3);
    z-index: 99999;
}

#chatbot-fab::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    background: rgba(0,194,255,0.5);
    animation: glowPulse 2.5s infinite;
    z-index:-1;
}

@keyframes glowPulse{
    0%{
        transform: scale(1);
        opacity:.6;
    }
    70%{
        transform: scale(1.6);
        opacity:0;
    }
    100%{
        opacity:0;
    }
}


/* Chat Window */

#chatbot-window{
    position: fixed;
    bottom: 110px;
    right: 30px;
    width: 360px;
    height: min(520px, 75dvh);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 99999;
    animation: slideUp .4s ease;
}

@keyframes slideUp{
    from{transform:translateY(30px);opacity:0}
    to{transform:translateY(0);opacity:1}
}

/* Header */

#chatbot-top{
    padding: 15px;
    background: linear-gradient(135deg,#005eff,#00c2ff);
    color: white;
    font-weight: bold;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#chatbot-close{
    cursor: pointer;
    font-size: 18px;
}

#chatbot-close:hover{
    transform: scale(1.2);
    transition: 0.2s;
}


.dot{
    animation: blink 1.4s infinite both;
   }
   
   .dot:nth-child(2){animation-delay:.2s}
   .dot:nth-child(3){animation-delay:.4s}
   
   @keyframes blink{
    0%{opacity:.2}
    20%{opacity:1}
    100%{opacity:.2}
   }
   

/* Messages */

#chatbot-messages{
    flex:1;
    padding: 12px;
    overflow-y:auto;
    background: #f6f9ff;
}

.user{
    background:#005eff;
    color:white;
    padding:10px 14px;
    border-radius:16px 16px 0 16px;
    max-width:80%;
    margin:6px 0 6px auto;
}

.bot{
    background:white;
    padding:10px 14px;
    border-radius:16px 16px 16px 0;
    max-width:80%;
    margin:6px 0;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
}

/* Input */

#chatbot-input-box{
    display:flex;
    padding:10px;
    border-top:1px solid #ddd;
}

#chatbot-input-box input{
    flex:1;
    padding:10px;
    border:none;
    border-radius:20px;
    background:#f1f1f1;
}

#chatbot-input-box button{
    width:45px;
    height:45px;
    border:none;
    margin-left:8px;
    border-radius:50%;
    background:#005eff;
    color:white;
}

.msg-label{
    font-size:11px;
    font-weight:bold;
    margin-bottom:3px;
    color:#666;
}

.user-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.bot-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}


/* Mobile */

@media(max-width:600px){
    #chatbot-window{
        width:95%;
        right:2.5%;
        height: 65dvh;
    }
}