.wrap{width:100%;height:100%;display:flex}.wrap .left{width:280px;padding:10px 0;overflow-y:auto;border-right:1px solid #f1f1f1}.wrap .left .user{display:flex;cursor:pointer;align-items:center;border-bottom:1px solid #f1f1f1}.wrap .left .user .desc{width:100%;padding:10px;box-sizing:border-box}.wrap .left .user .head{display:flex;font-size:16px;justify-content:space-between}.wrap .left .user .at,.wrap .left .user .foot{color:#666;font-size:14px}.wrap .left .user .foot{display:flex;align-items:center;justify-content:space-between}.wrap .left .user .text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.wrap .right{flex:1;display:flex;flex-direction:column}.wrap .right .head{display:flex;line-height:2;padding:0 15px;align-items:center;justify-content:space-between;border-bottom:1px solid #f1f1f1}.wrap .right .body{flex:1;overflow-y:auto;background:#f1f1f1;box-sizing:border-box}.wrap .right .body .message{padding:10px 60px 0;position:relative}.wrap .right .body .message.current{text-align:right}.wrap .right .body .message.current .avatar{left:unset;right:10px}.wrap .right .body .message .avatar{position:absolute;top:10px;left:10px}.wrap .right .body .message .content{padding:10px;background:#fff;text-align:left;border-radius:5px;display:inline-block}.wrap .right .body .message .content.link{cursor:pointer}.content-flex{display:flex}.content-flex .desc{margin-left:10px}.wrap .right .foot{border-top:1px solid #f1f1f1}.wrap .right .tools{display:flex;font-size:20px;padding:5px 20px;align-items:center;justify-content:space-between}