#chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 600px;
    height: 700px; /* Fixed height */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    z-index: 9999;
    background-color: white;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

#chatbot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    position: relative;
}




#chatbot-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

#chatbot-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

#chatbot-messages {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto; /* Scrollable messages */
    max-height: calc(100% - 150px); /* Prevents the avatar and input from scrolling */
}

#chatbot-footer {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
    background-color: white;
}

#chatbot-input {
    flex-grow: 1;
    padding: 10px;
    margin-right: 10px;
    color: black; /* Set text color to black */
    background-color: white; /* Ensure background remains white */
}


/* Adjusted for bigger chatbot toggle icon */
#chatbot-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 150px;  /* Increased size */
    height: 150px; /* Increased size */
    cursor: pointer;
    border-radius: 50%;
    animation: bounce 2s infinite;
    z-index: 9998;
    background-size: cover;
    background-position: center;
    /* Removed position: relative; to prevent icon from being hidden */
}

/* Minimize button (cross) on the icon */
#chatbot-toggle-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: none;
    font-size: 24px;
    color: black; /* Set color to be visible */
    cursor: pointer;
    z-index: 9999; /* Ensure the cross button is clickable */
}


/* Minimized stripe when icon is hidden */
#chatbot-minimized {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #ff4800;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    display: none; /* Hidden by default until the chatbot is minimized */
}

/* Set background color for send button */
#chatbot-send {
    background-color: #ffffff !important; /* Apply background color */
    color: black !important; /* Ensure text color contrast */
    border-radius: 20px !important; /* Rounded corners */
}
/* Set background color for chatbot-speech */
#chatbot-speech {
    background-color: #ffffff !important; /* Apply background color */
    color: white !important; /* Ensure text color contrast */
    border-radius: 20px 0px 0px 20px !important; /* Left top and left bottom corners 10px, right top and right bottom corners 0 */
}
/* Set background color for chatbot-mute */
#chatbot-mute {
    background-color: #ffffff !important; /* Apply background color */
    color: white !important; /* Ensure text color contrast */
    border-radius: 0px 20px 20px 0px !important; /* Right top and right bottom corners 10px, left top and left bottom corners 0 */
}






/* Adjusted button sizes */
#chatbot-send, #chatbot-speech, #chatbot-mute {
    width: 100%; /* Adjust width to be 80% of the button size */
    height: 100%; /* Adjust height to be 80% of the button size */
    font-size: 100%; /* Adjust font size if needed */
    margin: 0px; /* Add some margin for spacing */
}

/* Media query for mobile devices */
@media only screen and (max-width: 768px) {

    /* Adjusted button sizes for mobile */
    #chatbot-input {
        width: 83%; /* Adjust width to be 80% of the button size on mobile */
        height: 80%; /* Full height */
        font-size: 100%; /* Adjust font size if needed */
        margin: 0px; /* Add some margin for spacing */
    }

    #chatbot-send, #chatbot-speech, #chatbot-mute {
        width: 17%; /* Adjust width to be 20% on mobile */
        height: 110%; /* Full height */
        font-size: 60%; /* Adjust font size if needed */
        margin: 0px; /* Add some margin for spacing */
    }
}



/* Bounce animation for avatar */
@keyframes bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}