/* Fix for mobile height issues and "leaking" */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Only the chat area should scroll */
    background-color: #f9fafb; /* Light gray background */
}

/* Hide scrollbar for the mobile user list row */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Main Layout Components */
.buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.join {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.create-btn {
    width: 100%;
}

/* Message Display Area */
.messages {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
    width: 100%;
    padding: 10px;
}

/* Message Container for Alignment */
.message-container {
    display: flex;
    width: 100%;
    margin: 4px 0;
}

.msg-left {
    justify-content: flex-start;
}

.msg-right {
    justify-content: flex-end;
    padding-right: 5px; /* Minimal gap fix for the right edge */
}

/* Message Bubble Styling */
.message-bubble {
    max-width: 85%; /* Optimal for mobile (Infinix) */
    padding: 8px 12px;
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .message-bubble {
        max-width: 70%;
    }
}

/* Default styling for others (Left Side) */
.msg-left .message-bubble {
    background-color: #e9e9eb;
    color: #1a1a1a;
    border-bottom-left-radius: 2px;
}

/* Specific styling for your messages (Right Side) */
.msg-right .message-bubble {
    background-color: #007bff; /* Blue bubble */
    color: white;
    border-bottom-right-radius: 2px;
}

/* Timestamp Styling */
.muted {
    font-size: 10px;
    margin-top: 4px;
    display: block;
    color: #6c757d; /* Subtle gray for others */
}

/* Ensure timestamp is visible on the blue background */
.msg-right .muted {
    color: rgba(255, 255, 255, 0.85);
}

/* System Notifications (Entered/Left) */
.notification {
    text-align: center;
    font-size: 11px;
    color: #888;
    margin: 10px 0;
    width: 100%;
    font-style: italic;
}

/* Input Area Helpers */
.inputs {
    padding: 10px;
    display: flex;
}

#message {
    flex: 1;
}

h2 {
    text-align: center;
}