body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #313338; color: white; display: flex; height: 100vh; overflow: hidden; }
.server-list { width: 72px; background: #1e1f22; display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 8px; }
.server-icon { width: 48px; height: 48px; background: #313338; border-radius: 50%; cursor: pointer; transition: 0.2s; display: flex; items-center; justify-content: center; }
.server-icon:hover { border-radius: 15px; background: #5865f2; }
.sidebar { width: 240px; background: #2b2d31; display: flex; flex-direction: column; }
.chat-area { flex: 1; display: flex; flex-direction: column; background: #313338; }
.messages { flex: 1; padding: 20px; overflow-y: auto; }
.msg-bubble { background: #383a40; padding: 10px; border-radius: 8px; margin-bottom: 10px; max-width: 80%; }
.input-area { padding: 20px; background: #313338; }
.input-area input { width: 100%; padding: 12px; border-radius: 8px; border: none; background: #383a40; color: white; outline: none; }
.friends-list { padding: 10px; }
.friend-item { padding: 8px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.friend-item:hover { background: #35373c; }
.status-online { width: 10px; height: 10px; background: #23a55a; border-radius: 50%; }