/* ═══════════════════════════════════════════════════════════════════
   评论卡共享样式 (v3.0.0-alpha.5)
   ───────────────────────────────────────────────────────────────────
   单一来源宪法: 这些 class 在多个页面用 (topic 内页 + 首页评论流),
   抽到独立 CSS 文件, 避免内联 style 多份不一致.
   topic.html 和 index.html 都 link 这个文件.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 评论 action 按钮 (Twitter 风, 无 hover 变化) ═══ */
.comment-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--ae-text-2);
  font-size: 13px;
  cursor: pointer;
  border-radius: 999px;
  font-family: inherit;
}
.comment-action-btn i {
  font-size: 14px;
  width: 18px;
  text-align: center;
}
.comment-action-count {
  font-size: 12px;
  font-weight: 500;
  min-width: 14px;
}
.comment-action-count:empty { display: none; }

/* ═══ 头像/编辑/更多 小图标按钮 ═══ */
.comment-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ae-text-2);
  cursor: pointer;
  border-radius: 50%;
  font-size: 13px;
}

/* hover 整条评论行时, 显示作者操作 (编辑/删除) — 只在 topic 内页生效 */
.comment-item:hover .comment-actions {
  display: inline-flex !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.0.0-alpha.5: 评论里的链接配色 (主题感知双色)
   ───────────────────────────────────────────────────────────────────
   策略: 整站收敛 2 色, 跟着主题切:
     深主题 (dim/dark/eyecare/dotgrid/custom) → #1D9BF0 Twitter 亮蓝
     浅主题 (light)                            → #576B95 微信暗蓝
   
   选 2 色而不是 3+: 长期可维护性优先, 6 主题切换无歧义.
   ═══════════════════════════════════════════════════════════════════ */
.comment-html-body a,
.text-fmt a {
  color: var(--ae-link);
  text-decoration: none;
  border-bottom: 1px solid var(--ae-link);
  opacity: 0.9;
  transition: opacity var(--ae-transition);
}
.comment-html-body a:hover,
.text-fmt a:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.0.0-alpha.5: 评论正文排版规格 (单一来源宪法)
   ───────────────────────────────────────────────────────────────────
   规格依据:
     - 偶数像素宪法: font-size 必须偶数 (16px, 不要 14.5/15)
     - 行距对齐 Twitter 比例 1.333, 但中英混排略松到 1.375 = 22/16
     - 中文不加 letter-spacing (加了反而违和)
   
   覆盖:
     .comment-html-body — 评论卡正文 (首页 + t 页)
     .text-fmt          — 通用 markdown 渲染容器
   ═══════════════════════════════════════════════════════════════════ */
.comment-html-body,
.text-fmt {
  font-size: 16px;
  line-height: 1.375;
  letter-spacing: 0;
}

/* 段落间距 (偶数) */
.comment-html-body p,
.text-fmt p {
  margin: 0 0 12px;
}
.comment-html-body p:last-child,
.text-fmt p:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Comment ReadMore 功能 (v3.0.0-alpha.7)
   ───────────────────────────────────────────────────────────────────
   统一所有 .comment-html-body 5 行截断 + "更多/收起"按钮
   ═══════════════════════════════════════════════════════════════════ */

/* 统一 5 行截断 (覆盖所有页面的 .comment-html-body) */
.comment-html-body {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

/* 展开态: 解除截断 */
.comment-html-body.is-expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
  display: block;
}

/* ReadMore 按钮容器 */
.comment-readmore-container {
  margin-top: 8px;
}

/* ReadMore 按钮样式 (新起一行, 类似 X 的 Show more) */
.comment-readmore {
  background: transparent;
  border: none;
  color: var(--ae-link);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: block;
  text-align: left;
  transition: color 0.15s ease;
}

.comment-readmore:hover {
  color: var(--ae-link);
  opacity: 0.8;
}

.comment-readmore:focus {
  outline: 1px solid var(--ae-link);
  outline-offset: 1px;
}

/* Hidden 状态 (JS 控制显示) */
.comment-readmore[hidden] {
  display: none !important;
}