body {
    font-family: 'Inter', Roboto, Arial, sans-serif; /* Changed to Inter as per HTML link */
    margin: 0;
    padding: 0;
    background-color: #f0f2f5; /* A soft, light gray for the overall page background */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center; /* This centers the main-chat-wrapper horizontally */
    font-size: 13px; /* Base font size for the body */
}

/* New wrapper for centering chat content and input on desktop */
/* This div will fill the vertical space between the header and the fixed input area */
.main-chat-wrapper {
    /* Takes up remaining vertical space after fixed header and before fixed input-area-wrapper */
    padding-top: 80px; /* Space for the fixed header */
    padding-bottom: 90px; /* Space for the fixed input area wrapper */
    box-sizing: border-box; /* Include padding in height calculation */
}

/* Desktop-specific styles */
@media (min-width: 769px) {
    .main-chat-wrapper {
        max-width: 900px; /* Max width for the entire chat content area on desktop */
        width: 100%; /* Ensure it still uses full width up to max-width */
        margin-left: auto; /* Centers the wrapper horizontally */
        margin-right: auto; /* Centers the wrapper horizontally */
        padding-left: 20px; /* Add some horizontal padding inside the centered content area */
        padding-right: 20px; /* Add some horizontal padding inside the centered content area */
    }

    /* The chat-messages itself is naturally contained by the main-chat-wrapper's max-width */
    /* No additional centering or max-width needed here as its parent handles it */
    .chat-messages {
        /* Already has width: 100% (from w-full in html) */
        /* It will naturally be contained by main-chat-wrapper's max-width */
        /* If you wanted the whole chat bubble area to be narrower than its parent, you'd add max-width and margin: auto here */
    }

    .input-area-wrapper {
        /* This wrapper handles the fixed positioning and centering for the input area */
        max-width: 900px; /* Same max-width as main-chat-wrapper for alignment */
        left: 50%; /* Moves the left edge of the wrapper to the horizontal center */
        transform: translateX(-50%); /* Shifts the wrapper back by half its width to truly center it */
        padding-left: 20px; /* Match main content padding */
        padding-right: 20px; /* Match main content padding */
        box-sizing: border-box;
    }
    
    .input-area {
        /* Ensures the inner input area fills the width of its centered wrapper */
        width: 100%;
    }

    .message {
        max-width: 70%; /* Adjust message bubble max-width for desktop for better readability and to avoid being too wide */
    }
}


/* Header section styles */
.header {
    background-color: white; /* Changed to white for a solid header */
    color: #202124; /* Adjusted text color for readability on white background */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Added subtle shadow for definition */
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

.header-logo {
    /* No specific styles here from original */
}

.header-title {
    display: none;
    font-size: 20px;
    font-weight: 500;
    color: #202124;
}

/* Chat messages area styles */
.chat-messages {
    flex-grow: 1; /* Allows the chat messages area to grow and fill available space */
    padding: 20px;
    overflow-y: auto; /* Enables vertical scrolling for messages */
    display: flex;
    flex-direction: column; /* Stacks messages vertically */
    scrollbar-width: thin; /* Firefox scrollbar */
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent; /* thumb and track color for Firefox */
    
    /* NEW: margin-top and margin-bottom are now handled by main-chat-wrapper's padding */
    /* Removed: margin-top: 80px; margin-bottom: 90px; */
    
    /* width: 100%; (already w-full in HTML) */
    /* max-width: 100%; (already w-full in HTML) */
}

/* Custom scrollbar for Webkit browsers */
.chat-messages::-webkit-scrollbar {
    width: 8px; /* thinner scrollbar */
}
.chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15); /* light, subtle thumb */
    border-radius: 4px;
}
.chat-messages::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Message bubble styles (general) */
.message {
    margin-bottom: 40px; /* Increased to make space for icons below the bubble */
    padding: 16px 20px 16px 20px; /* Balanced top and bottom padding */
    border-radius: 24px;
    max-width: 80%; /* Keep messages within a readable width even if chat area is full width */
    clear: both; /* Ensures messages don't float next to each other */
    word-break: break-word; /* Breaks long words to prevent overflow */
    position: relative; /* Essential for positioning child elements like copy/TTS icons */
    background-color: white; /* Ensure message bubbles are visible on background */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Keep a subtle shadow */
}

/* Code blocks within messages */
.message pre {
    background-color: #2d2d2d; /* Dark background for code */
    color: #f8f8f2; /* Light text color */
    padding: 10px;
    border-radius: 8px;
    overflow-x: auto; /* Enable horizontal scrolling for overflow */
    white-space: pre-wrap; /* Wrap long lines if possible */
    word-break: break-word; /* Break words to prevent overflow */
    max-width: 100%; /* Ensure it doesn't exceed parent width */
    box-sizing: border-box; /* Include padding in width calculation */
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; /* Monospace font for code */
    font-size: 0.9em; /* Slightly smaller font size for code */
    margin-top: 10px; /* Space above code block */
    margin-bottom: 10px; /* Space below code block */
    position: relative; /* Needed for positioning the copy button inside */
}

.message code {
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; /* Consistent monospace font for inline code */
    background-color: rgba(0, 0, 0, 0.1); /* Light background for inline code */
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.9em;
    word-break: break-all; /* Break words for inline code */
}

/* Styles for the copy code button */
.copy-code-button {
    position: absolute;
    top: 5px; /* Position from top */
    right: 5px; /* Position from right */
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
    border: none;
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8em;
    color: #f8f8f2; /* Text color for "Copy" */
    opacity: 1; /* Always visible */
    transition: background-color 0.2s ease; /* Only transition background on hover */
    z-index: 1; /* Ensure it's above the code content */
}

.copy-code-button:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Slightly more opaque on hover */
}

.copy-code-button svg {
    width: 14px; /* Smaller icon for code copy button */
    height: 14px;
    fill: #f8f8f2; /* Icon color (matches text) */
}

/* Style for the "Copied!" feedback on code blocks */
.copy-feedback.code-copy-feedback {
    position: absolute;
    top: 35px; /* Position below the button */
    right: 5px;
    transform: none; /* Override default transform */
    background-color: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
}

/* User message bubble */
.user-message {
    background-color: #e8f0fe;
    color: #202124;
    align-self: flex-end; /* Aligns to the right within the flex container */
    float: right; /* Not strictly necessary with align-self, but kept from original */
}

/* AI message bubble */
.ai-message {
    background-color: #f0f0f0;
    color: #202124;
    align-self: flex-start; /* Aligns to the left within the flex container */
    float: left; /* Not strictly necessary with align-self, but kept from original */
}

/* Styling for system messages (e.g., "Response stopped by user.") */
.system-message {
    background-color: #e0e0e0; /* A neutral background */
    color: #555;
    text-align: center; /* Center the text */
    align-self: center; /* Center the bubble itself within the flex container */
    font-style: italic; /* Make it look like an info message */
    max-width: 60%; /* Adjust width as needed */
    margin-left: auto; /* Center alignment */
    margin-right: auto; /* Center alignment */
    padding: 8px 15px; /* Slightly less padding than regular messages */
    font-size: 0.9em; /* Slightly smaller font */
    border-radius: 16px; /* Rounded corners for system messages */
    margin-bottom: 20px; /* Space below system message */
}

/* Styles for the copy icon container (general message copy) */
.copy-icon-container {
    position: absolute;
    bottom: -28px; /* Moved below the bubble by a fixed amount */
    right: 5px; /* Aligned to the right */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 10;
}

.message:hover .copy-icon-container {
    opacity: 1; /* Show on message hover */
}

.copy-icon-container:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.copy-icon-container svg {
    width: 16px;
    height: 16px;
    fill: #555;
}

/* Style for the "Copied!" feedback on general message copy */
.copy-feedback {
    position: absolute;
    bottom: -25px; /* Adjusted to be below the new icon position */
    right: 0; /* Remains relative to the right of the message container */
    background-color: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
}

.copy-feedback.show {
    opacity: 1;
}

/* Style for when the copy icon is "active" (i.e., clicked/copied) */
.copy-icon-container.active svg path {
    fill: #1a73e8; /* Blue color when active */
}

/* Styles for the speaker icon (TTS) */
.tts-icon-container {
    position: absolute;
    bottom: -28px; /* Moved below the bubble by a fixed amount */
    left: 5px; /* Aligned to the left */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 10;
}

.message:hover .tts-icon-container {
    opacity: 1; /* Show on message hover */
}

.tts-icon-container:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.tts-icon-container svg {
    width: 16px;
    height: 16px;
    fill: #555;
}

/* Style for when the TTS icon is "active" (i.e., speaking) */
.tts-icon-container.active svg path {
    fill: #1a73e8; /* Blue color when active (speaking) */
}

/* Styles for feedback buttons */
.feedback-controls {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    position: absolute;
    bottom: -28px; /* Moved below the bubble by a fixed amount */
    right: 38px; /* Positioned to the left of copy icon with some spacing */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 10;
}

.message:hover .feedback-controls {
    opacity: 1; /* Show on message hover */
}

/* Updated button styles for feedback controls */
.feedback-controls button {
    background-color: rgba(255, 255, 255, 0.7); /* Added background color */
    border: none;
    cursor: pointer;
    padding: 4px; /* Changed padding to 4px for consistency */
    border-radius: 50%;
    transition: background-color 0.2s ease, box-shadow 0.2s ease; /* Added box-shadow to transition */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Added box shadow */
}

.feedback-controls button:hover {
    background-color: rgba(255, 255, 255, 0.9); /* Lighter on hover */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Slightly more prominent shadow on hover */
}

.feedback-controls button svg {
    width: 16px;
    height: 16px;
    fill: #777;
}

/* Changed to target 'path' element for direct SVG fill control */
.feedback-controls button.active svg path {
    fill: #1a73e8; /* Blue for thumbs up */
}

/* Changed to target 'path' element for direct SVG fill control */
.feedback-controls button.active.dislike svg path {
    fill: #e84f1a; /* Red for thumbs down */
}

/* Input area styles (now applied to the inner div within input-area-wrapper) */
.input-area {
    display: flex;
    padding: 16px;
    /* Removed border-top */
    /* Removed background-color */
    /* Removed box-shadow */
    box-sizing: border-box; /* Include padding in width */
    /* max-width is handled by the input-area-wrapper */
}

input[type="text"] {
    flex-grow: 1; /* Allows the input field to fill available space */
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 24px;
    margin-right: 10px;
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
}

input[type="text"]:focus {
    border-color: #a7d0f0;
    box-shadow: 0 0 8px rgba(167, 208, 240, 0.6);
}

button {
    padding: 12px 20px;
    background-color: #1a73e8;
    color: white;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

button:hover {
    background-color: #0d47a1;
}

button:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(26, 115, 232, 0.5);
}

.loading-indicator {
    color: #757575;
    font-size: 0.9em;
    margin-top: 8px;
    align-self: center;
    display: none;
}

.suggested-questions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

.suggested-question {
    background-color: #e0e0e0;
    color: #202124;
    padding: 8px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.3s ease;
    border: none;
}

.suggested-question:hover {
    background-color: #c2c2c2;
}

#nav-menu-container {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center;
}

.nav-menu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu li {
    margin-left: 20px;
}

.nav-menu a {
    color: #202124; /* Changed to dark color for visibility on white header */
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #1a73e8;
}

/* Mobile specific adjustments (max-width: 768px) */
@media (max-width: 768px) {
    .header {
        align-items: center;
    }

    .main-chat-wrapper {
        /* Revert padding for mobile header/input area and remove desktop horizontal padding */
        padding-top: 70px; /* Smaller margin for mobile header */
        padding-bottom: 80px; /* Smaller margin for mobile input area */
        padding-left: 0;
        padding-right: 0;
    }

    .input-area-wrapper {
        /* Revert desktop specific centering */
        left: 0;
        transform: none;
        padding-left: 0;
        padding-right: 0;
    }

    .input-area {
        padding: 10px; /* Slightly less padding on mobile */
    }

    #nav-menu-container {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 10px;
    }

    .nav-menu li {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .message {
        max-width: 80%; /* Revert to 80% for mobile */
    }
}

/* Animation for new messages fading in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.new-message {
    animation: fadeIn 0.2s ease-out forwards;
}

/* --- Animated Typing Dots Styles --- */
@keyframes bounce-dots {
    0%, 80%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.typing-indicator-dots {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 4px;
    height: 1.2em;
}

.typing-indicator-dots .dot {
    width: 6px;
    height: 6px;
    background-color: #888;
    border-radius: 50%;
    margin: 0 2px;
    opacity: 0;
    animation: bounce-dots 1.4s infinite ease-in-out;
}

/* Stagger the animation for each dot */
.typing-indicator-dots .dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-indicator-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

.ai-message.typing-state {
    /* padding-right: 15px; */
}