*{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}.online-badge{color:#fff;background-color:#00a884;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;margin-right:15px;font-size:16px;font-weight:700;display:flex}