/* Discussion components reuse MatchMio's type, surface and interaction tokens. */
.discussion-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-12); padding-bottom:var(--space-18); border-bottom:var(--border-width) solid var(--line); }
.discussion-panel .discussion-heading h2 { display:flex; align-items:center; gap:var(--space-8); margin-bottom:var(--space-4); }
.discussion-count { color:var(--ink-2); font-size:var(--font-size-small); font-weight:var(--font-weight-regular); font-variant-numeric:tabular-nums; }
.discussion-heading p { font-size:var(--font-size-small); color:var(--ink-2); }
.comment-sort { display:flex; flex-wrap:wrap; gap:var(--space-6); }
.comment-sort .chip { min-height:var(--touch-target-min); }
.comment-filter { display:flex; flex-wrap:wrap; gap:var(--space-6); margin-top:var(--space-14); }
.comment-filter .chip { min-height:var(--touch-target-min); }
.comment-filter-note { margin-top:var(--space-6); font-size:var(--font-size-caption); color:var(--ink-2); overflow-wrap:anywhere; }
.comment-empty .text-link { min-height:var(--touch-target-min); margin-top:var(--space-12); }
.comment-thread { padding:var(--space-20) 0; border-bottom:var(--border-width) solid var(--line); }
.comment-thread:last-child { border-bottom:0; }
.discussion-panel .comment-item { display:flex; align-items:flex-start; gap:var(--space-12); margin:0; min-width:0; }
.comment-avatar { flex:none; padding-top:var(--space-2); }
.comment-avatar .user-avatar { width:var(--space-36); height:var(--space-36); border-radius:var(--radius-input); }
.comment-content { flex:1; min-width:0; }
.comment-meta { display:flex; align-items:center; flex-wrap:wrap; column-gap:var(--space-8); row-gap:var(--space-2); }
.discussion-panel .comment-meta .comment-author { display:inline-flex; align-items:center; font-size:var(--font-size-small); font-weight:var(--font-weight-semibold); color:var(--ink); overflow-wrap:anywhere; }
.comment-author:hover { color:var(--brand); }
.comment-self { color:var(--ink-2); font-size:var(--font-size-badge); }
.discussion-panel .comment-body { margin:var(--space-6) 0; color:var(--ink); overflow-wrap:anywhere; }
.discussion-panel .comment-actions { gap:var(--space-8); margin-top:var(--space-8); }
.comment-like,.discussion-panel .comment-reply-action { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-6); min-height:var(--touch-target-min); border-radius:var(--radius-pill); padding:var(--space-6) var(--space-12); font-size:var(--font-size-caption); line-height:var(--line-height-body); color:var(--ink-2); }
.comment-like { min-width:calc(var(--space-80) + var(--space-20)); border:var(--border-width) solid var(--line); background:var(--card); transition:background-color var(--motion-duration) var(--motion-easing),border-color var(--motion-duration) var(--motion-easing),transform var(--motion-duration) var(--motion-easing); }
.comment-like b,.comment-reply-action b { font-size:inherit; font-weight:var(--font-weight-semibold); font-variant-numeric:tabular-nums; }
.comment-like .comment-heart,.comment-reply-action .ui-icon { width:var(--space-16); height:var(--space-16); }
.comment-like[aria-pressed=true] { background:var(--bg); color:var(--red-ink); }
.comment-like[aria-pressed=true] .comment-heart { color:var(--red); fill:currentColor; }
.comment-like:hover:not(:disabled),.discussion-panel .comment-reply-action:hover { background:var(--brand-soft); border-color:var(--brand); }
.comment-like:active:not(:disabled) { transform:translateY(var(--press-offset)); }
.comment-like:focus-visible { outline:var(--focus-width) solid var(--brand); outline-offset:var(--focus-offset); }
.comment-like:disabled { background:var(--bg); color:var(--ink-3); cursor:wait; transform:none; }
.comment-manage { display:flex; gap:var(--space-4); margin-left:auto; flex-wrap:wrap; }
.discussion-panel .comment-manage .text-link { min-height:var(--touch-target-min); padding:var(--space-6) var(--space-8); color:var(--ink-2); }
.discussion-panel .comment-manage .text-link:hover { color:var(--brand); }
.comment-replies { margin-top:var(--space-16); margin-left:var(--space-18); padding-left:var(--space-18); border-left:var(--border-width) solid var(--line); }
.comment-replies > [data-reply-row] { padding:var(--space-12) 0; }
.comment-replies > [data-reply-row] + [data-reply-row] { border-top:var(--border-width) solid var(--line); }
.comment-replies > [hidden] { display:none; }
.comment-reply .user-avatar { width:var(--space-28); height:var(--space-28); }
.comment-expand { min-height:var(--touch-target-min); font-size:var(--font-size-caption); }
.comment-like-error { font-size:var(--font-size-caption); color:var(--red-ink); overflow-wrap:anywhere; }
.comment-like-error:not(:empty) { margin-top:var(--space-6); }
.comment-empty .ui-icon { width:var(--space-28); height:var(--space-28); color:var(--brand); margin-bottom:var(--space-10); }
.comment-empty span { display:block; margin-top:var(--space-6); font-size:var(--font-size-small); }
.comment-load-error .btn { margin-top:var(--space-12); }
.comment-composer { border-top:var(--border-width) solid var(--line); padding-top:var(--space-20); }
.comment-composer > label { display:block; font-size:var(--font-size-small); color:var(--ink-2); margin-bottom:var(--space-8); }
.comment-prompts { display:flex; flex-wrap:wrap; gap:var(--space-6); margin-bottom:var(--space-8); }
.comment-prompts .text-link { display:inline-flex; align-items:center; min-height:var(--touch-target-min); padding:var(--space-6) var(--space-12); border:var(--border-width) solid var(--line); border-radius:var(--radius-pill); color:var(--brand); font-size:var(--font-size-card-link); }
.comment-prompts .text-link:hover { background:var(--brand-soft); }
.comment-composer .chat-input { position:static; margin-top:0; flex-wrap:wrap; align-items:flex-end; }
.comment-composer .chat-input textarea { width:100%; min-width:0; min-height:calc(var(--space-60) + var(--space-12)); resize:vertical; padding:var(--space-9) var(--space-14); border:var(--border-width) solid var(--line); border-radius:var(--radius-input); background:var(--card); color:var(--ink); outline:none; }
.comment-composer textarea:focus { border-color:var(--brand); }
.comment-composer textarea:focus-visible { outline:var(--focus-width) solid var(--brand); outline-offset:var(--focus-offset); }
.comment-composer .chat-input > .btn { margin-left:auto; min-height:var(--touch-target-min); }
.comment-composer-footer { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8); margin-top:var(--space-8); }
.comment-emojis { display:flex; gap:var(--space-4); }
.comment-emojis button { display:inline-flex; align-items:center; justify-content:center; width:var(--touch-target-min); height:var(--touch-target-min); padding:0; border:0; border-radius:var(--radius-pill); background:transparent; font-size:var(--font-size-section-title); }
.comment-emojis button:hover { background:var(--brand-soft); }
.comment-composer-footer .hint { margin:0; }
#commentCounter { margin-left:auto; font-variant-numeric:tabular-nums; }
@media(max-width:640px) {
  .discussion-panel .comment-item { gap:var(--space-8); }
  .discussion-panel .comment-meta .comment-author { min-width:var(--touch-target-min); min-height:var(--touch-target-min); }
  .comment-avatar .user-avatar { width:var(--space-28); height:var(--space-28); }
  .comment-replies { margin-left:var(--space-12); padding-left:var(--space-12); }
  .comment-reply .user-avatar { width:var(--space-24); height:var(--space-24); }
  .comment-manage { margin-left:auto; }
  .comment-composer-footer .hint { flex-basis:100%; order:1; }
}
@media(prefers-reduced-motion:reduce) { .comment-like { transition:none; } .comment-like:active:not(:disabled) { transform:none; } }
.discussion-panel .comment-prompt:focus-visible,.discussion-panel [data-comment-prompt]:focus-visible,.discussion-panel [data-comment-filter]:focus-visible{outline:var(--focus-width) solid var(--brand);outline-offset:var(--focus-offset)}