/* --- General Page Setup (Assumes a Navbar/Header exists above the chatbot) --- */
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* This is the key change */
    margin: 0;             /* Remove default body margin */
    /* End of key change */

    min-height: 100vh;     /* Full viewport height */
    overflow-x: hidden;    /* Prevent horizontal scrollbar */

    /* Page background image - make sure this path is correct relative to style.css */
    /* background-image: url('header.jpg'); Or whichever image you're using for the body background */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Keeps background fixed when page scrolls */

    /* Push content down to account for a fixed header (adjust padding-top as needed) */
    /* padding-top: 80px; Example: Assuming your navbar is around 60-70px tall + some spacing */
    box-sizing: border-box; /* Include padding in element's total width/height */
}

/* ... (rest of your CSS remains the same) ... */

.header {
    width: 100%;
    position: fixed; /* Makes the header stick to the top */
    top: 0;           /* Ensures it's flush with the very top of the viewport */
    left: 0;
    z-index: 1000;
    /* ... rest of header styles ... */
}
/* --- Chatbot Container Styling (MODIFIED FOR CENTERING) --- */
#chat-container {
    width: 90vw; /* Take 90% of viewport width */
    max-width: 800px; /* Limit max width for very large screens */
    height: 75vh; /* Take 75% of viewport height (leaves space for header/footer) */
    max-height: 600px; /* Limit max height */

    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white base for container */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* Stronger, softer shadow */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide content that overflows rounded corners */

    /* Cool Animation: Fade in and slightly scale up */
    animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0; /* Start hidden for animation */
    /* transform: translateY(20px) scale(0.98); // This will be part of combined transform */

    /* Border Area for Chatbot */
    border: 2px solid rgba(70, 130, 180, 0.7); /* SteelBlue border with more transparency */
    margin-top: 20px; /* Space below the presumed navbar */
    margin-bottom: 20px; /* Space at the bottom */

    /* --- CENTERING WITHOUT MODIFYING BODY --- */
    position: absolute; /* Allows precise positioning relative to the first positioned ancestor (body) */
    left: 50%; /* Moves the left edge of the element to the center of the viewport */
    transform: translateX(-50%) translateY(20px) scale(0.98); /* Shifts element back by half its own width for centering, combined with initial animation state */
    /* We need to adjust the slideInUp keyframe to not include the initial transform,
       or combine it with the initial transform state here. Let's adjust keyframe. */
}

/* Chatbot container entry animation */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(40px) scale(0.95); /* Apply centering here too */
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1); /* Maintain centering, finish animation */
    }
}

/* --- Chat Box (Messages Area) Styling - Contains the Blur --- */
#chat-box {
    /* REMOVED: align-items: center; from here, it's not applicable to flex-direction column directly for main axis */
    flex-grow: 1; /* Allows chat box to take available vertical space */
    padding: 15px;
    overflow-y: auto; /* Enable vertical scrolling for messages */
    display: flex;
    flex-direction: column;
    gap: 12px; /* Space between message bubbles */
    scroll-behavior: smooth; /* Smooth scrolling to new messages */

    /* Blurred Background for Chat Box */
    background-image: url('header.jpg'); /* IMPORTANT: This path must be correct relative to style.css */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: local; /* Scrolls with the chat messages */

    /* Pseudo-element for the blur and semi-transparent overlay */
    position: relative; /* Needed for ::before pseudo-element */
    z-index: 1; /* Ensure messages are above this background layer */
}

/* Pseudo-element to apply the semi-transparent color and blur over the image */
#chat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3); /* Lighter semi-transparent white overlay */
    backdrop-filter: blur(10px); /* Slightly stronger blur */
    -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
    z-index: -1; /* Place this blur layer behind the messages but above the background image */
}

/* Scrollbar styling (for Webkit browsers like Chrome, Safari) */
#chat-box::-webkit-scrollbar {
    width: 8px;
    background-color: rgba(0, 0, 0, 0.05); /* Very light, subtle track */
    border-radius: 4px;
}

#chat-box::-webkit-scrollbar-thumb {
    background-color: #87ceeb; /* Sky blue scrollbar thumb */
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

#chat-box::-webkit-scrollbar-thumb:hover {
    background-color: #61a9cf; /* Darker blue on hover */
}

/* --- Message Bubble Styling --- */
.message {
    /* REMOVED: align-items: center; from here - messages align using align-self */
    padding: 12px 18px; /* Slightly larger padding */
    border-radius: 25px; /* More rounded corners */
    max-width: 80%; /* Slightly narrower message width */
    word-wrap: break-word; /* Prevents long words from breaking layout */
    opacity: 0; /* Start hidden for animation */
    transform: translateY(20px); /* More pronounced entry movement */
    animation: messagePopIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; /* Bouncy entry animation */
    position: relative; /* Ensure z-index works for messages */
    z-index: 2; /* Make messages appear above the blur layer */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Clearer shadow */
}

/* Bouncy entry animation for individual messages */
@keyframes messagePopIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.8);
    }
    70% {
        opacity: 1;
        transform: translateY(-5px) scale(1.05); /* Overshoot for bounce */
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.message.user {
    background-color: #4682b4; /* SteelBlue for user messages */
    color: white;
    align-self: flex-end; /* Align user messages to the right */
    border-bottom-right-radius: 10px; /* Sharpen bottom-right corner */
}

.message.bot {
    background-color: rgba(224, 246, 255, 0.95); /* Very light sky blue for bot messages, more opaque */
    color: #333;
    align-self: flex-start; /* Align bot messages to the left */
    border-bottom-left-radius: 10px; /* Sharpen bottom-left corner */
}

/* --- Input Area Styling --- */
#input-area {
    /* REMOVED: align-items: center; from here - this is for flex-direction: row, which it already is by default */
    display: flex;
    padding: 15px;
    border-top: 1px solid #cceeff; /* Very light blue subtle border at the top of the input area */
    background-color: rgba(255, 255, 255, 0.98); /* Almost opaque white for input area background */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15); /* Stronger shadow on top of input area */
    position: relative;
    z-index: 3;
}

#chat-input {
    /* REMOVED: align-items: center; from here - not applicable to input */
    flex-grow: 1; /* Allows input field to take most of the width */
    padding: 12px 20px; /* Slightly more padding */
    border: 1px solid #aaddf0; /* Lighter sky blue border for input */
    border-radius: 28px; /* More rounded corners */
    margin-right: 10px;
    font-size: 1em; /* Slightly larger font */
    outline: none;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#chat-input:focus {
    border-color: #61a9cf; /* Darker sky blue border on focus */
    box-shadow: 0 0 0 5px rgba(135, 206, 235, 0.5); /* Stronger, softer sky blue glow on focus */
}

#send-button {
    background-color: #87ceeb; /* Sky blue send button */
    color: white;
    border: none;
    border-radius: 28px; /* More rounded corners */
    padding: 12px 22px; /* Slightly more padding */
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease-in-out, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smoother, bouncy transition */
}

#send-button:hover {
    background-color: #61a9cf; /* Darker sky blue on hover */
    transform: translateY(-3px); /* More pronounced lift effect */
}

#send-button:active {
    background-color: #4a8aa8; /* Even darker sky blue when clicked */
    transform: translateY(0); /* Press effect */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); /* Inset shadow for press */
}

/* --- Typing Indicator for Bot --- */
.typing-indicator {
    font-style: italic;
    color: #666;
    animation: smooth-pulse 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1); /* Smoother and more natural pulse */
    align-self: flex-start; /* Align like a bot message */
    padding: 10px 15px; /* Slightly more padding */
    border-radius: 20px; /* More rounded */
    max-width: 70%;
    word-wrap: break-word;
    background-color: #f0f0f0; /* Ensure it has a background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Animation for the typing indicator */
@keyframes smooth-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* --- Responsive Adjustments (for Chatbot) --- */
@media (max-width: 768px) {
    body {
        padding-top: 60px; /* Adjust if your mobile navbar is shorter */
    }
    #chat-container {
        width: 95vw; /* Make it wider on small screens */
        height: 80vh; /* Adjust height */
        max-height: none; /* Remove max height constraint on smaller screens */
        border-radius: 10px; /* Slightly less rounded for smaller screens */
        margin-top: 10px;
        margin-bottom: 10px;
        /* Re-center for mobile */
        left: 50%;
        transform: translateX(-50%) translateY(0) scale(1); /* Ensure it's centered on mobile */
    }
    .message {
        max-width: 90%; /* Allow messages to take more width on small screens */
    }
    #chat-input, #send-button {
        padding: 10px 15px;
        font-size: 0.9em;
    }
}