/* ═══════════════════════════════════════════
   comments.css — Bình luận & tim (reactions)
   ═══════════════════════════════════════════ */

.tl-comments {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,192,203,0.25);
  transition: border-color 0.3s ease;
}
html.dark .tl-comments {
  border-top-color: rgba(242,167,187,0.12);
}

.comment-reactions {
  display: flex; gap: 0.6rem; align-items: center;
  margin-bottom: 0.5rem;
}
.react-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  background: rgba(255,192,203,0.12);
  border: 1px solid rgba(255,192,203,0.3);
  border-radius: 50px;
  font-size: 0.78rem; color: var(--rose-gold);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.15s;
  font-family: 'Lora', serif;
}
.react-btn.liked {
  background: rgba(242,167,187,0.25);
  border-color: var(--blush);
}
.react-btn.liked .react-heart-svg path {
  fill: #F2A7BB;
  stroke: #F2A7BB;
}
.react-btn:hover { transform: scale(1.06); }
.react-btn:active { transform: scale(0.94); animation: heart-pop 0.3s ease; }
@keyframes heart-pop {
  0%   { transform: scale(0.94); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1.06); }
}
.react-count { font-weight: 600; min-width: 1ch; }

.comment-toggle-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  background: rgba(255,192,203,0.1);
  border: 1px solid rgba(255,192,203,0.25);
  border-radius: 50px;
  font-size: 0.78rem; color: var(--soft-ink);
  cursor: pointer;
  transition: background 0.2s, border-color 0.3s ease, color 0.3s ease;
  font-family: 'Lora', serif;
}
.comment-toggle-btn:hover { background: rgba(255,192,203,0.2); color: var(--ink); }

.comment-input-area {
  display: flex; gap: 0.5rem; margin-bottom: 0.6rem;
  animation: fadeUp 0.25s ease;
}
.comment-input {
  flex: 1; padding: 0.45rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid rgba(255,192,203,0.35);
  border-radius: 50px;
  font-family: 'Lora', serif;
  font-size: 0.82rem; color: var(--ink);
  outline: none; transition: border-color 0.2s, background 0.3s ease, color 0.3s ease;
}
.comment-input:focus { border-color: var(--blush); }
.comment-input::placeholder { color: var(--rose-gold); opacity: 0.6; }
.comment-submit-btn {
  padding: 0.45rem 1rem;
  background: linear-gradient(135deg, var(--petal), var(--blush));
  color: white; border: none; border-radius: 50px;
  font-family: 'Lora', serif;
  font-size: 0.8rem; cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.comment-submit-btn:hover { opacity: 0.88; transform: translateY(-1px); }

.comment-list { display: flex; flex-direction: column; gap: 0.5rem; }

.comment-item {
  background: var(--bg-card);
  border: 1px solid rgba(255,192,203,0.2);
  border-radius: 14px;
  padding: 0.6rem 0.9rem;
  font-family: 'Lora', serif;
  font-size: 0.82rem; color: var(--soft-ink);
  position: relative;
  animation: fadeUp 0.3s ease;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.comment-item.editing {
  border-color: var(--blush);
  background: rgba(255,192,203,0.06);
}
.comment-body { line-height: 1.55; word-break: break-word; }
.comment-edit-input {
  width: 100%; border: none; outline: none;
  background: transparent;
  font-family: 'Lora', serif;
  font-size: 0.82rem; color: var(--ink);
  resize: none; line-height: 1.55;
}
.comment-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.3rem;
}
.comment-time {
  font-size: 0.68rem;
  color: var(--rose-gold);
  opacity: 0.7;
  transition: color 0.3s ease;
}
.comment-actions { display: flex; gap: 0.4rem; }
.comment-action-btn {
  font-size: 0.68rem; color: var(--rose-gold);
  background: none; border: none; cursor: pointer; padding: 0;
  opacity: 0.6; transition: opacity 0.15s, color 0.3s ease;
  font-family: 'Lora', serif;
}
.comment-action-btn:hover { opacity: 1; }
.comment-action-btn.delete { color: #e57373; }
.comment-action-btn.save   { color: #7aa86e; }

/* ─── DARK MODE ─── */
html.dark .comment-input  { background: var(--bg-card); border-color: rgba(242,167,187,0.2); }
html.dark .comment-item   { background: rgba(242,167,187,0.04); border-color: rgba(242,167,187,0.12); }
html.dark .react-btn      { background: rgba(242,167,187,0.08); border-color: rgba(242,167,187,0.2); }
html.dark .comment-toggle-btn { border-color: rgba(242,167,187,0.15); }