body{
 font-family:Arial;
 background:#f4f6f8;
 display:flex;
 justify-content:center;
 align-items:flex-start;
 min-height:100vh;
 margin:0;
}

.container{
 width:100%;
 max-width:500px;
 margin:20px;
 background:white;
 padding:20px;
 border-radius:10px;
 box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

h1{
 text-align:center;
}

#countdown{
 text-align:center;
 font-size:28px;
 font-weight:bold;
 margin-bottom:20px;
}

input{
 padding:10px;
 margin:5px 0;
 border:1px solid #ccc;
 border-radius:5px;
 width:100%;
 box-sizing:border-box;
}

button{
 padding:10px;
 border:none;
 background:#3b82f6;
 color:white;
 border-radius:5px;
 cursor:pointer;
}

#chatBox{
 display:none;
}

#messages{
 height:40vh;
 overflow:auto;
 border:1px solid #eee;
 padding:10px;
 margin-bottom:10px;
 border-radius:5px;
 background:#fafafa;
}

.msg{
 margin-bottom:8px;
}

.time{
 color:#888;
 font-size:11px;
 margin-left:8px;
}

.delete{
 color:red;
 cursor:pointer;
 margin-left:10px;
}

.logout{
 float:right;
 background:#ef4444;
}

.sendBox{
 display:flex;
 gap:6px;
}

.sendBox input{
 flex:1;
}

.sendBox button{
 width:90px;
}

.error{
 color:#ef4444;
 font-size:14px;
 margin:6px 0;
 min-height:18px;
}