#chatUsersBar{
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6vh;

    padding: 0.8vh 1vh;

    overflow-x: auto;
    overflow-y: hidden;

    background: linear-gradient(
        180deg,
        rgba(17, 22, 39, 0.9),
        rgba(43, 47, 66, 0.95)
    );

    border-bottom: 0.1vh solid rgba(255,255,255,0.05);

    box-shadow:
        inset 0 -1vh 2vh rgba(0,0,0,0.4),
        0 0 2vh rgba(0,255,200,0.05);
}



.userItem{
    display: flex;
    align-items: center;
    gap: 0.6vh;

    flex-shrink: 0;

    padding: 0.4vh 0.9vh;
    border-radius: 2vh;

    background: rgba(89, 119, 202, 0.182);

    font-size: 1.3vh;

    backdrop-filter: blur(0.5vh);

    transition: all .2s ease;
}

/* Hover */
.userItem:hover{
    background: rgba(0,255,200,0.15);
    transform: scale(1.05);
}

/* AVATAR */
.userAvatar{
    width: 3.6vh;
    height: 3.6vh;
    border-radius: 50%;
    object-fit: cover;
}

/* NAME */
.userName{
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
}

/* STATUS DOT */
.userStatus{
    width: 0.8vh;
    height: 0.8vh;
    border-radius: 50%;
}

/* COLORS */
.userStatus.online{
    background: #4cff7a;
}

.userStatus.idle{
    background: #ffcc00;
}

.userStatus.offline{
    background: #888;
}