body { font-family: sans-serif; background: #0f0f12; color: #eee; margin: 0; }
.container { display: flex; height: 100vh; }
.sidebar { width: 25%; background: #1b1b22; padding: 10px; overflow-y: auto; }
.chat { flex: 1; display: flex; flex-direction: column; }
.header { padding: 10px; background: #1f1f2a; border-bottom: 1px solid #333; }
.chat-box { flex: 1; padding: 10px; overflow-y: auto; }
.input-bar { display: flex; padding: 10px; background: #1f1f2a; }
.input-bar input { flex: 1; padding: 8px; border: none; border-radius: 4px; }
.input-bar button { margin-left: 10px; padding: 8px 16px; background: #007bff; border: none; color: #fff; border-radius: 4px; cursor: pointer; }
.msg { padding: 6px 10px; margin: 6px 0; border-radius: 8px; max-width: 70%; }
.msg.me { background: #007bff; align-self: flex-end; }
.msg.other { background: #2a2a33; align-self: flex-start; }
.user { padding: 8px; background: #2a2a33; margin: 5px 0; border-radius: 6px; cursor: pointer; }
.user:hover { background: #3a3a44; }