@layer components {
  /* A discussion thread: messages with the author's initials, then the reply form. */
  .discussion { display: flex; flex-direction: column; }

  .message {
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-line);

    & .who i { --who-color: var(--color-ink-muted); }
    &:last-child { border-bottom: 0; }
  }

  .message--central .who i { --who-color: var(--color-accent); }
  .message--form { background: var(--color-surface-raised); }
  .message__body { flex: 1; min-width: 0; }
  .message__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; font-size: var(--text-sm); margin-bottom: 0.25rem; }
  .message__body p { margin: 0; }
  .message__body .field textarea { width: 100%; }
}