/* =====================================================================
 * feed.css — 动态卡片布局（朋友圈式 .feed-item）
 * 目标：修复「动态列表显示错位」+ 为视频左下角「时长·大小」角标提供样式。
 * 与私信 .msg-media / .msg-video 对齐：单图/单视频按内容收缩、等比不裁切；
 * 多图走 3 列方格网格；视频内联静音自动播放；角标覆盖在封面左下、点击透传。
 * 说明：本文件为布局/角标专用样式；卡片底色/圆角等外壳样式若 style.css 已
 * 提供则不冲突（同名选择器、同语义取值）。
 * ===================================================================== */

/* ---- 头部：头像 + 昵称 + 时间 + 更多 ---- */
/* 显式 flex 尺寸 + nowrap，确保即使存在其它同名规则也不会把头像行堆成竖排 */
.feed-item-head {
  position: relative;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
}
.feed-item-avatar-link { flex: 0 0 auto; display: inline-flex; align-items: center; }
.feed-item-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #eee; }
.feed-item-meta {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.feed-item-name {
  display: block; font-weight: 600; font-size: 15px; color: var(--c-text-1, #1a1a1a); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-item-time {
  font-size: 12px; color: var(--c-text-3, #999); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 管理按钮作为 .feed-item-head 的子元素时，靠右并对齐中心；样式主体由 feed-share.css 负责 */
.feed-item-manage { margin-left: auto; align-self: center; flex: 0 0 auto; }
/* .feed-item-manage 其余样式（尺寸/颜色/悬停）由 feed-share.css 负责，此处不重复 */

/* ---- 正文 ---- */
.feed-item-content { margin: 8px 2px; font-size: 15px; line-height: 1.55; color: var(--c-text-1, #1a1a1a); white-space: pre-wrap; word-break: break-word; }

/* ---- 媒体容器 ---- */
.feed-item-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 8px 0; }
.feed-item-media.is-single { display: block; width: fit-content; max-width: 100%; }

/* 封面圆角：左上/右上/右下 16px，左下直角（图片及视频预览封面统一） */
.feed-media { position: relative; overflow: hidden; border-radius: 16px 16px 16px 0; background: #000; line-height: 0; }
.feed-item-media:not(.is-single) .feed-media { aspect-ratio: 1 / 1; }

.feed-media-img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.feed-item-media.is-single .feed-media { background: transparent; }
.feed-item-media.is-single .feed-media-img {
  width: auto; max-width: min(72vw, 320px); max-height: min(60vw, 380px);
  object-fit: contain; border-radius: 16px 16px 16px 0;
}
/* dvw 自适应（与私信单图双写一致） */
@supports (max-width: min(72dvw, 320px)) {
  .feed-item-media.is-single .feed-media-img { max-width: min(72dvw, 320px); max-height: min(60dvw, 380px); }
}

/* ---- 视频 ---- */
.feed-media-video { position: relative; border-radius: 16px 16px 16px 0; overflow: hidden; background: #000; line-height: 0; }
.feed-video-el { display: block; width: 100%; height: auto; background: #000; border-radius: 16px 16px 16px 0; z-index: 1; }
.feed-item-media:not(.is-single) .feed-media-video { aspect-ratio: 1 / 1; }
.feed-item-media:not(.is-single) .feed-video-el { width: 100%; height: 100%; object-fit: cover; }
.feed-item-media.is-single .feed-video-el {
  max-width: min(72vw, 320px); max-height: min(60vw, 380px); object-fit: contain;
}
@supports (max-width: min(72dvw, 320px)) {
  .feed-item-media.is-single .feed-video-el { max-width: min(72dvw, 320px); max-height: min(60dvw, 380px); }
}

/* ---- 视频封面左下角角标：时长·大小（深色圆角胶囊，覆盖在封面之上、点击透传）---- */
.feed-video-stat {
  position: absolute; left: 6px; bottom: 6px; z-index: 3;
  display: flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 12px; line-height: 1.5; letter-spacing: .1px;
  pointer-events: none; white-space: nowrap;
}
.feed-video-stat.is-tight { letter-spacing: -.15px; }
.feed-video-stat.is-tighter { letter-spacing: -.4px; gap: 2px; }
.feed-video-stat.is-tightest { letter-spacing: -.6px; gap: 3px; }
.feed-video-stat.is-tightest .feed-video-sep { display: none; }
.feed-video-dur, .feed-video-size { white-space: nowrap; }
.feed-video-sep { opacity: .55; margin: 0 1px; }

/* ---- 位置 ---- */
.feed-item-loc {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 6px 0 2px; font-size: 13px; color: var(--c-primary, #2e8bff);
  cursor: pointer;
}
.feed-item-loc svg { width: 15px; height: 15px; }

/* ---- 操作栏：点赞 / 评论 / 收藏 ---- */
.feed-item-actions { display: flex; gap: 20px; margin-top: 10px; padding-top: 8px; }
.feed-act { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 0; color: var(--c-text-2, #666); font-size: 13px; cursor: pointer; }
.feed-act svg { width: 19px; height: 19px; }
.feed-act.liked { color: #fa5151; }
.feed-act.favorited { color: #ffb300; }

/* ---- 灯箱（feed-list.js 注入的 .feed-lightbox 兜底样式；若 gallery.css 已提供则不冲突）---- */
.feed-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  -webkit-tap-highlight-color: transparent;
}
.feed-lightbox-stage { max-width: 100vw; max-height: 100vh; display: flex; align-items: center; justify-content: center; }
.feed-lightbox-stage img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; -webkit-user-select: none; user-select: none; }
.feed-lightbox-stage video { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; background: #000; outline: none; }
.feed-lightbox-close {
  position: absolute; top: 14px; right: 16px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff;
  font-size: 22px; line-height: 38px; text-align: center; cursor: pointer;
}
.feed-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 56px; border: 0; background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 26px; cursor: pointer;
}
.feed-lightbox-nav.prev { left: 8px; }
.feed-lightbox-nav.next { right: 8px; }
.feed-lightbox-count {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; background: rgba(0, 0, 0, .4); padding: 2px 10px; border-radius: 999px;
}
.feed-lightbox-nav[disabled] { opacity: .25; pointer-events: none; }
/* 移动端（窄屏 / 触控设备）取消左右切换箭头，切换由左右滑动手势承担 */
@media (max-width: 768px), (pointer: coarse) {
  .feed-lightbox-nav { display: none; }
}