body { font-family: Arial, sans-serif; background: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
.box { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 400px; }
.hide { display: none !important; }
input { width: 90%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; }
button { width: 95%; padding: 10px; background: #0084ff; color: white; border: none; border-radius: 4px; cursor: pointer; }
span { color: #0084ff; cursor: pointer; text-decoration: underline; }
.error { font-size: 14px; text-align: center; }

#chat-container { width: 600px; }
.chat-body { display: flex; height: 350px; border: 1px solid #ddd; margin: 10px 0; }
#messages-box { flex: 3; padding: 10px; overflow-y: auto; background: #fafafa; }
#users-box { flex: 1; border-left: 1px solid #ddd; padding: 10px; overflow-y: auto; font-size: 14px; }
#user-list { list-style: none; padding: 0; }
.chat-footer { display: flex; }
.chat-footer input { flex: 4; margin: 0; }
.chat-footer button { flex: 1; margin-left: 5px; }

.msg { margin-bottom: 8px; padding: 6px 10px; border-radius: 6px; display: inline-block; clear: both; max-width: 80%; }
.msg.sys { background: #e4e6eb; color: #65676b; font-size: 13px; text-align: center; display: block; max-width: 100%; }
.msg.me { background: #0084ff; color: white; float: right; }
.msg.other { background: #e4e6eb; color: black; float: left; }