[v-cloak]{display:none}.chat-box{border-radius:8px;overflow:hidden;box-shadow:0 0 43px 0 rgba(0,0,0,.16);display:flex}.chat-box .chat{flex-grow:1;background-color:rgba(244,242,248,.5)}.chat-box .chat .top{padding:5px 20px;border-bottom:1px solid #d5d5d5;display:flex;align-items:center}.chat-box .chat .top img{width:44px;height:44px;flex-shrink:0;border-radius:999px;margin-right:15px}.chat-box .chat .top h3{font-weight:400;color:#323232;margin:0}.chat-box .chat .chat-list{padding:20px 25px;height:527px;overflow-y:auto}.chat-box .chat .chat-list .time{text-align:center;padding-bottom:15px}.chat-box .chat .chat-list .time time{background-color:#cecece;color:#fff;padding:5px 10px;border-radius:3px;display:inline-block;line-height:1}.chat-box .chat .chat-list .item{margin-bottom:20px;display:flex;align-items:flex-start}.chat-box .chat .chat-list .item .avatar{position:relative;top:-20px;width:70px;height:70px;border-radius:99px;box-shadow:5px 10px 9px 0 rgba(9,59,173,.1);margin-right:25px}.chat-box .chat .chat-list .item .box{background-color:#fff;padding:15px;box-shadow:5px 10px 9px 0 rgba(9,59,173,.1);position:relative;min-width:150px}.chat-box .chat .chat-list .item .box::after{content:' ';position:absolute;width:0;height:0;border:20px solid transparent;left:-15px;top:0;border-top-color:#fff}.chat-box .chat .chat-list .item .box .content{word-break:break-all;line-height:1.7}.chat-box .chat .chat-list .item .box .content a{color:var(--theme-color)}.chat-box .chat .chat-list .item .box .content p{margin:0}.chat-box .chat .chat-list .item .box .load7 .loader,.chat-box .chat .chat-list .item .box .load7 .loader:after,.chat-box .chat .chat-list .item .box .load7 .loader:before{border-radius:50%;width:2.5em;height:2.5em;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:load7 1.8s infinite ease-in-out;animation:load7 1.8s infinite ease-in-out}.chat-box .chat .chat-list .item .box .load7 .loader{color:#9429c5;font-size:8px;margin:0 0 30px 40px;position:relative;text-indent:-9999em;transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.chat-box .chat .chat-list .item .box .load7 .loader:after,.chat-box .chat .chat-list .item .box .load7 .loader:before{content:'';position:absolute;top:0}.chat-box .chat .chat-list .item .box .load7 .loader:before{left:-3.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.chat-box .chat .chat-list .item .box .load7 .loader:after{left:3.5em}@-webkit-keyframes load7{0%,100%,80%{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em 0 0}}@keyframes load7{0%,100%,80%{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em 0 0}}.chat-box .chat .chat-list .user .item{justify-content:flex-end}.chat-box .chat .chat-list .user .item .avatar{margin-right:0;margin-left:25px}.chat-box .chat .chat-list .user .item .box{text-align:right}.chat-box .chat .chat-list .user .item .box::after{left:auto;right:-15px}.chat-box .chat .input-area{border-top:1px solid #d5d5d5}.chat-box .chat .input-area .textarea{width:100%;padding:15px 20px;border:0 none;background-color:rgba(0,0,0,0)}.chat-box .chat .input-area .functions{display:flex;justify-content:flex-end;padding:10px 40px 15px 0}.chat-box .chat .input-area .functions .item{font-size:30px;color:#d5c9d6;margin-left:15px;cursor:pointer}.chat-box .chat .input-area .functions .item i{font-size:30px;display:inline-block}.chat-box .chat .input-area .functions .item i.icon-fasong{color:#ad78ff;transform:rotate(-90deg)}.chat-box .chat .input-area .functions .item.on{color:#ee5732}.chat-box .sidebar{width:320px;flex-shrink:0;background-color:rgba(102,146,255,.8)}.chat-box .sidebar li,.chat-box .sidebar ul{margin:0;padding:0;list-style:none}.chat-box .sidebar .tabs{height:55px;padding:0 20px;background-color:#4977f0;color:#fff;font-size:18px;box-shadow:0 5px 10px 0 rgba(9,59,173,.2)}.chat-box .sidebar .tabs a{color:#fff}.chat-box .sidebar .tabs .tab-names li{color:#fff}.chat-box .sidebar .tab-items{padding:5px 20px}.chat-box .sidebar .tab-items li a{font-size:14px;color:#fff;height:35px;line-height:35px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-box .sidebar .tab-items li.flex{flex-wrap:wrap}.chat-box .sidebar .tab-items li.flex a{width:100%;flex-shrink:0}.chat-box .sidebar .sidebar-title{height:55px;padding:0 20px;line-height:55px;margin-top:10px;background-color:#4977f0;color:#fff;font-size:18px;box-shadow:0 5px 10px 0 rgba(9,59,173,.2)}.chat-box .sidebar .charts{display:flex;padding:10px 20px;justify-content:space-between}.chat-box .sidebar .charts a{text-align:center;color:#fff;width:33.333%}.chat-box .sidebar .charts a img{display:block;margin:auto;margin-bottom:5px;border-radius:999px}.chat-box .sidebar .service-nav{display:flex;flex-wrap:wrap;padding:10px 20px 0;justify-content:space-between}.chat-box .sidebar .service-nav a{width:45%;flex-shrink:0;display:flex;align-items:center;color:#fff;font-size:14px;margin-bottom:12px}.chat-box .sidebar .service-nav a img{margin-right:10px}.chat-box .sidebar .counts{padding:10px 20px 0}.chat-box .sidebar .counts p{color:#fff;margin:5px 0;font-size:14px}@media (max-width:1200px){.sidebar{display:none}}