.mention-editor { flex: 1; min-width: 0; }
.comment-compose-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .75rem; }
.mention-select-field { display: block; width: 17rem; max-width: 100%; margin: 0; min-width: 0; }
.mention-select > button.input { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: .4rem 0; text-align: left; font-size: var(--font-label); font-weight: 400; color: rgb(var(--muted)); }
.mention-select > button.input:focus-visible { outline: 2px solid rgb(var(--focus)); outline-offset: 2px; }
.mention-select .option { border: 0; box-shadow: none; text-align: left; white-space: normal; font-size: var(--font-label); font-weight: 400; padding: .5rem .65rem; }
.mention-select .select-options { max-height: 12rem; }
.mention-select .popover input { font-size: var(--font-label); }
.req-comments .req-comment-avatar,
.record-comments .record-comment-avatar { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; border-radius: 50%; padding: 0; margin-top: .25rem; background: rgb(var(--hover)); color: rgb(var(--primary)); font-size: var(--font-label); font-weight: 600; }
.req-comments textarea,
.record-comments textarea { min-height: 5.5rem; background: rgb(var(--surface)); padding: .75rem; font-size: var(--font-body); line-height: 1.5; }
.req-comments form > .helper,
.record-comments form > .helper { margin: .5rem 0 0 3rem; font-size: var(--font-helper); }
.req-comments #req-comment-error:empty,
.record-comments .record-comment-error:empty,
.record-comments [data-comment-status]:empty { display: none; }
.req-comments #req-comment-error,
.record-comments .record-comment-error,
.record-comments [data-comment-status] { margin-left: 3rem; }
.comment-compose-toolbar > .btn { flex-shrink: 0; }
.mention-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.mention-chips[hidden] { display: none; }
.mention-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .25rem .15rem .6rem; border: 1px solid rgb(var(--border)); border-radius: 999px; background: rgb(var(--hover)); color: rgb(var(--primary)); font-size: var(--font-label); }
.mention-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border: 0; border-radius: 50%; background: transparent; color: rgb(var(--muted)); cursor: pointer; line-height: 1; }
.mention-chip-remove:hover { color: rgb(var(--error)); }
.mention-chip-remove:focus-visible { outline: 2px solid rgb(var(--focus)); outline-offset: 1px; }
@media (max-width: 520px) {
  .comment-compose-toolbar { flex-wrap: wrap; gap: .5rem; }
  .mention-select-field { width: 100%; }
  .comment-compose-toolbar > .btn { margin-left: auto; }
}
[data-mention-count] { font-size: var(--font-helper); color: rgb(var(--primary)); }
[data-mention-inbox] li { padding: 1rem 0; border-bottom: 1px solid rgb(var(--border)); overflow-wrap: anywhere; }
[data-mention-inbox] li p { white-space: pre-wrap; }
.req-comments textarea:focus,
.req-comments textarea:focus-visible,
.record-comments textarea:focus,
.record-comments textarea:focus-visible { outline: none; box-shadow: none; border-color: rgb(var(--focus)); }