:root{font-family:Segoe UI,system-ui,-apple-system,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{margin:0;color:#111}:root[data-theme=dark]{--bg-app: #0b141a;--bg-sidebar: #111b21;--bg-header: #202c33;--bg-hover: #2a3942;--bg-active: #2a3942;--bg-input: #2a3942;--bg-bubble-me: #005c4b;--bg-bubble-them: #202c33;--bg-dropdown: #233138;--text: #e9edef;--text-secondary: #8696a0;--text-header: #e9edef;--accent: #00a884;--accent-strong: #008069;--border: #202c33;--bubble-meta: #ffffff80;--chat-bg-pattern: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);--modal-bg: #233138;--tick: #8696a0}:root[data-theme=light]{--bg-app: #efeae2;--bg-sidebar: #ffffff;--bg-header: #f0f2f5;--bg-hover: #f5f6f6;--bg-active: #f0f2f5;--bg-input: #f0f2f5;--bg-bubble-me: #d9fdd3;--bg-bubble-them: #ffffff;--bg-dropdown: #ffffff;--text: #111b21;--text-secondary: #667781;--text-header: #111b21;--accent: #00a884;--accent-strong: #008069;--border: #e9edef;--bubble-meta: #667781;--chat-bg-pattern: radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);--modal-bg: #ffffff;--tick: #53bdeb}.app-shell{height:100vh;display:flex;justify-content:center;background:#d1d7db}.app{display:flex;width:100%;max-width:1600px;height:100%;background:var(--bg-app);color:var(--text)}.sidebar{width:100%;max-width:420px;min-width:320px;display:flex;flex-direction:column;background:var(--bg-sidebar);border-right:1px solid var(--border)}.sidebar-header{height:59px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;background:var(--bg-header)}.sidebar-header-actions{display:flex;align-items:center;gap:6px}.icon-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:background .15s}.icon-btn:hover{background:var(--bg-hover);color:var(--text)}.avatar-btn{padding:0}.avatar-btn:hover{background:transparent}.search-wrap{padding:8px 12px;background:var(--bg-sidebar)}.search-box{display:flex;align-items:center;gap:10px;background:var(--bg-input);border-radius:8px;padding:7px 12px;color:var(--text-secondary)}.search-box input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:14px}.search-clear{background:none;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer}.tabs{display:flex;padding:0 12px}.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 0;background:none;border:none;color:var(--text-secondary);font-size:14px;cursor:pointer;border-bottom:3px solid transparent}.tab-active{color:var(--accent-strong);border-bottom-color:var(--accent-strong);font-weight:600}.sidebar-content{flex:1;overflow-y:auto}.chat-list{padding:0 0 12px}.chat-row{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;position:relative}.chat-row:hover{background:var(--bg-hover)}.chat-row-active{background:var(--bg-active)}.chat-row-main{flex:1;min-width:0;border-bottom:1px solid var(--border);padding-bottom:4px}.chat-row-active .chat-row-main{border-bottom:none}.chat-row-top{display:flex;justify-content:space-between;align-items:center}.chat-name{font-weight:500;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-time{font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:4px}.chat-row-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:2px}.chat-preview{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px}.chat-row-right{display:flex;align-items:center;gap:8px}.unread-badge{background:#25d366;color:#111;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}.chat-menu-btn{padding:4px}.chat-menu-wrap{position:relative}.list-empty{padding:40px 20px;text-align:center;color:var(--text-secondary)}.list-empty p{margin:4px 0;font-size:14px}.list-empty-sub{font-size:12px!important}.menu-wrap{position:relative}.dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--bg-dropdown);border-radius:8px;box-shadow:0 2px 8px #0006;padding:6px 0;z-index:40;min-width:180px}.dropdown button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 14px;background:none;border:none;color:var(--text);font-size:13px;cursor:pointer}.dropdown button:hover{background:var(--bg-hover)}.dropdown button.danger{color:#f15c6d}.chat-dropdown{right:0;top:22px}.avatar-wrap{position:relative;flex-shrink:0}.avatar{border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;overflow:hidden}.avatar-ring{border:3px solid #25d366}.avatar-online{position:absolute;right:0;bottom:0;background:#25d366;border-radius:50%;border:2px solid var(--bg-sidebar)}.chat-window{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-app)}.chat-header{height:59px;padding:10px 16px;display:flex;align-items:center;gap:12px;background:var(--bg-header)}.mobile-back{display:none}.chat-header-user{flex:1;min-width:0}.chat-header-name{display:block;color:var(--text);font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-header-presence{font-size:12px;color:var(--text-secondary)}.chat-header-presence.online{color:var(--accent)}.chat-header-actions{display:flex;align-items:center;gap:4px}.messages{flex:1;overflow-y:auto;padding:20px 7%;background-image:var(--chat-bg-pattern);background-size:14px 14px}.msg-encrypted{text-align:center;font-size:12px;color:var(--text-secondary);margin:8px auto 18px;background:var(--bg-header);padding:8px 12px;border-radius:8px;max-width:480px}.date-sep{text-align:center;margin:14px 0}.date-sep span{font-size:12px;color:var(--text-secondary);background:var(--bg-header);padding:5px 12px;border-radius:8px}.msg-row{display:flex;margin:2px 0}.msg-row-me{justify-content:flex-end}.bubble{position:relative;max-width:65%;padding:6px 9px 6px 12px;border-radius:8px;box-shadow:0 1px 1px #0000001a}.bubble-me{background:var(--bg-bubble-me);border-top-right-radius:0}.bubble-them{background:var(--bg-bubble-them);border-top-left-radius:0}.bubble-tail{position:absolute;top:0;left:-8px;width:8px;height:12px;background:inherit;clip-path:polygon(100% 0,0 0,100% 100%)}.bubble-text{color:var(--text);font-size:14px;white-space:pre-wrap;word-wrap:break-word}.bubble-meta{float:right;margin-left:8px;margin-top:8px;font-size:11px;color:var(--bubble-meta);display:inline-flex;align-items:center;gap:3px}.tick{color:var(--tick);font-size:11px}.tick-single{color:var(--bubble-meta)}.tick-read{color:#53bdeb}.input-area{position:relative}.input-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--bg-header)}.msg-input{flex:1;background:var(--bg-input);border:none;border-radius:8px;padding:10px 14px;color:var(--text);font-size:14px;outline:none}.send-btn{width:44px;height:44px;border-radius:50%;background:var(--accent);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.emoji-picker{position:absolute;bottom:62px;left:0;background:var(--bg-dropdown);border-radius:8px;padding:8px;box-shadow:0 4px 16px #0006;z-index:30;width:320px;max-width:90vw}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:260px;overflow-y:auto}.emoji-cell{background:none;border:none;font-size:22px;padding:6px;cursor:pointer;border-radius:6px}.emoji-cell:hover{background:var(--bg-hover)}.attach-menu{position:absolute;bottom:62px;left:16px;background:var(--bg-dropdown);border-radius:8px;box-shadow:0 4px 16px #0006;z-index:30;padding:6px 0;min-width:190px}.attach-option{display:flex;align-items:center;gap:12px;padding:10px 14px;font-size:13px;color:var(--text);cursor:pointer}.attach-option:hover{background:var(--bg-hover)}.attach-emoji{font-size:18px}.empty-state{align-items:center;justify-content:center;text-align:center}.empty-inner h2{margin:16px 0 6px;color:var(--text)}.empty-inner p{color:var(--text-secondary);margin:4px 0}.empty-inner .empty-sub{font-size:12px}.status-tab{padding:8px 0 16px}.status-row{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;position:relative}.status-row:hover{background:var(--bg-hover)}.status-avatar{position:relative;flex-shrink:0}.status-add{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--accent-strong);color:#fff;border:2px solid var(--bg-sidebar);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.status-row-main{flex:1;display:flex;flex-direction:column;min-width:0}.status-name{font-weight:500;font-size:15px;color:var(--text)}.status-time{font-size:12px;color:var(--text-secondary)}.status-section-label{padding:14px 12px 6px;font-size:12px;font-weight:600;color:var(--accent-strong)}.status-draft{padding:10px 12px;display:flex;flex-direction:column;gap:8px}.status-draft input{padding:10px;border-radius:8px;border:none;background:var(--bg-input);color:var(--text);outline:none}.status-draft-actions{display:flex;justify-content:flex-end;gap:8px}.status-del{position:absolute;right:12px}.my-status .status-avatar{cursor:pointer}.status-viewer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#000000d9;display:flex;align-items:center;justify-content:center}.status-viewer-card{width:min(420px,92vw);height:min(720px,92vh);background:#111;border-radius:12px;display:flex;flex-direction:column;padding:14px;position:relative;overflow:hidden}.sv-progress{height:3px;background:#fff3;border-radius:2px;margin-bottom:14px}.sv-progress-bar{height:100%;background:#25d366;border-radius:2px;transition:width .1s linear}.sv-header{display:flex;align-items:center;gap:12px;color:#fff}.sv-user{flex:1}.sv-name{display:block;font-weight:600;font-size:15px}.sv-time{font-size:12px;color:#ffffffb3}.sv-close{color:#fff}.sv-body{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}.sv-body p{color:#fff;font-size:22px;text-align:center;line-height:1.4}.calls-tab{padding:8px 0 16px}.calls-new{padding:8px 12px 14px}.calls-new .btn-primary{display:inline-flex;gap:8px;align-items:center}.call-row{display:flex;align-items:center;gap:12px;padding:10px 12px}.call-row:hover{background:var(--bg-hover)}.call-row svg{color:var(--accent);flex-shrink:0}.call-main{flex:1;display:flex;flex-direction:column;min-width:0}.call-name{font-weight:500;font-size:15px;color:var(--text)}.call-meta{font-size:13px;color:var(--text-secondary)}.call-meta.missed{color:#f15c6d}.call-time{color:var(--text-secondary)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0000008c;display:flex;align-items:flex-start;justify-content:flex-start}.modal{background:var(--modal-bg);width:100%;max-width:340px;height:100vh;display:flex;flex-direction:column;animation:slide-in .2s ease}@keyframes slide-in{0%{transform:translate(-30px);opacity:0}to{transform:none;opacity:1}}.modal-header{display:flex;align-items:center;gap:12px;padding:14px;color:var(--text)}.modal-title{font-size:17px;font-weight:600}.modal-search{display:flex;align-items:center;gap:10px;padding:8px 14px;color:var(--text-secondary)}.modal-search input{flex:1;background:var(--bg-input);border:none;padding:10px 12px;border-radius:8px;color:var(--text);outline:none}.modal-list{flex:1;overflow-y:auto;padding-top:8px}.new-chat-row{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer}.new-chat-row:hover{background:var(--bg-hover)}.new-chat-info{display:flex;flex-direction:column;min-width:0}.new-chat-name{font-weight:500;color:var(--text);font-size:15px}.new-chat-status{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.new-contact-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:none;border:none;cursor:pointer;color:var(--accent);font-size:14px;width:100%;text-align:left}.new-contact-row:hover{background:var(--bg-hover)}.profile-modal{align-items:center;text-align:center;padding:0 24px}.profile-modal .modal-header{align-self:stretch}.profile-avatar{margin:10px 0}.profile-picker{justify-content:center;margin-top:14px}.profile-fields{width:100%;display:flex;flex-direction:column;gap:16px;margin:16px 0;text-align:left}.profile-theme{width:100%;text-align:left;margin-bottom:20px}.field{display:flex;flex-direction:column;gap:6px}.field span,.field-label{font-size:12px;color:var(--accent-strong);font-weight:600;text-transform:uppercase;letter-spacing:.3px}.field input{background:transparent;border:none;border-bottom:1px solid var(--border);padding:8px 0;color:var(--text);font-size:15px;outline:none}.field input:focus{border-bottom-color:var(--accent)}.theme-toggle{display:flex;gap:8px;margin-top:8px}.theme-opt{flex:1;padding:10px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}.theme-opt-active{border-color:var(--accent);background:var(--bg-hover)}.avatar-picker{display:flex;gap:8px;flex-wrap:wrap}.avatar-opt{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer}.avatar-opt-active{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}.btn-primary{background:var(--accent-strong);color:#fff;border:none;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-block{width:100%}.btn-ghost{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:8px 12px}.onboarding{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#075e54,#128c7e 45%,#25d366);padding:20px}.onboarding-card{background:var(--modal-bg);color:var(--text);max-width:420px;width:100%;border-radius:16px;padding:32px;box-shadow:0 20px 50px #0000004d}.onboarding-logo{text-align:center;margin-bottom:10px}.onboarding h1{margin:6px 0;font-size:24px;text-align:center}.onboarding-sub{color:var(--text-secondary);text-align:center;font-size:14px;margin-bottom:24px}.onboarding form{display:flex;flex-direction:column;gap:18px}.onboarding .avatar-picker{justify-content:center}.onboarding .field{display:flex;flex-direction:column;gap:6px}.onboarding .field span{font-size:12px;color:var(--accent-strong);font-weight:600}.onboarding .field input{background:var(--bg-input);border:none;border-radius:8px;padding:12px;color:var(--text);font-size:15px;outline:none}.onboarding-hint{text-align:center;font-size:12px;color:var(--text-secondary);margin-top:18px}@media (max-width: 900px){.sidebar{max-width:none;min-width:0}.app-mobile-chat .sidebar{display:none}.app-mobile-chat .chat-window{display:flex}.mobile-back{display:inline-flex}.chat-window{display:none}.app:not(.app-mobile-chat) .chat-window{display:none}.app.app-mobile-chat .chat-window{display:flex}.messages{padding:16px 4%}.bubble{max-width:80%}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:3px}::-webkit-scrollbar-track{background:transparent}