page {
  background-color: rgba(246, 246, 246, 1);
}
.page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .page-header {
    flex-shrink: 0;
    padding: 26rpx 32rpx 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    border-radius: 0 0 0 32rpx;
    .info {
      padding: 24rpx;
      background: #f6f6f6;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 2rpx solid #ffffff;
      display: flex;
      gap: 28rpx;
      align-items: flex-start;
      .photos {
        position: relative;
        padding: 4rpx;
        display: grid;
        grid-template-columns: repeat(2, 40rpx);
        grid-template-rows: repeat(2, 40rpx);
        background-color: #fff;
        border-radius: 8rpx;
        gap: 4rpx;
        .photo {
          width: 100%;
          height: 100%;
        }
        .sealed {
          position: absolute;
          bottom: -40rpx;
          left: 50%;
          transform: translateX(-50%);
          white-space: nowrap;
          font-size: 20rpx;
          color: rgba(133, 133, 133, 1);
          line-height: 1;
          padding: 6rpx 16rpx;
          border-radius: 48rpx;
          background-color: rgba(224, 224, 224, 1);
        }
      }
      .inner {
        flex: 1;
        padding-left: 24rpx;
        border-left: 1px solid rgba(205, 205, 205, 0.5);
        .c-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .id {
            font-size: 28rpx;
            color: rgba(20, 21, 21, 1);
          }
          .detail {
            font-size: 28rpx;
            color: rgba(153, 153, 153, 1);
          }
        }
        .c-footer {
          margin-top: 16rpx;
          line-height: 28rpx;
          .name {
            display: inline-block;
            font-size: 28rpx;
            color: rgba(20, 21, 21, 1);
          }
          .line {
            margin: 0 10rpx;
            display: inline;
            font-size: 24rpx;
            color: rgba(205, 205, 205, 0.5);
          }
          .hostipal {
            margin-right: 10rpx;
            display: inline;
            font-size: 28rpx;
            color: rgba(20, 21, 21, 1);
          }
          .site {
            display: inline-block;
            padding: 0 8rpx;
            font-size: 24rpx;
            line-height: 32rpx;
            color: rgba(148, 87, 30, 1);
            background: #fae5ce;
            border-radius: 4rpx 4rpx 4rpx 4rpx;
          }
        }
      }
    }
  }
  .page-container {
    flex: 1;
    overflow: hidden;
    .scroll-view {
      height: 100%;
      .date {
        padding-top: 20rpx;
        font-size: 28rpx;
        color: rgba(173, 179, 180, 1);
        text-align: center;
      }
      .doctor {
        padding: 15rpx 30rpx;
        display: flex;
        .avatar {
          padding-right: 16rpx;
          flex-shrink: 0;
          .a-img {
            width: 84rpx;
            height: 84rpx;
            border-radius: 50%;
          }
        }
        .d-container {
          flex: 1;
          margin-right: 74rpx;
          display: flex;
          flex-direction: column;
          align-items: start;
          .user {
            padding: 12rpx 0;
            font-size: 28rpx;
            color: rgba(153, 153, 153, 1);
            line-height: 32rpx;
          }
          .message {
            margin-bottom: 32rpx;
            padding: 26rpx 32rpx;
            background-color: #fff;
            border-radius: 0 32rpx 32rpx;
            font-size: 32rpx;
            color: rgba(40, 48, 49, 1);
            white-space: pre-line;
          }
          .photo {
            margin-bottom: 32rpx;
            width: 234rpx;
            .p-img {
              width: 100%;
              height: auto;
              border-radius: 16rpx;
            }
          }
          .video {
            margin-bottom: 32rpx;
            position: relative;
            width: 452rpx;
            height: 254rpx;
            .v-img {
              width: 100%;
              height: 100%;
              border-radius: 16rpx;
            }
            .play {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 84rpx;
              height: 84rpx;
            }
          }
          .audio {
            margin-bottom: 32rpx;
            padding: 22rpx 24rpx;
            border-radius: 0 32rpx 32rpx;
            background-color: #fff;
            min-width: 218rpx;
            font-size: 32rpx;
            color: rgba(40, 48, 49, 1);
            display: flex;
            align-items: center;
            gap: 12rpx;
            box-sizing: border-box;
            .icon {
              width: 32rpx;
              height: 40rpx;
            }
          }
        }
      }
      .patient {
        padding: 15rpx 30rpx;
        display: flex;
        justify-content: flex-end;
        .avatar {
          padding-left: 16rpx;
          flex-shrink: 0;
          .a-img {
            width: 84rpx;
            height: 84rpx;
            border-radius: 50%;
          }
        }
        .p-container {
          flex: 1;
          margin-left: 74rpx;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .message {
            margin-bottom: 32rpx;
            padding: 26rpx 32rpx;
            background: #67baca;
            border-radius: 32rpx 0 32rpx 32rpx;
            font-size: 32rpx;
            color: #fff;
            white-space: pre-line;
          }
          .photo {
            margin-bottom: 32rpx;
            width: 234rpx;
            .p-img {
              width: 100%;
              height: auto;
              border-radius: 16rpx;
            }
          }
          .video {
            margin-bottom: 32rpx;
            position: relative;
            width: 452rpx;
            height: 254rpx;
            .v-img {
              width: 100%;
              height: 100%;
              border-radius: 16rpx;
            }
            .play {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 84rpx;
              height: 84rpx;
            }
          }
          .audio {
            margin-bottom: 32rpx;
            padding: 22rpx 24rpx;
            border-radius: 32rpx 0 32rpx 32rpx;
            background: #67baca;
            min-width: 218rpx;
            font-size: 32rpx;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12rpx;
            box-sizing: border-box;
            .icon {
              width: 32rpx;
              height: 40rpx;
            }
          }
        }
      }
      .place {
        height: 10vh;
      }
    }
  }
  .page-footer {
    flex-shrink: 0;
    background-color: #fff;
    .header {
      padding: 32rpx;
      display: flex;
      gap: 12rpx;
      align-items: center;
      justify-content: space-between;
      .icon {
        width: 48rpx;
        height: 48rpx;
      }
      .input {
        padding: 16rpx 32rpx;
        flex: 1;
        background: #f6f6f6;
        border-radius: 212rpx 212rpx 212rpx 212rpx;
        font-size: 28rpx;
        color: #000;
      }
      .place-input {
        color: rgba(205, 205, 205, 1);
      }
      .icon-add {
        width: 48rpx;
        height: 48rpx;
      }
    }
    .fold-container {
      padding: 0 44rpx;
      display: flex;
      gap: 24rpx 72rpx;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s;
      &.unfold {
        max-height: 300rpx;
      }
      .f-item {
        padding: 16rpx 0 calc(32rpx + env(safe-area-inset-bottom));
        .icon {
          padding: 32rpx;
          width: 48rpx;
          height: 48rpx;
          border-radius: 24rpx;
          background-color: rgba(246, 246, 246, 1);
        }
        .name {
          text-align: center;
          margin-top: 12rpx;
          font-size: 24rpx;
          color: rgba(133, 133, 133, 1);
        }
      }
    }
  }
}

#video {
  width: 0;
  height: 0;
}