*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;position:fixed;overflow:hidden}body{color:#111b21;background-color:#d1d7db;height:100dvh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}.app-container{justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex;position:relative;overflow:hidden}.app-background{z-index:0;background-color:#00a884;width:100%;height:127px;position:absolute;top:0;left:0}.app-content{z-index:1;background-color:#f0f2f5;width:100%;max-width:1600px;height:100%;display:flex;box-shadow:0 1px 1px #0000000f,0 2px 5px #0003}.mobile-layout{padding:0!important}.mobile-layout .app-content{max-width:100%;box-shadow:none;width:100vw!important;height:100dvh!important;top:0!important}.join-screen{background-color:#f0f2f5;justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex}.join-card{text-align:center;background:#fff;border-radius:12px;width:90%;max-width:400px;padding:30px;box-shadow:0 4px 12px #0000001a}.join-card h2{color:#00a884;margin-bottom:10px}.join-card p{color:#54656f;margin-bottom:20px;font-size:15px}.join-form{flex-direction:column;gap:15px;display:flex}.join-form input{border:1px solid #d1d7db;border-radius:8px;outline:none;padding:12px;font-size:16px}.join-form input:focus{border-color:#00a884}.join-form button{color:#fff;cursor:pointer;background-color:#00a884;border:none;border-radius:8px;padding:12px;font-size:16px;font-weight:700;transition:background .2s}.join-form button:hover:not(:disabled){background-color:#008f6f}.join-form button:disabled{cursor:not-allowed;background-color:#a7d9ce}.group-list-container{flex-direction:column;gap:10px;margin-bottom:20px;display:flex}.group-btn{cursor:pointer;color:#fff;border:none;border-radius:8px;padding:15px;font-size:16px;font-weight:700;transition:opacity .2s}.group-btn:hover{opacity:.9}.btn-public{background-color:#00a884}.btn-vip{background-color:#673ab7}.password-modal{border-top:1px solid #ddd;margin-top:20px;padding-top:20px}.password-modal h3{color:#333;margin-bottom:5px}.error-msg{color:#e53935!important;margin:0!important;font-size:14px!important}.btn-cancel{background-color:#f44336!important}.btn-cancel:hover{background-color:#d32f2f!important}@media (width>=1440px){.app-content{width:calc(100vw - 38px);height:calc(100vh - 38px);top:19px}}.icon-btn{cursor:pointer;color:#54656f;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:background-color .2s;display:flex}.icon-btn:hover{background-color:#e9edef}.placeholder-avatar{background-color:#dfe5e7;border-radius:50%;flex-shrink:0;width:40px;height:40px}.sidebar{background-color:#fff;border-right:1px solid #d1d7db;flex-direction:column;width:30%;min-width:300px;max-width:400px;display:flex}.sidebar-header{background-color:#f0f2f5;border-right:1px solid #d1d7db;justify-content:space-between;align-items:center;height:59px;padding:10px 16px;display:flex}.header-actions{gap:10px;display:flex}.search-container{border-bottom:1px solid #f2f2f2;padding:8px 12px}.search-bar{background-color:#f0f2f5;border-radius:8px;align-items:center;height:35px;padding:0 10px;display:flex}.search-icon{color:#54656f;margin-right:10px}.search-bar input{background:0 0;border:none;outline:none;width:100%;font-size:15px}.chat-list{flex:1;overflow-y:auto}.chat-item{cursor:pointer;background-color:#fff;align-items:center;height:72px;padding:0 12px;display:flex}.chat-item:hover{background-color:#f5f6f6}.chat-info{border-bottom:1px solid #f2f2f2;flex-direction:column;flex:1;justify-content:center;height:100%;margin-left:15px;display:flex}.chat-info-top{justify-content:space-between;margin-bottom:2px;display:flex}.chat-name{font-size:17px;font-weight:400}.chat-time{color:#667781;font-size:12px}.chat-info-bottom{justify-content:space-between;align-items:center;display:flex}.chat-last-message{color:#667781;white-space:nowrap;text-overflow:ellipsis;max-width:200px;font-size:14px;overflow:hidden}.chat-unread{color:#fff;background-color:#25d366;border-radius:50%;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 6px;font-size:12px;font-weight:500;display:flex}.chat-area{background-color:#efeae2;flex-direction:column;flex:1;height:100%;display:flex;position:relative;overflow:hidden}.chat-header{z-index:2;background-color:#f0f2f5;justify-content:space-between;align-items:center;height:59px;padding:10px 16px;display:flex}.chat-header-info{cursor:pointer;align-items:center;gap:15px;display:flex}.chat-contact-details{flex-direction:column;display:flex}.contact-name{font-size:16px;font-weight:400}.contact-status{color:#667781;font-size:13px}.chat-messages{background-blend-mode:overlay;background-color:#efeae2;background-image:url(https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png);background-repeat:repeat;background-size:400px;flex-direction:column;flex:1;gap:10px;padding:20px 5%;display:flex;overflow-y:auto}.message-wrapper{width:100%;display:flex}.message-me{justify-content:flex-end}.message-other{justify-content:flex-start}.message-bubble{color:#111b21;border-radius:7.5px;max-width:65%;padding:6px 7px 8px 9px;font-size:14.2px;line-height:19px;display:inline-block;position:relative;box-shadow:0 1px .5px #0b141a21}.message-sender-name{color:#e53935;margin-bottom:4px;font-size:13px;font-weight:600;display:block}.message-me .message-bubble{background-color:#d9fdd3;border-top-right-radius:0}.message-other .message-bubble{background-color:#fff;border-top-left-radius:0}.message-text{display:inline}.message-time{color:#667781;float:right;margin-top:6px;margin-left:15px;font-size:11px}.chat-input-area{background-color:#f0f2f5;align-items:center;gap:10px;min-height:62px;padding:5px 10px;display:flex;position:relative}.emoji-picker-container{z-index:10;border-radius:8px;position:absolute;bottom:70px;left:10px;box-shadow:0 -2px 10px #0000001a}.chat-input-form{flex:1}.chat-input-form input{background-color:#fff;border:none;border-radius:8px;outline:none;width:100%;padding:9px 12px 11px;font-size:15px}.dropdown-container{display:inline-block;position:relative}.dropdown-menu{z-index:100;background-color:#fff;border-radius:8px;flex-direction:column;min-width:200px;display:flex;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:0 2px 10px #0000001a}.dropdown-item{color:#333;cursor:pointer;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;display:flex}.dropdown-item:hover{background-color:#f0f2f5}.dropdown-item.danger{color:#d32f2f;font-weight:500}.dropdown-item select{border:1px solid #ccc;border-radius:4px;outline:none;padding:4px}.back-btn{color:#54656f;border-radius:50%;margin-right:4px;padding:8px;transition:background-color .2s,transform .1s}.back-btn:hover{color:#111b21;background-color:#e9edef}.contact-status-container{align-items:center;gap:6px;display:flex}.status-indicator-dot{background-color:#8696a0;border-radius:50%;width:8px;height:8px;transition:background-color .3s;display:inline-block}.status-indicator-dot.active{background-color:#00a884;box-shadow:0 0 6px #00a88499}.recording-status{color:#c62828;background-color:#ffebee;border-radius:8px;flex:1;align-items:center;gap:10px;padding:8px 16px;font-size:14px;font-weight:500;display:flex}.recording-dot{background-color:#e53935;border-radius:50%;width:12px;height:12px;animation:1s infinite alternate pulse-red}@keyframes pulse-red{0%{opacity:.7;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}.mic-ptt-btn{-webkit-user-select:none;user-select:none;touch-action:manipulation}.mic-ptt-btn.recording{animation:1s infinite alternate pulse-red;color:#fff!important;background-color:#e53935!important}.ht-live-banner{color:#fff;z-index:5;background-color:#1b5e20;align-items:center;gap:10px;padding:8px 16px;font-size:13.5px;animation:.2s ease-in-out fadeIn;display:flex;box-shadow:inset 0 -1px 3px #0003}.ht-live-dot{background-color:#00e676;border-radius:50%;width:10px;height:10px;animation:.8s infinite alternate pulse-green}@keyframes pulse-green{0%{opacity:.6;transform:scale(.8)}to{opacity:1;transform:scale(1.3)}}.audio-player-container{margin:4px 0}.audio-player-container audio{border-radius:20px;outline:none}.users-modal-overlay{z-index:1000;background-color:#0006;justify-content:center;align-items:center;animation:.2s ease-in-out fadeIn;display:flex;position:fixed;inset:0}.users-modal{background-color:#fff;border-radius:12px;flex-direction:column;width:90%;max-width:360px;display:flex;overflow:hidden;box-shadow:0 4px 20px #00000026}.users-modal-header{background-color:#f0f2f5;border-bottom:1px solid #e9edef;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.users-modal-header h3{color:#111b21;margin:0;font-size:16px;font-weight:600}.users-modal-body{max-height:300px;padding:12px 16px;overflow-y:auto}.no-users-msg{color:#667781;text-align:center;padding:10px 0;font-size:14px}.users-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.user-item{color:#111b21;background-color:#f8f9fa;border-radius:8px;align-items:center;padding:8px 12px;font-size:14px;display:flex}.user-dot{background-color:#00a884;border-radius:50%;width:8px;height:8px;margin-right:10px}.user-name{flex:1;font-weight:500}.you-badge{color:#00a884;font-size:12px;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}