@layer components {
  .transcript {
    display: flex;
    flex: auto;
    flex-direction: column-reverse;
    min-block-size: var(--space-0);
    padding-inline: var(--gutter-fluid);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .transcript__messages {
    display: flex;
    flex-direction: column;
    inline-size: var(--size-fill);
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-block: var(--space-5);
  }

  .transcript__messages > :first-child {
    margin-block-start: var(--space-0);
  }

  .transcript__messages:has(+ .conversation-activity:not(:empty)) {
    padding-block-end: var(--space-0);
  }
}