/* General Reset */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f6f9;
}

/* Floating Button */
#floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
}

#floating-button img {
    width: 95%;
    height: auto;
}

/* Chat Container */
#chat-container {
    position: fixed;
    bottom: 90px; /* Keeps the chat just above the floating button */
    right: 20px;
    width: 400px;
    height: 500px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden; /* Keeps it hidden initially */
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; /* Smooth visibility and opacity transition */
    z-index: 9999;
}

/* Chat Container Animation */
#chat-container.show {
    opacity: 1;
    visibility: visible; /* Makes it visible when class 'show' is added */
    transition: opacity 0.5s ease-in-out, visibility 0s; /* Makes it appear smoothly */
}

/* Chat Header */
#chat-header {
    background-color: #2c3e50;
    color: white;
    /* padding: 15px; */
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Chat Body */
#chat-body {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top: 1px solid #ddd;
}

/* Scrollbar for messages */
#messages {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#messages::-webkit-scrollbar {
    width: 8px;
}

#messages::-webkit-scrollbar-thumb {
    background-color: #2c3e50;
    border-radius: 5px;
}

#messages::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/* Chat Footer */
#chat-footer {
    display: flex;
    padding: 12px;
    background-color: #ecf0f1;
    border-top: 1px solid #ddd;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
}

#user-input {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding-right: 40px; /* Add space for sender logo */
}

/* Input box on focus */
#user-input:focus {
    outline: none;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Sender Logo on the right */
#sender-logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Adjust logo size */
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* Send Button */
#send-button {
    background-color: #3498db8a;
    border: none;
    color: white;
    padding: 10px 20px;
    margin-left: 10px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    display: flex;  /* Use flexbox to center content */
    justify-content: center;  /* Center horizontally */
    align-items: center;  /* Center vertically */
    width: 40px;  /* Adjust width */
    height: 40px;  /* Adjust height */
}

#send-button:hover {
    background-color: #2980b9;
}

#send-button img {
    width: 30px;  /* Adjust the size of the logo */
    height: 30px; /* Adjust the size of the logo */
}

/* Message Styles */
.user-message,
.bot-message {
    display: flex;
    gap: 10px;
}

.user-message {
    justify-content: flex-end; /* Align to right */
    text-align: right;
}

.bot-message {
    justify-content: flex-start; /* Align to left */
}

/* Sender Details (Profile Picture) */
.sender-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sender-details img {
    width: 20px;  /* Reduced logo size */
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* Message Bubble */
.message-bubble {
    padding: 10px;
    border-radius: 12px;
    max-width: 70%;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.4;
}

.bot-message .message-bubble {
    background-color: #ecf0f1;
    color: #333;
    border-radius: 12px 12px 12px 0;
}

.user-message .message-bubble {
    background-color: #3498db;
    color: white;
    border-radius: 12px 12px 0 12px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #floating-button {
        width: 50px;
        height: 50px;
        bottom: 20px;
    }

    #floating-button img {
        width: 80%;
    }

    #chat-container {
        width: 350px;
        height: 450px;
        bottom: 80px;
    }

    #chat-header {
        font-size: 16px;
        padding: 10px;
    }

    #chat-body {
        padding: 10px;
    }

    #chat-footer {
        padding: 10px;
    }

    #user-input {
        font-size: 12px;
        padding: 10px;
    }

    .user-message,
    .bot-message {
        font-size: 12px;
        max-width: 75%;
    }

    .sender-details img {
        width: 18px;
        height: 18px;
    }
}

/* Smaller Screens (Mobile) */
@media (max-width: 480px) {
    #floating-button {
        width: 45px;
        height: 45px;
        bottom: 10px;
    }

    #floating-button img {
        width: 70%;
    }

    #chat-container {
        width: 280px;
        height: 380px;
    }

    #chat-header {
        font-size: 14px;
        padding: 8px;
    }

    #chat-body {
        padding: 8px;
    }

    #chat-footer {
        padding: 8px;
    }

    #user-input {
        font-size: 10px;
        padding: 8px;
    }

    .user-message,
    .bot-message {
        font-size: 10px;
        max-width: 70%;
    }

    .sender-details img {
        width: 15px;
        height: 15px;
    }
}