/* General body styling - Tailwind handles most of this */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    /* background-color: #f3f4f6; /* bg-gray-100 from Tailwind */
    /* color: #1f2937; /* text-gray-800 from Tailwind */
}

.chat-container {
    /* Tailwind: w-full max-w-4xl h-[90vh] sm:h-[85vh] bg-white shadow-xl rounded-lg flex flex-col p-0 */
    /* Specific overrides or additions can go here if Tailwind isn't enough */
    overflow: hidden; /* Ensures children don't overflow rounded corners */
}

.chat-output {
    /* Tailwind: flex-grow p-6 space-y-4 overflow-y-auto bg-white */
}

/* Message styling */
.message {
    display: flex;
    align-items: flex-end; 
    margin-bottom: 1rem; 
    max-width: 90%; 
    animation: fadeIn 0.3s ease-out; /* Simple fade-in for new messages */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message .avatar {
    width: 36px; /* Slightly smaller avatar */
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500; /* Medium weight */
    color: white;
    margin-right: 0.75rem; 
    flex-shrink: 0; 
    font-size: 0.875rem; /* Smaller font for avatar text */
}

.message .text-bubble {
    padding: 0.625rem 1rem; /* 10px 16px */
    border-radius: 18px; /* More rounded bubbles */
    max-width: calc(100% - 46px); /* Max width considering avatar + margin */
    word-wrap: break-word; 
    line-height: 1.5;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03); /* Very subtle shadow */
}

/* User message specific styling */
.user-message {
    margin-left: auto; 
    flex-direction: row-reverse; 
}

.user-message .avatar {
    background-color: #2563eb; /* bg-blue-600 */
    margin-left: 0.75rem;
    margin-right: 0;
}

.user-message .text-bubble {
    background-color: #2563eb; /* bg-blue-600 */
    color: white;
    border-bottom-right-radius: 6px; /* "Tail" for user bubble */
}

/* AI message specific styling */
.ai-message {
    margin-right: auto; 
}

.ai-message .avatar {
    /* A common AI avatar color, can be changed */
    background-color: #4f46e5; /* bg-indigo-600 - or a more Gemini-like neutral like gray */
    /* For a more Gemini-like AI avatar, consider a gray or a gradient */
    /* background-image: linear-gradient(to bottom right, #60a5fa, #3b82f6); */
}
/* Example for a more neutral AI avatar like Gemini's search results */
.ai-message .avatar.ai-avatar { /* Add .ai-avatar class in HTML for this */
    background-color: #6b7280; /* bg-gray-500 */
    color: #f9fafb; /* text-gray-50 */
}


.ai-message .text-bubble {
    background-color: #e5e7eb; /* bg-gray-200 */
    color: #1f2937; /* text-gray-800 */
    border-bottom-left-radius: 6px; /* "Tail" for AI bubble */
}

/* Styling for links generated within AI messages */
.ai-message .text-bubble a {
    color: #1d4ed8; /* A darker blue for better contrast on light gray */
    text-decoration: underline;
    font-weight: 500;
}
.ai-message .text-bubble a:hover {
    color: #1e40af; /* Slightly darker on hover */
}


/* Input area styling */
.chat-input-area {
    /* Tailwind: bg-gray-50 p-3 sm:p-4 border-t border-gray-200 rounded-b-lg */
}

#chat-input {
    /* Tailwind: flex-grow p-3 bg-white text-gray-800 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none placeholder-gray-500 */
    min-height: 44px; 
    max-height: 150px; 
    overflow-y: auto; 
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#chat-input::placeholder {
    /* Tailwind: placeholder-gray-500 */
    color: #6b7280;
}

#send-button {
    /* Tailwind: bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-5 sm:px-6 rounded-lg transition duration-150 ease-in-out shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 */
}

/* Typing indicator - ensure it matches the light theme */
.typing-indicator .text-bubble {
    padding: 0.75rem 1rem;
}
.typing-indicator .text-bubble > div > div { /* The pulsing dots */
    background-color: #9ca3af; /* Medium gray dots */
}