/* Online Users Container */
#onlineUsersContainer {
    display: flex;
    width: 80%;
    max-width: 700px;
    margin: auto;
    margin-top: 130px;
    padding: 10px;
    background: var(--white);
    box-shadow: 0px 4px 10px var(--navBar-shadow);
    border-radius: 15px;
}

@media (max-width: 500px) {
    #onlineUsersContainer {
        width: 90%;
    } 
}

/* Inner Content Wrapper */
#onlineUsers {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
}

/* Header Message */
.online-users-header {
    font-size: 1rem;
    font-weight: bold;
    color: var(--title-color);
    margin-bottom: 8px;
}

/* Online Users List */
.online-users-list {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 20px;
    max-width: 90%;
    scrollbar-width: thin;
    scrollbar-color: var(--light-blue) var(--body-bg);
}

/* Individual User (Now Fixed) */
.online-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 80px;
}

/* Profile Image */
.online-user-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--nav-btn);
    transition: transform 0.2s ease-in-out;
    margin-bottom: 5px;
    /* Ensures spacing between avatar & username */
}

/* Username */
.online-user-name {
    font-size: 1.1rem;
    color: var(--content-grey);
    font-weight: bold;
    text-align: center;
    display: block;
    /* Ensures it stays below the image */
    font-family: "Zain";
}

/* remove underline from the entire profile link */
.online-user-link {
    cursor: pointer;
}

/* Scrollbar Styling */
.online-users-list::-webkit-scrollbar {
    height: 5px;
}

.online-users-list::-webkit-scrollbar-thumb {
    background: var(--light-blue);
    border-radius: 5px;
}

.online-users-list::-webkit-scrollbar-track {
    background: var(--body-bg);
}

/* No Users Online */
.no-online,
.loading {
    font-size: 1rem;
    font-weight: bold;
    color: var(--light-grey);
    margin-top: 20px;
}