/* ===============================
CHATBOT POPUP
=============================== */

.chatbot-popup{
    position:fixed;
    bottom:90px;
    right:20px;
    width:380px;
    max-width:95%;
    height:540px;
    max-height:80vh;
    background:#ffffff;
    border-radius:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.18);
    display:none;
    flex-direction:column;
    overflow:hidden;
    z-index:9999;
    animation:chatOpen .35s ease;
    backdrop-filter: blur(8px);
}

/* popup animation */
@keyframes chatOpen{
    from{
        transform:translateY(40px) scale(.95);
        opacity:0;
    }
    to{
        transform:translateY(0) scale(1);
        opacity:1;
    }
}

/* ===============================
CHAT HEADER
=============================== */
.chat-header{
    background: #ed7528; /* modified to solid orange */
    color:#fff;
    padding:16px 18px;
    font-weight:600;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:15px;
}

.chat-header span{
    opacity:.9;
    font-size:13px;
}

/* ===============================
CHAT MESSAGES AREA
=============================== */
.chat-messages{
    flex:1;
    overflow-y:auto;
    padding:18px;
    background:#f8fafc;
    display:flex;
    flex-direction:column;
    scroll-behavior:smooth;
}

/* custom scrollbar */
.chat-messages::-webkit-scrollbar{
    width:6px;
}
.chat-messages::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:10px;
}

/* ===============================
MESSAGE BUBBLES
=============================== */
.message{
    max-width:78%;
    padding:10px 14px;
    border-radius:14px;
    margin-bottom:10px;
    font-size:14px;
    line-height:1.4;
    animation:messageFade .25s ease;
}

/* message animation */
@keyframes messageFade{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* BOT MESSAGE */
.bot{
    background:#fde8d4; /* changed from greenish to light orange */
    color:#b45309; /* text darker orange */
    align-self:flex-start;
    border-bottom-left-radius:4px;
}

/* USER MESSAGE */
.user{
    background:#fef3c7; /* light yellow/orange */
    color:#78350f; /* darker text */
    align-self:flex-end;
    border-bottom-right-radius:4px;
}

/* ===============================
TYPING ANIMATION
=============================== */
.typing{
    font-style:italic;
    opacity:.7;
}
.typing span{
    animation:typingDots 1.4s infinite;
}
.typing span:nth-child(2){
    animation-delay:.2s;
}
.typing span:nth-child(3){
    animation-delay:.4s;
}
@keyframes typingDots{
    0%{opacity:.2}
    50%{opacity:1}
    100%{opacity:.2}
}

/* ===============================
CHAT INPUT
=============================== */
.chat-input{
    display:flex;
    border-top:1px solid #eee;
    background:#fff;
}
.chat-input input{
    flex:1;
    border:none;
    padding:12px 14px;
    outline:none;
    font-size:14px;
}
.chat-input button{
    background:#ed7528; /* changed from green to orange */
    color:white;
    border:none;
    padding:12px 18px;
    cursor:pointer;
    transition:.25s;
}
.chat-input button:hover{
    background:#f28c28; /* slightly lighter orange */
}

/* ===============================
OPTION BUTTONS
=============================== */
.option-btn{
    margin:5px 0;
    padding:9px 14px;
    border:none;
    background:#ed7528; /* changed from green */
    color:white;
    border-radius:8px;
    cursor:pointer;
    transition:.25s;
    font-size:13px;
    align-self:flex-start;
}
.option-btn:hover{
    transform:translateY(-2px);
    background:#f28c28; /* hover lighter orange */
    box-shadow:0 6px 16px rgba(0,0,0,.15);
}

/* ===============================
CHAT TOGGLE BUTTON
=============================== */
.chat-toggle-btn{
    position:fixed;
    bottom:20px;
    right:20px;
    width:64px;
    height:64px;
    border-radius:50%;
    background:#ed7528; /* changed from gradient green */
    color:white;
    font-size:26px;
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    animation:floatBubble 3s infinite ease-in-out;
    z-index:9999;
    transition:.25s;
}
.chat-toggle-btn:hover{
    transform:scale(1.05);
    background:#f28c28; /* hover lighter orange */
}

/* floating animation */
@keyframes floatBubble{
    0%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
    100%{transform:translateY(0);}
}

/* ===============================
NOTIFICATION BADGE
=============================== */
.chat-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    background:red;
    color:white;
    font-size:11px;
    width:22px;
    height:22px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,.3);
}

/* ===============================
WHATSAPP BUTTON
=============================== */
.wa-btn{
    background:#25D366;
    padding:10px 15px;
    border-radius:8px;
    border:none;
    margin-top:8px;
    cursor:pointer;
    transition:.25s;
}
.wa-btn a{
    color:white;
    text-decoration:none;
    font-size:14px;
    display:block;
}
.wa-btn:hover{
    transform:scale(1.05);
    box-shadow:0 8px 18px rgba(0,0,0,.2);
}

/* ===============================
MOBILE OPTIMIZATION
=============================== */
@media(max-width:480px){
    .chatbot-popup{
        width:94%;
        right:3%;
        height:70vh;
        bottom:80px;
    }
    .chat-toggle-btn{
        width:58px;
        height:58px;
        font-size:24px;
    }
    .chat-input input{
        font-size:13px;
    }
}