/* 会话框 */
 .chat-btn {
     position: fixed;
     right: 0;
     bottom: 20px;
     cursor: pointer;
 }

 .chat-btn img {
     width: 100px;
 }

 .chat-dialog {
     height: 100%;
     width: 100%;
     position: fixed;
     top: 0;
     display: none;
     z-index: 999;
 }

 .chat-dialog.chat-dialog-show {
     display: block;
 }

 .chat-dialog::before {
     content: "";
     width: 100%;
     height: 100%;
     position: absolute;
     background: rgba(0, 0, 0, .6)
 }

 .chat-dialog .msg-box {
     width: 70%;
     text-align: center;
     background-color: #fff;
     border-radius: 4px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .chat-dialog .close {
     position: absolute;
     right: 6px;
     top: 0;
     font-size: 26px;
 }

 .chat-dialog .msg-box>div {
     padding: 20px;
     border-bottom: 1px solid #ccc;
 }

 .chat-dialog .msg-box>.content {
     padding: 0;
 }

 .chat-dialog .msg-box .header {
     font-size: 20px;
     font-weight: bold;
     color: #fff;
     background-color: #4d9afe;
     display: flex;
     align-items: center;
 }

 .chat-dialog .msg-box .header img {
     width: 4.5%;
     margin-right: 10px;
 }

 /* 聊天框 */
 .chat-panel {
     list-style: none;
     margin: 0;
     padding: 10px;
     overflow-y: auto;
     height: 400px;
 }

 .chat-panel li {
     margin-bottom: 8px;
     word-wrap: break-word;
 }

 .chat-panel .msg-sent {
     margin: 20px 10px;
     text-align: right;
     display: flex;
     justify-content: flex-end;
     align-items: center;

 }

 .chat-panel .msg-sent .msg-detail {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     width: calc(95.5% - 10px);
 }

 .chat-panel .msg-sent .msg-detail>span:nth-child(1) {
     color: #aaa;
 }

 .chat-panel .msg-sent .msg-detail>span:nth-child(2) {
     padding: 10px;
     text-align: left;
     background-color: #4d9afe;
     color: #fff;
     border-radius: 6px;
     display: inline-block;
 }

 .chat-panel .msg-receive {
     margin: 20px 10px;
     text-align: left;
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }

 .chat-panel .msg-receive .msg-detail {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: calc(95.5% - 10px);
 }

 .chat-panel .msg-receive .msg-detail>span:nth-child(1) {
     color: #aaa;
 }

 .chat-panel .msg-receive .msg-detail>span:nth-child(2) {
     padding: 10px;
     text-align: left;
     border-radius: 6px;
     border: 1px solid #ccc;
     display: inline-block;
     max-width: 99%;
 }

 img.avatar {
     width: 4.5%;
 }

 .avatar-user {
     margin-left: 10px;
 }

 .avatar-lxyy {
     margin-right: 10px;
 }

 .input-panel {
     display: flex;
 }

 .chat-input {
     width: 90%;
     margin-right: 10px;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 6px;
 }

 .send-msg-btn {
     width: calc(10% - 10px);
     margin-top: -1px;
     background-color: #4d9afe;
     color: #fff;
     border: none;
     padding: 10px 15px;
     cursor: pointer;
     border-radius: 6px;
 }

 .chat-footer {
     text-align: left;
     padding: 20px;
 }

 .chat-footer .support {
     padding-top: 10px;
     text-align: center;
     font-size: 13px;
     color: #aaa;
 }