* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; overscroll-behavior: none; }
.chat-messages::-webkit-scrollbar, .my-groups::-webkit-scrollbar, .main-content::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track, .my-groups::-webkit-scrollbar-track, .main-content::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.chat-messages::-webkit-scrollbar-thumb, .my-groups::-webkit-scrollbar-thumb, .main-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label { font-size: 0.9rem; font-weight: 500; color: #374151; }
.input-group input, .input-group textarea, .input-group select { padding: 14px 16px; border: 1.5px solid #e5e7eb; border-radius: 12px; font-size: 1rem; outline: none; transition: all 0.2s; background: #fafbfc; }
.input-group input:focus, .input-group textarea:focus, .input-group select:focus { border-color: #4f46e5; background: white; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.auth-btn { padding: 14px 20px; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.auth-btn.primary { background: #4f46e5; color: white; box-shadow: 0 4px 12px rgba(79,70,229,0.3); }
.auth-btn.primary:hover { background: #4338ca; transform: translateY(-1px); }
.auth-btn.secondary { background: white; color: #4f46e5; border: 1.5px solid #e5e7eb; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #e0e7ff; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #4f46e5; flex-shrink: 0; }
.loading { text-align: center; color: #6b7280; padding: 20px; }
.error-message { background: #fee; color: #c33; padding: 12px; border-radius: 8px; margin-top: 16px; font-size: 0.9rem; text-align: center; border: 1px solid #fcc; }