/* Comments people come back to (SPEC 20): sort control, creator's prompt, comment likes/dislikes,
   timestamp and @mention links, edits and "Show more comments". Linked from watch.html only; the
   base comment styles live in style.css and the design tokens adapt to light mode there. */

.comments-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-bottom: 18px;
}
.comments-bar h2 { margin: 0; }
.comment-sort { display: flex; gap: 6px; }
.comment-sort-btn {
  min-height: 34px; padding: 6px 14px; border: 0; border-radius: 9px;
  background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.comment-sort-btn:hover { background: var(--hover); }
.comment-sort-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.comment-sort[aria-busy="true"] .comment-sort-btn { opacity: 0.7; cursor: progress; }

/* The creator's question above the comment box */
.comment-prompt {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; padding: 12px 14px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
}
.comment-prompt .avatar { flex: none; }
.comment-prompt-text { display: grid; gap: 2px; min-width: 0; margin: 0; }
.comment-prompt-by { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.comment-prompt-by a:hover { color: var(--text); text-decoration: underline; }
.comment-prompt-q { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
/* It's the box's placeholder too. The one-row box grows with what's typed, not with its placeholder,
   so a long question stays on one line there (the card above shows all of it). */
.comment-form textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Like / dislike on comments and replies: counts are public, 0 is an empty label */
.comment-react { display: inline-flex; align-items: center; }
.comment-count { font-variant-numeric: tabular-nums; }
.comment-count:empty { display: none; }
.comment-btn[aria-pressed="true"] .icon-thumbs-up, .comment-btn[aria-pressed="true"] .icon-thumbs-down { fill: currentColor; }
.comment-btn:disabled { opacity: 0.55; cursor: default; }
.comment-btn:disabled:hover { background: none; color: var(--text-2); }
.comment-react[aria-busy="true"] .comment-btn { opacity: 0.6; cursor: progress; }

.comment-edited { color: var(--text-2); font-size: 12.5px; }

/* Links inside a comment body: timestamps jump the player, @mentions open the channel */
.comment-body a { font-weight: 600; color: var(--accent-text); }
.comment-body a:hover { text-decoration: underline; }
.comment-body .ts-link { font-variant-numeric: tabular-nums; }

.comment-edit-form { gap: 0; margin: 6px 0 8px; }

.comments-more { margin: 4px 0 8px; }
.comments-more[aria-busy="true"] { opacity: 0.7; cursor: progress; }

@media (max-width: 480px) {
  .comment-sort { width: 100%; }
  .comment-sort-btn { flex: 1 1 0; padding: 6px 8px; }
  .comment-prompt { padding: 10px 12px; }
}