@import"https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;500;600&display=swap";:root{--primary-color: #00a884;--primary-hover: #06cf9c;--bg-main: #f0f2f5;--sidebar-bg: #ffffff;--chat-bg: #efeae2;--panel-header-bg: #f0f2f5;--text-primary: #111b21;--text-secondary: #667781;--text-muted: #8696a0;--input-bg: #ffffff;--border-color: rgba(0, 0, 0, .05);--message-out-bg: #d9fdd3;--message-out-text: #111b21;--message-in-bg: #ffffff;--message-in-text: #111b21;--active-chat-bg: #f0f2f5;--hover-bg: #f5f6f6;--icon-color: #54656f;--icon-hover: #3b4a54}[data-theme=dark]{--primary-color: #00a884;--primary-hover: #06cf9c;--bg-main: #111b21;--sidebar-bg: #111b21;--chat-bg: #0b141a;--panel-header-bg: #202c33;--text-primary: #e9edef;--text-secondary: #8696a0;--text-muted: #667781;--input-bg: #2a3942;--border-color: rgba(255, 255, 255, .05);--message-out-bg: #005c4b;--message-out-text: #e9edef;--message-in-bg: #202c33;--message-in-text: #e9edef;--active-chat-bg: #2a3942;--hover-bg: #202c33;--icon-color: #aebac1;--icon-hover: #d1d7db}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;background:var(--bg-main);color:var(--text-primary);height:100vh;overflow:hidden;font-size:14px;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px}[data-theme=dark] ::-webkit-scrollbar-thumb{background-color:#ffffff29}.app-container{display:flex;height:100vh;width:100vw}.main-window{display:flex;width:100%;height:100vh;background:var(--sidebar-bg);overflow:hidden}.sidebar{flex:0 0 400px;display:flex;flex-direction:column;background:var(--sidebar-bg);border-right:1px solid var(--border-color);overflow-y:auto}.sidebar-header{height:59px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;background:var(--panel-header-bg)}.user-avatar{width:40px;height:40px;border-radius:50%;color:var(--text-secondary);cursor:pointer}.sidebar-controls{display:flex;gap:10px}.sidebar-controls button{background:transparent;border:none;padding:8px;border-radius:50%;color:var(--icon-color);cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center}.sidebar-controls button:hover{background:var(--hover-bg);color:var(--icon-hover)}.search-bar{padding:7px 12px 10px;background:var(--sidebar-bg)}.search-input-container{background:var(--panel-header-bg);border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:24px}.search-input-container input{background:transparent;border:none;outline:none;font-family:inherit;font-size:14px;color:var(--text-primary);width:100%}.search-input-container input::placeholder{color:var(--text-muted)}.chats-list{flex:1;overflow-y:auto;background:var(--sidebar-bg)}.chat-item{padding:8px 12px;display:flex;align-items:center;cursor:pointer;border-bottom:1px solid var(--border-color);transition:background .2s;min-height:60px}.chat-item:hover{background:var(--hover-bg)}.chat-item.active{background:var(--active-chat-bg)}.chat-avatar{flex-shrink:0;margin-right:12px}.chat-avatar img,.chat-avatar svg{width:40px;height:40px;border-radius:50%;object-fit:cover}.chat-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.chat-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}.chat-name{font-size:15px;font-weight:400;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.chat-time{font-size:12px;color:var(--text-muted);white-space:nowrap;margin-left:6px}.chat-bottom{display:flex;justify-content:space-between;align-items:center;min-width:0}.last-message{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;max-height:18px;line-height:18px;min-width:0}.unread-badge{background:var(--primary-color);color:#fff;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;padding:0 6px;margin-left:8px}.chat-window{flex:1;background:var(--chat-bg);display:flex;flex-direction:column;position:relative}.chat-window:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 30L0 0h60v60L30 30z' fill='%23000' fill-opacity='0.1'/%3E%3C/svg%3E");background-size:300px 300px;pointer-events:none;z-index:0}[data-theme=dark] .chat-window:before{opacity:.04}.chat-header{height:59px;padding:10px 16px;background:var(--panel-header-bg);border-left:1px solid var(--border-color);display:flex;align-items:center;gap:15px;z-index:10;position:relative}.back-button{background:transparent;border:none;color:var(--icon-color);cursor:pointer;padding:8px;margin-left:-8px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.back-button:hover{background:var(--hover-bg)}.header-info{flex:1;display:flex;flex-direction:column;gap:2px}.header-name{font-size:16px;font-weight:400;color:var(--text-primary)}.header-status{font-size:13px;color:var(--text-secondary)}.messages-container{flex:1;overflow-y:auto;padding:20px 8%;position:relative;z-index:1}.date-separator-container{display:flex;justify-content:center;margin:12px 0}.date-separator{background:#e1f4fb;color:#54656f;padding:6px 12px;border-radius:7.5px;font-size:12.5px;font-weight:500;box-shadow:0 1px .5px #0b141a21}[data-theme=dark] .date-separator{background:#182229;color:#8696a0}.message-row{display:flex;margin-bottom:2px}.message-row.sent{justify-content:flex-end}.message-row.received{justify-content:flex-start}.message-bubble{max-width:65%;padding:6px 7px 8px 9px;border-radius:7.5px;position:relative;box-shadow:0 1px .5px #0b141a21;word-wrap:break-word}.message-row.sent .message-bubble{background:var(--message-out-bg);color:var(--message-out-text)}.message-row.received .message-bubble{background:var(--message-in-bg);color:var(--message-in-text)}.message-text{font-size:14.2px;line-height:19px;white-space:pre-wrap;word-break:break-word}.message-time{font-size:11px;color:#00000073;margin-top:4px;float:right;margin-left:10px;display:flex;align-items:center;gap:3px}[data-theme=dark] .message-time{color:#ffffffa1}.read-receipt{font-size:16px;color:#53bdeb;line-height:1}.chat-input-area{padding:10px 16px;background:var(--panel-header-bg);display:flex;align-items:center;gap:8px;z-index:10;position:relative}.action-buttons{display:flex;gap:8px}.action-buttons .icon{font-size:40px;color:var(--icon-color);cursor:pointer;padding:8px;border-radius:50%;transition:background .2s;display:flex;align-items:center;justify-content:center}.action-buttons .icon:hover{background:var(--hover-bg);color:var(--icon-hover)}.input-form{flex:1}.input-form input{width:100%;background:var(--input-bg);border:none;outline:none;padding:9px 12px;border-radius:8px;font-size:15px;color:var(--text-primary);font-family:inherit}.input-form input::placeholder{color:var(--text-muted)}.send-icon{font-size:24px;color:var(--icon-color);cursor:pointer;padding:8px;border-radius:50%;transition:background .2s;display:flex;align-items:center;justify-content:center}.send-icon:hover{background:var(--hover-bg);color:var(--icon-hover)}.voice-recorder-btn{background:transparent;border:none;cursor:pointer;color:var(--icon-color);padding:8px;border-radius:50%;font-size:24px;display:flex;align-items:center;justify-content:center;transition:background .2s}.voice-recorder-btn:hover{background:var(--hover-bg);color:var(--icon-hover)}.voice-recorder-container{display:flex;align-items:center;gap:12px;flex:1}.voice-recorder-container.recording{background:#ef444414;border-radius:8px;padding:4px 12px}.recording-indicator{display:flex;align-items:center;gap:8px;color:#ef4444;font-weight:500;font-size:14px}.recording-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;animation:blink 1s infinite}@keyframes blink{50%{opacity:.3}}.recording-waveform{display:flex;gap:2px;align-items:center;height:20px}.wave-bar{width:3px;background:#ef4444;border-radius:2px;animation:wave 1s infinite ease-in-out}.wave-bar:nth-child(1){height:8px;animation-delay:0s}.wave-bar:nth-child(2){height:14px;animation-delay:.1s}.wave-bar:nth-child(3){height:18px;animation-delay:.2s}.wave-bar:nth-child(4){height:12px;animation-delay:.3s}.wave-bar:nth-child(5){height:6px;animation-delay:.4s}@keyframes wave{0%,to{transform:scaleY(1)}50%{transform:scaleY(.4)}}.stop-recording-btn,.cancel-voice-btn,.play-preview-btn{background:transparent;border:1px solid var(--border-color);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);transition:all .2s}.stop-recording-btn{color:#ef4444;border-color:#ef44444d}.stop-recording-btn:hover{background:#ef44441a}.send-voice-btn{background:var(--primary-color);color:#fff;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}.send-voice-btn:hover{background:var(--primary-hover)}.chat-window.empty{background:var(--panel-header-bg);border-left:1px solid var(--border-color)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:40px}.empty-state h1{font-size:32px;font-weight:300;color:var(--text-primary);margin-bottom:16px}.empty-state p{font-size:14px;color:var(--text-secondary);max-width:480px}.media-attachment{margin-top:4px}.caption{margin-top:6px;font-size:14.2px;line-height:19px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#0006;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.media-preview-modal{background:var(--sidebar-bg);border:1px solid var(--border-color);box-shadow:0 20px 50px #0000004d;border-radius:12px;width:90%;max-width:500px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{background:var(--panel-header-bg);border-bottom:1px solid var(--border-color);padding:16px 24px;display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-weight:500;margin:0;font-size:18px;color:var(--text-primary)}.close-button{background:transparent;border:none;font-size:20px;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:50%;transition:all .2s}.close-button:hover{background:var(--hover-bg);color:var(--text-primary)}.modal-body{padding:24px;overflow-y:auto;flex:1}.preview-container{display:flex;justify-content:center;align-items:center;background:var(--bg-main);border-radius:8px;padding:20px;margin-bottom:20px;min-height:200px}.media-preview-image,.media-preview-video{max-width:100%;max-height:300px;border-radius:8px;box-shadow:0 4px 12px #0000001a}.caption-input{width:100%;background:var(--input-bg);border:1px solid var(--border-color);padding:12px 16px;border-radius:8px;font-family:inherit;color:var(--text-primary);outline:none;transition:all .2s;font-size:14px}.caption-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #00a8841a}.modal-footer{padding:16px 24px;background:var(--panel-header-bg);border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:12px}.send-button{background:var(--primary-color);color:#fff;border:none;padding:10px 24px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s;font-size:14px}.send-button:hover{background:var(--primary-hover)}.cancel-button{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);padding:10px 20px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s;font-size:14px}.cancel-button:hover{background:var(--hover-bg);color:var(--text-primary)}.media-viewer-modal{position:relative;max-width:95vw;max-height:95vh;display:flex;flex-direction:column;align-items:center}.viewer-content-wrapper{position:relative}.media-viewer-content{max-width:90vw;max-height:85vh;border-radius:8px}.viewer-caption{margin-top:16px;padding:12px 20px;background:var(--sidebar-bg);border-radius:8px;color:var(--text-primary);max-width:600px;text-align:center}@media (max-width: 1024px){.sidebar{flex:0 0 350px}}@media (max-width: 768px){.main-window{position:relative}.sidebar{flex:1 1 100%;max-width:100%}.chat-window{position:absolute;top:0;left:0;right:0;bottom:0;transform:translate(100%);transition:transform .3s}.main-window.chat-active .sidebar{transform:translate(-100%)}.main-window.chat-active .chat-window{transform:translate(0)}}:root[data-theme=light]{--bg-primary: #f3f4f6;--bg-card: #ffffff;--text-primary: #111827;--text-secondary: #6b7280;--text-label: #374151;--border-color: #d1d5db;--input-bg: #ffffff;--shadow: rgba(0, 0, 0, .08);--error-bg: #fef2f2;--error-border: #ef4444;--error-text: #991b1b}:root[data-theme=dark]{--bg-primary: #111827;--bg-card: #1f2937;--text-primary: #f9fafb;--text-secondary: #9ca3af;--text-label: #d1d5db;--border-color: #374151;--input-bg: #111827;--shadow: rgba(0, 0, 0, .3);--error-bg: #7f1d1d;--error-border: #dc2626;--error-text: #fecaca}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:20px;transition:background .3s ease}.login-card{background:var(--bg-card);padding:3rem 2.5rem;border-radius:12px;width:100%;max-width:440px;box-shadow:0 10px 40px var(--shadow);position:relative;transition:all .3s ease}.theme-toggle{position:absolute;top:1.5rem;right:1.5rem;background:transparent;border:2px solid var(--border-color);border-radius:8px;width:40px;height:40px;font-size:1.25rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.theme-toggle:hover{background:var(--bg-primary);transform:scale(1.05)}.login-header{text-align:center;margin-bottom:2.5rem}.login-header h1{font-size:1.875rem;margin-bottom:.5rem;color:var(--text-primary);font-weight:700;transition:color .3s ease}.login-header p{color:var(--text-secondary);font-size:.95rem;transition:color .3s ease}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-label);font-size:.875rem;font-weight:600;transition:color .3s ease}.form-group input{width:100%;padding:12px 14px;background:var(--input-bg);border:1.5px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;transition:all .2s ease;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#00a884;box-shadow:0 0 0 3px #00a8841a}.form-group input::placeholder{color:var(--text-secondary)}.error-message{background:var(--error-bg);border-left:3px solid var(--error-border);color:var(--error-text);padding:12px 14px;border-radius:6px;margin-bottom:1.5rem;font-size:.875rem;transition:all .3s ease}.login-btn{width:100%;padding:13px;background:#00a884;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:.5rem}.login-btn:hover:not(:disabled){background:#008f6f;transform:translateY(-1px);box-shadow:0 4px 12px #00a88440}.login-btn:active:not(:disabled){transform:translateY(0)}.login-btn:disabled{background:#9ca3af;cursor:not-allowed;opacity:.6}@media (max-width: 480px){.login-container{padding:15px}.login-card{padding:2rem 1.5rem}.theme-toggle{top:1rem;right:1rem;width:36px;height:36px;font-size:1.1rem}.login-header h1{font-size:1.5rem}.form-group input{font-size:16px}}