.dispute-message-container {
  .message-card {
    min-height: 88rpx;

    .top-header {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 24rpx;
    }

    .avatar {
      width: 72rpx;
      height: 72rpx;
      margin-right: 16rpx;
    }

    .card-header {
      height: 72rpx;
      .msg-title {
        margin-bottom: 8rpx;
        color: var(--color-text1-4, #111);
        font-size: var(--p-body-2-font-size, 28rpx);
        font-weight: 500;
      }

      .msg-date-time {
        color: var(--color-text1-2, #999);
        font-size: var(--p-caption-font-size, 24rpx);
        line-height: 24rpx;
      }
    }

    .msg-text-item {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-bottom: 24rpx;
      line-height: 34rpx;

      .msg-text-key {
        width: 144rpx;
        margin-right: 16rpx;
        color: var(--color-text1-2, #999);
        font-size: var(--p-body-1-font-size, 28rpx);
      }

      .msg-text-value {
        max-width: 654rpx;
        word-break: break-all;
        color: var(--color-text1-4, #111);
        font-size: var(--p-body-1-font-size, 28rpx);

        &-with-key {
          max-width: 464rpx;
        }
      }
    }
  }

  .proof-instance {
    // padding: 24rpx;
    background-color: var(--color-white, #fff);
    font-size: var(--p-caption-font-size, 24rpx);

    .img-holder {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .sample-img {
      width: 110rpx;
      height: 110rpx;
      margin-top: 16rpx;
      margin-right: 24rpx;
      &:nth-child(4n + 5) {
        margin-right: 0;
      }
    }
  }
}