.chat_div{height:600rem; width: 1200rem; background:#f7f7f7; border:1px solid #eee; line-height:1.2}
.chat_div .chat_list{height:100%; width: 300rem; overflow: auto; background:#fff; border-right:1px solid #eee}
.chat_list .item{padding:14rem; cursor: pointer;}
.chat_list .item.active{background:#eee; }
.chat_list .item.is_blocked{background: #ddd;}
.chat_list .item .avatar{width: 50rem; height:50rem; margin-right:10rem;}
.chat_list .item .avatar.online:after{ content:'';display: block; width: 10rem; height: 10rem; background: #13df13; border-radius: 50%; position: absolute; right: 0; bottom: 0; z-index: 3;}
.chat_list .item .avatar .num{min-width: 16rem; line-height: 16rem;  font-size: 12rem; color: #fff; background: red; border-radius: 16rem; position: absolute; right: 0; top: 0; z-index: 3; text-align: center; padding: 0 2rem;}

.chat_list .item .nick{font-size:14rem; margin-bottom:5rem}
.chat_list .item .nick .time{margin-left:auto; font-size:12rem; color:#999;}
.chat_list .item .msg{font-size:12rem; color:#999}

.chat_head{ padding: 10rem 20rem; border-bottom:1px solid #eee; font-size: 14rem;}
.chat_head .avatar{width: 30rem; height: 30rem; margin-right: 10rem;}
.chat_head .more{font-size: 18rem; margin-left: auto;}
.chat_input{border-top: 1px solid #eee;}
.chat_input .op_btn{padding: 12rem 15rem;}
.chat_input .op_btn a img{width: 18rem; height: 18rem; margin-right: 20rem;}
.chat_input textarea{outline: none; border: none; width: 100%; height: 60rem; font-size: 13rem; line-height: 20rem; font-size: 14rem; background: none; padding: 12rem 15rem; padding-top: 0;}
.chat_input .send_btn{justify-content: flex-end; padding-bottom: 15rem;}
.chat_input .send_btn span{font-size: 12rem; color: #999; margin-right: 15rem;}
.chat_input .send_btn a{line-height: 32rem; display: block; background: #DE181D; color: #fff; padding: 0 26rem; border-radius: 8rem; margin-right: 13rem; font-size: 14rem;}
.emojis{display: flex; flex-wrap: wrap; max-height: 320px; margin-right: -6px; overflow: auto;}
.emojis a{width:10%; height: 32px; border-radius: 4px; transition: 0.2s; font-size: 18px; text-align: center; line-height: 32px;}
.emojis a:hover{background: #eee;}
.msg_list{position: relative; overflow: auto;}
.msgs{padding: 15rem;}
.msgs .item_box{padding: 10rem 0; font-size: 13rem; line-height: 20rem;}
.msgs .item_box .item .avatar{width: 32rem; height: 32rem; border-radius: 4rem; object-fit: cover; margin-right: 10rem;}
.msgs .item_box .item .msg_content{background: #fff;white-space:pre-line;word-wrap: break-word; padding: 6rem 12rem; max-width: 60%; border-radius: 4rem; position: relative;}
.msgs .item_box .item .msg_content:after{content:'';display: block; width: 4px; height: 4px; background: #fff; transform: rotate(45deg); position: absolute; left: -2px; top: 14rem;}
.msgs .item_box .item.re{flex-direction: row-reverse;}
.msgs .item_box .item.re .avatar{margin-right: 0rem; margin-left: 10rem;}
.msgs .item_box .item.re .msg_content:after{left: auto; right: -2px;}
.msgs .item_box .item.re .msg_content{background: #8faceb; color: #fff;}
.msgs .item_box .item.re .msg_content:after{background:#8faceb ;}
.chat_head .cback{font-size: 20rem;  margin-right: 10rem;}
.chat_head .cback i{font-weight: bold;}
/* 手机样式 */
@media screen and (max-width: 1024px) {
	
	body .navigation{display: none!important;}
	.chat_right{transition: 0.3s;width: 100%; background:#f7f7f7; height: 100%; position: fixed; left: 100%; top: 0; z-index: 20;}
	.chat_right.active{left: 0;}
	body .notice_div{padding: 0;}
	.chat_div{width: 100%;}
	.chat_div{height: calc(100vh - 86rem);}
	.chat_head{padding: 6rem 10rem;}
	.msgs .item_box{padding: 5rem 0;}
	.chat_input textarea{padding-bottom: 5rem;}
	.chat_input .send_btn{padding-bottom: 5rem;}
	.chat_div .chat_list{width: 100%;}
	.chat_list .item{padding: 12rem;}
	.chat_list .item .avatar{width: 40rem; height: 40rem;}
}
[data-theme="dark"]  .el-popover{background: #636363; border-color: #777777;}
[data-theme="dark"] .el-popper[x-placement^=top] .popper__arrow::after,[data-theme="dark"]  .el-popper[x-placement^=top] .popper__arrow{border-top-color: #636363;}
[data-theme="dark"] .chat_div{background: #303030; border-color: #464646;}
[data-theme="dark"] .chat_right{background: #303030;}
[data-theme="dark"] .chat_head{border-color: #464646;}
[data-theme="dark"] .msgs .item_box .item .msg_content{background:#5f5f5f}
[data-theme="dark"] .msgs .item_box .item .msg_content:after{background:#5f5f5f}
[data-theme="dark"] .msgs .item_box .item.re .msg_content{background:#8faceb}
[data-theme="dark"] .msgs .item_box .item.re .msg_content:after{background:#8faceb}

[data-theme="dark"] .chat_input{border-color:  #464646;}
[data-theme="dark"] .chat_input textarea{color: #fff;}
[data-theme="dark"] .chat_div .chat_list{background: #303030; border-color: #464646;}
[data-theme="dark"] .chat_list .item.active{ background:  #464646}
[data-theme="dark"] .chat_list .item.is_blocked{background:#1b1b1b;}