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

/* ============ 动态页（朋友圈式） ============ */
.feed-view{ background:var(--bg); }
/* 顶栏透明：封面图直接顶到状态栏后面，不要垫一层 --bg 白底（会像白色顶渐变） */
.feed-head{ position:relative; flex:0 0 auto; background:transparent; }
.feed-cover{
  height:calc(150px + var(--sat));
  overflow:hidden;
  background:#111; /* 图没加载完时用深底，避免闪白条 */
}
.feed-cover img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.feed-head::before,
.feed-head::after,
.feed-cover::before,
.feed-cover::after{
  content:none !important;
  display:none !important;
}
/* 页面右上角：发布 / 生成 两个独立圆按键 */
.feed-head-actions{
  position:absolute;
  top:calc(14px + var(--sat)); right:14px;   /* 封面图铺到状态栏后面，按钮避开安全区 */
  display:flex; gap:8px;
  z-index:2;
}
.feed-head-btn{
  width:36px; height:36px;
  border:none; border-radius:50%;
  background:var(--card);
  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;
}
@media (hover: hover) and (pointer: fine){
.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:var(--card); 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-tools{ display:flex; align-items:center; }
.post-refresh.busy{ pointer-events:none; opacity:.55; }
.post-refresh.busy svg{ animation:feedRefreshSpin .75s linear infinite; }
@keyframes feedRefreshSpin{ to{ transform:rotate(360deg); } }
.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;
}
@media (hover: hover) and (pointer: fine){
.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-text-origin{ white-space:pre-wrap; }
.post-text-trans{
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed rgba(var(--tint-rgb),.22);
  font-size:13.5px;
  line-height:1.65;
  color:var(--gray-1);
  white-space:pre-wrap;
  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);
}
@media (hover: hover) and (pointer: fine){
.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.on{ background:var(--fill); color:var(--ink); }
.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; }
.feed-edit-cell .cell-del{ z-index:2; }
.feed-edit-cell.is-virtual{ background:var(--card); }
.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;
}
@media (hover: hover) and (pointer: fine){
.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); }

/* Comment composer remains above the navigation and keyboard. */
.app.has-tabbar .view[data-view="feed"].active #feedBody{padding-bottom:calc(var(--tabbar-h) + 24px);}
html.kb-open #tabbar{display:none !important;}
.post-cmt-delete{float:right;border:0;background:transparent;color:var(--gray-2);font-size:11px;padding:2px 6px;}

/* 1.7.53 feed hotfix: text actions must not inherit the 28px delete-icon box. */
.feed-post .post-top{flex-wrap:wrap;row-gap:4px;}
.feed-post .post-name{flex:1 1 72px;min-width:0;overflow-wrap:anywhere;}
.feed-post .post-tools{flex:0 0 auto;max-width:100%;margin-left:auto;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.feed-post .post-refresh{
 width:auto;height:auto;min-height:28px;padding:5px 8px;gap:5px;
 border-radius:14px;white-space:nowrap;font:inherit;
 font-size:calc(11px * var(--sk-fs,1));line-height:1.4;
}
.feed-post .post-refresh>span{display:block;white-space:nowrap;word-break:normal;overflow-wrap:normal;}
.feed-post .post-refresh>svg{flex:0 0 14px;width:14px;height:14px;}

/* 1.7.86 feed controls */
.feed-post .post-avatar{border-radius:12px;object-fit:cover}
.feed-post .post-tools{position:relative;overflow:visible}
.post-more{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--gray-2);font-family:inherit;font-size:22px;font-weight:700;line-height:1;min-width:36px;min-height:32px;padding:0 6px;cursor:pointer}
.post-action-menu{position:absolute;right:0;top:100%;z-index:30;min-width:140px;padding:5px;border-radius:14px;background:var(--bg);border:1px solid var(--hairline);box-shadow:0 8px 24px #0002}
.post-action-menu[hidden]{display:none}
.feed-post .post-action-menu .post-del{display:flex;align-items:center;justify-content:space-between;width:100%;height:auto;min-height:38px;padding:8px 10px;border:0;border-radius:9px;background:transparent;white-space:nowrap;font-size:12px}
.post-action-menu [data-act="del"]{color:#b65c60}
.post-cmt .post-cmt-delete{display:none}
.post-cmt.show-delete .post-cmt-delete{display:inline-block}
.post-cmt{ -webkit-touch-callout:none }