:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a25;--bg-hover: #22222f;--bg-active: #2a2a3a;--glass-bg: rgba(26, 26, 37, .8);--glass-border: rgba(255, 255, 255, .08);--text-primary: #ffffff;--text-secondary: #a0a0b0;--text-muted: #6b6b7b;--accent-primary: #6366f1;--accent-secondary: #818cf8;--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);--msg-sent-bg: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);--msg-received-bg: #1e1e2e;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--online: #22c55e;--border-color: rgba(255, 255, 255, .06);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(99, 102, 241, .3);--sidebar-width: 20%;--chat-width: 80%;--header-height: 70px;--input-height: 80px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-container{display:flex;height:100vh;width:100vw;overflow:hidden;background:var(--bg-primary)}.sidebar{width:var(--sidebar-width);min-width:280px;max-width:380px;height:100%;background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column}.sidebar-header{padding:20px;border-bottom:1px solid var(--border-color)}.sidebar-header h1{font-size:1.5rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}.add-user-btn{width:100%;padding:12px 20px;background:var(--accent-gradient);border:none;border-radius:var(--radius-md);color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;gap:8px}.add-user-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.add-user-btn:active{transform:translateY(0)}.user-list{flex:1;overflow-y:auto;padding:12px}.user-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);margin-bottom:4px}.user-item:hover{background:var(--bg-hover)}.user-item.active{background:var(--bg-active)}.user-avatar{width:48px;height:48px;border-radius:var(--radius-full);background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:600;color:#fff;flex-shrink:0;position:relative}.user-avatar.online:after{content:"";position:absolute;bottom:2px;right:2px;width:12px;height:12px;background:var(--online);border:2px solid var(--bg-secondary);border-radius:var(--radius-full)}.user-info{flex:1;min-width:0}.user-name{font-weight:600;font-size:.95rem;color:var(--text-primary);margin-bottom:2px}.user-last-message{font-size:.85rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-time{font-size:.75rem;color:var(--text-muted)}.chat-area{flex:1;height:100%;display:flex;flex-direction:column;background:var(--bg-primary)}.chat-header{height:var(--header-height);padding:0 24px;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:16px}.chat-header .user-avatar{width:44px;height:44px;font-size:1.1rem}.chat-header-info h2{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.chat-header-info span{font-size:.85rem;color:var(--text-secondary)}.messages-container{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:12px}.message{max-width:70%;display:flex;flex-direction:column}.message.sent{align-self:flex-end}.message.received{align-self:flex-start}.message-bubble{padding:12px 18px;border-radius:var(--radius-lg);font-size:.95rem;line-height:1.5;word-wrap:break-word}.message.sent .message-bubble{background:var(--msg-sent-bg);color:#fff;border-bottom-right-radius:4px}.message.received .message-bubble{background:var(--msg-received-bg);color:var(--text-primary);border-bottom-left-radius:4px}.message-time{font-size:.7rem;color:var(--text-muted);margin-top:4px;padding:0 4px}.message.sent .message-time{text-align:right}.message-attachment{margin-top:8px;padding:12px;background:#0003;border-radius:var(--radius-sm);display:flex;align-items:center;gap:10px}.attachment-icon{width:40px;height:40px;background:var(--bg-tertiary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.2rem}.attachment-info{flex:1;min-width:0}.attachment-name{font-size:.85rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachment-size{font-size:.75rem;color:var(--text-muted)}.attachment-download{padding:8px 12px;background:var(--bg-tertiary);border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.attachment-download:hover{background:var(--bg-active);color:var(--text-primary)}.message-input-container{padding:16px 24px;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border-color)}.message-input-wrapper{display:flex;align-items:center;gap:12px;background:var(--bg-tertiary);border-radius:var(--radius-lg);padding:8px 16px;border:1px solid var(--border-color);transition:all var(--transition-fast)}.message-input-wrapper:focus-within{border-color:var(--accent-primary);box-shadow:0 0 0 3px #6366f11a}.file-upload-btn{width:40px;height:40px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:all var(--transition-fast)}.file-upload-btn:hover{color:var(--accent-primary);background:var(--bg-hover)}.message-input{flex:1;background:transparent;border:none;outline:none;font-size:.95rem;color:var(--text-primary);font-family:inherit}.message-input::placeholder{color:var(--text-muted)}.send-btn{width:44px;height:44px;background:var(--accent-gradient);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all var(--transition-normal)}.send-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-glow)}.send-btn:active{transform:scale(.98)}.send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.file-preview{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-tertiary);border-radius:var(--radius-sm);margin-bottom:12px}.file-preview-name{flex:1;font-size:.85rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-preview-remove{width:24px;height:24px;background:var(--error);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-secondary);border-radius:var(--radius-xl);padding:32px;width:90%;max-width:420px;border:1px solid var(--border-color);box-shadow:var(--shadow-lg);animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal h2{font-size:1.4rem;font-weight:700;color:var(--text-primary);margin-bottom:8px}.modal p{font-size:.9rem;color:var(--text-secondary);margin-bottom:24px}.modal-input{width:100%;padding:14px 18px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.95rem;color:var(--text-primary);outline:none;transition:all var(--transition-fast);font-family:inherit}.modal-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #6366f11a}.modal-input::placeholder{color:var(--text-muted)}.modal-actions{display:flex;gap:12px;margin-top:24px}.modal-btn{flex:1;padding:14px 24px;border:none;border-radius:var(--radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);font-family:inherit}.modal-btn.primary{background:var(--accent-gradient);color:#fff}.modal-btn.primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.modal-btn.secondary{background:var(--bg-tertiary);color:var(--text-secondary)}.modal-btn.secondary:hover{background:var(--bg-hover);color:var(--text-primary)}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);text-align:center;padding:40px}.empty-state-icon{font-size:4rem;margin-bottom:20px;opacity:.5}.empty-state h3{font-size:1.3rem;font-weight:600;color:var(--text-secondary);margin-bottom:8px}.empty-state p{font-size:.95rem;max-width:300px}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);padding:20px}.login-card{background:var(--bg-secondary);border-radius:var(--radius-xl);padding:48px 40px;width:100%;max-width:420px;border:1px solid var(--border-color);box-shadow:var(--shadow-lg)}.login-card h1{font-size:2rem;font-weight:700;text-align:center;margin-bottom:8px;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-card .subtitle{text-align:center;color:var(--text-secondary);font-size:.95rem;margin-bottom:32px}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:.9rem;font-weight:500;color:var(--text-secondary);margin-bottom:8px}.form-group input{width:100%;padding:14px 18px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.95rem;color:var(--text-primary);outline:none;transition:all var(--transition-fast);font-family:inherit}.form-group input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #6366f11a}.login-btn{width:100%;padding:16px;background:var(--accent-gradient);border:none;border-radius:var(--radius-md);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);font-family:inherit;margin-top:8px}.login-btn:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.login-footer{text-align:center;margin-top:24px;font-size:.9rem;color:var(--text-muted)}.login-footer a{color:var(--accent-primary);text-decoration:none;font-weight:500}.login-footer a:hover{text-decoration:underline}.error-message{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:var(--error);padding:12px 16px;border-radius:var(--radius-md);font-size:.9rem;margin-bottom:20px}.loading{display:flex;align-items:center;justify-content:center;padding:40px}.spinner{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent-primary);border-radius:var(--radius-full);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mobile-only{display:none}.back-btn{width:40px;height:40px;background:var(--bg-hover);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-size:1.2rem;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;flex-shrink:0}.back-btn:hover{background:var(--accent-primary);border-color:var(--accent-primary)}@media(max-width:768px){.mobile-only{display:flex}.app-container{position:relative}.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:100;width:100%;max-width:none;transition:transform var(--transition-normal);transform:translate(0)}.chat-area{position:fixed;left:0;top:0;right:0;bottom:0;width:100%;z-index:99;transition:transform var(--transition-normal);transform:translate(100%)}.mobile-view-contacts .sidebar{transform:translate(0)}.mobile-view-contacts .chat-area{transform:translate(100%)}.mobile-view-chat .sidebar{transform:translate(-100%)}.mobile-view-chat .chat-area{transform:translate(0)}.chat-header{gap:12px}.empty-state{padding:24px}.empty-state-icon{font-size:3rem}.empty-state h3{font-size:1.2rem}.empty-state p{font-size:.85rem}.user-profile-section{padding:10px}.user-profile-info{flex-direction:column;align-items:stretch;gap:8px}.copy-id-btn{text-align:center}.message-input-container{padding:12px}.message-input-wrapper{gap:8px}.message-input-wrapper input{padding:12px 16px;font-size:16px}.send-btn{width:44px;height:44px}.message{max-width:85%}.message-content{padding:10px 14px;font-size:.95rem}.sidebar-header h1{font-size:1.4rem}.add-user-btn{padding:10px 16px;font-size:.85rem}.user-item{padding:14px 16px}}.user-profile-section{background:var(--bg-tertiary);border-radius:var(--radius-md);padding:12px;margin-bottom:16px}.user-profile-info{display:flex;align-items:center;justify-content:space-between;gap:12px}.user-profile-name{font-size:.9rem;font-weight:600;color:var(--text-primary)}.copy-id-btn{padding:6px 12px;background:var(--bg-hover);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.copy-id-btn:hover{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.sidebar-footer{padding:16px;border-top:1px solid var(--border-color)}.logout-btn{width:100%;padding:12px 16px;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.logout-btn:hover{background:#ef44441a;border-color:var(--error);color:var(--error)}