:root {
    /* 聊天对话框的动画大小、位置、PC端/移动端、参数设置 */
    --chat-window-end-orig-width: 100vw; 
    --chat-window-end-subtract-width: 40px;
    --chat-window-end-orig-height: 100vh;
    --chat-window-end-subtract-height: 20px;

    --chat-window-end-width: calc(var(--chat-window-end-orig-width) - var(--chat-window-end-subtract-width));  /* 聊天对话框最终宽度 */
    --chat-window-end-height: calc(var(--chat-window-end-orig-height) - var(--chat-window-end-subtract-height));  /* 聊天对话框最终高度 */
    --chat-window-left-begin-position: -40px;  /* 聊天对话框动画开始时，设置位置的left参数值 */
    --chat-window-left-end-position: 20px;  /* 聊天对话框动画结束时，设置位置的left参数值 */
    --chat-window-right-begin-position: -40px;  /* 聊天对话框动画开始时，设置位置的right参数值 */
    --chat-window-right-end-position: 20px  /* 聊天对话框动画结束时，设置位置的right参数值 */
}

body{
    margin: 0;
    padding: 0;
}
.sidebar_lP9dx{
    max-width: 400px;
    height: 100vh;
    position: relative;
    margin: 0 0 0 auto;
}
.sidebar_content_mAi6LZ{
    /* position: absolute; */
    position: fixed;
    bottom: 10px;
    right: 0;
    padding: 20px 0;
    width: 30px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    cursor: pointer;

    /* 测试代码(TEST) */
    background: linear-gradient(90deg, rgb(148, 94, 203), rgb(255, 180, 180));
    color: rgb(255, 255, 255);
}
.sidebar_content_left_mAi6LZ{
    position: fixed;
    bottom: 10px;
    right: auto;
    left: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;

    /* 测试代码(TEST) */
    background: linear-gradient(90deg, rgb(148, 94, 203), rgb(255, 180, 180));
    color: rgb(255, 255, 255);
}
.sidebar_text_hU3nMA{
    max-height: 265px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    writing-mode: vertical-rl;
    letter-spacing: 2px;
}
.sidebar_channel_icons_right_kW5Vat{
    /* text-align: center; */
    /* display: none; */

    position: absolute;
    bottom: 0;
    right: 0;
}
.sidebar_channel_icons_left_kW5Vat{
    position: absolute;
    bottom: 0;
    left: 20px;
}

.close_icon_btn_Gr2Uiq{
    width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 50%;
    border: 2px solid #999;
    background: #fff;
    cursor: pointer;
    text-align: center;
    /* text-align: right; */
    /* margin-right: 15px; */
    /* margin: auto 15px 15px auto; */
    margin: 15px 17px 15px auto;

    /* 默认隐藏，当入口图标收起时设置显示 */
    display: none;
}
.close_icon_btn_Gr2Uiq i{
    font-size: 20px;
    color: #999;
}
.close_icon_btn_Gr2Uiq .close_icon_btn_changed{
    display: none;
    transform: scale(0);
}
.close_icon_btn_Gr2Uiq:hover .close_icon_btn_changed{
    display: block;
    transform: scale(1.3);
}
.close_icon_btn_Gr2Uiq:hover .close_icon_btn_original{
    display: none;
    transform: scale(0);
}


.channel-btn-item{
    /* text-align: center; */
    text-align: right;
    margin-top: 15px;
    margin-bottom: 15px;
    /* margin-right: 15px; */

    margin-right: 20px;
}

/* webim组件 */
.webim_icon_wrapper_6MePhz .webim-large-icon{
    display: none;
}
.webim_icon_wrapper_6MePhz:hover .webim-large-icon{
    display: inline-block;
}
.webim_icon_wrapper_6MePhz:hover .webim-small-icon{
    display: none;
}
.webim_icon_wrapper_6MePhz{
    position: absolute;
    left: 0;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 60px;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
    background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255));
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(19, 130, 238,.44));
    transition: transform 167ms cubic-bezier(0.33, 0, 0, 1) 0s;
    transform-origin: center center;
}
.webim_icon_wrapper_6MePhz:active{
    transform: scale(0.85);
    transition: transform 134ms cubic-bezier(0.45, 0, 0.2, 1) 0s;
}
.webim_icon_wrapper_6MePhz:hover:after {
    transform: scale(1)
}
.webim_icon_wrapper_6MePhz:after{
    content: "";
    position: absolute;
    width: 68px;
    height: 68px;
    left: -4px;
    top: -4px;
    box-shadow: 0 0 0 0px #fff,0 0 0 3px rgb(19, 130, 238);
    border-radius: 50%;
    transform: scale(0);
    transition: .2s;
    z-index: -1
}

.other_channels{
    position: relative;
}

.chat_window_page_con_lR6vc{
    width: calc(100vw);
    height: calc(100vh - 20px);
    /* position: relative; */
    position: absolute;
    /* left: 20px; */
    /* right: 20px; */
    left: auto;
    z-index: 2;
    border-radius: 12px;
    pointer-events: auto;
    /* box-shadow: 0 4px 20px rgba(60,69,118,.2); */
    box-shadow: 0 4px 20px rgba(60, 69, 118, .2);
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

/* -----------------聊天对话框动画 开始------------------------------ */
/* 
老的聊天对话框动画，从右侧向左侧滑动
.chat_window_page_animation{
    animation-name: slideInChatWindow;
    animation-duration: .03s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
.chat_window_page_animation_left{
    animation-name: slideInChatWindowLeft;
    animation-duration: .03s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
} 
聊天窗口进入动画(靠右)
@keyframes slideInChatWindow{
    from {
        right: -40px;
    }
    to{
        right: 20px;
    }
}
聊天窗口进入动画(靠左)
@keyframes slideInChatWindowLeft{
    from {
        right: 80px;
    }
    to {
        right: 20px;
    }
}    
*/

.open_chat_window_page_animation{
    animation-name: slideInChatWindow;
    animation-duration: .25s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

/* 聊天窗口进入动画(靠右) */
/* 开启动画 */
@keyframes slideInChatWindow{
    0% {
        /* 设置width和height为0，动画从右下角开始，但是稍微卡顿 
        width: 0;
        height: 0; */
        right: var(--chat-window-right-begin-position);
        left: var(--chat-window-left-begin-position);
        opacity: 0;
        transform: scale(0.8);
    }
    70%{
        right: var(--chat-window-right-end-position);
        left: var(--chat-window-left-end-position);
        opacity: 0.2;
        transform: scale(1.05);
    }
    100%{
        right: var(--chat-window-right-end-position);
        left: var(--chat-window-left-end-position);
        width: var(--chat-window-end-width);
        height: var(--chat-window-end-height);
        opacity: 1;
        transform: scale(1);
    }
} 

.close_chat_window_page_animation{
    /* 
    由于点击聊天图标按钮关闭聊天对话框时有卡顿，暂时不使用关闭动画
    animation-name: closeChatWindow;
    animation-duration: .1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
    */
    width: 0;
    height: 0;
    opacity: 0;
}

/*  
@keyframes closeChatWindow {
    0% {
        right: 20px;
        width: calc(100vw - 40px);
        height: calc(100vh - 20px);
        opacity: 0.2;
    }
    100% {
        width: 0;
        height: 0;
        right: -40px;
        opacity: 0;
    }
}
*/

/* -----------------聊天对话框动画 结束------------------------------ */

.flex-1{
    flex: 1;
}

.unreadNum_1o7NV{
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background-color: red;
    text-align: center;
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 2;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 400;
    display: none;
}
.unreadNum_left_1o7NV{
    position: absolute;
    top: -6px;
    left: auto;
    right: -6px;
    z-index: 2;
}

.leave_form_box_sidebar{
    width: calc(100vw - 40px);
    height: calc(100vh - 20px);
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 20px;
    z-index: 2;
    border-radius: 12px;
    pointer-events: auto;
    box-shadow: 0 4px 20px rgba(60, 69, 118, .2);
    display: flex;
    flex-direction: column;
}