.page-my-chat {
  background-color: #F5F6FA;
  min-height: calc(100vh - var(--mall4j-safe-area-inset-bottom));
  width: 750rpx;
  overflow: auto;
}

@font-face {
  font-family: "HMfont-home";
  src: url("data:application/x-font-woff2;charset=utf-8;base64,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") format("woff2");
}

.icon {
  font-family: "HMfont-home" !important;
  font-size: 56upx;
  font-style: normal;
  color: #333;
}


.chatios {
  position: static;
}

.chatad {
  position: fixed;
}

/* 遮罩层 */

.icon.biaoqing:before {
  content: "";
}

.icon.jianpan:before {
  content: "";
}

.icon.yuyin:before {
  content: "";
}

.icon.tupian:before {
  content: "";
}

.icon.chehui:before {
  content: "";
}

.icon.luyin:before {
  content: "";
}

.icon.luyin2:before {
  content: "";
}

.icon.hongbao:before {
  content: "";
}

.icon.tupian2:before {
  content: "";
}

.icon.paizhao:before {
  content: "";
}

.icon.close:before {
  content: "";
}

.icon.to:before {
  content: "";
}

.hidden {
  display: none !important;
}

.bottom-input {
  position: absolute;
  width: 100%;
  background-color: #F5F6FA;
  bottom: 0;
  z-index: 20;

  .input-box {
    width: 96%;
    padding: 0 2%;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    border-bottom: solid 1upx #ddd;
    .more {
      flex-shrink: 0;
      width: 90upx;
      height: 90rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .send {
      margin-left: 20rpx;
      margin-right: 20rpx;
      padding-bottom: 10rpx;
      flex-shrink: 0;
      width: 100upx;
      height: 86rpx;
      display: flex;
      align-items: center;
      .btn {
        width: 101rpx;
        height: 58rpx;
        background: #E43130;
        opacity: 1;
        border-radius: 16px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 58rpx;
        color: #FFFFFF;
        opacity: 1;
        text-align: center;
      }
    }
    .textbox {
      width: 100%;
      min-height: 58rpx;
      margin-top: 15upx;
      .text-mode {
        width: 100%;
        min-height: 56rpx;
        display: flex;
        background-color: #fff;
        border-radius: 40upx;
        .box {
          width: 100%;
          padding-left: 30upx;
          padding-right: 30upx;
          min-height: 58rpx;
          display: flex;
          align-items: center;
          background: #FFFFFF;
          border: 1px solid #DDDDDD;
          opacity: 1;
          border-radius: 16px;
          textarea {
            width: 100%;
          }
        }
        .em {
          flex-shrink: 0;
          width: 80upx;
          padding-left: 10upx;
          height: 70upx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .input-box.showLayer {
    transform: translate3d(0, -180rpx, 0);
  }

  .popup-layer {
    width: 96%;
    padding: 0 2%;
    padding-bottom: 0;
    .more-layer {
      width: 100%;
      height: 180rpx;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: var(--mall4j-safe-area-inset-bottom);
      .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .box {
          width: 18vw;
          height: 18vw;
          border-radius: 20upx;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 2vw 3vw 2vw 3vw;
          .icon {
            font-size: 70upx;
          }
        }
      }
    }
  }
  .popup-layer.showLayer {
    transform: translate3d(0, -180rpx, 0);
  }
}

.record {
  width: 40vw;
  height: 40vw;
  position: fixed;
  top: 55%;
  left: 30%;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 20upx;
  .ing {
    width: 100%;
    height: 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@keyframes volatility {
  0% {
    background-position: 0% 130%;
  }

  20% {
    background-position: 0% 150%;
  }

  30% {
    background-position: 0% 155%;
  }

  40% {
    background-position: 0% 150%;
  }

  50% {
    background-position: 0% 145%;
  }

  70% {
    background-position: 0% 150%;
  }

  80% {
    background-position: 0% 155%;
  }

  90% {
    background-position: 0% 140%;
  }

  100% {
    background-position: 0% 135%;
  }
}

.record {
  .ing {
    .icon {
      background-image: linear-gradient(to bottom, #f09b37, #fff 50%);
      background-size: 100% 200%;
      animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 150upx;
      color: #f09b37;
    }
  }
  .cancel {
    width: 100%;
    height: 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
      color: #fff;
      font-size: 150upx;
    }
  }
  .tis {
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: center;
    font-size: 28upx;
    color: #fff;
  }
  .tis.change {
    color: #f09b37;
  }
}
.content {
  width: 100%;
  padding-top: 100rpx;
  box-sizing: border-box;
}

/* #ifdef MP-WEIXIN || APP-PLUS */
.content {
  padding-top: 0;
}

/* #endif */
.content {
  .msg-list {
    width: 100%;
    max-height: calc( 100vh - 100rpx - var(--mall4j-safe-area-inset-bottom));
    overflow: hidden;
    .loading {
      display: flex;
      justify-content: center;
    }
  }
}

@keyframes stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.6);
  }

  20% {
    transform: scaleY(1);
  }
}

.content {
  .msg-list {
    .loading {
      .spinner {
        margin: 20upx 0;
        width: 60upx;
        height: 100upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        view {
          background-color: #F95251;
          height: 50upx;
          width: 6upx;
          border-radius: 6upx;
          animation: stretchdelay 1.2s infinite ease-in-out;
        }
        .rect2 {
          animation-delay: -1.1s;
        }
        .rect3 {
          animation-delay: -1s;
        }
        .rect4 {
          animation-delay: -0.9s;
        }
        .rect5 {
          animation-delay: -0.8s;
        }
      }
    }
    .row {
      padding: 30rpx;
      .divider-box{
        display: flex;
        padding: 0 32rpx 32rpx;
        align-items: center;
        .divider{
          flex: 1;
          height: 1px;
          background-color: #ccc;
        }
        .divider-txt{
          max-width: 80%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: 24rpx;
          color: #aaa;
          padding: 0 12rpx;
        }
      }
      .system {
        display: flex;
        justify-content: center;
        view {
          padding: 0 30upx;
          height: 50upx;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #c9c9c9;
          color: #fff;
          font-size: 24upx;
          border-radius: 40upx;
        }
        .red-envelope {
          image {
            margin-right: 5upx;
            width: 30upx;
            height: 30upx;
          }
        }
      }
      &:first-child {
        margin-top: 20upx;
      }
      .my {
        .left {
          width: 100%;
          display: flex;
          align-items: center;
          min-height: 80upx;
          justify-content: flex-end;
          flex-wrap: wrap;
          .bubble {
            max-width: 70%;
            min-height: 50upx;
            border-radius: 10upx;
            padding: 15upx 20upx;
            display: flex;
            align-items: center;
            font-size: 32upx;
            word-break: break-word;
            background-color: #F95251;
	          color: #fff;
            opacity: 1;
            border-radius: 8px 0px 8px 8px;
            &.is-unusual{
              max-width: 320rpx;
            }
            &:deep(.longimage) {
              width: 300rpx;
              height: 300rpx;
            }
            .squareimage {
              width: 300rpx;
              height: 300rpx;
            }
          }
          .bubble.red-envelope {
            background-color: transparent;
            padding: 0;
            overflow: hidden;
            position: relative;
            justify-content: center;
            align-items: flex-start;
            image {
              width: 250upx;
              height: 313upx;
            }
            .tis {
              position: absolute;
              top: 6%;
              font-size: 26upx;
              color: #9c1712;
            }
            .blessing {
              position: absolute;
              bottom: 14%;
              color: #e9b874;
              width: 80%;
              text-align: center;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
          }
          .no-bg {
            background-color: none;
          }
        }
        .right {
          flex-shrink: 0;
          width: 80upx;
          height: 80upx;
          image {
            width: 80upx;
            height: 80upx;
            border-radius: 10upx;
          }
        }
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
      .other-box{
        .service-name{
          max-width: 360rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: 24rpx;
          color: #666666;
          padding-bottom: 8rpx;
        }
      }
      .other {
        .right {
          width: 100%;
          display: flex;
          align-items: center;
          .bubble {
            max-width: 70%;
            min-height: 50upx;
            border-radius: 10upx;
            padding: 15upx 20upx;
            display: flex;
            align-items: center;
            font-size: 32upx;
            word-break: break-word;
            opacity: 1;
            border-radius: 0px 8px 8px 8px;
            &:deep(.longimage) {
              width: 300rpx;
              height: 300rpx;
            }
            .squareimage {
              width: 300rpx;
              height: 300rpx;
            }
          }
          .bubble.red-envelope {
            background-color: transparent;
            padding: 0;
            overflow: hidden;
            position: relative;
            justify-content: center;
            align-items: flex-start;
            image {
              width: 250upx;
              height: 313upx;
            }
            .tis {
              position: absolute;
              top: 6%;
              font-size: 26upx;
              color: #9c1712;
            }
            .blessing {
              position: absolute;
              bottom: 14%;
              color: #e9b874;
              width: 80%;
              text-align: center;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
          }
        }
        .left {
          flex-shrink: 0;
          width: 80upx;
          height: 80upx;
          image {
            width: 80upx;
            height: 80upx;
            border-radius: 10upx;
          }
        }
      }
    }
  }
}

@keyframes my-play {
  0% {
    transform: translateX(80%);
  }

  100% {
    transform: translateX(0%);
  }
}

.content {
  .msg-list {
    .row {
      .my {
        .left {
          .bubble.play {
            .icon {
              &:after {
                border-left: solid 10upx rgba(240, 108, 122, 0.5);
                animation: my-play 1s linear infinite;
              }
            }
          }
          .username {
            width: 100%;
            height: 45upx;
            font-size: 24upx;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .name {
              width: auto;
              max-width: 250rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .time {
              text-align: center;
              margin-left: 40rpx;
            }
          }
        }
        .right {
          margin-left: 15upx;
        }
      }
      .other {
        width: 100%;
        display: flex;
        .left {
          margin-right: 15upx;
        }
        .right {
          flex-wrap: wrap;
          .username {
            width: 100%;
            height: 45upx;
            font-size: 24upx;
            color: #999;
            display: flex;
            align-items: center;
            .name {
              margin-right: 50rpx;
              max-width: 250rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .bubble {
            background-color: #fff;
            color: #333;
          }
        }
      }
    }
  }
}
.phone-icon {
  width: 60rpx;
  height: 60rpx;
}

@keyframes other-play {
  0% {
    transform: translateX(-80%);
  }

  100% {
    transform: translateX(0%);
  }
}

.content {
  .msg-list {
    .row {
      .other {
        .right {
          .bubble.play {
            .icon {
              &:after {
                border-right: solid 10upx rgba(255, 255, 255, 0.8);
                animation: other-play 1s linear infinite;
              }
            }
          }
        }
      }
    }
  }
}
.windows {
  .mask {
    position: fixed;
    top: 100%;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }
  .layer {
    position: fixed;
    width: 80%;
    height: 70%;
    left: 10%;
    z-index: 1001;
    border-radius: 20upx;
    overflow: hidden;
    top: 100%;
    transform: scale3d(0.5, 0.5, 1);
    transition: all 0.2s ease-out;
  }
}
.windows.show {
  display: block;
  .mask {
    top: 0;
    opacity: 1;
  }
  .layer {
    transform: translate3d(0, -85vh, 0) scale3d(1, 1, 1);
  }
}
.windows.hide {
  display: block;
  .mask {
    top: 0;
    opacity: 0;
  }
}
.open-redenvelope {
  width: 100%;
  height: 70vh;
  background-color: #cf3c35;
  position: relative;
  .top {
    width: 100%;
    background-color: #fe5454;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 0 0 100% 100%;
    box-shadow: inset 0 -20upx 0 #9c1712;
    margin-bottom: 65upx;
    .close-btn {
      width: 100%;
      height: 80upx;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 30upx;
      .icon {
        color: #9c1712;
        margin-top: 10upx;
        margin-right: 10upx;
      }
    }
    image {
      width: 130upx;
      height: 130upx;
      border: solid 12upx #cf3c35;
      border-radius: 100%;
      margin-bottom: -65upx;
    }
  }
  .from {
    width: 90%;
    padding: 5upx 5%;
    display: flex;
    justify-content: center;
    font-size: 32upx;
    color: #fff;
  }
  .blessing {
    width: 90%;
    padding: 5upx 5%;
    display: flex;
    justify-content: center;
    font-size: 32upx;
    color: #fff;
  }
  .money {
    width: 90%;
    padding: 5upx 5%;
    display: flex;
    justify-content: center;
    font-size: 32upx;
    color: #fff;
    font-size: 100upx;
    color: #f8d757;
    display: flex;
    padding-top: 20upx;
  }
  .showDetails {
    width: 90%;
    padding: 5upx 5%;
    display: flex;
    justify-content: center;
    font-size: 32upx;
    color: #fff;
    position: absolute;
    bottom: 20upx;
    align-items: center;
    font-size: 28upx;
    color: #f8d757;
    .icon {
      font-size: 26upx;
      color: #f8d757;
    }
  }
}

/* 店铺信息 */
.shop-info {
  width: 100%;
  height: 100rpx;
  position: fixed;
  top: 0;
  background-color: #FFFFFF;
  text-align: center;
  z-index: 999;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  box-shadow: 2rpx 4rpx 8rpx 0rpx #ddd;
}

.flex-wrap {
  flex: auto;
}

/* 返回图标 */
.back-icon {
  position: absolute;
  left: 0;
  top: 36rpx;
  width: 50rpx;
  height: 30rpx;
  transform: rotate(90deg);
}

.shop-tit {
  display: flex;
  align-items: center;
  max-width: 80%;
  margin: 0 auto;
  .shop-name {
    max-width: 80%;
    overflow: hidden;
    display: -webkit-box; /* 将元素设为盒子伸缩模型显示 */
    -webkit-box-orient: vertical; /* 伸缩方向设为垂直方向 */
    -webkit-line-clamp: 1; /* 超出2行隐藏，并显示省略号 */
  }
  .shop-status {
    font-size: 28rpx;
    margin-left: 10rpx;
  }
  .in {
    color: #6190E8;
  }
  .out {
    color: #999;
  }
}

/* 系统提示 */
.sys-tips {
  display: flex;
  justify-content: center;
}

.tips-content {
  color: #999999;
  font-size: 28rpx;
}

/* +图标 */
.add {
  width: 66rpx;
  height: 66rpx;
}

/* 中间时间样式 */
.topTime {
  text-align: center;
  margin-bottom: 15px;
  height: 28rpx;
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 28rpx;
  color: #AAAAAA;
  opacity: 1;
}

/* 发送链接样式 */
.link-box {
  padding: 16rpx 16rpx 0 16rpx;
  margin: 0 32rpx 0rpx 32rpx;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  opacity: 1;
}

.link-prod {
  display: flex;
  padding-bottom: 18rpx;
  border-bottom: 1px solid #EEEEEE;
}

.chat-container {
  .link-prod {
    .img {
      width: 100rpx !important;
      height: 100rpx !important;
      flex-shrink: 0;
    }
    img-show {
      width: 100rpx !important;
      height: 100rpx !important;
      flex-shrink: 0;
    }
  }
}
.link-prod {
  .link-detail {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 2rpx;
    margin: 0 15rpx;
  }
  .prod-price {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-family: PingFang SC;
    padding: 10rpx 0;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }
}
.link-detail {
  .prod-name {
    font-size: 10px;
    font-family: PingFang SC;
    padding: 0 10rpx;
    font-weight: 400;
    color: #333333;
    opacity: 1;
    word-break: break-word;
  }
}
.link-send {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 40rpx;
  padding-top: 20rpx;
  text-align: center;
  color: #E43130;
}
.link-send-right {
  width: 10rpx;
  height: 17rpx;
  margin-left: 14rpx;
  display: inline-block;
  background: url('../../static/images/link-send.png') no-repeat;
}

/* 商品链接样式 */
.prod-link {
  width: 80%;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  margin-top: 6px;
  padding: 25rpx 0 25rpx 12px;
  &.is-unusual{
    max-width: 340rpx;
  }
}

.link-box {
  width: 85%;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  margin-top: 6px;
  padding: 25rpx 0 25rpx 12px;
}

.prod-number {
  margin-top: -14rpx;
  margin-bottom: 20rpx;
  font-size: 20rpx;
}

.prod-no {
  padding: none;
  border-bottom: none;
}

.unread {
  font-size: 24rpx;
  color: #AAAAAA;
  margin-right: 18rpx;
  &.unusual{
    max-width: 210rpx;
  }
}

.un-read-tips {
  background-color: #fff;
  padding: 7rpx;
  padding: 20rpx 25rpx 20rpx 30rpx;
  font-size: 12px;
  border-radius: 40rpx 0 0 40rpx;
  position: fixed;
  color: #E43130;
  top: 120rpx;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-shadow: 1px 1px 2rpx 0 #aaa;
  box-shadow: 1px 1px 2rpx 0 #aaa;

  image {
    width: 24rpx;
    height: 24rpx;
  }
}

.un-read-icon {
  margin-right: 8rpx;
  margin-bottom: 1px;
}

.lzy-loading {
  margin-right: 20rpx;
  float: left;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 1px solid #f0f0f0;
  border-left: 1px solid #6190E8;
  animation: load 1s linear infinite;
  -webkit-animation: load 1s linear infinite;
}

@-webkit-keyframes load {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes load {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
