* { 
    margin: 0; padding: 0; box-sizing: border-box; 

}



body {
    font-family: sans-serif; display: flex; flex-direction: column; height: 100dvh;
}




#messages { 
    flex: 1; overflow-y: auto; padding: 16px; 
}
#messages li { 
    list-style: none; padding: 8px 12px; margin-bottom: 8px; background: #f1f1f1; border-radius: 8px; max-width: 70%; 
}
#messages li b { 
    color: #333; 
}
#messages li.system { 
    text-align: center; color: #999; background: none; max-width: 100%; font-size: 14px; 
}






#join {
    display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100dvh; gap: 12px;
}
#join input { 
    padding: 10px; border: 1px solid #ddd; border-radius: 8px; outline: none; font-size: 16px; width: min(250px, 80%); 
}
#join button { 
    padding: 10px 20px; border: none; background: #333; color: #fff; border-radius: 8px; cursor: pointer; font-size: 16px; width: min(250px, 80%); 
}





#chat {
    display: none; flex-direction: column; height: 100dvh;

}




form { 
    display: flex; align-items: center; padding: 12px; border-top: 1px solid #ddd; 
}
form span { 
    font-weight: bold; margin-right: 8px; white-space: nowrap; max-width: 80px; overflow: hidden; text-overflow: ellipsis; font-size: 14px; 
}

form input { 
    flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 8px; outline: none; font-size: 16px; 
}




button { 
    margin-left: 8px; padding: 10px 20px; border: none; background: #333; color: #fff; border-radius: 8px; cursor: pointer; font-size: 16px; 
}