/* Comment-thread presentation (M-028, coding-standards §3/§4/§12). Backs the one
   <x-platform::comments> component every ACL-managed record's detail page hosts, so there is no
   per-module comment styling to drift. All values are design tokens (tokens.css), so light↔dark is a
   token-scope switch, not per-component CSS. Mobile-first: an item's head wraps on narrow screens and
   the add form's controls stack full-width. No inline styles. */

.platform-comments__list {
    list-style: none;
    margin: 0 0 var(--platform-space-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-md);
}

/* Each comment is a card-muted block with an accent rail on the leading edge — the same visual spine the
   audit timeline uses, so a record's discussion and its history read as siblings. */
.platform-comments__item {
    padding: var(--platform-space-sm) var(--platform-space-md);
    border: 1px solid var(--platform-color-border);
    border-inline-start: 3px solid var(--platform-color-accent-strong);
    border-radius: var(--platform-radius-md);
    background: var(--platform-color-surface-muted);
}

.platform-comments__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--platform-space-sm);
}

.platform-comments__author {
    /* Take the free space so the timestamp sits at the head's trailing end. */
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--platform-color-text);
    word-break: break-word;
}

.platform-comments__time {
    flex: 0 0 auto;
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-xs);
    white-space: nowrap;
}

.platform-comments__body {
    margin: var(--platform-space-xs) 0 0;
    color: var(--platform-color-text);
    /* Preserve author line breaks without letting a long unbroken string overflow the block. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.platform-comments__delete {
    margin-top: var(--platform-space-xs);
    display: flex;
    justify-content: flex-end;
}

.platform-comments__empty {
    margin: 0 0 var(--platform-space-lg);
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-sm);
}

.platform-comments__add {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-sm);
}

.platform-comments__textarea {
    resize: vertical;
    min-height: calc(var(--platform-space-lg) * 2);
}

.platform-comments__error {
    margin: 0;
    color: var(--platform-color-error-text, #c0392b);
    font-size: var(--platform-font-size-sm);
}

.platform-comments__submit {
    align-self: flex-start;
}