/* Moments · 微信式封面 + 磨砂 */
.moments-scrim{ display:none !important; }

.moments-sheet{
  position:fixed; inset:0; z-index:270;
  display:flex; flex-direction:column;
  background:#fff;
  color:var(--text);
  opacity:0; transform:translateY(10px);
  transition:opacity .24s ease, transform .28s cubic-bezier(.22,.8,.24,1);
  overflow:hidden;
}
.moments-sheet.open{ opacity:1; transform:none; }
.moments-sheet.open.swiping{ transition:none; }
.moments-sheet[hidden]{ display:none !important; }

.moments-scroll{
  flex:1; min-height:0; overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
}

/* ── cover ── */
.moments-cover{
  position:relative;
  height:min(42vh, 340px);
  min-height:220px;
  /* ChatTheme writes wallpaper to --wall-default; --wall-image is only the skin gradient */
  background: var(--wall-default, var(--wall-image, linear-gradient(160deg,#6b7c8f,#3d4a5c)));
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.moments-cover-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  pointer-events:none;
}
.moments-cover::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,24,32,.18), rgba(20,24,32,.08) 40%, rgba(20,24,32,.42));
}
.moments-cover.has-custom{
  /* keep theme/chat wall as fallback under the photo layer */
  background: var(--wall-default, var(--wall-image, #e8ecf1));
  background-size:cover;
  background-position:center;
}
.moments-cover-photo{
  opacity:1;
}

.moments-nav{
  position:absolute; top:0; left:0; right:0; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding:calc(env(safe-area-inset-top) + 10px) max(14px, calc(50vw - 205px)) 0;
  pointer-events:none;
}
.moments-nav > *{ pointer-events:auto; }

.moments-iconbtn{
  width:38px; height:38px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; padding:0;
  color:#fff;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  font:inherit; font-size:22px; line-height:1;
}
.moments-iconbtn svg{ width:18px; height:18px; stroke:#fff; }

.moments-cover-foot{
  position:absolute; left:0; right:0; bottom:18px; z-index:2;
  display:flex; align-items:flex-end; justify-content:flex-end; gap:12px;
  padding:0 max(16px, calc(50vw - 205px));
}
.moments-cover-names{
  text-align:right; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
  margin-bottom:6px;
  align-self:flex-end;
}
.moments-cover-names strong{
  display:block; font-size:16px; font-weight:650; letter-spacing:.02em;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.moments-cover-sign{
  display:block;
  margin:10px max(14px, calc(50vw - 205px)) 0;
  padding:0 4px;
  max-width:none;
  text-align:right;
  font-size:13px; line-height:1.45; font-weight:400;
  color:var(--text-dim, rgba(40,48,60,.62));
  text-shadow:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  word-break:break-word;
}
.moments-cover-sign.is-empty{
  opacity:.55; font-size:12px; letter-spacing:.04em;
  color:var(--text-faint, rgba(40,48,60,.42));
}

.moments-pair{
  display:flex; align-items:center;
  position:relative;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.22));
}
.moments-pair .moments-avatar{
  width:64px; height:64px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.92);
  background-color:rgba(255,255,255,.35);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.moments-pair .moments-avatar.human{ position:relative; z-index:2; }
.moments-pair .moments-avatar.ai{
  margin-left:-18px; z-index:1;
  transform:translateY(6px) scale(.92);
}
.moments-pair .moments-avatar.ai{ background-image:var(--avatar-default); }
.moments-pair .moments-avatar.human{ background-image:var(--avatar-human, var(--solid-bar)); }
body:not(.has-human-avatar) .moments-pair .moments-avatar.human{
  background-image: linear-gradient(150deg, var(--accent-soft, #b9c6d4), rgba(255,255,255,.25));
}

/* ── frost panels ── */
.moments-frost{
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 30px rgba(20,28,40,.06);
}

.moments-compose{
  margin:14px max(14px, calc(50vw - 205px)) 0;
  padding:12px;
  border-radius:18px;
}
.moments-compose[hidden]{ display:none !important; }
.moments-compose textarea{
  width:100%; min-height:88px; resize:vertical; box-sizing:border-box;
  border:0; border-radius:12px; padding:10px 12px;
  background:rgba(255,255,255,.45); color:var(--text);
  font:inherit; font-size:14px; outline:none;
}
.moments-compose-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px;
}
.moments-compose-preview{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.moments-compose-preview img{
  width:56px; height:56px; object-fit:cover; border-radius:10px;
  border:1px solid rgba(255,255,255,.5);
}
.moments-compose .seg-btn{
  border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:7px 14px;
  background:rgba(255,255,255,.4); color:var(--accent); font:inherit; font-size:12px; cursor:pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.moments-postbtn{
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px; padding:7px 16px;
  background:linear-gradient(165deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  color:rgba(40,48,60,.88);
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 18px rgba(20,28,40,.08);
}
.moments-postbtn:disabled{ opacity:.45; }

.moments-feed{
  padding:14px max(14px, calc(50vw - 205px)) calc(28px + env(safe-area-inset-bottom));
}
.moments-empty{
  margin-top:18px; padding:28px 16px; text-align:center;
  color:var(--text-dim); font-size:13px; line-height:1.6; border-radius:18px;
}

/* WeChat-like card */
.moments-card{
  position:relative;
  display:grid; grid-template-columns:44px 1fr; gap:10px;
  padding:14px 12px; margin-bottom:12px; border-radius:18px;
}
.moments-card > .moments-avatar{
  width:44px; height:44px; border-radius:10px; flex:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,.55);
}
.moments-card > .moments-avatar.ai{ background-image:var(--avatar-default); }
.moments-card > .moments-avatar.human{ background-image:var(--avatar-human, var(--solid-bar)); }
body:not(.has-human-avatar) .moments-card > .moments-avatar.human{
  background-image: linear-gradient(150deg, var(--accent-soft, #b9c6d4), rgba(255,255,255,.25));
}

.moments-main{ min-width:0; }
.moments-who{ margin-bottom:4px; }
.moments-who strong{ font-size:14px; font-weight:650; color:var(--accent); }
.moments-who small{ display:none; }
.moments-body{
  font-size:14.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word;
  margin:0 0 8px; color:var(--text);
}
.moments-imgs{
  display:grid; gap:5px; margin:0 0 8px;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
}
.moments-imgs img{
  width:100%; max-height:220px; object-fit:cover; border-radius:10px;
  border:1px solid rgba(255,255,255,.4); display:block; background:rgba(255,255,255,.25);
}
.moments-meta-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:8px;
}
.moments-time{ font-size:11px; color:var(--text-faint); }
.moments-actions{ display:flex; gap:6px; }
.moments-likebtn{
  width:34px; height:34px; padding:0; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.45);
  color:var(--text-dim);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.moments-likebtn .moments-heart{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linejoin:round; stroke-linecap:round;
}
.moments-likebtn.on{
  color:#e85d6a;
  background:color-mix(in srgb, #e85d6a 12%, rgba(255,255,255,.4));
}
.moments-likebtn.on .moments-heart{
  fill:currentColor; stroke:currentColor;
}
.moments-likes .moments-heart{
  width:13px; height:13px; vertical-align:-2px;
  fill:#e85d6a; stroke:#e85d6a; stroke-width:1.2;
  display:inline-block;
}

.moments-likes,
.moments-reaction,
.moments-comments{
  border-radius:12px;
  background:rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.35);
  padding:8px 10px;
  margin-bottom:6px;
}
.moments-likes{ font-size:12.5px; color:var(--accent); }
.moments-reaction{ font-size:13px; line-height:1.45; color:var(--text-soft, var(--text-dim)); }
.moments-reaction b{ font-weight:600; color:var(--text); margin-right:6px; }
.moments-comments{ display:flex; flex-direction:column; gap:5px; }
.moments-comment{ font-size:13px; line-height:1.45; }
.moments-comment b{ font-weight:600; margin-right:4px; color:var(--accent); }

.moments-comment-form{ display:flex; gap:6px; align-items:center; margin-top:4px; }
.moments-comment-form input{
  flex:1; min-width:0; border:0; border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.42); color:var(--text);
  font:inherit; font-size:13px; outline:none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.moments-comment-form button{
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px; padding:8px 14px;
  background:linear-gradient(165deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  color:rgba(40,48,60,.88);
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 18px rgba(20,28,40,.08);
}


.moments-comment,
.moments-reaction[data-act="reply"]{
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.moments-comment:active,
.moments-reaction[data-act="reply"]:active{
  background:rgba(0,0,0,.04);
}

.moments-del{
  position:absolute; top:8px; right:8px; z-index:2;
  width:28px; height:28px; padding:0; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.55);
  color:rgba(40,48,60,.55);
  font:inherit; font-size:18px; line-height:1;
  border:1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 4px 12px rgba(20,28,40,.06);
}
.moments-del:active{ color:rgba(200,60,70,.9); background:rgba(255,255,255,.72); }