/* 动态页（朋友圈式）（原 index.html 第 1092-1392 行） */

/* ============ 动态页（朋友圈式） ============ */
.feed-view{ background:var(--bg); }
.feed-head{ position:relative; flex:0 0 auto; background:var(--bg); }
.feed-cover{
  height:150px;
  overflow:hidden;
}
.feed-cover img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* 页面右上角：发布 / 生成 两个独立圆按键 */
.feed-head-actions{
  position:absolute;
  top:14px; right:14px;
  display:flex; gap:8px;
  z-index:2;
}
.feed-head-btn{
  width:36px; height:36px;
  border:none; border-radius:50%;
  background:#fff;
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  cursor:pointer;
  transition:transform .18s var(--spring), background .18s;
}
.feed-head-btn:hover{ background:var(--fill); }
.feed-head-btn:active{ transform:scale(.88); }
.feed-head-btn svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
/* 头像：方形，压在背景图底边的左侧（一半在照片里、一半在照片外） */
.feed-me{
  position:relative;
  height:41px;
}
.feed-avatar{
  position:absolute;
  left:20px; top:-33px;
  width:66px; height:66px;
  border-radius:16px;
  border:3px solid var(--bg);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  overflow:hidden;
  background:var(--fill);
}
.feed-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 网名 + 三个按键：整体与头像同高对齐；网名叠在背景图上（白字），按键在照片外 */
.feed-info{
  position:absolute;
  left:100px; right:20px; top:-33px;
  height:66px;
  display:flex; flex-direction:column; justify-content:space-between;
  min-width:0;
}
.feed-name{
  font-size:18px; line-height:1.15;
  font-weight:700;
  color:var(--ink);
  /* 白色描边：叠在背景照片上，亮暗区域都清晰可读 */
  text-shadow:0 0 4px #fff, 0 0 4px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 胶囊容器：浅灰圆角容器 + 三个标签键（News/Photo/Me） */
.feed-tabs{
  display:flex; align-items:center;
  background:var(--fill);
  border-radius:999px;
  padding:3px; gap:2px;
}
.feed-tab{
  flex:1; min-width:0;
  height:27px;
  border:none; border-radius:999px;
  background:transparent;
  color:var(--gray-1);
  font-family:var(--font-num);
  font-size:12.5px; font-weight:600;
  cursor:pointer;
  padding:0 4px;
  transition:background .25s, color .25s, box-shadow .25s, transform .2s var(--spring);
}
.feed-tab.active{
  background:#fff; color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.feed-tab:active{ transform:scale(.94); }
.feed-body{
  flex:1; min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:2px 0 14px;
}
.feed-body::-webkit-scrollbar{ width:0; }
.feed-anim{ animation:viewIn .28s var(--ease-out) both; }
.feed-post{
  display:flex; gap:12px;
  padding:14px 20px;
  border-top:1px solid var(--hairline);
}
.feed-post:first-child{ border-top:none; }
.post-avatar{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  background:var(--fill);
}
.post-main{ flex:1; min-width:0; }
.post-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.post-name{ font-size:15px; font-weight:600; }
.post-del{
  flex:0 0 auto;
  width:28px; height:28px;
  border:none; border-radius:50%;
  background:transparent; color:var(--gray-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.post-del:hover{ background:var(--fill); color:var(--ink); }
.post-del svg{
  width:15px; height:15px;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round;
}
.post-text{
  font-size:14.5px; color:var(--ink);
  line-height:1.7; margin-top:4px;
  word-break:break-word;
}
.post-fwd{
  margin-top:8px;
  border:1px solid var(--hairline);
  border-radius:12px;
  background:var(--fill);
  padding:10px 12px;
}
.post-fwd-name{ font-size:12.5px; font-weight:600; color:var(--gray-1); }
.post-fwd-text{ font-size:13.5px; color:var(--gray-1); line-height:1.65; margin-top:4px; word-break:break-word; }
.post-imgs{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:4px;
  margin-top:8px;
  border-radius:12px;
  overflow:hidden;
  max-width:300px;
}
.post-imgs img{
  width:100%; aspect-ratio:1;
  object-fit:cover;
  display:block;
  background:var(--fill);
}
.post-imgs.single{ display:block; max-width:220px; }
.post-imgs.single img{ aspect-ratio:auto; border-radius:12px; }
.post-time{
  font-size:12px; color:var(--gray-2);
}
.post-meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:8px;
}
.post-actions{ display:flex; align-items:center; gap:2px; }
.act-btn{
  display:flex; align-items:center; gap:5px;
  height:32px; padding:0 8px;
  border:none; border-radius:999px;
  background:transparent; color:var(--gray-1);
  cursor:pointer;
  transition:background .15s, color .15s, transform .18s var(--spring);
}
.act-btn:hover{ background:var(--fill); color:var(--ink); }
.act-btn:active{ transform:scale(.9); }
.act-btn svg{
  width:18px; height:18px;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.act-btn .act-count{
  font-size:11.5px; color:var(--gray-2);
  font-variant-numeric:tabular-nums;
}
.act-btn.liked{ color:var(--ink); }
.act-btn.liked svg{ fill:currentColor; }
.act-btn.liked .act-count{ color:var(--ink); }
.album-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:3px;
  padding:6px 14px;
}
.album-grid img{
  width:100%; aspect-ratio:1;
  object-fit:cover;
  display:block;
  background:var(--fill);
  border-radius:2px;
}

/* 发布新动态页 */
.feed-edit-text{
  width:100%; min-height:140px;
  margin-top:4px;
  border:none; outline:none; resize:vertical;
  background:var(--fill);
  border-radius:18px;
  padding:16px;
  font-family:inherit; font-size:15px; line-height:1.75;
  color:var(--ink);
}
.feed-edit-text::placeholder{ color:var(--gray-3); }
.feed-edit-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:6px;
  margin-top:16px;
}
.feed-edit-cell{
  position:relative;
  aspect-ratio:1;
  border-radius:12px;
  overflow:hidden;
  background:var(--fill);
}
.feed-edit-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.cell-del{
  position:absolute; top:5px; right:5px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(11,11,15,.55); color:#fff;
  border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1;
  cursor:pointer;
}
.feed-edit-add{
  aspect-ratio:1;
  border-radius:12px;
  border:1px dashed var(--gray-3);
  background:transparent;
  color:var(--gray-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer;
  font-size:11px;
  transition:color .2s, border-color .2s;
}
.feed-edit-add:hover{ color:var(--ink); border-color:var(--ink); }
.feed-edit-add svg{
  width:22px; height:22px;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* 评论面板 */
.comment-list{ padding:2px 24px 0; }
.comment-row{
  display:flex; gap:10px;
  padding:10px 0;
  border-top:1px solid var(--hairline);
}
.comment-row:first-child{ border-top:none; }
.comment-name{ font-size:13px; font-weight:600; color:var(--ink); }
.comment-text{
  font-size:13.5px; color:var(--gray-1);
  line-height:1.65; margin-top:2px;
  word-break:break-word;
}
.comment-empty{
  padding:26px 24px;
  text-align:center;
  font-size:13px; color:var(--gray-2);
}
.comment-input-row{
  display:flex; gap:10px;
  padding:12px 24px 20px;
  border-top:1px solid var(--hairline);
  margin-top:8px;
}
.comment-input-row input{
  flex:1; min-width:0; height:42px;
  border:none; outline:none;
  background:var(--fill);
  border-radius:999px;
  padding:0 16px;
  font-family:inherit; font-size:14px; color:var(--ink);
}
.comment-input-row input::placeholder{ color:var(--gray-3); }
.comment-send{
  flex:0 0 auto;
  height:42px; padding:0 20px;
  border:none; border-radius:999px;
  background:var(--primary); color:var(--ink);
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:transform .18s var(--spring);
}
.comment-send:active{ transform:scale(.95); }