/* Floating Icon */
/* #chatIcon{
    position:fixed;
    bottom:20px;
    right:20px;
    width:60px;
    height:60px;
    background:#007bff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:25px;
    cursor:pointer;
    box-shadow:0 5px 20px rgba(0,0,0,0.3);
    z-index:9999;
} */

/* The Floating Container */
#chatbot-chatIcon {
    position: fixed;
    bottom: 70px;
    right: 20px;
    width: 80px;
    height: 80px;
    background: #ffffff; /* The blue background from your original code */
    border-radius: 50%; /* This creates the perfect circle */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3); /* Your original shadow effect */
    z-index: 9999;
    overflow: hidden; 
}

.chatbot-bubble {
    position: fixed;
    bottom: 125px;
    right: 75px;
    width: 150px;
    z-index: 9999;
}

/* Bubble style */
.chatbot-bubble-svg {
    width: 100%;
    height: auto;
    fill: #b3e7f7;        /* bubble color */
    stroke: #333;
    stroke-width: 2;
}

/* Text */
.chatbot-bubble span {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    width: 75%;
    color: #333;
}

/* .chatbot-bubble {
    position: fixed;
    bottom: 130px;
    right: 100px;
    z-index: 9999;
}

.chatbot-bubble img {
    width: 100px;
}

.chatbot-bubble span {
    position: absolute;
    top: 52%;   
    left: 50%;
    transform: translate(-50%, -50%);
    
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    width: 60%;
} */
/* Specific styling for the image itself */
#chatbot-chatIcon img {
    /* Make the image fill the circular container */
    width: 100%;
    height: 100%;
    
    /* NEW & ESSENTIAL: Prevents the image from stretching. hatBody
       'cover' scales and centers the GIF within the circle. */
    object-fit: cover; 
}

/* Chat Window */
#chatbot-chatWindow{
    position:fixed;
    bottom:90px;
    right:20px;
    width:360px;
    height:720px;
    background:white;   /* solid background */
    border-radius:15px;
    box-shadow:0 10px 40px rgba(0,0,0,0.3);
    display:none;
    flex-direction:column;
    overflow:hidden;
    z-index:9999;
    font-family: Arial;
}

/* Header */
.chatbot-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background: #007bff; */
    background: #13717b;
    color: white;
    padding: 10px 15px;
    font-weight: bold;
}

.chatbot-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chatbot-bot-logo {
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.chatbot-bot-title {
    font-size: 16px;
}

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

#chatbot-clearChatBtn{
    background:none;
    border:none;
    font-size:18px;
    cursor:pointer;
}

#chatbot-clearChatBtn:hover{
    color:red;
}

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

#chatbot-speakerBtn:hover{
    opacity:0.7;
}

.chatbot-chat-controls{
    text-align: right;
}

.chatbot-chat-body{
    flex:1;
    padding:15px;
    overflow-y:auto;
    background:#eafcfd;
    color:#222;
    display:flex;
    flex-direction:column;
}


.message{
    padding:10px 14px;
    border-radius:18px;
    margin:8px 0;
    max-width:75%;
    font-size:14px;
    display:inline-block;
    word-wrap:break-word;
}
.message.typing {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f1f1f1;
    padding: 8px 12px;
    border-radius: 18px;
    width: fit-content;
}

.message.typing span {
    width: 6px;
    height: 6px;
    background: #555;
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
}

.message.typing span:nth-child(1) { animation-delay: -0.32s; }
.message.typing span:nth-child(2) { animation-delay: -0.16s; }
.message.typing span:nth-child(3) { animation-delay: 0s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}
/* BOT MESSAGE (LEFT) */
.bot{
    background:#cae5ef;
    color:#000;
    align-self:flex-start;
    border-bottom-left-radius:4px;
}

/* USER MESSAGE (RIGHT) */
.user-chatbot{
    /* background:#007bff; */
    background:#aa2e25;

    color:white;
    align-self:flex-end;
    margin-left:auto;
    border-bottom-right-radius:4px;
}

/* #chatbot-chatWindow button {
    padding: 8px 14px;
    margin: 4px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background: #f75e53;
    color: white;
    width: 160px;
    font-size: 14px;
} */

#chatbot-chatWindow .buttons button {
    padding: 8px 14px;
    margin: 4px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    width: 160px;
    background: #2b7d8f !important;
    color: white !important;
    font-size: 14px !important;
}


/* Hover effect */
#chatbot-chatWindow .buttons button:hover {
    background: #0e4e6a !important;
}

/* Disabled / old buttons */
#chatbot-chatWindow .buttons button.disabled-btn {
    background: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}
.separator{
    width:100%;
    text-align:center;
    font-size:11px;
    color:#999;
    margin:8px 0;
}

/* Typing dots */
.typing{
    display:flex;
    gap:4px;
}
.typing span{
    width:7px;
    height:7px;
    background:#555;
    border-radius:50%;
    animation:bounce 1.2s infinite;
}
.typing span:nth-child(2){animation-delay:.2s;}
.typing span:nth-child(3){animation-delay:.4s;}

@keyframes bounce{
    0%,80%,100%{transform:scale(0);}
    40%{transform:scale(1);}
}
#chatInputBar{
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding: 7px;
    background: #fff;
    border-top: 1px solid #ccc;
}

#chatInput{
    width: 100%;
    padding: 3px;
}
#sendBtn {
    background: #aa2e25;   /* active (default) */
    color: white;
    cursor: pointer;
}


#sendBtn:disabled {
    background: grey;
    cursor: not-allowed;
    opacity: 0.7;
}
#faqSuggestions{
    position: absolute;
    bottom: 45px;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    display: none;
    z-index: 999;
}

#faqSuggestions div{
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

#faqSuggestions div:hover{
    background: #f1f1f1;
}