body { font-family: -apple-system, sans-serif; background: #f4f7f6; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }

#chat-container { width: 90%; max-width: 450px; height: 600px; background: white; border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

#chat-window { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }

.msg-item { background: #eef1f5; padding: 10px; border-radius: 8px; font-size: 14px; width: fit-content; max-width: 80%; }

#input-area { padding: 15px; border-top: 1px solid #eee; display: flex; gap: 10px; }

input { padding: 10px; border: 1px solid #ddd; border-radius: 6px; outline: none; }
#username { width: 80px; }
#message { flex: 1; }

button { padding: 10px 20px; background: #3ecf8e; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
button:hover { background: #37b97d; }