/* ===== TongBlog 互动模块（点赞/评论） 与暗色主题协调 ===== */
/* Heroicons 线性图标基础样式：随文字颜色 currentColor，尺寸跟随字号 */
.hi {
  width: 1em; height: 1em;
  display: inline-block;
  flex: none;
  vertical-align: -0.14em;
  stroke-width: 1.7;
}
/* 文章底部评论数提示里的气泡 */
.tb-interact-hint { display:inline-flex; align-items:center; gap:5px; }
.tb-interact-hint svg { width:15px; height:15px; }
/* 空状态大图标 */
.tb-empty-icon svg { width:44px; height:44px; stroke-width:1.3; opacity:.35; }

/* --- 文章底部操作栏 --- */
.tb-interact-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.tb-like-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  user-select: none;
}
.tb-like-btn svg { width:18px; height:18px; transition: transform .2s; }
.tb-like-btn:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-hover); }
.tb-like-btn.liked {
  color: #e33b3f;
  border-color: rgba(227,59,63,.4);
  background: rgba(227,59,63,.1);
}
.tb-like-btn.liked svg { fill: #e33b3f; stroke: #e33b3f; transform: scale(1.12); }
.tb-like-btn.pop svg { animation: likePop .35s ease; }
@keyframes likePop {
  0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1.12); }
}
.tb-like-count { font-variant-numeric: tabular-nums; min-width: 18px; text-align:center; }
.tb-interact-hint { font-size: 13px; color: var(--text-tertiary); }
.tb-interact-hint a { color: var(--nav-active); }

/* --- 评论区 --- */
.tb-comments { margin-top: 40px; }
.tb-comments-title {
  font-size: 18px; font-weight: 700; margin-bottom: 20px;
  display:flex; align-items:center; gap:8px;
}
.tb-comments-title .cnt {
  font-size:13px; font-weight:600; color:var(--text-secondary);
  background:var(--surface); padding:2px 10px; border-radius:999px;
}

/* 评论输入 */
.tb-comment-form { margin-bottom: 28px; }
.tb-comment-form textarea {
  width:100%; min-height:96px; resize:vertical;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text); font-size:14px; line-height:1.7;
  padding:12px 14px; outline:none;
  transition:border-color .2s;
}
.tb-comment-form textarea:focus { border-color: var(--nav-active); }
.tb-comment-form textarea::placeholder { color: var(--text-tertiary); }
.tb-comment-form-foot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.tb-comment-login-tip { font-size:13px; color:var(--text-tertiary); }
.tb-comment-login-tip a { color:var(--nav-active); }
.tb-comment-submit {
  padding:8px 24px; border-radius:999px;
  background:var(--nav-active); border:none; color:#fff;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:background .2s;
}
.tb-comment-submit:hover { background:#ff474b; }
.tb-comment-submit:disabled { opacity:.5; cursor:not-allowed; }
.tb-comment-msg { font-size:13px; margin-top:8px; min-height:18px; }
.tb-comment-msg.err { color:#ff6b6b; }
.tb-comment-msg.ok { color:#2ecc71; }

/* 评论列表 */
.tb-comment-list { display:flex; flex-direction:column; }
.tb-comment-item {
  display:flex; gap:12px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.tb-comment-item:last-child { border-bottom:none; }
.tb-comment-avatar {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,#e33b3f,#8b1a1d);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; font-weight:600;
  flex-shrink:0;
}
.tb-comment-body { flex:1; min-width:0; }
.tb-comment-head { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.tb-comment-name { font-size:14px; font-weight:600; color:var(--text); }
.tb-comment-time { font-size:12px; color:var(--text-tertiary); }
.tb-comment-text { font-size:14px; line-height:1.75; color:rgba(255,255,255,.78); word-break:break-word; white-space:pre-wrap; }
.tb-comments-empty { text-align:center; padding:36px 20px; color:var(--text-tertiary); font-size:14px; }

/* --- 文章卡片上的互动统计（首页列表） --- */
.tb-post-stats { display:flex; gap:16px; margin-top:8px; font-size:12px; color:var(--text-tertiary); }
.tb-post-stats span { display:inline-flex; align-items:center; gap:4px; }
.tb-post-stats svg { width:13px; height:13px; }

/* --- 会员投稿标识 --- */
.tb-author-tag {
  font-size:12px; color:var(--nav-active);
  background:rgba(227,59,63,.1);
  padding:2px 9px; border-radius:999px;
  border:1px solid rgba(227,59,63,.25);
}

@media (max-width:600px){
  .tb-interact-bar { flex-wrap:wrap; }
  .tb-comment-form-foot { flex-direction:column; align-items:stretch; gap:10px; }
  .tb-comment-submit { width:100%; height:38px; }
}