body,html{height:100%;margin:0;padding:0}.user{cursor:pointer;border:0;border-bottom:1px solid #333;padding-bottom:10px;padding-top:10px}.container{max-width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.card{width:100%;height:100%;display:flex;flex-direction:column}.chat-container{flex-grow:1;height:100%;display:flex;position:relative;overflow:hidden;padding:0}.chat-panel{flex-grow:1;height:100%;overflow-y:auto;transition:transform .3s ease-in-out}.side-panel,.side-panel-left{position:absolute;top:0;height:calc(100% - 10px);border-left:1px solid #ccc;transition:transform .3s ease-in-out;z-index:100}.side-panel{right:0;width:40%}.side-panel-left{left:0;width:40%}@media (max-width:768px){.side-panel,.side-panel-left{width:80%}}.side-panel.closed{transform:translateX(100%)}.side-panel-left.closed{transform:translateX(-100%)}.user-avatar{width:30px;height:30px;border-radius:50%;margin-right:10px;object-fit:cover}.chat-messages{flex-grow:1;overflow-y:auto;border-bottom:1px solid #ccc;padding:5px;height:calc(100% - 50px);margin-top:0}#privateChat{display:none;height:100%;width:100%;overflow:hidden;display:flex;flex-direction:column}.privateChatHeader{padding-bottom:10px;border-bottom:1px solid #5c5c5c}#typingIndicator{position:absolute;bottom:55px;background-color:#2e2d2d;border-radius:5px;padding-left:3px;padding-right:3px;z-index:100}#privateChat .user-avatar{width:50px;height:50px;border-radius:50%;margin-right:10px}#privateChatTitle{display:flex;color:#e4e6eb;font-weight:700}#privateMessages{flex-grow:1;overflow-y:auto}.input-group{flex-shrink:0}.newMessageAlertUser{position:absolute;right:20px}.online-status{width:15px;height:15px;border-radius:50%;display:inline-block;margin-left:8px;position:absolute;bottom:5px;left:30px;border:2px solid #eee}.offline{opacity:.5}.message{display:flex;align-items:flex-start;max-width:95%;margin-bottom:10px}.message .msg-box{padding:10px 15px;border-radius:15px;position:relative}.message .time{font-size:12px;color:#bbb;margin-top:3px;text-align:right}.message .avatar{width:30px;height:30px;border-radius:50%;margin:0 10px}.my-messageFlex{align-self:flex-start;word-break:break-word}.my-message,.other-message{color:#d3d3d3}.my-message .msg-box{background-color:#0561ff5c;color:#e4e6eb}.other-messageFlex{flex-direction:row-reverse;align-self:flex-end;word-break:break-word}.other-message .msg-box{background-color:#2c382dd4;color:#e4e6eb}#openEmojiPanel{font-size:x-large;cursor:pointer}.emoji-container{position:relative;display:inline-block}.emoji-picker,.emoji-pickerPublic{position:absolute;bottom:45px;left:-25px;display:none;z-index:1000;box-shadow:0 4px 8px rgba(0,0,0,.2);max-width:80vw;--category-emoji-size:1.125rem;--category-emoji-padding:5px;--num-columns:7}.message.read .time::after{content:" ✔"}.sendMsgButton{padding:0;width:35px}.emoji-btn,.emoji-btnPublic{font-size:24px;cursor:pointer;background:0 0;border:none;margin:auto}.userlink{text-decoration:none}.chatInput{height:36px;padding:6px}.mediaUploadPrivate,.mediaUploadPublic{font-size:x-large;color:#8fbc8f;cursor:pointer;margin:auto}.imgInChat{width:100%;height:100%;max-width:150px}.videoInChat{background-color:#000;width:150px;height:80px;position:relative;cursor:pointer;border-radius:10px}.playButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:rgba(0,0,0,.6);border-radius:50%;display:flex;align-items:center;justify-content:center}.playButton::before{content:'▶';font-size:30px;color:#fff}#usersCount{position:absolute;right:30px;bottom:80px;background-color:#161616;border-radius:5px;padding:2px 5px;font-size:small;color:#8d8b8b;cursor:pointer}#userListContainer{height:100%;overflow-y:auto}