body{
    overflow: hidden;
}

.chatbot-wrapper {
    display: flex;
    justify-content: center; /* Centers the chatbot container horizontally */
    align-items: center; /* Centers it vertically */
    height: 85vh; /* Full viewport height */
    background: linear-gradient(135deg, #f0f4f8, #d1e8e2); /* Gradient background */
    position: relative; /* Add position relative for absolute positioning */
    overflow: hidden; /* Prevent overflow */
}

.chatbot-container {
    border: 2px solid #007bff; /* Border color for emphasis */
    border-radius: 10px;
    width: 450px; /* Increased width */
    height: 600px; /* Increased height */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Deeper shadow for depth */
    background: #ffffff; /* White background for modern look */
    overflow: hidden; /* Prevents overflow */
}

.chatbot-header {
    background-color: #007bff; /* Header color */
    color: white;
    padding: 20px; /* Increased padding */
    text-align: center;
    border-radius: 10px 10px 0 0;
    font-family: 'Arial', sans-serif; /* Font family */
    font-weight: bold; /* Bold text */
}

.chatbot-messages {
    flex: 1;
    padding: 15px; /* Padding for message area */
    overflow-y: auto; /* Enable vertical scrolling */
    display: flex;
    flex-direction: column; /* Column direction for messages */
    scroll-behavior: smooth; /* Smooth scrolling */
}

.chat-message {
    margin: 10px 0; /* Margin for spacing */
    padding: 12px; /* Increased padding for messages */
    border-radius: 8px; /* Rounded corners for messages */
    max-width: 80%; /* Limited width for messages */
    position: relative; /* Allows for positioning elements inside */
}

.user {
    align-self: flex-end; /* Align user messages to the right */
    background-color: #e0f7fa; /* Light cyan for user messages */
    color: #00796b; /* Darker shade for text */
}

.bot {
    align-self: flex-start; /* Align bot messages to the left */
    background-color: #c8e6c9; /* Light green for bot messages */
    color: #388e3c; /* Darker shade for text */
}
.typing {
    font-style: italic;
    color: gray;
}
.message-time {
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
    display: block;
}

.chatbot-input {
    display: flex;
    padding: 15px; /* Increased padding */
    border-top: 1px solid #ccc; /* Border for separation */
    background: #f1f1f1; /* Light background for input area */
}

.chatbot-input input {
    flex: 1;
    padding: 15px; /* Increased padding for input */
    border-radius: 5px;
    border: 1px solid #ccc; /* Light border */
    font-size: 16px; /* Increased font size */
    transition: border 0.3s; /* Transition effect */
}

.chatbot-input input:focus {
    border-color: #007bff; /* Change border color on focus */
}

.chatbot-input button {
    padding: 15px; /* Increased padding for button */
    margin-left: 10px; /* Margin for spacing */
    background-color: #007bff; /* Button color */
    color: white;
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s; /* Transition effect */
    font-size: 16px; /* Increased font size */
}

.chatbot-input button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.quick-replies {
    display: flex;
    flex-wrap: wrap; /* Allows the buttons to wrap */
    margin-top: 10px; /* Space above the quick replies */
}

.quick-reply-button {
    margin: 5px; /* Space between buttons */
    padding: 10px 15px; /* Padding for buttons */
    background-color: #007bff; /* Button color */
    color: white;
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s; /* Transition effect */
}

.quick-reply-button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}



#chatbot-messages {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 10px;
}

.chat-message {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 8px;
    background-color: #e9e9e9;
    max-width: 70%;
    word-wrap: break-word;
}

.chat-message.user {
    background-color: #d1f7d6;
    text-align: right;
}

.chat-message.bot {
    background-color: #d1e7f3;
}

.message-time {
    font-size: 0.8rem;
    color: #777;
    margin-left: 5px;
}

#quick-replies button {
    background-color: #3c8d9c;
    color: white;
    border: none;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
}

#quick-replies button:hover {
    background-color: #2a6c6b;
}