.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--color-bg)}.login-card{width:100%;max-width:400px;background:#fff;border-radius:12px;padding:40px 36px;box-shadow:0 2px 20px #00000014}.login-logo{font-size:28px;font-weight:700;color:var(--color-primary);text-align:center;margin-bottom:28px;letter-spacing:-.5px}.login-tabs{display:flex;border-bottom:2px solid var(--color-border);margin-bottom:24px}.login-tab{flex:1;padding:10px;background:none;border:none;cursor:pointer;font-size:15px;color:var(--color-text-secondary);font-weight:500;transition:color .15s;position:relative;bottom:-2px;border-bottom:2px solid transparent}.login-tab:hover{color:var(--color-text)}.login-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.login-form{display:flex;flex-direction:column;gap:16px}.login-field{display:flex;flex-direction:column;gap:6px}.login-field label{font-size:13px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.4px}.login-field input{padding:10px 14px;border:1.5px solid var(--color-border);border-radius:8px;font-size:15px;color:var(--color-text);outline:none;transition:border-color .15s;background:#fff}.login-field input:focus{border-color:var(--color-primary)}.login-field input:disabled{background:var(--color-bg);cursor:not-allowed}.login-error{font-size:13px;color:#e53935;background:#fdecea;border-radius:6px;padding:8px 12px}.login-submit{margin-top:4px;padding:11px;background:var(--color-primary);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s}.login-submit:hover:not(:disabled){background:var(--color-primary-hover)}.login-submit:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 480px){.login-page{align-items:flex-start}.login-card{border-radius:0;padding:40px 24px;min-height:100vh;min-height:100dvh;box-shadow:none}.login-field input{font-size:16px;padding:12px 14px}.login-submit{padding:13px}}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.settings-modal{background:#fff;border-radius:16px;width:100%;max-width:420px;box-shadow:0 8px 40px #0000002e;overflow:hidden}.settings-header{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--color-border)}.settings-avatar{width:48px;height:48px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;flex-shrink:0}.settings-title-block{flex:1;display:flex;flex-direction:column;gap:2px}.settings-name{font-weight:700;font-size:16px;color:var(--color-text)}.settings-subtitle{font-size:13px;color:var(--color-text-secondary)}.settings-close{background:none;border:none;cursor:pointer;color:var(--color-text-secondary);padding:6px;border-radius:8px;display:flex;align-items:center;transition:background .15s,color .15s;flex-shrink:0}.settings-close:hover{background:var(--color-bg);color:var(--color-text)}.settings-body{padding:20px}.settings-section-title{font-size:14px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em;margin:0 0 16px}.settings-notif{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--color-bg);border-radius:10px;margin-bottom:4px}.settings-notif-info{display:flex;flex-direction:column;gap:3px}.settings-notif-label{font-size:14px;font-weight:500;color:var(--color-text)}.settings-notif-status{font-size:12px;color:var(--color-text-secondary)}.settings-notif-status.granted{color:var(--color-online)}.settings-notif-status.denied{color:#e53935}.settings-notif-btn{padding:7px 14px;background:var(--color-primary);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity .15s;flex-shrink:0}.settings-notif-btn:hover{opacity:.88}.settings-notif-check{color:var(--color-online);font-size:18px;flex-shrink:0}.settings-form{display:flex;flex-direction:column;gap:14px}.settings-field{display:flex;flex-direction:column;gap:6px}.settings-field label{font-size:13px;font-weight:500;color:var(--color-text-secondary)}.settings-field input{padding:10px 14px;border:1.5px solid var(--color-border);border-radius:10px;font-size:15px;color:var(--color-text);background:var(--color-bg);outline:none;transition:border-color .15s}.settings-field input:focus{border-color:var(--color-primary);background:#fff}.settings-error{font-size:13px;color:#e53935;margin:0}.settings-success{font-size:13px;color:var(--color-online);margin:0}.settings-submit{padding:11px;background:var(--color-primary);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s;margin-top:2px}.settings-submit:disabled{opacity:.6;cursor:not-allowed}.settings-submit:not(:disabled):hover{opacity:.88}.sidebar{width:var(--sidebar-width);flex-shrink:0;background:#fff;border-right:1px solid var(--color-border);display:flex;flex-direction:column;height:100%;overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-border);height:var(--header-height);flex-shrink:0}.sidebar-me{display:flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;padding:4px 8px 4px 4px;border-radius:10px;transition:background .15s;text-align:left}.sidebar-me:hover{background:var(--color-bg)}.sidebar-avatar{width:36px;height:36px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0}.sidebar-username{font-weight:600;font-size:15px;color:var(--color-text)}.sidebar-logout{background:none;border:none;cursor:pointer;color:var(--color-text-secondary);padding:6px;border-radius:6px;display:flex;align-items:center;transition:background .15s,color .15s}.sidebar-logout:hover{background:var(--color-bg);color:var(--color-text)}.sidebar-search{padding:10px 12px;border-bottom:1px solid var(--color-border);flex-shrink:0}.sidebar-search input{width:100%;padding:8px 12px;border:none;border-radius:20px;background:var(--color-bg);font-size:14px;color:var(--color-text);outline:none}.sidebar-list{flex:1;overflow-y:auto}.sidebar-empty{padding:24px 16px;text-align:center;color:var(--color-text-secondary);font-size:14px}.user-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;background:none;border:none;cursor:pointer;text-align:left;transition:background .1s;position:relative}.user-item:hover{background:var(--color-bg)}.user-item.active{background:#e8f4ff}.user-avatar{width:44px;height:44px;border-radius:50%;background:#dce8f5;color:#1877f2;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0;position:relative}.online-dot{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;border:2px solid #fff}.user-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.user-name{font-weight:600;font-size:15px;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-status{font-size:12px;color:var(--color-text-secondary)}.user-last-msg{font-size:13px;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread-badge{background:var(--color-primary);color:#fff;border-radius:12px;font-size:12px;font-weight:700;padding:2px 7px;min-width:20px;text-align:center;flex-shrink:0}@media (max-width: 768px){.sidebar{width:100%;border-right:none}.user-item{padding:12px 16px}}.msg-input-bar{display:flex;align-items:flex-end;gap:10px;padding:12px 16px;background:#fff;border-top:1px solid var(--color-border);flex-shrink:0}.msg-input-field{flex:1;padding:10px 14px;border:1.5px solid var(--color-border);border-radius:22px;font-size:15px;font-family:var(--font-family);color:var(--color-text);resize:none;outline:none;line-height:1.45;max-height:140px;overflow-y:hidden;transition:border-color .15s;background:var(--color-bg)}.msg-input-field:focus{border-color:var(--color-primary);background:#fff}.msg-input-field:disabled{opacity:.5;cursor:not-allowed}.msg-input-field::placeholder{color:var(--color-text-secondary)}.msg-send-btn{width:42px;height:42px;border-radius:50%;border:none;background:var(--color-border);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s,transform .1s}.msg-send-btn.active{background:var(--color-primary)}.msg-send-btn.active:hover{background:var(--color-primary-hover)}.msg-send-btn:active{transform:scale(.93)}.msg-send-btn:disabled{cursor:not-allowed}@media (max-width: 768px){.msg-input-bar{padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}.msg-input-field{font-size:16px}.msg-send-btn{width:44px;height:44px}}.chat-window{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--color-bg)}.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--color-text-secondary);background:var(--color-bg)}.chat-empty-icon{opacity:.3}.chat-empty p{font-size:16px}.chat-back-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:none;background:none;cursor:pointer;color:var(--color-text);flex-shrink:0;transition:background .15s;margin-right:-4px}.chat-back-btn:hover{background:var(--color-bg)}.chat-header{display:flex;align-items:center;gap:12px;padding:10px 20px;background:#fff;border-bottom:1px solid var(--color-border);height:var(--header-height);flex-shrink:0}.chat-header-avatar{width:38px;height:38px;border-radius:50%;background:#dce8f5;color:#1877f2;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;position:relative;flex-shrink:0}.online-dot{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;border:2px solid #fff}.online-dot.online{background:var(--color-online)}.online-dot.offline{background:var(--color-offline)}.chat-header-info{display:flex;flex-direction:column;gap:2px}.chat-header-name{font-weight:700;font-size:16px;color:var(--color-text)}.chat-header-status{font-size:13px;color:var(--color-text-secondary)}.chat-header-status.online{color:var(--color-online)}.chat-header-status.typing-indicator{color:var(--color-primary);font-style:italic}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.chat-header-status.typing-indicator{animation:blink 1.2s ease-in-out infinite}.chat-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:4px}.chat-no-messages{text-align:center;color:var(--color-text-secondary);font-size:14px;margin:auto}.msg-row{display:flex;margin-bottom:2px}.msg-row.own{justify-content:flex-end}.msg-row.other{justify-content:flex-start}.msg-bubble{max-width:65%;padding:8px 12px;border-radius:18px;position:relative}.msg-row.own .msg-bubble{background:var(--color-bubble-own);color:var(--color-bubble-own-text);border-bottom-right-radius:4px}.msg-row.other .msg-bubble{background:var(--color-bubble-other);color:var(--color-bubble-other-text);border-bottom-left-radius:4px}.msg-text{font-size:15px;line-height:1.4;word-break:break-word;white-space:pre-wrap}.msg-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px}.msg-time{font-size:11px;opacity:.75}.msg-row.other .msg-time{opacity:.6}.msg-status{display:flex;align-items:center;opacity:.8}.msg-status.sending{font-size:8px;opacity:.5;animation:pulse 1s infinite}.msg-status.read svg{stroke:#a0d4ff}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.8}}@media (max-width: 768px){.chat-back-btn{display:flex}.chat-header{padding:10px 12px}.chat-messages{padding:12px}.msg-bubble{max-width:82%}}.conn-badge{position:fixed;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px;background:#323232;color:#fff;border-radius:20px;font-size:13px;font-weight:500;z-index:1000;pointer-events:none;animation:fadeIn .2s ease}.conn-dot{width:8px;height:8px;border-radius:50%;background:#f5a623;animation:pulse 1.2s infinite}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-6px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.layout{display:flex;height:100vh;height:100dvh;overflow:hidden}@media (max-width: 768px){.layout:not(.chat-open) .chat-window,.layout:not(.chat-open) .chat-empty{display:none}.layout.chat-open .sidebar{display:none}.layout.chat-open .chat-window,.layout.chat-open .chat-empty{width:100%}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #f0f2f5;--color-sidebar-bg: #ffffff;--color-border: #e4e6eb;--color-primary: #0084ff;--color-primary-hover: #0070d6;--color-text: #1c1e21;--color-text-secondary: #65676b;--color-online: #31a24c;--color-offline: #bcc0c4;--color-bubble-own: #0084ff;--color-bubble-own-text: #ffffff;--color-bubble-other: #e4e6eb;--color-bubble-other-text: #1c1e21;--sidebar-width: 320px;--header-height: 56px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);height:100vh;height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased}#root{height:100vh;height:100dvh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#bcc0c4}