[data-comments] { margin-top: var(--gap-lg); }

.comment-list { display: flex; flex-direction: column; gap: var(--gap-md); margin-top: var(--gap-md); }

.comment { display: flex; gap: var(--gap-sm); border: 1px solid var(--fo-border); border-radius: 6px; padding: var(--gap-sm) var(--gap-md); }
.comment > .avatar { flex: 0 0 auto; margin-top: 2px; }
.comment-content { min-width: 0; flex: 1 1 auto; }
.comment-replies { display: flex; flex-direction: column; gap: var(--gap-sm); margin-top: var(--gap-sm); }
.comment--reply { border-color: transparent; border-left: 2px solid var(--fo-border); border-radius: 0; margin-left: var(--gap-md); }
.comment--reply > .avatar { width: 22px; height: 22px; font-size: 11px; }

.comment-meta { display: flex; gap: var(--gap-sm); align-items: baseline; margin-bottom: 4px; }
.comment-body { margin: 0 0 var(--gap-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-hidden-note { margin: 0 0 var(--gap-sm); font-style: italic; }

.comment-actions { display: flex; gap: var(--gap-sm); align-items: center; flex-wrap: wrap; }
.comment-score { color: var(--fo-muted); min-width: 1.5em; text-align: center; }
.comment-vote { border-radius: 4px; padding: 2px 6px; }
.comment-vote.is-active { background: var(--fo-surface-hover); outline: 1px solid var(--color-accent); }
.comment-actions .danger { color: var(--fo-error); }

.comment-form, .comment-hide-form { margin-top: var(--gap-sm); }
.comment-hide-form input { width: 100%; max-width: 320px; }

.comment-textarea-wrap { position: relative; }
.comment-textarea-wrap textarea { width: 100%; min-height: 4.5em; resize: vertical; padding-right: 2.5em; }
.comment-emoji-toggle {
  position: absolute; top: 6px; right: 6px; min-height: auto;
  background: none; border: none; padding: 2px 4px; font-size: 1.1em; line-height: 1;
}
.comment-emoji-toggle:hover { background: var(--fo-surface-hover); }
/* The bare .comment-emoji-panel rule below would otherwise win over the browser's default
   [hidden]{display:none} -- author styles always beat the UA stylesheet regardless of
   specificity, so this panel rendered permanently open no matter the `hidden` attribute. */
.comment-emoji-panel[hidden] { display: none; }
.comment-emoji-panel {
  display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; padding: var(--gap-sm);
  border: 1px solid var(--fo-border); border-radius: 6px; max-width: 320px;
}
.comment-emoji {
  background: none; border: none; padding: 4px; font-size: 1.2em; line-height: 1; min-height: auto;
}
.comment-emoji:hover { background: var(--fo-surface-hover); }