esiur-js/demo/chat/style.css

body
{
    margin: 10vw 10vh;
}

#list {
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 50vh;
    overflow-y: scroll;
}

#list > div {
    display: flex;
    gap: 10px;
}
#list > div > span:nth-child(1)
{
    color: #7159f5;
}

#list > div > span:nth-child(2)
{
    flex: 1;
}


#chat {
    display: flex;
    flex-direction: column;
    border: 4px solid #d6d6d6;
    border-radius: 23px;
    overflow: hidden;
}

#status{ 
    flex: 1;
    text-align: end;
}

#login {
    padding: 10px;
}

.bar{
    display: flex; gap: 10px; background: gainsboro; padding: 10px;
}

#users{
    display: flex;
    gap: 4px;
    color: #d04949;
    font-weight: bold;
}

#users > div {
    border: 1px solid #b3b3b3;
    border-radius: 10px;
    background: white;
    padding: 0 6px;
}