@layer components {
  .conversation-caption {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-block-size: var(--size-fill);
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: center;
  }

  .conversation-caption__speaker {
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .conversation-caption__text {
    font: var(--type-caption-reading);
    color: var(--color-ink);
    text-wrap: pretty;
  }

  @supports (animation-timeline: scroll()) {
    .conversation-caption {
      animation: conversation-caption-more linear both;
      animation-timeline: scroll(self);
    }
  }

  @keyframes conversation-caption-more {
    from, 99% {
      mask-image: linear-gradient(black calc(var(--size-fill) - var(--space-9)), transparent);
    }

    to {
      mask-image: none;
    }
  }
}