/* Note: The HTML file uses Tailwind CSS. 
   This CSS file is an alternative way to style the page without Tailwind. 
   To use this, you would need to remove the Tailwind classes from the HTML 
   and link this stylesheet instead. */

   body {
    background-color: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    margin: 0;
}

.container {
    width: 100%;
    max-width: 28rem; /* 448px */
    padding: 1rem; /* 16px */
}

h1 {
    font-size: 3rem; /* 48px */
    font-weight: 900;
    text-align: center;
    margin-bottom: 2rem; /* 32px */
    color: #4b5563;
    font-family: 'Merriweather', serif;
}

.chat-container {
    background-color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem; /* 8px */
    overflow: hidden;
}

.messages-wrapper {
    height: 24rem; /* 384px */
    overflow-y: auto;
    padding: 1.5rem; /* 24px */
}

/* Custom Scrollbar */
.messages-wrapper::-webkit-scrollbar {
    width: 8px;
}

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

.messages-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.messages-wrapper::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
}

.message {
    background-color: #134e4a; /* A color similar to bg-teal-800 */
    color: #fef08a; /* A color similar to text-yellow-200 */
    padding: 1rem; /* 16px */
    border-radius: 0.5rem; /* 8px */
    margin-bottom: 1rem; /* Add space between messages */
}

.message:last-child {
    margin-bottom: 0;
}

.username {
    font-weight: bold;
    display: block;
}