*{margin: 0; padding: 0;}
.text-center::after{content: ' '; display: inline-block; width: 0; height: 100%; vertical-align: middle; margin-top: 4px;}
body{
    font-size: 15px;
    font-family: "Microsoft YaHei","宋体", Arial, "新宋体";
    background: linear-gradient(135deg, #fdf2f8 0%, #eef2ff 40%, #e0f2fe 100%);
}
.clearfix::after{ content:""; display:block; clear:both;}
.service{
    width: 100%;
    max-width: 640px;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    margin:auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background:#f9fafb;
    box-shadow:0 18px 45px rgba(15,23,42,0.18);
    border-radius:18px;
    overflow:hidden;
}
.pc-service{width: 372px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.msg-head{
    height: 48px;
    background: linear-gradient(135deg,#e02433,#ff9800);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 17px;
    text-align: center;
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.msg-head a{
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 4px;
    text-decoration: none;
    color: #fff;
}
.msg-head a i{font-size: 22px;}
.msg-head .tha{height: 20px; line-height:22px;}
.msg-head .thb{height:20px; line-height:20px; font-size:16px;}
.msg-box{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: radial-gradient(circle at top,#fefce8 0,#f9fafb 40%,#f3f4f6 100%);
    padding: 12px 12px 0;
    line-height: 1.5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
}
.msg{margin-bottom: 12px; position: relative;}
.msg:last-of-type{margin-bottom: 16px}
.msg .img1{width:40px; height: 40px; float: left;}
.msg .img2{display: none;}
.msg .content{
    max-width: 70%;
    float: left;
    border-radius: 14px;
    background-color: #ffffff;
    margin: 4px 0 0 10px;
    padding: 9px 11px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    text-align: justify;
    box-shadow:0 4px 10px rgba(15,23,42,0.06);
}
.content .indicate{width: 0; height: 0; border: 12px solid; border-color: transparent; position: absolute; top: 5px;}
.msg .content .left-indicate{border-right-color: #fff;  left: -20px;}
.msg .content .right-indicate{display: none;}
.msg.on .img1{display: none;}
.msg.on .img2{float: right; width:40px; height: 40px; display: block; }
.msg.on .content{
    float: right;
    margin: 4px 10px 0 0;
    background: linear-gradient(135deg,#4ade80,#22c55e);
    color:#05320f;
}
.msg.on .content .left-indicate{display: none;}
.msg.on .content .right-indicate{border-left-color: #95ec69; right: -20px; display: block;}
.msg-box p{margin-top: -6px}
input, textarea{border: none;} 
input:focus, textarea:focus{outline: none; outline-offset: 0;}
.msg-post{
    height: 60px;
    background-color: #f3f4f6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-top:1px solid #e5e7eb;
}
.msg-post textarea{
    resize: none;
    font-size: 14px;
    line-height: 1.4;
    padding: 6px 40px 6px 8px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background:#ffffff;
}
.msg-post label{
    position: absolute;
    right: 88px;
    bottom: 11px;
    height: 32px;
    line-height: 32px;
}
.msg-post label .iconfont{font-size: 22px; color: #4b5563; vertical-align: -1px;}
.msg-post input[type="file"]{display: none;}
.msg-post input[type="button"]{
    padding: 0 16px;
    font-size: 14px;
    margin-left: 10px;
    background: linear-gradient(135deg,#e02433,#f97316);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    border:none;
    box-shadow:0 6px 14px rgba(248,113,113,0.45);
}
.msg-post .back{width: 50px; line-height: 38px; text-align: center; background-color: #35ace0; border-radius: 3px;}
.msg-post .back a{text-decoration:none; color:inherit;}
.msg .time {
    display: none;  
}
.time-display {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    width: 100%;
    margin: 12px 0;
    clear: both;
    display: block;
    position: relative;
}
.time-display::before, .time-display::after{
    content:"";
    position:absolute;
    top:50%;
    width:30%;
    height:1px;
    background:linear-gradient(to right,rgba(209,213,219,0),rgba(209,213,219,1));
}
.time-display::before{left:6%;}
.time-display::after{
    right:6%;
    background:linear-gradient(to left,rgba(209,213,219,0),rgba(209,213,219,1));
}
.time-display span{
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    background:rgba(243,244,246,0.9);
}
.service-box{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; font-size: 14px; background-color: #fff; overflow-y: auto; vertical-align: baseline;}
.user-box{padding: 10px 10px 0;}
.user-box a{text-decoration:none; color:inherit;}
.user-list{height: 46px; background-color: #f2f2f2; padding: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; border-radius: 5px;}
.user-list img{width: 46px;}
.user-list .user{margin-left: 6px; padding-top: 3px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0;}
.user-list .user .name{height: 23px; line-height: 23px; font-size: 17px; color: #333;}
.user-list .user .name .ison{margin-left: 6px; font-size: 13px; color: #860808; vertical-align: 1px;}
.user-list .user .last-msg{height: 20px; line-height: 20px; color: #808080; padding-left: 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-list .data{width: 82px; text-align: right;}
.user-list .data .time{height: 27px; line-height: 27px; color: #555;}
.user-list .data .num{ width: 20px; height: 17px; border-radius: 8px; background-color: red; color: #fff; text-align: center; line-height: 19px;margin-left: 62px;}
.foot{height: 38px; background-color: #e3e3e3; padding: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; padding-right: 0;}
.foot > div{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; padding: 1px; margin-right: 6px; background-color: #0679c7; border-radius: 5px; color: #fff; text-align: center; line-height: 38px;}
.foot a{display: block; height: 100%; text-decoration:none; color:inherit;}

.pc-main{width: 1014px; height: 100%; position: fixed; left: 0; right: 0; margin:auto;}
.pc-left{width: 372px; height:100%; float: left; border:1px solid #afafb7; border-right: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
.pc-right{width: 642px; height:100%; float: left; border:1px solid #afafb7; -webkit-box-sizing: border-box; box-sizing: border-box;}