.report-comments { margin-top: 1.5rem; }
.report-comments h3 { font-family: var(--f-display); margin-bottom: .75rem; }
.report-comments p { margin: .6rem 0; }
.comments-status, .comment-meta { font-size: .85rem; color: var(--forest); }
.comment-item { padding: 1rem 0; border-bottom: 1px solid var(--hairline); }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.comments-form { display: grid; gap: .75rem; margin-top: 1.5rem; }
.report-comments textarea { width: 100%; box-sizing: border-box; padding: .75rem; font: inherit; resize: vertical; }
.comments-form button { justify-self: start; }
.comment-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.comment-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .75rem 0; }
.reaction-button { border: 1px solid var(--hairline); border-radius: 999px; padding: .35rem .7rem; background: transparent; color: inherit; font: inherit; cursor: pointer; min-height: 36px; }
.reaction-button[aria-pressed="true"] { background: #e5efe7; border-color: var(--forest); }
.reaction-button:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.reaction-button:disabled { opacity: .5; cursor: wait; }
.reaction-picker { display: flex; flex-wrap: wrap; gap: .35rem; border: 1px solid var(--hairline); border-radius: 12px; padding: .4rem; }
.reaction-picker[hidden] { display: none; }