*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#f4f6f9;color:#333}h1,h2,h4{text-align:center;margin-bottom:10px}.container{max-width:500px;margin:20px auto;padding:20px;background:#fff;box-shadow:0 0 10px #0000001a;border-radius:10px}.login-box{display:flex;flex-direction:column;gap:10px}input{padding:10px;font-size:16px;border:1px solid #ddd;border-radius:5px}button{background-color:#007bff;color:#fff;padding:10px 15px;font-size:16px;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}button:hover{background-color:#0056b3}.error-message{color:red;text-align:center}.chat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.online-users{width:150px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:5px;padding:10px;overflow-y:auto;max-height:100px}.online-users h4{margin-bottom:5px}.online-users ul{list-style:none}.online-users li{padding:5px 0}.chat-window{display:flex;flex-direction:column;height:400px;border:1px solid #ddd;border-radius:5px;overflow:hidden}.messages{flex:1;padding:10px;background:#f4f6f9;overflow-y:auto;display:flex;flex-direction:column;gap:5px}.message{max-width:70%;padding:10px 15px;border-radius:18px;font-size:14px;word-wrap:break-word;margin:3px 0;line-height:1.5}.message.incoming{background-color:#e5e5ea;color:#000;align-self:flex-start}.message.outgoing{background-color:#007aff;color:#fff;align-self:flex-end}.input-area{display:flex;flex-direction:column;padding:10px;background:#f9f9f9;border-top:1px solid #ddd}.message-input-container{display:flex;gap:10px}#message-input{flex:1;border:1px solid #ddd;border-radius:5px;padding:10px}#send-btn{padding:10px 15px;background-color:#28a745;border-radius:5px}#send-btn:hover{background-color:#218838}@media screen and (max-width:600px){.container{margin:10px;padding:15px}.chat-header,.input-area{flex-direction:column;align-items:center}.message-input-container{flex-direction:column;gap:5px}}