*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{color:#1f2937;background:#eef2f5;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.chat-page{background:#fff;width:100%;height:100vh;display:flex;overflow:hidden}.chat-sidebar{background:#fff;border-right:1px solid #e5e7eb;flex-direction:column;width:340px;min-width:340px;height:100vh;display:flex}.sidebar-header{background:#f8fafc;justify-content:space-between;align-items:center;gap:15px;min-height:105px;padding:18px 20px;display:flex}.sidebar-header h1{color:#111827;margin-bottom:5px;font-size:25px}.sidebar-header p{color:#6b7280;font-size:13px}.sidebar-header strong{color:#374151}.sidebar-header button{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:7px;padding:8px 12px;font-weight:600}.sidebar-header button:hover{background:#dc2626}.chat-sidebar hr{border:none;border-top:1px solid #e5e7eb}.chat-sidebar>h3{text-transform:uppercase;letter-spacing:.5px;color:#6b7280;padding:15px 18px 10px;font-size:14px}.users-list{flex:1;overflow-y:auto}.user-item{text-align:left;cursor:pointer;background:0 0;border:none;border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:15px 18px;transition:background .15s;display:flex}.user-item:hover{background:#f8fafc}.user-item.active{background:#e8f5f1}.user-item strong{color:#111827;margin-bottom:3px;font-size:15px;display:block}.user-item div div{color:#6b7280;font-size:13px}.user-item>span{white-space:nowrap;color:#6b7280;font-size:11px}.chat-main{background:#f8fafc;flex-direction:column;flex:1;min-width:0;height:100vh;display:flex}.empty-chat{text-align:center;color:#64748b;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.empty-chat h2{color:#334155;margin-bottom:8px;font-size:28px}.empty-chat p{font-size:15px}.chat-header{background:#fff;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;height:76px;min-height:76px;padding:12px 22px;display:flex}.chat-header h2{color:#111827;font-size:18px}.chat-header p{color:#6b7280;margin-top:3px;font-size:13px}.chat-header>span{color:#64748b;font-size:13px}.messages-area{background:radial-gradient(circle,#0f766e06,#0000 60%),#f4f7f9;flex:1;padding:24px;overflow-y:auto}.message-row{width:100%;margin-bottom:10px;display:flex}.my-message-row{justify-content:flex-end}.other-message-row{justify-content:flex-start}.message-bubble{border-radius:12px;max-width:min(65%,650px);padding:9px 12px 6px;box-shadow:0 1px 2px #00000014}.message-bubble p{word-break:break-word;white-space:pre-wrap;margin:0;font-size:14px;line-height:1.45}.message-bubble small{text-align:right;opacity:.65;margin-top:4px;font-size:10px;display:block}.my-message{color:#1f2937;background:#d9fdd3;border-bottom-right-radius:3px}.other-message{color:#1f2937;background:#fff;border-bottom-left-radius:3px}.message-input-area{background:#fff;border-top:1px solid #e5e7eb;align-items:center;gap:10px;min-height:72px;padding:12px 18px;display:flex}.message-input-area input{background:#f8fafc;border:1px solid #dbe2e8;border-radius:24px;outline:none;flex:1;height:46px;padding:0 18px;font-size:14px}.message-input-area input:focus{background:#fff;border-color:#0f766e}.message-input-area button{color:#fff;cursor:pointer;background:#0f766e;border:none;border-radius:22px;height:44px;padding:0 20px;font-weight:600}.message-input-area button:hover{background:#0d665f}.message-input-area button:disabled{opacity:.5;cursor:not-allowed}.users-list::-webkit-scrollbar{width:6px}.messages-area::-webkit-scrollbar{width:6px}.users-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}.messages-area::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}@media (width<=768px){.chat-sidebar{width:280px;min-width:280px}.sidebar-header{padding:14px}.sidebar-header h1{font-size:21px}.message-bubble{max-width:80%}}@media (width<=600px){.chat-sidebar{width:110px;min-width:110px}.sidebar-header{flex-direction:column;min-height:auto;padding:12px 8px}.sidebar-header h1{font-size:17px}.sidebar-header p{display:none}.chat-sidebar>h3{padding:10px 8px}.user-item{flex-direction:column;align-items:flex-start;padding:12px 8px}.user-item div div{display:none}.user-item>span{font-size:9px}.messages-area{padding:14px 10px}.message-bubble{max-width:88%}.message-input-area{padding:9px}.message-input-area button{padding:0 14px}}.chat-header-actions{align-items:center;gap:14px;display:flex}.close-chat-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:22px;line-height:1;transition:background .15s,color .15s;display:flex}.close-chat-btn:hover{color:#dc2626;background:#fee2e2}.user-status-area{flex-direction:column;align-items:flex-end;gap:5px;display:flex}.unread-badge{color:#fff;background:#0f766e;border-radius:20px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 6px;font-size:11px;font-weight:700;display:flex}.online-status{color:#64748b;font-size:11px}.message-meta{white-space:nowrap;justify-content:flex-end;align-items:center;gap:6px;display:flex!important}.message-seen-status{font-size:10px}.my-message .message-seen-status{color:#0f766e}.typing-text{color:#0f766e;font-size:13px;font-weight:600}.date-separator{justify-content:center;width:100%;margin:18px 0;display:flex}.date-separator span{color:#475569;background:#e2e8f0;border-radius:10px;padding:5px 12px;font-size:11px;font-weight:600}.chat-search{padding:10px 14px}.chat-search input{background:#f8fafc;border:1px solid #dbe2e8;border-radius:20px;outline:none;width:100%;height:40px;padding:0 14px;font-size:13px}.chat-search input:focus{background:#fff;border-color:#0f766e}.user-main-info{align-items:center;gap:11px;min-width:0;display:flex}.user-avatar{color:#fff;background:#0f766e;border-radius:50%;justify-content:center;align-items:center;width:42px;min-width:42px;height:42px;font-size:17px;font-weight:700;display:flex;overflow:hidden}.user-avatar img{object-fit:cover;width:100%;height:100%}.user-text-info{min-width:0}.user-text-info strong{display:block}.user-text-info>div{text-overflow:ellipsis;white-space:nowrap;color:#64748b;max-width:170px;font-size:13px;overflow:hidden}.current-user-info{align-items:center;gap:12px;min-width:0;display:flex}.current-user-avatar-wrap{width:48px;min-width:48px;height:48px;position:relative}.current-user-avatar{color:#fff;background:#0f766e;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;font-weight:700;display:flex;overflow:hidden}.current-user-avatar img{object-fit:cover;width:100%;height:100%}.profile-camera-btn{cursor:pointer;justify-content:center;align-items:center;display:flex;position:absolute;bottom:-3px;right:-3px;color:#fff!important;background:#0f766e!important;border:2px solid #fff!important;border-radius:50%!important;width:24px!important;height:24px!important;padding:0!important}.profile-camera-btn:hover{background:#0d665f!important}.profile-camera-btn:disabled{opacity:.6;cursor:wait}.chat-image-message{object-fit:cover;cursor:pointer;border-radius:10px;width:100%;max-width:320px;max-height:360px;display:block}.image-caption{margin-top:8px!important}.attachment-btn{justify-content:center;align-items:center;min-width:44px;height:44px;display:flex;color:#475569!important;background:#f1f5f9!important;border-radius:50%!important;width:44px!important;padding:0!important}.attachment-btn:hover{color:#0f766e!important;background:#e2e8f0!important}.image-preview-area{background:#fff;border-top:1px solid #e5e7eb;align-items:flex-end;gap:12px;padding:12px 18px;display:flex}.image-preview-card{width:110px;height:110px;position:relative}.image-preview-card img{object-fit:cover;border-radius:10px;width:100%;height:100%}.remove-preview-btn{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:flex;position:absolute;top:-8px;right:-8px}.send-image-btn{color:#fff;cursor:pointer;background:#0f766e;border:none;border-radius:20px;height:40px;padding:0 16px;font-weight:600}.message-bubble{position:relative}.message-reply-btn{color:#64748b;cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;margin-top:6px;padding:2px 0;font-size:10px;font-weight:600;display:inline-flex}.message-reply-btn:hover{color:#0f766e}.quoted-reply{background:#0f766e14;border-left:3px solid #0f766e;border-radius:6px;margin-bottom:8px;padding:7px 9px;overflow:hidden}.quoted-reply>strong{color:#0f766e;margin-bottom:3px;font-size:11px;display:block}.quoted-reply-content{align-items:center;gap:7px;min-width:0;display:flex}.quoted-reply-content img{object-fit:cover;border-radius:5px;flex-shrink:0;width:34px;height:34px}.quoted-reply-content span{text-overflow:ellipsis;white-space:nowrap;color:#475569;max-width:230px;font-size:11px;display:block;overflow:hidden}.reply-compose-preview{background:#fff;border-top:1px solid #e5e7eb;align-items:center;gap:10px;min-height:60px;padding:9px 52px 9px 22px;display:flex;position:relative}.reply-compose-bar{background:#0f766e;border-radius:4px;width:4px;position:absolute;top:10px;bottom:10px;left:14px}.reply-compose-content{flex-direction:column;flex:1;min-width:0;display:flex}.reply-compose-content strong{color:#0f766e;font-size:12px}.reply-compose-content span{text-overflow:ellipsis;white-space:nowrap;color:#64748b;margin-top:3px;font-size:12px;overflow:hidden}.reply-compose-thumb{object-fit:cover;border-radius:6px;flex-shrink:0;width:42px;height:42px}.reply-compose-close{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;padding:0;display:flex;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.reply-compose-close:hover{color:#ef4444;background:#f1f5f9}.quoted-reply-button{text-align:left;cursor:pointer;border-top:none;border-bottom:none;border-right:none;width:100%}.quoted-reply-button:hover{background:#0f766e24}.message-highlight .message-bubble{animation:1.8s originalMessageHighlight}@keyframes originalMessageHighlight{0%{box-shadow:0 0 0 3px #0f766e73,0 1px 2px #00000014}to{box-shadow:0 1px 2px #00000014}}.message-actions{align-items:center;gap:10px;margin-top:6px;display:flex}.message-delete-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:2px 0;font-size:10px;font-weight:600;display:inline-flex}.message-delete-btn:hover{color:#ef4444}.deleted-message-text{color:#64748b;font-size:13px;font-style:italic}.reaction-picker-wrap{position:relative}.message-reaction-btn{color:#64748b;cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:2px 0;font-size:10px;font-weight:600;display:inline-flex}.message-reaction-btn:hover{color:#0f766e}.reaction-picker{z-index:50;background:#fff;border:1px solid #e2e8f0;border-radius:20px;align-items:center;gap:3px;padding:7px;display:flex;position:absolute;bottom:28px;left:0;box-shadow:0 8px 24px #0000001f}.reaction-picker button{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:31px;height:31px;padding:0;font-size:18px;transition:transform .15s,background .15s;display:flex}.reaction-picker button:hover{background:#f1f5f9;transform:scale(1.2)}.message-reactions{flex-wrap:wrap;gap:4px;margin-top:5px;display:flex}.reaction-chip{cursor:pointer;background:#fff;border:1px solid #dbe2e8;border-radius:12px;justify-content:center;align-items:center;gap:3px;min-width:28px;height:23px;padding:0 6px;display:inline-flex}.reaction-chip:hover{border-color:#0f766e}.reaction-chip span{font-size:14px}.reaction-chip small{color:#64748b;font-size:10px}.message-with-actions{flex-direction:column;gap:4px;max-width:min(65%,650px);display:flex}.message-with-actions.mine{align-items:flex-end}.message-with-actions.theirs{align-items:flex-start}.message-with-actions .message-bubble{max-width:100%}.message-actions-outside{opacity:.75;align-items:center;gap:10px;padding:0 6px;display:flex}.message-actions-outside button{color:#64748b;cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:2px 0;font-size:10px;font-weight:600;display:inline-flex}.message-actions-outside button:hover{color:#0f766e}.message-with-actions.mine .message-actions-outside{justify-content:flex-end}.message-with-actions.theirs .message-actions-outside{justify-content:flex-start}.chat-file-message{min-width:230px;max-width:330px;color:inherit;background:#ffffff8c;border-radius:9px;align-items:center;gap:10px;padding:10px;text-decoration:none;display:flex}.chat-file-message:hover{background:#ffffffd9}.chat-file-icon{color:#0f766e;background:#e2e8f0;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.chat-file-info{flex-direction:column;flex:1;min-width:0;display:flex}.chat-file-info strong{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.chat-file-info span{color:#64748b;margin-top:3px;font-size:10px}.file-preview-area{background:#fff;border-top:1px solid #e5e7eb;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;display:flex}.file-preview-card{background:#f8fafc;border-radius:9px;flex:1;align-items:center;gap:10px;min-width:0;padding:9px 12px;display:flex}.file-preview-card>div{flex-direction:column;flex:1;min-width:0;display:flex}.file-preview-card strong{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.file-preview-card span{color:#64748b;margin-top:3px;font-size:10px}.remove-file-preview-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;padding:0;display:flex}.remove-file-preview-btn:hover{color:#ef4444;background:#fee2e2}.send-file-btn{color:#fff;cursor:pointer;background:#0f766e;border:none;border-radius:20px;height:40px;padding:0 16px;font-weight:600}.voice-note-btn.recording{color:#ef4444!important;background:#fee2e2!important}.voice-recording-area{background:#fff;border-top:1px solid #e5e7eb;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;display:flex}.recording-status{align-items:center;gap:8px;display:flex}.recording-dot{background:#ef4444;border-radius:50%;width:10px;height:10px;animation:1s infinite recordingBlink}@keyframes recordingBlink{50%{opacity:.25}}.recording-actions{gap:8px;display:flex}.cancel-recording-btn,.stop-recording-btn{cursor:pointer;border:none;border-radius:18px;align-items:center;gap:5px;height:36px;padding:0 12px;display:flex}.stop-recording-btn{color:#fff;background:#ef4444}.audio-preview-area{background:#fff;border-top:1px solid #e5e7eb;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;display:flex}.audio-preview-area audio{max-width:380px}.audio-preview-actions{gap:8px;display:flex}.send-audio-btn{color:#fff;cursor:pointer;background:#0f766e;border:none;border-radius:19px;height:38px;padding:0 15px}.cancel-audio-btn{cursor:pointer;background:#f1f5f9;border:none;border-radius:19px;align-items:center;gap:4px;height:38px;padding:0 12px;display:flex}.chat-audio-message{align-items:center;gap:8px;min-width:250px;display:flex}.chat-audio-message audio{width:240px;max-width:100%}.message-forward-btn{color:#64748b;cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:2px 0;font-size:10px;font-weight:600;display:inline-flex}.message-forward-btn:hover{color:#0f766e}.forwarded-label{color:#64748b;align-items:center;gap:4px;margin-bottom:5px;font-size:10px;font-style:italic;display:flex}.forward-modal-backdrop{z-index:1000;background:#0f172a73;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.forward-modal{background:#fff;border-radius:16px;flex-direction:column;width:100%;max-width:420px;max-height:75vh;display:flex;overflow:hidden;box-shadow:0 20px 60px #0003}.forward-modal-header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:16px 18px;display:flex}.forward-modal-header h3{color:#111827;margin:0;font-size:17px}.forward-modal-header p{color:#64748b;margin-top:3px;font-size:12px}.forward-modal-header button{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:flex}.forward-modal-header button:hover{background:#f1f5f9}.forward-message-preview{background:#f8fafc;border-left:3px solid #0f766e;border-radius:7px;flex-direction:column;margin:12px 18px 5px;padding:10px 12px;display:flex}.forward-message-preview strong{text-overflow:ellipsis;white-space:nowrap;color:#334155;font-size:13px;overflow:hidden}.forward-message-preview span{text-overflow:ellipsis;white-space:nowrap;color:#64748b;margin-top:3px;font-size:11px;overflow:hidden}.forward-users-list{padding:8px 0 14px;overflow-y:auto}.forward-user-item{text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:11px;width:100%;padding:11px 18px;display:flex}.forward-user-item:hover{background:#f8fafc}.forward-user-item:disabled{opacity:.6;cursor:wait}.forward-user-item>div:nth-child(2){flex-direction:column;flex:1;min-width:0;display:flex}.forward-user-item strong{color:#111827;font-size:14px}.forward-user-item>div:nth-child(2) span{color:#64748b;margin-top:2px;font-size:11px}.forward-send-label{color:#0f766e;font-size:12px;font-weight:700}.message-edit-btn{color:#64748b;cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:2px 0;font-size:10px;font-weight:600;display:inline-flex}.message-edit-btn:hover{color:#0f766e}.message-edited-label{color:#64748b;font-size:9px;font-style:italic}.edit-message-backdrop{z-index:1100;background:#0f172a73;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.edit-message-modal{background:#fff;border-radius:16px;width:100%;max-width:480px;padding:0;overflow:hidden;box-shadow:0 20px 60px #0003}.edit-message-header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:16px 18px;display:flex}.edit-message-header h3{color:#111827;margin:0;font-size:17px}.edit-message-header p{color:#64748b;margin-top:3px;font-size:12px}.edit-message-header button{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:flex}.edit-message-header button:hover{background:#f1f5f9}.edit-message-modal textarea{resize:vertical;color:#1f2937;border:1px solid #dbe2e8;border-radius:10px;outline:none;width:calc(100% - 36px);min-height:120px;margin:18px;padding:12px 14px;font-family:inherit;font-size:14px}.edit-message-modal textarea:focus{border-color:#0f766e}.edit-message-footer{justify-content:flex-end;gap:8px;padding:12px 18px 16px;display:flex}.edit-cancel-btn,.edit-save-btn{cursor:pointer;border:none;border-radius:19px;height:38px;padding:0 16px;font-weight:600}.edit-cancel-btn{color:#475569;background:#f1f5f9}.edit-save-btn{color:#fff;background:#0f766e}.edit-save-btn:disabled,.edit-cancel-btn:disabled{opacity:.55;cursor:not-allowed}.chat-message-search-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:flex}.chat-message-search-btn:hover{color:#0f766e;background:#f1f5f9}.message-search-panel{background:#fff;border-bottom:1px solid #e5e7eb}.message-search-bar{align-items:center;gap:8px;padding:10px 14px;display:flex}.message-search-bar input{border:1px solid #dbe2e8;border-radius:18px;outline:none;flex:1;height:38px;padding:0 11px}.message-search-bar input:focus{border-color:#0f766e}.message-search-submit{color:#fff;cursor:pointer;background:#0f766e;border:none;border-radius:18px;height:36px;padding:0 13px}.message-search-close{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:flex}.message-search-results{border-top:1px solid #f1f5f9;max-height:260px;overflow-y:auto}.message-search-result{text-align:left;cursor:pointer;background:#fff;border:none;border-bottom:1px solid #f1f5f9;width:100%;padding:10px 16px;display:block}.message-search-result:hover{background:#f8fafc}.message-search-result-top{justify-content:space-between;gap:10px;display:flex}.message-search-result-top strong{color:#0f766e;font-size:12px}.message-search-result-top span{color:#94a3b8;font-size:10px}.message-search-result-text{text-overflow:ellipsis;white-space:nowrap;color:#475569;margin-top:4px;font-size:12px;overflow:hidden}.message-search-empty{color:#64748b;padding:13px 16px;font-size:12px}.chat-call-btn{color:#0f766e;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:flex}.chat-call-btn:hover{background:#ecfdf5}.chat-call-btn:disabled{opacity:.35;cursor:not-allowed}.call-overlay{z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0f172ab8;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.incoming-call-card,.active-call-card{text-align:center;background:#fff;border-radius:22px;flex-direction:column;align-items:center;width:100%;max-width:350px;padding:30px 24px;display:flex;box-shadow:0 25px 70px #0000004d}.call-avatar{color:#fff;background:#0f766e;border-radius:50%;justify-content:center;align-items:center;width:78px;height:78px;font-size:30px;font-weight:700;display:flex;overflow:hidden}.call-avatar.large{width:100px;height:100px;font-size:38px}.call-avatar img{object-fit:cover;width:100%;height:100%}.incoming-call-label,.active-call-label{color:#64748b;margin-top:16px;margin-bottom:4px;font-size:12px}.incoming-call-card h2,.active-call-card h2{color:#111827;margin:4px 0}.incoming-call-card>p:last-of-type{color:#64748b}.incoming-call-actions{justify-content:space-around;align-items:center;width:100%;margin-top:28px;display:flex}.accept-call-btn,.decline-call-btn{color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:58px;height:58px;padding:0;display:flex}.accept-call-btn{background:#22c55e}.decline-call-btn{background:#ef4444}.call-status-text{color:#64748b;margin-top:7px;font-size:14px}.active-call-actions{justify-content:center;gap:24px;width:100%;margin-top:30px;display:flex}.mute-call-btn,.end-call-btn{cursor:pointer;border:none;border-radius:14px;flex-direction:column;align-items:center;gap:5px;min-width:78px;padding:11px 14px;display:flex}.mute-call-btn{color:#334155;background:#f1f5f9}.mute-call-btn.muted{color:#dc2626;background:#fee2e2}.end-call-btn{color:#fff;background:#ef4444}.mute-call-btn span,.end-call-btn span{font-size:11px;font-weight:600}.call-log-message{align-items:center;gap:10px;min-width:180px;padding:4px 2px;display:flex}.call-log-icon{color:#16a34a;background:#dcfce7;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.call-log-message.missed .call-log-icon{color:#dc2626;background:#fee2e2}.call-log-info{flex-direction:column;display:flex}.call-log-info strong{font-size:13px}.call-log-info span{color:#64748b;margin-top:3px;font-size:10px}.video-call-overlay{padding:0}.video-call-card{background:#0f172a;border-radius:20px;flex-direction:column;width:min(1000px,96vw);height:min(720px,92vh);display:flex;overflow:hidden}.video-call-stage{background:#020617;flex:1;position:relative;overflow:hidden}.remote-video{object-fit:cover;background:#020617;width:100%;height:100%}.local-video{object-fit:cover;background:#111827;border:2px solid #fff;border-radius:12px;width:180px;height:130px;position:absolute;bottom:18px;right:18px;box-shadow:0 8px 30px #0006}.video-call-info{color:#fff;background:#00000073;border-radius:10px;flex-direction:column;padding:8px 12px;display:flex;position:absolute;top:18px;left:18px}.video-call-info strong{font-size:15px}.video-call-info span{margin-top:3px;font-size:12px}.video-call-card .active-call-actions{background:#111827;margin:0;padding:14px}@media (width<=600px){.video-call-card{border-radius:0;width:100%;height:100%}.local-video{width:110px;height:150px;bottom:12px;right:12px}}.screen-sharing-badge{color:#fff;background:#0f766ee6;border-radius:6px;padding:4px 7px;font-size:10px;font-weight:600;position:absolute;bottom:8px;left:8px}.mute-call-btn.screen-sharing{color:#0f766e;background:#ccfbf1}.mute-call-btn:disabled{opacity:.4;cursor:not-allowed}.incoming-ringing-text{color:#16a34a;margin-top:7px;font-size:13px;font-weight:600}.incoming-call-action-item{color:#64748b;flex-direction:column;align-items:center;gap:7px;font-size:11px;display:flex}.incoming-call-ringing{pointer-events:none;width:105px;height:105px;position:absolute}.incoming-call-ringing span{border:2px solid #22c55e66;border-radius:50%;animation:1.8s infinite chatterlyRing;position:absolute;inset:0}.incoming-call-ringing span:nth-child(2){animation-delay:.6s}.incoming-call-ringing span:nth-child(3){animation-delay:1.2s}@keyframes chatterlyRing{0%{opacity:1;transform:scale(.7)}to{opacity:0;transform:scale(1.6)}}.professional-call-overlay{z-index:3000;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;background:#07111f;justify-content:center;align-items:center;padding:0;display:flex;position:fixed;inset:0;overflow:hidden}.professional-video-stage{background:#020617;position:absolute;inset:0;overflow:hidden}.professional-remote-video{object-fit:cover;background:#020617;width:100%;height:100%;display:block}.remote-video-placeholder{background:radial-gradient(circle,#1e293b 0%,#020617 70%);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.professional-video-topbar{z-index:5;background:linear-gradient(#020617d1,#02061700);justify-content:space-between;align-items:center;gap:18px;min-height:82px;padding:20px clamp(18px,4vw,42px);display:flex;position:absolute;top:0;left:0;right:0}.professional-call-user{flex-direction:column;display:flex}.professional-call-user strong{font-size:18px;font-weight:700}.professional-call-user span{color:#d1d5db;margin-top:4px;font-size:13px}.professional-sharing-badge{color:#fff;background:#0f766ee0;border:1px solid #ffffff2e;border-radius:999px;align-items:center;gap:6px;padding:8px 11px;font-size:12px;font-weight:600;display:inline-flex}.professional-local-preview{z-index:7;aspect-ratio:3/4;background:#111827;border:2px solid #ffffffc7;border-radius:18px;width:clamp(120px,18vw,220px);position:absolute;bottom:120px;right:clamp(14px,3vw,30px);overflow:hidden;box-shadow:0 14px 45px #0006}.professional-local-video{object-fit:cover;width:100%;height:100%}.professional-camera-off{color:#e5e7eb;background:#111827;flex-direction:column;justify-content:center;align-items:center;gap:7px;font-size:11px;display:flex;position:absolute;inset:0}.professional-local-badge{color:#fff;background:#0f766ee6;border-radius:7px;padding:5px 8px;font-size:10px;font-weight:600;position:absolute;bottom:8px;left:8px}.professional-audio-stage{background:radial-gradient(circle at 50% 35%,#16354a 0%,#0b1e2d 32%,#06111e 72%);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.audio-call-glow{filter:blur(12px);background:#14b8a61f;border-radius:50%;width:320px;height:320px;animation:2.2s ease-in-out infinite professionalCallGlow;position:absolute}@keyframes professionalCallGlow{0%,to{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}.professional-call-avatar{z-index:2;color:#fff;background:#0f766e;border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 50px #00000047}.professional-call-avatar.large{width:108px;height:108px;font-size:40px}.professional-call-avatar.xl{width:145px;height:145px;font-size:52px}.professional-call-avatar img{object-fit:cover;width:100%;height:100%}.professional-call-type{z-index:2;color:#94a3b8;margin:22px 0 2px;font-size:13px;position:relative}.professional-audio-stage h2{z-index:2;margin:5px 0;font-size:clamp(24px,4vw,34px);position:relative}.professional-call-status{z-index:2;color:#cbd5e1;margin-top:5px;font-size:15px;position:relative}.professional-call-controls{left:50%;bottom:max(18px, env(safe-area-inset-bottom));z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0f172ab8;border:1px solid #ffffff21;border-radius:24px;justify-content:center;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:10px 13px;display:flex;position:fixed;overflow-x:auto;transform:translate(-50%);box-shadow:0 18px 55px #00000059}.professional-call-control,.professional-end-call-control{color:#fff;cursor:pointer;border:none;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:64px;padding:9px 10px;transition:transform .16s,background .16s;display:flex}.professional-call-control{background:#ffffff1a}.professional-call-control:hover{background:#ffffff2b;transform:translateY(-2px)}.professional-call-control.active{color:#fbbf24;background:#f59e0b38}.professional-call-control:disabled{opacity:.35;cursor:not-allowed;transform:none}.professional-end-call-control{background:#ef4444}.professional-end-call-control:hover{background:#dc2626;transform:translateY(-2px)}.professional-call-control span,.professional-end-call-control span{white-space:nowrap;font-size:10px;font-weight:600}@media (width<=600px){.professional-video-topbar{min-height:70px;padding:16px}.professional-call-user strong{font-size:16px}.professional-local-preview{border-radius:15px;width:110px;bottom:108px;right:12px}.professional-call-controls{width:calc(100% - 20px);bottom:max(10px, env(safe-area-inset-bottom));border-radius:20px;justify-content:flex-start;padding:9px 10px}.professional-call-control,.professional-end-call-control{min-width:58px;padding:8px}.professional-call-avatar.xl{width:120px;height:120px;font-size:44px}.professional-sharing-badge{padding:6px 8px;font-size:10px}}.call-reconnecting-banner{z-index:3100;color:#fde68a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172ae0;border:1px solid #fbbf2459;border-radius:999px;align-items:center;gap:8px;padding:9px 14px;font-size:12px;font-weight:600;display:flex;position:fixed;top:18px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000040}.call-reconnecting-dot{background:#f59e0b;border-radius:50%;flex-shrink:0;width:8px;height:8px;animation:1s infinite reconnectPulse}@keyframes reconnectPulse{50%{opacity:.25}}.professional-video-status-area{align-items:center;gap:8px;display:flex}.call-quality-indicator{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172aa6;border-radius:999px;align-items:center;gap:5px;padding:7px 10px;font-size:11px;font-weight:600;display:inline-flex}.call-quality-excellent{color:#86efac}.call-quality-good{color:#bef264}.call-quality-weak{color:#facc15}.call-quality-poor{color:#f87171}.call-quality-unknown{color:#cbd5e1}.audio-call-quality{z-index:2;margin-top:13px;position:relative}.poor-connection-warning{z-index:3110;color:#fecaca;background:#7f1d1de6;border-radius:999px;align-items:center;gap:6px;padding:8px 12px;font-size:12px;font-weight:600;display:flex;position:fixed;top:70px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000040}@media (width<=600px){.professional-video-status-area{gap:5px}.call-quality-indicator{padding:6px 8px;font-size:10px}.poor-connection-warning{font-size:11px;top:62px}}.calls-page{background:#f8fafc;min-height:100vh;padding:28px clamp(16px,4vw,44px)}.calls-page-header{justify-content:space-between;align-items:center;gap:16px;max-width:900px;margin:0 auto 22px;display:flex}.calls-page-header h1{color:#0f172a;margin:0;font-size:28px}.calls-page-header p{color:#64748b;margin:5px 0 0;font-size:13px}.calls-refresh-btn{color:#fff;cursor:pointer;background:#0f766e;border:none;border-radius:19px;height:38px;padding:0 15px;font-weight:600}.calls-list{background:#fff;border:1px solid #e2e8f0;border-radius:16px;max-width:900px;margin:0 auto;overflow:hidden}.call-history-item{border-bottom:1px solid #f1f5f9;align-items:center;gap:12px;padding:12px 14px;display:flex}.call-history-item:last-child{border-bottom:none}.call-history-item:hover{background:#f8fafc}.call-history-user{text-align:left;cursor:pointer;background:0 0;border:none;flex:1;align-items:center;gap:12px;min-width:0;padding:0;display:flex}.call-history-avatar{color:#fff;background:#0f766e;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;font-size:18px;font-weight:700;display:flex;overflow:hidden}.call-history-avatar img{object-fit:cover;width:100%;height:100%}.call-history-main{flex:1;min-width:0}.call-history-main strong{text-overflow:ellipsis;white-space:nowrap;color:#0f172a;font-size:14px;display:block;overflow:hidden}.call-history-meta{color:#64748b;flex-wrap:wrap;align-items:center;gap:9px;margin-top:4px;font-size:11px;display:flex}.call-history-meta>span:first-child{align-items:center;gap:4px;display:inline-flex}.missed-call-text{color:#dc2626!important}.call-history-actions{align-items:center;gap:7px;display:flex}.call-history-actions button{color:#0f766e;cursor:pointer;background:#ecfdf5;border:none;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;padding:0;display:flex}.call-history-actions button:hover{background:#ccfbf1}.call-history-actions button:disabled{opacity:.4;cursor:not-allowed}.calls-empty-state{color:#64748b;text-align:center;background:#fff;border:1px dashed #cbd5e1;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:8px;max-width:900px;min-height:280px;margin:0 auto;display:flex}.calls-empty-state strong{color:#334155;margin-top:4px}.calls-empty-state span{font-size:12px}@media (width<=600px){.calls-page{padding:18px 10px}.calls-page-header h1{font-size:23px}.call-history-item{padding:11px 10px}.call-history-avatar{width:42px;height:42px}.call-history-actions button{width:35px;height:35px}}.chat-sidebar-nav{background:#f1f5f9;border-radius:12px;grid-template-columns:1fr 1fr;gap:4px;margin:14px 18px 18px;padding:4px;display:grid}.chat-sidebar-nav-item{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:9px;justify-content:center;align-items:center;gap:7px;min-height:40px;padding:0 12px;font-size:13px;font-weight:600;transition:background .16s,color .16s,box-shadow .16s;display:flex}.chat-sidebar-nav-item:hover{color:#0f766e;background:#fff}.chat-sidebar-nav-item.active{color:#0f766e;background:#fff;box-shadow:0 1px 3px #0f172a1a}@media (width<=600px){.chat-sidebar-nav{margin:12px 12px 16px}.chat-sidebar-nav-item{min-height:38px;font-size:12px}}.calls-top-navigation{justify-content:space-between;align-items:center;max-width:900px;margin:0 auto 16px;display:flex}.calls-navigation-btn{color:#334155;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:10px;justify-content:center;align-items:center;gap:7px;min-height:40px;padding:0 14px;font-size:13px;font-weight:600;transition:background .16s,color .16s,border-color .16s;display:inline-flex}.calls-navigation-btn:hover{color:#0f766e;background:#f0fdfa;border-color:#99f6e4}.calls-close-btn{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;transition:background .16s,color .16s,border-color .16s;display:inline-flex}.calls-close-btn:hover{color:#dc2626;background:#fef2f2;border-color:#fecaca}@media (width<=600px){.calls-top-navigation{margin-bottom:12px}.calls-navigation-btn{min-height:38px;padding:0 11px;font-size:12px}.calls-close-btn{width:38px;height:38px}}.register-page{background:radial-gradient(circle at 0 0,#8b5cf629,#0000 34%),radial-gradient(circle at 100% 100%,#a855f724,#0000 34%),linear-gradient(135deg,#f5f3ff,#fff 48%,#faf5ff);justify-content:center;align-items:center;min-height:100vh;padding:30px 16px;display:flex}.register-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffffff0;border:1px solid #c4b5fdcc;border-radius:22px;width:100%;max-width:520px;padding:30px clamp(20px,5vw,36px);box-shadow:0 24px 70px #7c3aed24}.register-brand-icon{color:#fff;background:linear-gradient(135deg,#6d28d9,#7c3aed);border-radius:16px;justify-content:center;align-items:center;width:54px;height:54px;margin:0 auto 14px;display:flex;box-shadow:0 10px 24px #7c3aed47}.register-header{text-align:center;margin-bottom:24px}.register-header h1{color:#0f172a;margin:0;font-size:clamp(24px,5vw,30px);font-weight:800}.register-header p{color:#64748b;margin:8px 0 0;font-size:13px;line-height:1.5}.register-form{gap:15px;display:grid}.register-field{flex-direction:column;gap:6px;display:flex}.register-field label{color:#334155;font-size:12px;font-weight:700}.register-field label span{color:#94a3b8;font-weight:500}.register-field input{color:#0f172a;width:100%;height:44px;font:inherit;background:#fff;border:1px solid #cbd5e1;border-radius:11px;outline:none;padding:0 13px;font-size:13px;transition:border-color .16s,box-shadow .16s}.register-field input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1f}.register-field small{color:#94a3b8;font-size:10px;line-height:1.4}.register-password-wrap{position:relative}.register-password-wrap input{padding-right:46px}.register-password-toggle{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.register-password-toggle:hover{color:#6d28d9;background:#f5f3ff}.register-submit-btn{color:#fff;cursor:pointer;background:linear-gradient(90deg,#6d28d9,#7c3aed);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-height:46px;margin-top:4px;padding:0 16px;font-size:13px;font-weight:700;transition:background .16s,transform .16s,box-shadow .16s;display:flex;box-shadow:0 10px 24px #7c3aed33}.register-submit-btn:hover:not(:disabled){background:linear-gradient(90deg,#5b21b6,#6d28d9);transform:translateY(-1px);box-shadow:0 12px 28px #7c3aed42}.register-submit-btn:disabled{opacity:.65;cursor:not-allowed}.register-spinner{animation:.9s linear infinite registerSpin}@keyframes registerSpin{to{transform:rotate(360deg)}}.register-login-link{text-align:center;color:#64748b;margin:20px 0 0;font-size:12px}.register-login-link a{color:#6d28d9;font-weight:700;text-decoration:none}.register-login-link a:hover{color:#5b21b6;text-decoration:underline}@media (width<=600px){.register-page{padding:18px 10px}.register-card{border-radius:18px;padding:24px 18px}}.login-page{background:linear-gradient(135deg,#f0fdfa,#f8fafc 45%,#eef2ff);justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.login-card{background:#fff;border:1px solid #e2e8f0;border-radius:22px;width:100%;max-width:420px;padding:30px 28px;box-shadow:0 24px 70px #0f172a1f}.login-brand-icon{color:#fff;background:#0f766e;border-radius:16px;justify-content:center;align-items:center;width:54px;height:54px;margin:0 auto 14px;display:flex}.login-header{text-align:center;margin-bottom:22px}.login-header h1{color:#0f172a;margin:0;font-size:30px}.login-header p{color:#64748b;margin:7px 0 0;font-size:13px}.login-form{gap:15px;display:grid}.login-field{flex-direction:column;gap:6px;display:flex}.login-field label{color:#334155;font-size:12px;font-weight:700}.login-field input{color:#0f172a;width:100%;height:44px;font:inherit;background:#fff;border:1px solid #cbd5e1;border-radius:11px;outline:none;padding:0 13px;font-size:13px}.login-field input:focus{border-color:#0f766e;box-shadow:0 0 0 3px #0f766e1f}.login-password-wrap{position:relative}.login-password-wrap input{padding-right:46px}.login-password-toggle{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.login-password-toggle:hover{color:#0f766e;background:#f1f5f9}.login-submit-btn{color:#fff;cursor:pointer;background:#0f766e;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-height:46px;margin-top:4px;font-size:13px;font-weight:700;display:flex}.login-submit-btn:hover:not(:disabled){background:#115e59}.login-submit-btn:disabled{opacity:.65;cursor:not-allowed}.login-register-box{color:#64748b;border-top:1px solid #e2e8f0;flex-direction:column;align-items:center;gap:9px;margin-top:22px;padding-top:18px;font-size:12px;display:flex}.login-register-link{color:#0f766e;background:#f0fdfa;border:1px solid #99f6e4;border-radius:10px;justify-content:center;align-items:center;gap:7px;min-height:40px;padding:0 14px;font-weight:700;text-decoration:none;display:inline-flex}.login-register-link:hover{background:#ccfbf1}@media (width<=600px){.login-card{border-radius:18px;padding:25px 18px}}.chatterly-login-page{background:linear-gradient(135deg,#f5f3ff 0%,#fff 48%,#faf5ff 100%);justify-content:center;align-items:center;min-height:100vh;padding:48px 20px;display:flex;position:relative;overflow:hidden}.chatterly-login-orb{filter:blur(75px);pointer-events:none;border-radius:50%;position:absolute}.chatterly-login-orb-one{background:#8b5cf638;width:360px;height:360px;top:-120px;left:-100px}.chatterly-login-orb-two{background:#a855f72e;width:390px;height:390px;bottom:-130px;right:-100px}.chatterly-login-shell{z-index:2;width:100%;max-width:460px;position:relative}.chatterly-login-card{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffeb;border:1px solid #c4b5fdbf;border-radius:28px;width:100%;padding:34px 34px 30px;box-shadow:0 24px 70px #7c3aed24}.chatterly-login-logo{color:#fff;background:linear-gradient(135deg,#6d28d9,#7c3aed);border-radius:20px;justify-content:center;align-items:center;width:62px;height:62px;margin:0 auto 18px;display:flex;box-shadow:0 12px 28px #7c3aed47}.chatterly-login-heading{text-align:center;margin-bottom:28px}.chatterly-login-heading h1{color:#0f172a;letter-spacing:-.6px;margin:0;font-size:clamp(28px,5vw,34px);font-weight:800}.chatterly-login-heading p{color:#64748b;margin:9px 0 0;font-size:14px;line-height:1.55}.chatterly-login-form{flex-direction:column;gap:18px;display:flex}.chatterly-login-field{flex-direction:column;gap:8px;display:flex}.chatterly-login-field label{color:#334155;font-size:13px;font-weight:700}.chatterly-password-label-row{justify-content:space-between;align-items:center;gap:14px;display:flex}.chatterly-forgot-link{cursor:pointer;color:#6d28d9!important;background:0 0!important;border:none!important;width:auto!important;height:auto!important;padding:0!important;font-size:12px!important;font-weight:700!important}.chatterly-forgot-link:hover{text-decoration:underline;color:#5b21b6!important}.chatterly-input-wrap{width:100%;position:relative}.chatterly-input-wrap input{color:#0f172a;width:100%;height:50px;font:inherit;outline:none;font-size:14px;background:#fff!important;border:1px solid #cbd5e1!important;border-radius:14px!important;margin:0!important;padding:0 48px 0 44px!important}.chatterly-input-wrap input:focus{box-shadow:0 0 0 4px #7c3aed1a;border-color:#6d28d9!important}.chatterly-input-icon{z-index:2;color:#64748b;pointer-events:none;position:absolute;top:50%;left:15px;transform:translateY(-50%)}.chatterly-password-toggle{z-index:3;cursor:pointer;justify-content:center;align-items:center;transform:translateY(-50%);color:#64748b!important;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;box-shadow:none!important;background:0 0!important;border:none!important;border-radius:10px!important;margin:0!important;padding:0!important;display:flex!important;position:absolute!important;top:50%!important;right:8px!important}.chatterly-password-toggle:hover{color:#6d28d9!important;background:#f1f5f9!important}.chatterly-login-submit{cursor:pointer;justify-content:center;align-items:center;gap:8px;min-height:50px;margin-top:3px;display:flex;box-shadow:0 10px 24px #7c3aed33;color:#fff!important;background:linear-gradient(90deg,#6d28d9,#7c3aed)!important;border:none!important;border-radius:14px!important;width:100%!important;padding:0 18px!important;font-size:14px!important;font-weight:700!important}.chatterly-login-submit:disabled{opacity:.6;cursor:not-allowed}.chatterly-login-divider{text-align:center;margin:25px 0 18px;position:relative}.chatterly-login-divider:before{content:"";background:#e2e8f0;height:1px;position:absolute;top:50%;left:0;right:0}.chatterly-login-divider span{z-index:1;color:#94a3b8;background:#fff;padding:0 11px;font-size:12px;position:relative}.chatterly-create-account-btn{color:#6d28d9;background:#faf5ff;border:1px solid #c4b5fd;border-radius:14px;justify-content:center;align-items:center;gap:8px;min-height:46px;font-size:13px;font-weight:700;text-decoration:none;display:flex}.chatterly-create-account-btn:hover{background:#ede9fe;border-color:#a78bfa}.chatterly-login-footer{text-align:center;color:#94a3b8;letter-spacing:.5px;margin:22px 0 0;font-size:11px;font-weight:600}@media (width<=600px){.chatterly-login-page{padding:24px 12px}.chatterly-login-card{border-radius:22px;padding:28px 20px 25px}}.home-page{color:#1f2937;background:linear-gradient(135deg,#f8f7ff 0%,#f4f1ff 45%,#fafaff 100%);min-height:100vh}.home-navbar{z-index:100;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#fffffff2;border-bottom:1px solid #e8e4f5;align-items:center;min-height:72px;padding:0 32px;display:flex;position:sticky;top:0;box-shadow:0 4px 20px #5b21b60f}.home-logo{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6d28d9,#8b5cf6);border-radius:14px;justify-content:center;align-items:center;width:44px;height:44px;font-size:24px;font-weight:800;display:flex;box-shadow:0 8px 20px #6d28d940}.home-navbar h2{color:#4c1d95;margin-left:12px;font-size:22px;font-weight:800}.home-nav{align-items:center;gap:8px;margin-left:auto;display:flex}.home-nav button{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:12px;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:14px;font-weight:600;transition:background .2s,color .2s,transform .2s;display:flex}.home-nav button:hover{color:#6d28d9;background:#f3efff}.home-nav button.active{color:#6d28d9;background:#ede9fe}.home-content{width:min(1180px,100% - 40px);margin:0 auto;padding:40px 0 60px}.home-welcome{color:#fff;background:linear-gradient(135deg,#5b21b6,#7c3aed,#8b5cf6);border-radius:24px;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px;padding:30px;display:flex;box-shadow:0 20px 45px #5b21b633}.home-welcome span{text-transform:uppercase;letter-spacing:1px;opacity:.8;margin-bottom:8px;font-size:13px;font-weight:700;display:inline-block}.home-welcome h1{color:#fff;margin:0 0 10px;font-size:30px;font-weight:800}.home-welcome p{color:#ede9fe;max-width:650px;margin:0;font-size:15px;line-height:1.7}.people-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;display:grid}.people-card{text-align:center;background:#fff;border:1px solid #ebe7f5;border-radius:20px;padding:26px 20px;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;box-shadow:0 8px 30px #1e293b0f}.people-card:hover{border-color:#d8ccff;transform:translateY(-4px);box-shadow:0 18px 40px #5b21b61f}.people-avatar{color:#fff;background:linear-gradient(135deg,#6d28d9,#a78bfa);border-radius:50%;justify-content:center;align-items:center;width:92px;height:92px;margin:0 auto 16px;font-size:36px;font-weight:800;display:flex;position:relative;box-shadow:0 8px 25px #6d28d933}.people-avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%}.people-online{background:#22c55e;border:3px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;bottom:7px;right:4px}.people-card h3{color:#1e293b;margin:0 0 5px;font-size:17px;font-weight:750}.people-card>p{color:#94a3b8;margin:0 0 20px;font-size:13px}.add-friend-btn,.request-sent-btn{border:none;border-radius:11px;justify-content:center;align-items:center;gap:8px;width:100%;min-height:43px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s;display:flex}.add-friend-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6d28d9,#7c3aed);box-shadow:0 7px 18px #6d28d933}.add-friend-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px #6d28d94d}.add-friend-btn:disabled{opacity:.65;cursor:not-allowed}.request-sent-btn{color:#6d28d9;cursor:default;background:#ede9fe}.home-loading,.home-empty{color:#64748b;text-align:center;background:#fff;border:1px solid #ebe7f5;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;min-height:250px;padding:30px;display:flex;box-shadow:0 8px 30px #1e293b0d}.home-empty svg{color:#8b5cf6;margin-bottom:14px}.home-empty h3{color:#334155;margin:0 0 8px;font-size:18px}.home-empty p{color:#94a3b8;margin:0;font-size:14px}@media (width<=850px){.home-navbar{padding:0 18px}.home-navbar h2{display:none}.home-nav button{padding:0 12px;font-size:0}.home-nav button svg{width:21px;height:21px}}@media (width<=600px){.home-navbar{min-height:64px;padding:0 12px}.home-logo{width:40px;height:40px;font-size:21px}.home-nav{gap:2px}.home-nav button{justify-content:center;width:42px;height:42px;min-height:42px;padding:0}.home-content{width:calc(100% - 24px);padding:20px 0 40px}.home-welcome{border-radius:18px;padding:22px}.home-welcome h1{font-size:23px}.home-welcome p{font-size:13px}.home-welcome>svg{display:none}.people-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.people-card{border-radius:16px;padding:20px 12px}.people-avatar{width:72px;height:72px;font-size:28px}.people-card h3{font-size:15px}.add-friend-btn,.request-sent-btn{min-height:40px;font-size:12px}}@media (width<=380px){.people-grid{grid-template-columns:1fr}}.friends-page{color:#1f2937;background:linear-gradient(135deg,#f8f7ff,#f3efff 45%,#fbfaff);min-height:100vh}.friends-header{z-index:100;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffffff5;border-bottom:1px solid #e9e5f5;align-items:center;gap:16px;min-height:76px;padding:0 28px;display:flex;position:sticky;top:0;box-shadow:0 4px 20px #5b21b60f}.friends-back-btn{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:12px;justify-content:center;align-items:center;width:42px;height:42px;padding:0;display:flex}.friends-back-btn:hover{color:#6d28d9;background:#f5f3ff;border-color:#ddd6fe}.friends-header-title{align-items:center;gap:12px;display:flex}.friends-header-icon{color:#fff;background:linear-gradient(135deg,#6d28d9,#8b5cf6);border-radius:14px;justify-content:center;align-items:center;width:44px;height:44px;display:flex;box-shadow:0 8px 20px #6d28d933}.friends-header-title h1{color:#1e293b;margin:0;font-size:22px}.friends-header-title p{color:#94a3b8;margin:3px 0 0;font-size:12px}.friends-content{width:min(1100px,100% - 40px);margin:0 auto;padding:36px 0 60px}.friends-section{margin-bottom:34px}.friends-section-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.friends-section-heading h2{color:#1e293b;margin:0;font-size:21px;font-weight:800}.friends-section-heading p{color:#94a3b8;margin:5px 0 0;font-size:13px}.request-count,.friends-count{color:#6d28d9;background:#ede9fe;border-radius:17px;justify-content:center;align-items:center;min-width:34px;height:34px;padding:0 10px;font-size:13px;font-weight:800;display:flex}.request-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;display:grid}.friend-request-card{text-align:center;background:#fff;border:1px solid #ebe7f5;border-radius:20px;flex-direction:column;align-items:center;padding:22px;display:flex;box-shadow:0 8px 30px #1e293b0f}.friend-avatar{color:#fff;background:linear-gradient(135deg,#6d28d9,#a78bfa);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:78px;height:78px;font-size:30px;font-weight:800;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 20px #6d28d933}.friend-avatar img{object-fit:cover;width:100%;height:100%}.friend-online-dot{background:#22c55e;border:3px solid #fff;border-radius:50%;width:15px;height:15px;position:absolute;bottom:5px;right:4px}.friend-card-info{min-width:0}.friend-request-card .friend-card-info{margin-top:13px}.friend-card-info h3{color:#1e293b;margin:0;font-size:16px;font-weight:750}.friend-card-info p{color:#94a3b8;margin:4px 0 0;font-size:12px}.friend-request-actions{grid-template-columns:1fr 1fr;gap:9px;width:100%;margin-top:18px;display:grid}.accept-request-btn,.reject-request-btn{cursor:pointer;border:none;border-radius:11px;justify-content:center;align-items:center;gap:6px;min-height:42px;padding:0 12px;font-size:13px;font-weight:700;display:flex}.accept-request-btn{color:#fff;background:linear-gradient(135deg,#6d28d9,#7c3aed)}.reject-request-btn{color:#475569;background:#f1f5f9}.reject-request-btn:hover{color:#dc2626;background:#fee2e2}.accept-request-btn:disabled,.reject-request-btn:disabled{opacity:.55;cursor:not-allowed}.friends-list{flex-direction:column;gap:12px;display:flex}.friend-list-card{background:#fff;border:1px solid #ebe7f5;border-radius:16px;align-items:center;gap:14px;padding:16px 18px;transition:border-color .18s,transform .18s,box-shadow .18s;display:flex;box-shadow:0 6px 20px #1e293b0d}.friend-list-card:hover{border-color:#d8ccff;transform:translateY(-1px);box-shadow:0 10px 28px #5b21b614}.friend-list-card .friend-avatar{width:58px;height:58px;font-size:22px}.friend-list-info{flex:1}.friend-status{color:#94a3b8;margin-top:5px;font-size:11px;font-weight:600;display:inline-block}.friend-status.online{color:#16a34a}.friend-list-actions{align-items:center;gap:7px;display:flex}.friend-list-actions button{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:11px;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:flex}.friend-list-actions button:hover{color:#6d28d9;background:#f5f3ff;border-color:#ddd6fe}.friend-list-actions .remove-friend-btn:hover{color:#dc2626;background:#fee2e2;border-color:#fecaca}.friends-empty,.friends-loading{color:#64748b;text-align:center;background:#fff;border:1px solid #ebe7f5;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;min-height:220px;padding:28px;display:flex;box-shadow:0 8px 28px #1e293b0d}.friends-empty svg{color:#8b5cf6;margin-bottom:12px}.friends-empty h3{color:#334155;margin:0 0 7px;font-size:17px}.friends-empty p{color:#94a3b8;margin:0;font-size:13px}.find-people-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6d28d9,#7c3aed);border:none;border-radius:11px;min-height:40px;margin-top:15px;padding:0 16px;font-weight:700}@media (width<=650px){.friends-header{min-height:68px;padding:0 12px}.friends-header-title p{display:none}.friends-content{width:calc(100% - 24px);padding:22px 0 40px}.request-grid{grid-template-columns:1fr}.friend-list-card{flex-wrap:wrap;align-items:flex-start}.friend-list-info{flex:calc(100% - 80px)}.friend-list-actions{width:100%;padding-left:72px}}.app-navbar{z-index:1000;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffffff7;border-bottom:1px solid #e9e5f5;align-items:center;min-height:72px;padding:0 28px;display:flex;position:sticky;top:0;box-shadow:0 4px 20px #5b21b612}.app-navbar-brand{color:#4c1d95;cursor:pointer;background:0 0;border:none;align-items:center;gap:11px;padding:0;font-size:21px;font-weight:800;display:flex}.app-navbar-logo{color:#fff;background:linear-gradient(135deg,#6d28d9,#8b5cf6);border-radius:13px;justify-content:center;align-items:center;width:42px;height:42px;font-size:23px;font-weight:800;display:flex;box-shadow:0 7px 18px #6d28d938}.app-navbar-links{align-items:center;gap:5px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.app-navbar-link{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:12px;align-items:center;gap:8px;min-height:45px;padding:0 15px;font-size:13px;font-weight:650;transition:background .2s,color .2s;display:flex}.app-navbar-link:hover{color:#6d28d9;background:#f5f3ff}.app-navbar-link.active{color:#6d28d9;background:#ede9fe}.app-navbar-link-icon{justify-content:center;align-items:center;display:flex;position:relative}.app-navbar-badge{color:#fff;background:#7c3aed;border:2px solid #fff;border-radius:999px;justify-content:center;align-items:center;min-width:19px;height:19px;padding:0 5px;font-size:10px;font-weight:800;line-height:1;display:flex;position:absolute;top:-11px;right:-12px}.app-navbar-user{margin-left:auto;position:relative}.app-navbar-user-btn{cursor:pointer;background:0 0;border:none;border-radius:13px;align-items:center;gap:9px;min-height:50px;padding:5px 9px;display:flex}.app-navbar-user-btn:hover{background:#f5f3ff}.app-navbar-avatar{color:#fff;background:linear-gradient(135deg,#6d28d9,#a78bfa);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:16px;font-weight:800;display:flex;overflow:hidden}.app-navbar-avatar.large{width:48px;height:48px;font-size:20px}.app-navbar-avatar img{object-fit:cover;width:100%;height:100%}.app-navbar-user-text{flex-direction:column;align-items:flex-start;max-width:145px;display:flex}.app-navbar-user-text strong{text-overflow:ellipsis;white-space:nowrap;color:#1e293b;max-width:100%;font-size:13px;overflow:hidden}.app-navbar-user-text span{text-overflow:ellipsis;white-space:nowrap;color:#94a3b8;max-width:100%;margin-top:2px;font-size:10px;overflow:hidden}.app-navbar-user-btn .rotate{transform:rotate(180deg)}.app-navbar-dropdown{background:#fff;border:1px solid #e9e5f5;border-radius:16px;width:245px;padding:10px;position:absolute;top:calc(100% + 9px);right:0;box-shadow:0 18px 45px #1e293b26}.app-navbar-dropdown-user{align-items:center;gap:11px;padding:8px;display:flex}.app-navbar-dropdown-user>div:last-child{flex-direction:column;min-width:0;display:flex}.app-navbar-dropdown-user strong{color:#1e293b;font-size:14px}.app-navbar-dropdown-user span{color:#94a3b8;margin-top:3px;font-size:11px}.app-navbar-dropdown hr{border:none;border-top:1px solid #f1f5f9;margin:8px 0}.app-navbar-dropdown>button{color:#475569;cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 11px;font-size:13px;font-weight:600;display:flex}.app-navbar-dropdown>button:hover{color:#6d28d9;background:#f5f3ff}.app-navbar-dropdown .logout{color:#dc2626}.app-navbar-dropdown .logout:hover{color:#dc2626;background:#fef2f2}@media (width<=900px){.app-navbar{padding:0 16px}.app-navbar-brand>span{display:none}.app-navbar-links{margin-left:auto;position:static;transform:none}.app-navbar-link{justify-content:center;width:44px;height:44px;min-height:44px;padding:0}.app-navbar-link>span:last-child{display:none}.app-navbar-user{margin-left:8px}.app-navbar-user-text{display:none}}@media (width<=560px){.app-navbar{min-height:64px;padding:0 9px}.app-navbar-logo{border-radius:11px;width:38px;height:38px;font-size:20px}.app-navbar-links{gap:1px}.app-navbar-link{width:39px;height:39px;min-height:39px}.app-navbar-badge{min-width:18px;height:18px;font-size:9px;top:-10px;right:-10px}.app-navbar-user{margin-left:3px}.app-navbar-user-btn{min-height:42px;padding:2px}.app-navbar-avatar{width:36px;height:36px}.app-navbar-user-btn>svg{display:none}.app-navbar-dropdown{width:min(245px,100vw - 20px);position:fixed;top:70px;right:10px}}.profile-page{color:#1e293b;background:linear-gradient(135deg,#f8f7ff 0%,#f4f1ff 50%,#fbfaff 100%);min-height:100vh}.profile-content{width:min(900px,100% - 40px);margin:0 auto;padding:42px 0 60px}.profile-card{background:#fff;border:1px solid #e9e5f5;border-radius:24px;overflow:hidden;box-shadow:0 18px 50px #5b21b61a}.profile-top{color:#fff;background:linear-gradient(135deg,#5b21b6,#7c3aed,#8b5cf6);align-items:center;gap:28px;min-height:220px;padding:34px 36px;display:flex}.profile-avatar-wrap{flex-shrink:0;position:relative}.profile-avatar-large{color:#6d28d9;background:linear-gradient(135deg,#fff,#ede9fe);border:5px solid #ffffffe6;border-radius:50%;justify-content:center;align-items:center;width:145px;height:145px;font-size:54px;font-weight:800;display:flex;overflow:hidden;box-shadow:0 14px 35px #0000002e}.profile-avatar-large img{object-fit:cover;width:100%;height:100%}.profile-photo-btn{color:#6d28d9;cursor:pointer;background:#fff;border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;padding:0;transition:transform .2s,background .2s;display:flex;position:absolute;bottom:7px;right:4px;box-shadow:0 6px 18px #1e293b2e}.profile-photo-btn:hover:not(:disabled){background:#f5f3ff;transform:scale(1.07)}.profile-photo-btn:disabled{opacity:.6;cursor:not-allowed}.profile-heading{min-width:0}.profile-heading h1{color:#fff;margin:0;font-size:32px;font-weight:800}.profile-heading p{color:#ede9fe;margin:5px 0 0;font-size:15px}.profile-heading span{color:#fff;background:#ffffff24;border-radius:999px;margin-top:14px;padding:7px 12px;font-size:12px;display:inline-block}.profile-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;padding:34px 36px 38px;display:grid}.profile-field{min-width:0}.profile-field label{color:#334155;margin-bottom:8px;font-size:13px;font-weight:700;display:block}.profile-input-wrap{background:#fff;border:1px solid #dbe1ea;border-radius:13px;align-items:center;gap:10px;min-height:52px;padding:0 14px;transition:border-color .2s,box-shadow .2s;display:flex}.profile-input-wrap:focus-within{border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61f}.profile-input-wrap svg{color:#7c3aed;flex-shrink:0}.profile-input-wrap input{color:#1e293b;background:0 0;border:none;outline:none;width:100%;min-width:0;padding:14px 0;font-size:14px}.profile-input-wrap input::placeholder{color:#94a3b8}.profile-input-wrap.readonly{background:#f8fafc;border-color:#e2e8f0}.profile-input-wrap.readonly input{color:#64748b;cursor:not-allowed}.profile-actions{grid-column:1/-1;justify-content:flex-end;margin-top:6px;display:flex}.profile-save-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6d28d9,#7c3aed);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-width:170px;min-height:48px;padding:0 20px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 9px 22px #6d28d93d}.profile-save-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 13px 28px #6d28d94d}.profile-save-btn:disabled{opacity:.65;cursor:not-allowed}.profile-loading{color:#64748b;background:#fff;border:1px solid #e9e5f5;border-radius:20px;justify-content:center;align-items:center;width:min(700px,100% - 40px);min-height:220px;margin:40px auto;display:flex;box-shadow:0 10px 30px #1e293b0f}@media (width<=750px){.profile-content{width:calc(100% - 24px);padding:24px 0 40px}.profile-top{padding:28px 24px}.profile-avatar-large{width:120px;height:120px;font-size:44px}.profile-heading h1{font-size:27px}.profile-form{grid-template-columns:1fr;padding:26px 24px 30px}.profile-actions{grid-column:auto}}@media (width<=520px){.profile-top{text-align:center;flex-direction:column;gap:18px}.profile-avatar-large{width:105px;height:105px;font-size:38px}.profile-photo-btn{width:38px;height:38px}.profile-heading h1{font-size:24px}.profile-heading p{font-size:13px}.profile-form{gap:18px;padding:22px 16px 26px}.profile-save-btn{width:100%}}.chat-page-shell{background:#fff;flex-direction:column;width:100%;height:100vh;min-height:0;display:flex;overflow:hidden}.chat-page-shell>.app-navbar{flex:none;width:100%}.chat-page-shell>.chat-page{flex:auto;min-height:0;overflow:hidden;height:auto!important}.chat-page-shell .chat-sidebar,.chat-page-shell .chat-main{height:100%;min-height:0;overflow:hidden}.chat-page-shell .chat-header{z-index:20;background:#fff;border-bottom:1px solid #e5e7eb;flex:0 0 76px;justify-content:space-between;align-items:center;gap:16px;width:100%;height:76px;min-height:76px;display:flex;position:relative;overflow:visible}.chat-page-shell .chat-header>div:first-child{flex:auto;min-width:0}.chat-page-shell .chat-header>div:first-child h2,.chat-page-shell .chat-header>div:first-child p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-page-shell .chat-header-actions{visibility:visible;opacity:1;flex:none;justify-content:flex-end;align-items:center;gap:10px;min-width:max-content;display:flex}.chat-page-shell .chat-call-btn{color:#0f766e;visibility:visible;background:#f0fdfa;border:1px solid #dbe7e5;border-radius:50%;flex:0 0 38px;justify-content:center;align-items:center;width:38px;min-width:38px;height:38px;padding:0;display:inline-flex}.chat-page-shell .chat-call-btn:hover:not(:disabled){color:#0d665f;background:#ccfbf1}.chat-page-shell .chat-call-btn:disabled{opacity:.4;cursor:not-allowed;display:inline-flex}.chat-page-shell .chat-message-search-btn,.chat-page-shell .close-chat-btn{flex:0 0 38px}.chat-page-shell .messages-area,.chat-page-shell .users-list{min-height:0}@media (width<=900px){.chat-page-shell .chat-header{gap:8px;padding:10px 14px}.chat-page-shell .chat-header-actions{gap:6px}.chat-page-shell .chat-presence-status{text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:11px;overflow:hidden}}@media (width<=600px){.chat-page-shell .chat-header{flex-basis:68px;height:68px;min-height:68px;padding:8px 9px}.chat-page-shell .chat-header h2{font-size:15px}.chat-page-shell .chat-header p{font-size:11px}.chat-page-shell .chat-header-actions{gap:4px}.chat-page-shell .chat-call-btn,.chat-page-shell .chat-message-search-btn,.chat-page-shell .close-chat-btn{flex-basis:34px;width:34px;min-width:34px;height:34px}.chat-page-shell .chat-presence-status{display:none}}