* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #1f1f1f; color: #eee; }
#topbar { display: flex; align-items: center; gap: 8px; padding: 12px; background: #2b2b2b; position: sticky; top: 0; }
#topbar h1 { font-size: 18px; margin: 0; flex: 1; }
#topbar button { background: none; border: none; color: #eee; font-size: 18px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.online { background: #3ad29f; } .dot.offline { background: #888; }
ul { list-style: none; margin: 0; padding: 0; }
#chatList li { padding: 14px 16px; border-bottom: 1px solid #333; }
#chatList .name { font-weight: 600; }
#chatList .preview { color: #aaa; font-size: 14px; }
#messages { padding: 12px; height: calc(100vh - 130px); overflow-y: auto; }
.msg { margin: 6px 0; padding: 8px 12px; border-radius: 12px; max-width: 80%; background: #333; }
.msg.outgoing { background: #5b5fc7; margin-left: auto; }
#replyForm { display: flex; gap: 8px; padding: 10px; background: #2b2b2b; position: sticky; bottom: 0; }
#replyForm input { flex: 1; padding: 10px; border-radius: 8px; border: none; }
#settingsView { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
#settingsView input { width: 100%; padding: 10px; margin-top: 4px; }