.zjtodo__chat>.chat-message {
  // position: absolute;
  // top: $chat-header-h;
  // bottom: $chat-editor-h;
  // left: 0;
  // right: 0;
  position: relative;
  height: calc(100% - #{$chat-header-h} - #{$chat-editor-h});
  overflow-y: auto;
  overflow-x: hidden;
  background-color: $theme-bg-gray;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #dddfe0 #f2f2f2;

  .unConnect {
    padding: 20px;
    margin: 20px 0;
    text-align: center;

    .loading {
      display: inline-block;
      padding: 5px 30px;
      border-radius: 20px;
      background-color: #5facff;
      color: #ffffff;
      font-size: 12px;
    }

    .errorConnect {
      display: inline-block;
      padding: 5px 30px;
      border-radius: 20px;
      background-color: #e27171;
      color: #ffffff;
      font-size: 12px;
    }

    i {
      font-size: 14px;
      margin-right: 5px;
      transition: font-size 3s linear 1s;
    }
  }

  i.animation {
    animation: myrotate 2s linear infinite;
    -webkit-animation: myrotate 2s linear infinite;
  }

  // 消息块样式
  .message-list .message-item {
    width: 100%;
    padding: 15px 0;
    box-sizing: border-box;
    text-align: left;
    padding-bottom: 0px;
    .sendTime {
      text-align: center;
      padding: 10px;
      margin: 0;
      font-size: 12px;
      color: #8e8e8e;
    }

    .info .avatar {
      width: 38px;
      height: 38px;
      line-height: 35px;
      border-radius: 50%;
      border: none;
      overflow: hidden;
      text-align: center;

      img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
      }
    }

    .info .send-user {
      line-height: 1;
      font-size: 12px;
      color: #909399;
      margin-bottom: 10px;
    }

    .info .message {
      min-width: 50px;
      max-width: 65%;

      .bubble-box {
        padding: 5px;
        width: 100%;
        box-sizing: border-box;
      }

      .bubble {
        display: inline-block;
        position: relative;
        padding: 10px 15px;
        border-radius: 4px;
        background-color: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        width: inherit;
        box-sizing: border-box;

        &::after {
          content: '';
          position: absolute;
          top: 8px;
          width: 0;
          height: 0;
          border: 0 solid #ffffff;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
        }

        &.large-txt p {
          font-size: 18px;
        }

        p {
          font-size: 14px;
          color: #666666;
          white-space: pre-wrap;
          word-wrap: break-word;
          width: inherit;
        }
      }

      .bubble.queue {
        width: 90%;
        padding: 20px;

        &::after {
          content: '';
          position: absolute;
          left: -3px;
          border-right-width: 4px;
          filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.16));
        }

        .tit {
          h3 {
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            margin-bottom: 15px;
          }

          p {
            font-size: 12px;
            color: #333333;
            margin-bottom: 15px;
          }
        }

        .body {
          text-align: center;
          padding: 15px;
          padding-bottom: 0;

          p {
            font-size: 12px;
            color: #999999;
          }

          .num {
            margin-top: 15px;
            font-size: 60px;
            color: #0074fd;
          }
        }

        .top-line {
          border-top: 1px dashed rgb(222, 222, 224);
        }
      }

      .bubble.advisory {
        padding: 10px 10px 2px;
        min-width: 368px;

        .advi-tit {
          margin-bottom: 10px;

          p {
            font-size: 14px;
            color: #969696;
          }
        }

        .advi-list {
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          .advi-item {
            padding: 10px 5px;
            font-size: 14px;
            color: #333333;
            flex-basis: calc(50% - 10px);
            cursor: pointer;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;

            // &:not(:last-child) {
            //   border-bottom: 1px dashed #DEDEE0;
            // }

            &:hover:not(.disabled) {
              color: #0074FD;
              // color: #000000;
              // background-color: #f4f4f4;
            }

            &.disabled {
              color: #bdbdbd;
              cursor: no-drop;
            }
          }

          .advi-divider {
            &:not(:last-child)::after {
              content: "";
              width: 94%;
              height: 1px;
              position: absolute;
              left: 3%;
              margin-top: 29px;
              background-image: linear-gradient(to right, #DEDEE0 0%, #DEDEE0 50%, transparent 50%);
              background-size: 9px 1px;
              background-repeat: repeat-x;
            }
          }
        }
      }

      .bubble.l-comments {
        .operation {
          width: 100%;
          padding-top: 10px;
          text-align: center;
        }

        .operation .el-button {
          margin: 0 auto;
          padding: 8px 17px;
          border-radius: 2px;

          &.el-button--primary.is-disabled {
            background-color: #c4c4c4;
            border-color: #c4c4c4;
          }
        }
      }

      .img-bubble {
        width: 100%;
      }

      .msg-status {}
    }

    .is-read {
      margin-top: 10px;
      font-size: 12px;
      color: #97979a;
    }
  }

  // 发送和接受消息块样式
  .message-list .message-item {
    &.msg-left {

      // .avatar {
      //   float: left;
      //   margin-right: 10px;
      // }
      .send-user .nickname {
        float: left;
        margin-right: 15px;
      }

      .message {
        float: left;
      }

      .message .bubble {

        // padding-left: 10px;
        &::after {
          left: -3px;
          border-right-width: 4px;
          filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.16));
        }
      }

      .message .img-bubble {
        text-align: left;
      }
    }

    &.msg-right {
      .send-user .nickname {
        float: right;
        margin-left: 15px;
      }

      .message {
        float: right;
      }

      .message .bubble {
        // padding-right: 10px;
        background-color: #e5f1fe;

        &::after {
          right: -3px;
          border-left-width: 4px;
          border-left-color: #e5f1fe;
          border-right-color: #e5f1fe;
          filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.16));
        }
      }

      .message .img-bubble {
        text-align: right;
      }

      .is-read,
      .send-user {
        text-align: right;
      }
    }
  }

  // 系统消息提示样式
  .message-list .message-item.msg-sys {

    //本次消息分割线
    .current-msg-separate {
      text-align: center;
      // padding: 10px 0;
      height: 20px;
      line-height: 20px;
      box-sizing: border-box;

      .load-more {
        .line {
          width: 40%;
          height: 1px;
          margin: 0 auto;
          background-color: #dedee0;
        }

        i {
          font-size: 20px;
          color: #a3a3a3;
        }

        .history-tip {
          color: #b5b5b5;
          display: block;
          font-size: 12px;
          margin: 0 auto;
          margin-top: -10px;
          background-color: $theme-bg-gray;
          width: 25%;
          cursor: pointer;
        }
      }
    }

    //系统消息提示
    .system-msg-tip {
      text-align: center;

      >.time {
        font-size: 12px;
        color: #909399;
      }

      >.text {
        background: rgba(0, 0, 0, 0.4);
        border-radius: 4px;
        padding: 5px 15px;
        line-height: 1;
        color: #ffffff;
        font-size: 12px;
        // margin-top: 10px;
        display: inline-block;
        letter-spacing: 1px;
      }
    }
  }
}

@keyframes myrotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(1turn);
  }
}

@-webkit-keyframes myrotate {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(1turn);
  }
}