/*首页头部用户信息*/
.logined , .not-login{
    display: none;
}
.top-user-box{
    margin: -10px 0 0 0;
    font-size: 1rem;
    width: 340px;
    border-radius: 10px;
    background-size: cover;
    background-image: url(https://img.julecn.com/userpicb/20220310/up8mayTi.png);
}
.top-user-box .info{
    padding: 10px 0 10px 10px;
}
.top-user-box .info img{
    width: 65px;
    height: 65px;
    border-radius: 50px;
    border: 1px solid #c2c2c2;
}
.top-user-box .info .logout{
    right: 20px;
    position: absolute;
    top: 20px;
}
.top-user-box .count{
    display: flex;
}
.top-user-box .count a{
    width: 25%;
    text-align: center;
    flex-flow: column;
    display: flex;
    text-decoration: none;
}
/*首页头部用户信息结束*/



/*用户登录界面开始*/
.im-user-login .head .reg-im-user{
    background: #fff;
    border-radius: 8px;
    max-width: 350px;
    margin: 0 auto;
}
.im-user-login .head .reg-im-user .reg-title{
    font-weight: 700;
}
.im-user-login .head .reg-im-user .more-op{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 5px 0;
}
.im-user-login .head .reg-im-user .more-op a{
    color: #000;
}
.im-user-login .head .logined{
    background: #fff;
    border-radius: 8px;
    max-width: 350px;
    margin: 0 auto;
}
.im-user-login .head .logined .op{
    display: flex;
    justify-content: space-around;
    margin: 30px 0 0 0;
}
.im-user-login .head .logined .logout{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    user-select: none;
}
.im-user-login{
    position: relative;
    background: url('https://img.julecn.com/userpicb/20221122/3WQPV5SY.jpg') center center;
}
@media (min-width: 576px){
    .im-user-login.bg{
        padding: 50px 0!important;
    }
}
@media (min-width: 768px){
    .im-user-login.bg{
        padding: 80px 0!important;
    }
}
@media (min-width: 992px){
    .im-user-login.bg{
        padding: 120px 0!important;
    }
}
.im-user-login.bg{
    padding: 50px 0;
}

.im-user-login .bg-overlay{
    background-color: rgba(60,72,88,0.7);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.im-user-login .head .head-title{
    color: #ffffff;
}
.im-user-login .head .head-title h1{
    font-weight: 700;
}
.im-user-login .head .head-title h3{
    font-weight: 700;
}
.im-user-login .head .head-title p{
    color: rgba(255,255,255,.5)!important;
}
.im-user-login .head .login{
    display: none;
    background: #fff;
    border-radius: 8px;
    max-width: 350px;
    margin: 0 auto;
}
.im-user-login .head .el-form{
    position: relative;
}
.im-user-login .head .el-form .el-form-item{
}
.im-user-login .head .el-form .el-form-item label{
    margin-bottom: 0;
    padding-bottom: 0;
}
.im-user-login .head .el-form .el-form-item__error{
    color: red;
    font-size: 0.9rem;
    position: absolute;
    right: 0;
    left: unset;
}
.im-user-login .head .login-title{
    font-weight: 700;
}
.im-user-login .head .logined{
    display: none;
}
.im-user-login .head .reg-im-user{
    display: none;
}
.im-user-login .head .reg-forget{
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
    width: 100%;
}
.im-user-login .head .reg-forget a{
    color: #000;
}
.im-user-login .head .el-form .el-input__prefix .iconfont{
    padding-left: 5px;
}
.im-user-login .index-user-login .reg-im-user .el-form-item{
    margin-bottom: 0;
}
.im-user-login .index-user-login .reg-im-user .avatar-uploader-icon{
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
    border: 1px dashed #cfcfcf;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.im-user-login .index-user-login .reg-im-user .avatar-uploader{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.im-user-login .index-user-login .reg-im-user .avatar-uploader img{
    height: 120px;
    width: 120px;
    border: 1px dashed #cfcfcf;
    border-radius: 6px;
}
.im-user-login .index-user-login .reg-im-user .avatar-uploader img:hover{
    border-color: #0066ff;
}
.im-user-login .index-user-login .reg-im-user .avatar-uploader-icon:hover{
    border-color: #0066ff;
}
/*用户登录界面结束*/


/*聊天界面开始*/
:root{
    --im-app-bar-width: 80px;
    --im-contacts-width: 200px;
}
.im-chat_console{
    min-height: 500px;
    min-width: 766px;
    background: #ddd;
    display: flex;
    user-select: none;
    height: calc(100vh - var(--base-top-nav-height));
}
.im-chat_console.full-height{
    height: 100vh;
}
@media (max-width: 768px){
    .im-chat_console{
        min-width: unset;
    }
    .im-chat_console [custom-class="custom-dialog"]{
        width: 95%;
    }
}
@media (min-width: 768px){
    .im-chat_console [custom-class="custom-dialog"]{
        width: 480px;
    }
}

.im-chat_console .app-bar{
    width: var(--im-app-bar-width);
    padding: 10px;
    background: #323232;
    color: #fff;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
}
@media (max-width: 768px){
    .im-chat_console .app-bar{
        position: absolute;
        z-index: 2000;
        transition: left 0.2s ease-in-out;
        left: calc(0px - var(--im-app-bar-width));
        height: calc(100vh - var(--base-top-nav-height));
    }
    .im-chat_console.full-height .app-bar{
        height: 100vh;
    }
    .im-chat_console .app-bar.m-show{
        left: 0;
    }
}
.im-chat_console .app-bar .avatar{
    margin-bottom: 15px;
    position: relative;
}
.im-chat_console .app-bar .avatar img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
}
.im-chat_console .app-bar .avatar .login-state{
    background: #f00;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 0;
    position: absolute;
    right: 0;
    transition: .3s all;
}
.im-chat_console .app-bar .avatar .login-state.online{
    background: #56ff00;
}
.im-chat_console .app-bar .avatar img.off-line{
    -webkit-filter: grayscale(1);
    filter: gray;
    filter: grayscale(1);
}
.im-chat_console .app-bar .op-bar{
    user-select: none;
}
.im-chat_console .app-bar .op-bar li:hover{
    background: #b5b5b5;
    color: #ffff;
    cursor: pointer;
    padding: 10px 10px;
}
.im-chat_console .app-bar .op-bar li.active{
    background: #0089ff;
    color: #ffff;
}
.im-chat_console .app-bar .op-bar li{
    margin: 0 -10px;
    padding: 10px 0;
    text-align: center;
    position: relative;
}
.im-chat_console .app-bar .op-more .add{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.im-chat_console .app-bar .head .op-bar .msg .unread{
    position: absolute;
    top: 2px;
    right: 4px;
    background: red;
    border-radius: 50%;
    padding: 0px 8px 2px 8px;
    font-size: 0.8rem;
    color: #fff;
}
.im-chat_console .contacts{
    background: #ebebeb;
    width: var(--im-contacts-width);
}
@media (max-width: 768px){
    .im-chat_console .contacts{
        z-index: 1900;
        position: absolute;
        height: calc(100vh - var(--base-top-nav-height));
        transition: left 0.2s ease-in-out;
        left: calc(0px - var(--im-app-bar-width) - var(--im-contacts-width));
    }
    .im-chat_console.full-height .contacts{
        height: 100vh;
    }
    .im-chat_console .contacts.m-show{
        left: var(--im-app-bar-width);
    }
}
.im-chat_console .contacts .item{
    display: none;
}
.im-chat_console .contacts .item.active{
    display: block;
}
.im-chat_console .contacts .item.friend{
    user-select: none;
}
.im-chat_console .contacts .item.friend img.avatar,
.im-chat_console .contacts .item.msg .message-item .avatar{
    width: 40px;
    border-radius: 3px;
    height: 40px;
}
.im-chat_console .contacts .item.friend li,
.im-chat_console .contacts .item.msg .message-item{
    padding: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    position: relative;
}
.im-chat_console .contacts .item.msg .message-item{
    padding: 0;
}

.im-chat_console .contacts .item.friend li.active,
.im-chat_console .contacts .item.msg .message-item.active{
    background: #bfbfbf;
}
.im-chat_console .contacts .item.friend li:hover,
.im-chat_console .contacts .item.msg .message-item:hover,
.im-chat_console .contacts .item.msg .message-item .touch-hover{
    background: #8b8b8b;
    cursor: pointer;
}
.im-chat_console .contacts .item.friend .remark,
.im-chat_console .contacts .item.msg .remark{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.im-chat_console .contacts .item.friend .message-num,
.im-chat_console .contacts .item.msg .message-num{
    position: absolute;
    top: 7px;
    left: 35px;
    background: red;
    border-radius: 50%;
    padding: 0px 8px 2px 8px;
    font-size: 0.8rem;
    color: #fff;
}
.im-chat_console .contacts .item.friend .more-info,
.im-chat_console .contacts .item.msg .more-info{
    margin-left: 10px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    flex-grow: 1;
}
.im-chat_console .contacts .item.friend .more-info .last_chat_time,
.im-chat_console .contacts .item.msg .more-info .new-message{
    font-size: 0.8rem;
}
.im-chat_console .contacts .item.msg .message-item .friend{
    display: flex;
    overflow: hidden;
    flex-grow: 1;
    padding: 10px;
}
.im-chat_console .contacts .item.msg .message-item .new-message{
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}
.im-chat_console .contacts .item.msg .context-menu{
    display: none;
    pointer-events: none;
    background: #fff;
    border-radius: 5px;
    padding: 10px 0;
    position: fixed;
    cursor: default;
    z-index: 1;
    user-select: none; /* 禁止文本选中 */
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.im-chat_console .contacts .item.msg .context-menu.active{
    pointer-events: auto;
    display: block;
}
.im-chat_console .contacts .item.msg .context-menu ul{
    margin-bottom: 0;
}
.im-chat_console .contacts .item.msg .context-menu li{
    padding: 5px 10px;
}
.im-chat_console .contacts .item.msg .context-menu li:hover{
    cursor: pointer;
    background: #d9d9d9;
}

.im-chat_console .msg-window{
    background: #f3f3f3;
    width: calc(100% - var(--im-contacts-width) - var(--im-app-bar-width));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
@media (max-width: 768px){
    .im-chat_console .msg-window{
        width: 100%;;
    }
}
.im-chat_console .msg-window .file-drag{
    position: absolute;
    width: 100%;
    height: calc(100% - 15px);
    display: none;
}
.im-chat_console .msg-window .file-drag.active{
    display: block;
}
.im-chat_console .msg-window .file-drag .info{
    background-color: rgba(255,255,255,0.6);
    border-style: dashed;
    border-width: 3px;
    -webkit-box-align: center;
    position: absolute;
    font-size: 40px;
    line-height: 1;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100%;
    z-index: 100;
    width: 100%;
    color: #8d8d8d;
    font-weight: 700;
}

.im-chat_console .msg-window .head.friend{
    background: #efefef;
    padding: 10px;
    font-size: 1.4rem;
    border-bottom: 1px solid #adadad;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.im-chat_console .msg-window .head.friend .menu{
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}
.im-chat_console .msg-window .head.friend .left-menu{
    font-size: 1.4rem;
    cursor: pointer;
}
.im-chat_console .msg-window .dialog-box{
    margin: 0 0 0 0;
    height: 100%;
    overflow: auto;
    word-break: break-all;
}
.im-chat_console .msg-window .dialog-box .timeline{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.im-chat_console .msg-window .dialog-box .timeline span{
    background: #e3e3e3;
    border-radius: 5px;
    font-size: 0.9rem;
    padding: 1px 5px;
}

.im-chat_console .msg-window .dialog-input{
    height: 150px;
    position: relative;
}
.im-chat_console .msg-window .head.friend online{
    height: 10px;
    width: 10px;
    background: #1cff00;
    display: inline-block;
    border-radius: 5px;
    margin: 0 10px;
}
.im-chat_console .msg-window .head.friend not-online{
    height: 10px;
    width: 10px;
    background: #979797;
    display: inline-block;
    border-radius: 5px;
    margin: 0 10px;
}
.im-chat_console .msg-window .dialog-input .input{
    height: calc(100% - 24px);
}
.im-chat_console .msg-window .dialog-input .send{
    position: absolute;
    right: 0;
    top: -1px;
}
.im-chat_console .msg-window .dialog-box .message-type .receive{
    margin: 10px 50px 10px 10px;
    display: flex;
    flex-direction: row;
}
.im-chat_console .msg-window .dialog-box .message-type img.avatar{
    width: 40px;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
}
.im-chat_console .msg-window .dialog-box .text .receive .content{
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    margin-left: 10px;
    white-space: pre-line;
    user-select: text;
}
.im-chat_console .msg-window .dialog-box .image .receive .content{
    margin-left: 10px;
    padding: 5px;
    background: #fff;
    border-radius: 5px;
    max-width: 325px;
    min-width: 100px;
    cursor: pointer;
}
.im-chat_console .msg-window .dialog-box .image .receive .content.loading{
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.im-chat_console .msg-window .dialog-box .message-type.file .mime_type{
    background-image: url('https://img02.julecn.com/userpicb/20241010/ywh5k2EF.png');
    image-rendering: -webkit-optimize-contrast;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}
.im-chat_console .msg-window .dialog-box .message-type.file .mime_type.exe{
    background-image: url('https://img02.julecn.com/userpicb/20241010/BV3NaxUZ.png');
}
.im-chat_console .msg-window .dialog-box .message-type.file .mime_type.docx{
    background-image: url('https://img02.julecn.com/userpicb/20241010/vfSjheYB.png');
}
.im-chat_console .msg-window .dialog-box .message-type.file .content .file-flex{
    display: flex;
    position: relative;
}
.im-chat_console .msg-window .dialog-box .message-type.file .content .file-flex .downloading{
    position: absolute;
    background: #ffffffb5;
    width: 100%;
    height: 100%;
    padding-left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.im-chat_console .msg-window .dialog-box .message-type.file .content .file-flex .info{
    margin-right: 55px;
}

.im-chat_console .msg-window .dialog-box .message-type.file .content .file-flex .info .size{
    font-size: 0.9rem;
    color: #7f7f7f;
}
.im-chat_console .msg-window .dialog-box .message-type.file .reply .content{
    margin-right: 15px;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
}
.im-chat_console .msg-window .dialog-box .message-type.file .receive .content{
    margin-left: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.im-chat_console .msg-window .dialog-box .message-type.file .mime_type.text\/plain{
    background-image: url('https://img.julecn.com/userpicb/20220404/iWez3x6A.png');
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    image-rendering: -webkit-optimize-contrast;
    cursor: pointer;
}
.im-chat_console .msg-window .dialog-box .message-type.file .reply .content{
    margin-right: 10px;
    padding: 5px;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    max-width: calc(100% - 45px);
}
.im-chat_console .msg-window .dialog-box .message-type .reply{
    display: flex;
    margin: 10px 5px 10px 10px;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
}
.im-chat_console .msg-window .dialog-box .content-box{
    display: flex;
    position: relative;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}
.im-chat_console .msg-window .dialog-box .is_read{
    font-size: 0.9rem;
    color: #979797;
    display: flex;
    align-items: center;
    margin-right: 5px;
    margin-left: 15px;
    white-space: nowrap;
}

.im-chat_console .msg-window .dialog-box .text .reply .content{
    display: inline-block;
    padding: 10px;
    background: #62eb6d;
    border-radius: 5px;
    margin-right: 10px;
    white-space: pre-line;
    user-select: text;
}
.im-chat_console .msg-window .dialog-box .image .reply .content{
    padding: 5px;
    margin-right: 10px;
    background: #fff;
    max-width: 325px;
    min-width: 100px;
    cursor: pointer;
    border-radius: 5px;
}
.im-chat_console .msg-window .dialog-box .image .content.expire{
    color: #a1a1a1;
    padding: 15px;
}
.im-chat_console .msg-window .dialog-box .image .reply .content.loading{
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.im-chat_console_popper .add-contacts{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    user-select: none;
}
.im-chat_console_popper .add-contacts .friend,.im-chat_console_popper .add-contacts .group{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.im-chat_console_popper .add-contacts .friend i{
    font-size: 2rem;
}
.im-chat_console_popper .add-contacts .group i{
    font-size: 1.8rem;
}
.im-chat_console_popper .add-contacts>div:hover{
    background: #eee;
}
.im-chat_console_friend_verify .friend_verify_avatar_url{
    width: 50px;
    border-radius: 5px;
    height: 50px;
}
.im-chat_console .dialog-friend-info{
    position: relative;
    display: flex;
}
.im-chat_console .dialog-friend-info .avatar{
    width: 50px;
    height: 50px;
    border-radius: 5px;
}
.im-chat_console .dialog-friend-info .user-info{
    width: 100%;
    margin-left: 15px;
}
.im-chat_console .dialog-friend-info .user-info .remark{
    font-size: 2rem;
    line-height: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.im-chat_console .send-file-preview-dialog .avatar{
    width: 50px;
    height: 50px;
    border-radius: 8px;
    margin-bottom: 10px;
}


.im-chat_console .custom-drawer .el-drawer.open{
    min-width: 420px;
}
.im-chat_console .el-dialog .sync-history{
    font-size: 1.8rem;
    position: absolute;
    left: 15px;
    bottom: 10px;
}
@media (max-width: 768px){
    .im-chat_console .custom-drawer .el-drawer.open{
        min-width: calc(100vw - 100px);
    }
}


/*聊天界面结束*/