/* Overall Theme */
body {
    background-color: #101010;
    color: #F5F5F5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Login Page */
.login-page {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    animation: fadein 0.3s ease-out; /* Subtle fade-in */
}

.login-form {
    background: #181818;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #333333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    width: 320px;
    box-sizing: border-box;
}

.login-form h2 {
    color: #F5F5F5;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.6rem; /* Slightly smaller */
    font-weight: 300; /* Lighter font weight */
}

.login-form input[type="text"] {
    background: #101010;
    color: #F5F5F5;
    border: 1px solid #333333;
    border-radius: 4px;
    padding: 0.75rem;
    width: 100%;
    margin-bottom: 1rem; /* Adjusted spacing */
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.login-form input[type="text"]:focus {
    border-color: #555555;
    outline: none;
    box-shadow: none;
}

.login-form button[type="submit"] {
    background: #282828;
    color: #F5F5F5;
    border: 1px solid #333333;
    border-radius: 4px;
    padding: 0.75rem;
    width: 100%;
    font-weight: normal; /* Simpler */
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.login-form button[type="submit"]:hover {
    background: #303030;
    border-color: #555555;
}

/* Chat Page */
.chat-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.chat-page header {
    background: #101010;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #F5F5F5;
    box-shadow: none;
}

.header-left {
    font-size: 1rem; /* Simplified size */
}

.header-right {
    display: flex;
    align-items: center;
}

#online-count {
    color: #AAAAAA; /* Muted grey */
    font-size: 0.85rem;
    margin-right: 10px;
}

#logout-button {
    text-decoration: none;
    color: #AAAAAA;
    padding: 0.2rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#logout-button:hover {
    color: #F5F5F5;
    border-color: #555555;
}

.messages {
    background: #101010;
    padding: 1rem;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Added this */
    /* Adjusted height, ensure it fills available space correctly */
    /* This might need fine-tuning based on actual header/footer heights */
    height: calc(100vh - 100px);
    box-sizing: border-box;
    display: flex; /* Added */
    flex-direction: column; /* Added */
    align-items: flex-start; /* Added for default left alignment */
}

.send-form {
    background: #101010;
    padding: 0.75rem 1rem;
    border-top: 1px solid #333333;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.send-form input[type="text"] {
    background: #181818;
    color: #F5F5F5;
    border: 1px solid #333333;
    border-radius: 20px; /* Keep pill shape for chat input */
    padding: 0.6rem 1rem;
    flex-grow: 1;
    margin-right: 0.5rem; /* Reduced margin */
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.send-form input[type="text"]:focus {
    border-color: #555555;
    outline: none;
    box-shadow: none;
}

/* Added styles for self-destruct timer selector */
.send-form select#self-destruct-time {
    background: #181818; /* Theme-appropriate background */
    color: #F5F5F5; /* Theme-appropriate text color */
    border: 1px solid #333333; /* Match other inputs */
    border-radius: 20px; /* Match pill shape of chat input/button */
    padding: 0.6rem 1rem; /* Match chat input padding */
    margin-right: 0.5rem; /* Consistent spacing before send button */
    min-width: 120px; /* Adjusted min-width, can be fine-tuned */
    box-sizing: border-box;
    font-family: inherit; /* Ensure font consistency */
    font-size: inherit; /* Ensure font size consistency */
    transition: border-color 0.2s ease;
    -webkit-appearance: none; /* Remove default system appearance for custom arrow */
    -moz-appearance: none;
    appearance: none;
    /* Custom arrow using SVG - color #AAAAAA to match #online-count */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23AAAAAA%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-13z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.7rem top 50%; /* Adjust position of arrow */
    background-size: .65em auto; /* Adjust size of arrow */
    cursor: pointer;
}

.send-form select#self-destruct-time:focus {
    border-color: #555555; /* Match focus style of other inputs */
    outline: none;
    box-shadow: none;
}

.send-form button[type="submit"] {
    background: #282828;
    color: #F5F5F5;
    border: 1px solid #333333;
    border-radius: 20px; /* Match input */
    padding: 0.6rem 1.2rem;
    font-weight: normal; /* Simpler */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.send-form button[type="submit"]:hover {
    background: #303030;
    border-color: #555555;
}

.message {
    background: #181818;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    border: 1px solid #252525;
    box-shadow: none;
    animation: messageFadeIn 0.3s ease-out forwards;
    overflow-wrap: break-word; /* Standard property */
    max-width: 75%; /* Changed from 90% */
    box-sizing: border-box; /* Added this */
}

/* System Messages */
.system-message {
    color: #999999; /* Adjusted color */
    font-style: normal; /* Changed from italic */
    font-size: 0.8em; /* Reduced font size */
    text-align: center; /* Center align system messages */
    width: 100%; /* Make system messages take full width */
    max-width: 100%; /* Override max-width from .message */
    margin-left: 0; /* Ensure it's centered if other messages are not */
    align-self: center; /* Center in flex container */
    box-sizing: border-box; /* Added this */
    padding: 0.2rem 0; /* Add some minimal vertical padding if background/border removed */
    margin-bottom: 0.75rem; /* Ensure spacing */
    /* Removed background-color and border */
}

.system-message .text {
   color: inherit; /* Inherit from .system-message */
}

/* System messages shouldn't show user/read info, so hide them if they are somehow added */
.system-message strong,
.system-message .read,
.system-message .meta {
    display: none !important;
}

.message.current-user-message {
    background: #202020; /* Slightly different for current user */
    align-self: flex-end; /* Changed from margin-left: auto for flex context */
    border-color: #282828; /* Match background accent */
}

.message strong {
    color: #F5F5F5;
    font-weight: 500; /* Slightly bolder than normal but not full bold */
    display: block;
    margin-bottom: 0.25rem;
}

.message .text {
    color: #E0E0E0; /* Slightly less bright for message text if needed, or use F5F5F5 */
    line-height: 1.4; /* Adjusted line-height */
}

.message .meta {
    color: #777777; /* Keep existing color */
    font-size: 0.7rem; /* Keep existing font-size */
    margin-top: 0.4rem; /* Keep existing margin-top */
    /* display property is controlled by JS (initially inline none, then block/none) */
    /* No flex properties needed as children will be block and stack vertically */
}

.message .meta .detailed-time,
.message .meta .detailed-read-by {
    display: none; /* Ensure they are hidden by default */
    /* They will be set to display:block by JS when toggled */
    /* Add some spacing if both are shown */
    margin-bottom: 4px;
}
.message .meta .detailed-read-by:last-child {
    margin-bottom: 0; /* No margin for the last item */
}

.message .message-time {
    font-size: 0.7rem;
    color: #999999; /* Slightly dimmer than meta text */
    margin-left: 8px;
    cursor: pointer;
}
.message .message-time:hover {
    color: #BBBBBB;
}

.message .read {
    color: #777777;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    margin-left: 8px;
}

.message .read:hover {
    opacity: 1;
}

/* Styles for message self-destruct info */
.message .destruct-info {
    font-size: 0.8em;
    color: #AAAAAA; /* Muted grey, similar to online-count */
    margin-left: 10px;
    padding: 2px 6px; /* Adjusted padding */
    background-color: #282828; /* Slightly different from message background, but still dark */
    border-radius: 4px; /* Consistent border-radius */
    display: inline-block; /* Allows margin and padding to work as expected */
    vertical-align: middle; /* Align with text if text is multi-line */
}

.message.system-message .destruct-info { /* System messages shouldn't have this */
    display: none;
}

.message .destruct-info.burn-after-read { /* Specific style for burn-after-read */
    color: #e74c3c; /* A reddish warning color */
    /* background-color: #4a2c2c; Optional: darker red background for more emphasis */
}

/* Styles for message fade-out animation */
.message.message-fading-out {
    opacity: 0;
    transform: scale(0.95) translateX(20px); /* Slightly shrink and slide out to the right */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Animations */
@keyframes fadein { /* General page fade-in */
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes messageFadeIn { /* Subtle message appearance */
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #101010;
}
::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

/* Responsive Design */
@media (max-width: 768px) {
    .login-form {
        width: 90%;
        padding: 1.5rem;
    }

    .login-form h2 {
        font-size: 1.4rem;
    }

    .chat-page header {
        padding: 0.6rem 0.8rem;
    }

    .header-left {
        font-size: 0.9rem;
    }

    #logout-button {
        font-size: 0.8rem;
    }

    .messages {
        padding: 0.8rem;
        /* Adjust height for potentially smaller header/footer */
        height: calc(100vh - 90px);
        /* display: flex; flex-direction: column; align-items: flex-start; already inherited */
    }

    .send-form {
        padding: 0.6rem 0.8rem;
        /* Consider if stacking is still needed, pill inputs might look better side-by-side */
    }

    .send-form input[type="text"] {
        padding: 0.5rem 0.8rem; /* Slightly smaller padding */
        font-size: 0.9rem;
    }

    .send-form button[type="submit"] {
        padding: 0.5rem 1rem; /* Slightly smaller padding */
        font-size: 0.9rem;
    }

    .message {
        padding: 0.5rem 0.8rem;
        /* max-width: 75%; will be inherited, but for small screens, 95% was specific. Let's keep it. */
        max-width: 95%; /* Allow messages to use more width on small screens - Overrides 75% for this media query */
    }

    .message .meta {
        font-size: 0.65rem;
    }

    .message .destruct-info { /* Responsive adjustment for destruct-info */
        font-size: 0.75em; /* Slightly smaller font on smaller screens */
        margin-left: 8px; /* Adjust margin */
        padding: 1px 4px; /* Adjust padding */
    }
}

@media (max-width: 480px) {
    body {
        font-size: 13px; /* Base font for very small screens */
    }

    .login-form {
        padding: 1.2rem;
    }

    .login-form h2 {
        font-size: 1.3rem;
        margin-bottom: 1.2rem;
    }

    .login-form input[type="text"],
    .login-form button[type="submit"] {
        padding: 0.65rem;
        font-size: 0.85rem;
    }

    .chat-page header {
        padding: 0.5rem 0.6rem;
    }

    .header-left {
        font-size: 0.85rem;
    }

    #online-count {
        font-size: 0.75rem;
        margin-right: 8px;
    }

    #logout-button {
        font-size: 0.75rem;
        padding: 0.15rem 0.3rem;
    }

    .messages {
        /* Further adjust height */
        height: calc(100vh - 80px);
    }

/* Responsive adjustments for the send form on small screens - single line */
.send-form {
    /* display: flex; align-items: center; are inherited from base .send-form style */
    flex-wrap: nowrap; /* Ensure single line */
    /* padding: 0.6rem 0.8rem; is inherited from 768px media query, should be fine */
}

.send-form input[type="text"] {
    /* flex-grow: 1; is inherited from base style */
    flex-shrink: 1; /* Allow input to shrink */
    min-width: 40px; /* Prevent input from becoming too small */
    margin-right: 0.25rem; /* Reduced margin */
    margin-bottom: 0; /* Remove bottom margin if it was added for wrapping */
    /* padding and font-size are handled by the combined rule below */
}

.send-form select#self-destruct-time {
    width: 105px;    /* Fixed width to ensure visibility */
    flex-shrink: 0;  /* Prevent select from shrinking */
    margin-right: 0.25rem; /* Reduced margin */
    /* min-width: auto; removed */
    /* flex-grow: 0; removed */
    /* padding and font-size are handled by the combined rule below */
}

.send-form button[type="submit"] {
    flex-shrink: 0; /* Prevent button from shrinking */
    /* flex-grow: 0; removed */
    margin-left: 0; /* Remove any auto margin if present */
    /* padding and font-size are handled by the combined rule below */
}

/* Combined rule for padding and font-size for consistency */
.send-form input[type="text"],
.send-form select#self-destruct-time,
.send-form button[type="submit"] {
    padding: 0.5rem 0.8rem; /* Consistent padding for all form elements */
    font-size: 0.85rem; /* Consistent font size */
    /* Individual flex/width/margin properties above will apply alongside these */
}

    .message strong {
        font-size: 0.9rem;
    }

    .message .text {
        font-size: 0.85rem;
    }
}