body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* Light gray background */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* Ensure the body fills the entire viewport */
}

h1 {
    color: #333;
    margin-top: 20px;
}

.h1-padding {
    padding-top: 10px;
}

/* --- Main Chat Container --- */
/* We'll use the body itself as the container for simplicity, 
   but we can style the main components inside it. */
.chat-container {
    width: 100%;
    width: 800px; 
    min-height: 80vh;
    max-height: 300vh;
    /* --- CHANGE THIS LINE --- */
    border: 1px solid #000; /* Changed from #ccc to black */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

/* --- Messages Display Area --- */
#messages {
    flex-grow: 1; /* Allows the message area to take up all available space */
    padding: 15px;
    overflow-y: auto; /* IMPORTANT: Makes the message area scrollable */
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#messages div {
    /* Styles for each individual message container */
    margin-bottom: 10px;
    max-width: 90%;
}

#messages p {
    /* --- CHANGE THIS LINE --- */
    background-color: #fff; /* Changed from #e1ffc7 to white */
    border-radius: 18px;
    padding: 8px 15px;
    margin: 0;
    line-height: 1.4;
    word-wrap: break-word; 
    border: 1px solid #ddd; /* Added a light border to separate white bubbles from white background */
}

#messages strong {
    /* This looks fine, but ensure it's dark for contrast */
    color: #333; /* A dark gray for contrast against the white bubble */
    font-weight: bold;
    margin-right: 5px;
}

#messages::-webkit-scrollbar {
    display: none; /* Webkit browsers hide the scrollbar entirely */
}
/* --- Message Form (Input Area) --- */
#messageForm {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
}

#username, #messageInput {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 8px;
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

#username {
    width: 25%; /* Smaller field for name */
}

#messageInput {
    flex-grow: 1; /* Takes up the remaining space */
}

#messageForm button {
    background-color: #4CAF50; /* Green send button */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

#messageForm button:hover {
    background-color: #45a049;
}

/* --- Admin Clear Button (Optional) --- */
#clearButton {
    background-color: #f44336; /* Red delete button */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s;
}

#clearButton:hover {
    background-color: #da190b;
}

/* Simple mobile responsiveness */
@media (max-width: 600px) {
    .chat-container {
        height: 90vh;
        max-width: 100%;
    }
    #username {
        width: 30%;
    }
}
/* --- Authentication & Guest Login Area Styles --- */
.auth-box {
    flex: 1; /* Allows both boxes to take up equal width */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.auth-message {
    color: red;
    font-size: 0.9em;
    margin-top: 10px;
}
/* Center the login/guest forms */

#authContainer {
    width: 100%;
    max-width: 850px; /* Increased max width to fit two boxes */
    margin: 40px auto;
    padding: 30px;
    border: 1px solid #000;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Removed text-align: center to allow sub-elements to control their own alignment */
}

#guestModeForm {
    width: 100%;
    max-width: 400px;
    margin: 40px auto;
    padding: 30px;
    border: 1px solid #000;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;

    display: flex; 
    flex-direction: column;
}

#authFormsContainer {
    display: flex; /* Activate Flexbox */
    justify-content: space-between; /* Space them out */
    gap: 20px; /* Space between the two boxes */
    width: 100%;
    margin-bottom: 20px;
}

#authForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#authForm input, #guestModeForm input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* Style for the Sign Up/Log In buttons */
#authForm button, #guestModeForm button {
    padding: 10px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

#loginBox button, 
#signUpBox button, 
#switchToGuestModeButton button {
    padding: 10px 15px; /* Re-apply padding */
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    
    /* Re-apply sizing */
    width: 90%; 
    max-width: 300px;
    margin-top: 5px; /* Add slight separation */
}

/* Ensure the blue color remains for sign up/login */
#signUpButtonActual, #signInButton {
    background-color: #007bff; 
    color: white;
}


/* Style the Guest Login Button (the one that switches modes) */
#switchToGuestModeButton {
    background-color: #f0ad4e; /* Orange/Yellow for guest action */
    color: #333;
    width: 100%;
    margin-top: 15px;
    padding: 12px;
}

#switchToGuestModeButton:hover {
    background-color: #ec971f;
}

/* Style for the inner Guest Form */
#startGuestSessionButton {
    background-color: #5cb85c; /* Green to start the session */
    color: white;
    margin-top: 15px;
}

#startGuestSessionButton:hover {
    background-color: #4cae4c;
}

#switchToAuthModeButton {
    background-color: #ccc; /* Neutral color to switch back */
    color: #333;
    margin-top: 10px;
}
#userStatus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin-bottom: 10px;
    padding: 10px 15px;
    background-color: #e9ecef; /* Light gray background */
    border-radius: 4px;
    font-size: 0.9em;
    padding-left: 90px;
}

#userStatusText {
    font-weight: bold;
    color: #333;
}

#endSessionButton {
    background-color: #dc3545; /* Red for signing out/ending session */
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

#endSessionButton:hover {
    background-color: #c82333;
}

#guestLoginArea {
    /* Add padding/margin to separate it from the main auth form */
    padding-top: 15px; 
    border-top: 1px dashed #eee; /* Add a separator line */
    margin-top: 15px;
}

#loginForm, #signUpForm {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally within the form */
}

#loginForm input, 
#signUpForm input, 
#guestModeForm input {
    padding: 10px; /* Re-apply padding */
    border: 1px solid #ccc; /* Re-apply border color */
    border-radius: 4px; /* Re-apply rounded corners */
    
    /* Ensure sizing is correct and centered */
    width: 90%; /* Use 90% width to allow centering */
    max-width: 300px;
    margin-bottom: 10px;
    box-sizing: border-box; 
    
    /* Center the text input within the field itself */
    text-align: left; 
}

.badge.admin {
    background-color: #dc3545; /* Red for Admin */
}

.badge.mod {
    background-color: #ffc107; /* Yellow for Moderator */
    color: #333;
}