/* ============================================================
   动态模块 (Moments)
   配色对齐 Cactus White 主题
   布局参考 QQ 空间动态风格
   ============================================================ */

/* --- 容器 --- */
.moments-container {
  position: relative;
  padding: 0;
}

/* --- 加载状态 --- */
.moments-loading {
  text-align: center;
  color: #8c8c8c;
  padding: 60px 0;
  font-size: 14px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* --- 空状态 / 错误状态 --- */
.moments-empty {
  text-align: center;
  color: #8c8c8c;
  padding: 60px 0;
  font-size: 14px;
}

/* --- 加载更多按钮 --- */
.moment-load-more {
  text-align: center;
  padding: 30px 0;
}

.load-more-btn {
  display: inline-block;
  padding: 8px 24px;
  font-family: "Menlo", "Meslo LG", monospace;
  font-size: 13px;
  color: #8c8c8c;
  background: none;
  border: 1px dashed #d0d0d0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.load-more-btn:hover {
  color: #2bbc8a;
  border-color: #2bbc8a;
}

/* ============================================================
   动态卡片
   ============================================================ */

.moment-item {
  animation: fadeInUp 0.5s ease both;
}

.moment-card {
  display: flex;
  gap: 14px;
  background: #fff;
  border-bottom: 1px dashed #e0e0e0;
  padding: 20px 0;
}

.moment-item:last-child .moment-card {
  border-bottom: none;
}

/* --- 头像列（固定在左侧） --- */
.moment-avatar-col {
  flex-shrink: 0;
  width: 44px;
}

.moment-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #eee;
  display: block;
}

/* --- 主体（右侧） --- */
.moment-body {
  flex: 1;
  min-width: 0;
}

/* --- 昵称 --- */
.moment-nickname {
  font-size: 15px;
  color: #383838;
  font-weight: 700;
  font-family: "Menlo", "Meslo LG", monospace;
  line-height: 1.4;
}

/* --- 内容文本 --- */
.moment-content {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.725;
  color: #383838;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Menlo", "Meslo LG", monospace;
}

/* 覆盖主题 .content p 的 margin-top */
.moment-content p {
  margin-top: 0;
  margin-bottom: 0;
}

/* --- 时间（底部） --- */
.moment-time {
  margin-top: 10px;
  font-size: 13px;
  color: #8c8c8c;
  font-family: "Menlo", "Meslo LG", monospace;
}

/* ============================================================
   图片区域
   每个图片缩略图固定尺寸，网格容器随图片数量自适应
   - 1 张 → 单个固定尺寸缩略图
   - 2 张 → 并列两个
   - 3+ 张 → 3 列网格排列
   ============================================================ */

.moment-images {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
}

.moment-image {
  width: 130px;
  height: 130px;
  object-fit: cover;
  cursor: pointer;
  transition: filter 0.2s ease;
  display: block;
  border-radius: 4px;
}

.moment-image:hover {
  filter: brightness(0.92);
}

/* 1 张 */
.moment-images.is-single {
  grid-template-columns: auto;
}

/* 2 张 */
.moment-images.is-double {
  grid-template-columns: repeat(2, auto);
}

/* 3+ 张：3 列网格 */
.moment-images.is-grid {
  grid-template-columns: repeat(3, auto);
}

/* ============================================================
   图片放大弹窗（Lightbox）
   点击切换：点开 → 放大，再点 → 恢复
   ============================================================ */

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.lightbox-image:hover {
  transform: scale(1.02);
}

/* ============================================================
   入场动画
   ============================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 640px) {
  .moment-card {
    gap: 10px;
    padding: 16px 0;
  }

  .moment-avatar-col {
    width: 36px;
  }

  .moment-avatar {
    width: 36px;
    height: 36px;
  }

  .moment-nickname {
    font-size: 14px;
  }

  .moment-content {
    font-size: 14px;
  }

  .moment-time {
    font-size: 12px;
  }

  .moment-images {
    gap: 2px;
  }

  .moment-image {
    width: 100px;
    height: 100px;
  }
}