*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,
body{
  margin:0;
  min-height:100%;
  background:#fff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "PingFang SC",
    "Helvetica Neue",
    Arial,
    sans-serif;

  color:#111;
}

button,
input{
  font:inherit;
}

button{
  border:0;
  background:none;
  padding:0;
  color:inherit;
}


/*
 * 页面主体
 *
 * 已经完全删除网页自己模拟的：
 * 时间
 * 信号
 * WiFi
 * 电量
 */
.wx-page{
  width:100%;
  min-height:100vh;
  background:#fff;

  padding-bottom:
    calc(
      82px
      +
      env(safe-area-inset-bottom)
    );

  position:relative;
}


/*
 * 顶部详情导航
 */
.wx-nav{
  height:56px;

  background:#ededed;

  display:grid;

  grid-template-columns:
    64px
    1fr
    64px;

  align-items:center;

  border-bottom:
    1px
    solid
    #e7e7e7;

  position:relative;

  z-index:5;
}


.nav-title{
  text-align:center;

  font-size:18px;

  font-weight:700;

  line-height:56px;
}


.nav-icon{
  height:56px;

  display:flex;

  align-items:center;
}


.nav-icon.back{
  padding-left:15px;
}


.nav-icon.back svg{
  width:27px;

  height:27px;

  fill:none;

  stroke:#111;

  stroke-width:1.8;

  stroke-linecap:round;

  stroke-linejoin:round;
}


.nav-icon.dots{
  justify-content:flex-end;

  padding-right:14px;

  gap:4px;
}


.nav-icon.dots span{
  width:4px;

  height:4px;

  background:#111;

  border-radius:50%;
}


/*
 * 朋友圈主体
 */
.detail-main{
  padding:
    14px
    12px
    24px;
}


.moment-detail{
  display:grid;

  grid-template-columns:
    40px
    minmax(0,1fr);

  gap:9px;
}


.avatar-box{
  overflow:hidden;

  border-radius:4px;

  background:#e9e9e9;

  display:flex;

  align-items:center;

  justify-content:center;

  color:#777;

  font-weight:600;
}


.avatar-box img{
  width:100%;

  height:100%;

  display:block;

  object-fit:cover;
}


.owner-avatar{
  width:40px;

  height:40px;
}


.moment-content{
  min-width:0;

  padding-right:0;
}


.owner-name{
  color:#526b9a;

  font-size:17px;

  line-height:21px;

  font-weight:600;

  margin:
    1px
    0
    4px;
}


.moment-text{
  font-size:17px;

  line-height:24px;

  white-space:normal;

  word-break:break-word;

  margin:
    0
    0
    7px;
}


/*
 * 图片
 */
.detail-images{
  display:grid;

  gap:4px;

  max-width:242px;

  margin:
    0
    0
    5px;
}


.detail-images.count-1{
  display:block;

  max-width:174px;
}


.detail-images.count-1
.detail-photo{
  width:174px;

  height:auto;

  max-height:220px;
}


.detail-photo{
  display:block;

  overflow:hidden;

  border-radius:2px;

  background:#eee;
}


.detail-photo img{
  display:block;

  width:100%;

  height:100%;

  object-fit:cover;
}


.detail-images.count-1 img{
  width:174px;

  height:auto;

  max-height:220px;

  object-fit:cover;
}


.detail-images:not(.count-1){
  grid-template-columns:
    repeat(3,1fr);
}


.detail-images:not(.count-1)
.detail-photo{
  aspect-ratio:1/1;
}


/*
 * 时间 / 地点 / 删除 / 更多
 */
.meta-line{
  min-height:25px;

  display:flex;

  align-items:center;

  gap:8px;

  position:relative;

  color:#afafaf;

  font-size:14px;

  line-height:22px;

  white-space:nowrap;
}


.meta-time{
  color:#b4b4b4;
}


.location{
  color:#526b9a;

  overflow:hidden;

  text-overflow:ellipsis;

  max-width:180px;
}


/*
 * 删除图标
 *
 * 原来的小人图标已经完全删除
 */
.meta-trash{
  width:20px;

  height:22px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex:0 0 auto;
}


.meta-trash svg{
  width:18px;

  height:18px;

  stroke:#526b9a;

  fill:none;

  stroke-width:1.75;

  stroke-linecap:round;

  stroke-linejoin:round;
}


/*
 * 右侧两个点
 */
.meta-more{
  margin-left:auto;

  width:34px;

  height:24px;

  border-radius:6px;

  background:#f5f5f5;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:4px;

  flex:0 0 auto;
}


.meta-more span{
  width:4px;

  height:4px;

  border-radius:50%;

  background:#526b9a;
}


/*
 * 点赞评论区域
 */
.social-card{
  margin-top:3px;

  background:#f7f7f7;

  border-radius:9px;

  overflow:hidden;
}


/*
 * 点赞区域
 */
.likes-section{
  min-height:53px;

  display:grid;

  grid-template-columns:
    48px
    1fr;

  align-items:center;
}


.heart-icon{
  width:48px;

  height:53px;

  display:flex;

  align-items:center;

  justify-content:center;
}


.heart-icon svg{
  width:23px;

  height:23px;

  fill:none;

  stroke:#526b9a;

  stroke-width:1.8;

  stroke-linecap:round;

  stroke-linejoin:round;
}


/*
 * 点赞头像
 */
.like-avatars{
  display:flex;

  align-items:center;

  gap:8px;

  min-height:53px;

  overflow:hidden;

  padding:
    7px
    12px
    7px
    0;
}


.small-avatar{
  width:36px;

  height:36px;

  border-radius:3px;

  overflow:hidden;

  background:#ddd;

  flex:0 0 auto;
}


.small-avatar img{
  width:100%;

  height:100%;

  display:block;

  object-fit:cover;
}


/*
 * 点赞新增头像动画
 */
.small-avatar.just-liked{
  animation:
    likeAvatarIn
    .18s
    ease-out;
}


@keyframes likeAvatarIn{

  from{
    opacity:0;

    transform:
      scale(.84);
  }

  to{
    opacity:1;

    transform:
      scale(1);
  }

}


/*
 * 当 show_like_count=true
 * 才会显示这个文字。
 */
.like-count-text{
  font-size:14px;

  color:#526b9a;

  white-space:nowrap;
}


.like-count-text b{
  font-weight:500;
}


/*
 * 评论
 */
.comments-section{
  border-top:
    1px
    solid
    #ebebeb;

  display:grid;

  grid-template-columns:
    48px
    1fr;
}


.comment-icon{
  width:48px;

  padding-top:20px;

  display:flex;

  justify-content:center;
}


.comment-icon svg{
  width:21px;

  height:21px;

  fill:none;

  stroke:#526b9a;

  stroke-width:1.6;

  stroke-linejoin:round;
}


.comments-list{
  padding-right:10px;
}


.comment-row{
  display:grid;

  grid-template-columns:
    36px
    minmax(0,1fr);

  gap:7px;

  padding:
    12px
    0
    11px;

  border-bottom:
    1px
    solid
    #e9e9e9;
}


.comment-row:last-child{
  border-bottom:0;
}


.comment-avatar{
  width:36px;

  height:36px;

  border-radius:3px;
}


.comment-body{
  min-width:0;
}


.comment-head{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:8px;

  height:18px;

  line-height:18px;

  margin:
    0
    0
    2px;
}


.comment-name{
  color:#526b9a;

  font-size:16px;

  font-weight:600;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:nowrap;
}


.comment-time{
  color:#8d8d8d;

  font-size:13px;

  font-weight:400;

  flex:0 0 auto;
}


.comment-text{
  font-size:16px;

  line-height:22px;

  word-break:
    break-word;
}


.comment-text b{
  color:#526b9a;

  font-weight:600;
}


/*
 * 底部评论输入
 */
.bottom-compose{
  position:fixed;

  left:0;

  right:0;

  bottom:0;

  z-index:20;

  background:#f7f7f7;

  border-top:
    1px
    solid
    #f0f0f0;

  padding:
    8px
    8px
    calc(
      8px
      +
      env(safe-area-inset-bottom)
    );

  min-height:82px;
}


.comment-form{
  height:44px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    44px
    44px;

  gap:4px;

  align-items:center;
}


.comment-form input{
  width:100%;

  height:39px;

  border:0;

  border-radius:5px;

  background:#fff;

  padding:
    0
    10px;

  font-size:16px;

  outline:none;

  color:#111;
}


.comment-form
input::placeholder{
  color:#bcbcbc;
}


.compose-icon{
  height:44px;

  display:flex;

  align-items:center;

  justify-content:center;
}


.compose-icon svg{
  width:31px;

  height:31px;

  fill:none;

  stroke:#111;

  stroke-width:1.55;

  stroke-linecap:round;

  stroke-linejoin:round;
}


.compose-icon .fill{
  fill:#111;

  stroke:none;
}


/*
 * 图片全屏预览
 */
.image-viewer{
  position:fixed;

  inset:0;

  background:#000;

  z-index:100;

  display:none;

  align-items:center;

  justify-content:center;
}


.image-viewer.open{
  display:flex;
}


.image-viewer img{
  max-width:100vw;

  max-height:100vh;

  object-fit:contain;
}


.image-viewer button{
  position:absolute;

  top:
    calc(
      12px
      +
      env(safe-area-inset-top)
    );

  right:16px;

  color:#fff;

  font-size:32px;

  z-index:2;
}


/*
 * 提示框
 */
.toast{
  position:fixed;

  left:50%;

  bottom:118px;

  transform:
    translateX(-50%)
    translateY(10px);

  background:
    rgba(0,0,0,.72);

  color:#fff;

  padding:
    8px
    13px;

  border-radius:7px;

  font-size:13px;

  opacity:0;

  pointer-events:none;

  transition:.2s;

  z-index:200;
}


.toast.show{
  opacity:1;

  transform:
    translateX(-50%)
    translateY(0);
}


/*
 * 电脑打开时模拟手机宽度
 */
@media (min-width:700px){

  body{
    background:#d9d9d9;
  }

  .wx-page{
    width:414px;

    margin:0 auto;

    box-shadow:
      0 0 0 1px
      rgba(0,0,0,.04);

    min-height:100vh;
  }

  .bottom-compose{
    left:50%;

    right:auto;

    width:414px;

    transform:
      translateX(-50%);
  }

}


/*
 * 小屏手机
 */
@media (max-width:360px){

  .detail-main{
    padding-left:10px;

    padding-right:10px;
  }

  .moment-detail{
    grid-template-columns:
      38px
      minmax(0,1fr);

    gap:8px;
  }

  .owner-avatar{
    width:38px;

    height:38px;
  }

  .detail-images.count-1{
    max-width:166px;
  }

  .detail-images.count-1
  .detail-photo,

  .detail-images.count-1
  img{
    width:166px;
  }

  .location{
    max-width:135px;
  }

}