.messageList_box {
  width: 100%;

  .message_box_item {
    position: relative;
    display: flex;
    margin: 32px auto;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.4px;
    color: #333333;

    .message_item_time {
      position: absolute;
      top: -25px;
      left: 0;
      right: 0;
      margin: auto;
      width: 74px;
      height: 20px;
      color: #adadad;
      font-weight: 400;
      font-size: 10px;
      line-height: 20px;
    }

    .message_item_avator {
      width: 38px;
      height: 38px;
    }
    .message_box_card {
      display: flex;
      flex-direction: column;
      max-width: 50%;
      min-height: 34px;
    }
    .message_box_nickname {
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0.4px;
      color: #9a9a9a;
      margin: 0 10px;
    }
    .message_box_content {
      display: flex;
      align-items: center;
      margin: 0 6px;
      word-break: break-all;
      /* 通用音频播放样式 */
      .message_box_content_audio {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        max-width: 250px;
        min-width: 80px;
        font-size: 12px;

        .audio_length_text {
          font-family: 'Avenir';
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
        }
      }

      /* 对方音频播放样式 */
      .message_box_content_audio_other {
        flex-direction: row;

        @keyframes other_play_icon {
          0% {
            background: url('@/assets/images/playAudio/msg_recv_audio02@3x.png')
              no-repeat;

            background-size: 100% 100%;
          }

          50% {
            background: url('@/assets/images/playAudio/msg_recv_audio01@3x.png')
              no-repeat;

            background-size: 100% 100%;
          }

          100% {
            background: url('@/assets/images/playAudio/msg_recv_audio@3x.png')
              no-repeat;
            background-size: 100% 100%;
          }
        }

        .play_audio_icon_other {
          width: 30px;
          height: 30px;
          background: url('@/assets/images/playAudio/msg_recv_audio@3x.png')
            no-repeat;
          margin-right: 10px;
        }

        .start_play_audio {
          animation: other_play_icon 2s;
          animation-iteration-count: infinite;
        }
      }

      /* 己方音频播放样式 */
      .message_box_content_audio_mine {
        flex-direction: row-reverse;

        @keyframes mine_play_icon {
          0% {
            background: url('@/assets/images/playAudio/msg_send_audio02@3x.png')
              no-repeat;

            background-size: 100% 100%;
          }

          50% {
            background: url('@/assets/images/playAudio/msg_send_audio01@3x.png')
              no-repeat;

            background-size: 100% 100%;
          }

          100% {
            background: url('@/assets/images/playAudio/msg_send_audio@3x.png')
              no-repeat;
            background-size: 100% 100%;
          }
        }

        .play_audio_icon_mine {
          width: 30px;
          height: 30px;
          background-size: 100% 100%;
          background: url('@/assets/images/playAudio/msg_send_audio@3x.png')
            no-repeat;
          margin-left: 10px;
        }

        .start_play_audio {
          animation: mine_play_icon 2s;
          animation-iteration-count: infinite;
        }
      }

      /* 文件消息样式 */
      .message_box_content_file {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 200px;
        min-height: 60px;
        max-height: 120px;
        padding: 10px;

        .file_text_box {
          width: 75%;
          height: 80%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .file_name {
            width: 120px;
            white-space: wrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 15px;
            font-weight: bold;
          }

          .file_size {
            font-size: 13px;
          }

          .file_download {
            width: 100%;
            color: #333333;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              transform: scale(0.9);
            }
          }
        }

        .icon-wenjian {
          font-size: 50px;
          color: #8d8a8a;
        }
      }

      /* 自定义消息 */
      .message_box_content_custom {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 200px;
        min-height: 60px;
        max-height: 120px;
        padding: 10px;
        overflow: hidden;

        .user_card_main {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          color: #333333;
          font-size: 17px;

          .nickname {
            display: inline-block;
            // width: 100%;
            margin-left: 10px;
            height: 35px;
            line-height: 35px;
          }
        }
      }

      /* 个人名片 */
    }
    .message_item_status {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      .message_item_readed_icon {
        width: 15px;
        height: 15px;
        cursor: pointer;
      }
    }
    .quote_msg_avtive {
      animation: twinkle 0.4s infinite alternate;
    }
    .quote_msg_avtive ::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      background-color: rgba(247, 169, 35, 0.5);
    }
    @keyframes twinkle {
      0% {
        opacity: 0.3;
      }
      50% {
        opacity: 0.6;
      }
      100% {
        opacity: 0.9;
      }
    }
    .message_box_content_other {
      background: #fff;
      border-radius: 8px 8px 8px 0px;
    }

    .message_box_content_mine {
      background: #c1e3fc;
      border-radius: 8px 0px 8px 8px;
    }
  }

  /* 撤回或者系统通知类消息 */
  .recall_style,
  .inform_style {
    height: 60px;
    text-align: center;
    color: #aaaaaa;
    font-size: 10px;
    margin: 5px 0;

    .reEdit {
      color: #3e91fa;
      margin-left: 3px;
      cursor: pointer;
    }
  }
}
.message_quote_box {
  padding: 5px 10px;
  font-size: 7px;
  background-color: #e7e7e7;
  border-radius: 5px;
  margin-top: 5px;
  color: #a0a0a0;
  cursor: pointer;
  p {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
:deep(.el-input__wrapper) {
  border-radius: 5px;
}

:deep(.el-dialog__header) {
  background: #f2f2f2;
  margin: 0;
}
