@layer components {
  .transcript > .conversation-activity {
    order: -1;
  }

  .transcript > .conversation-activity:not(:empty) {
    padding-block-end: var(--space-5);
  }

  .talk-mode .conversation-activity__typing {
    display: none;
  }

  .conversation-activity__typing .message__body-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-5);
  }

  .conversation-activity__dot {
    inline-size: var(--message-typing-dot-size);
    block-size: var(--message-typing-dot-size);
    border-radius: var(--radius-pill);
    background-color: var(--color-guide);
    opacity: var(--message-typing-dot-rest);
    animation: conversation-activity-dot var(--dur-typing) var(--ease-breath) infinite;
  }

  .conversation-activity__dot:nth-child(2) {
    animation-delay: var(--message-typing-dot-stagger);
  }

  .conversation-activity__dot:nth-child(3) {
    animation-delay: calc(var(--message-typing-dot-stagger) * 2);
  }

  @keyframes conversation-activity-dot {
    30% {
      opacity: var(--message-typing-dot-peak);
      translate: var(--space-0) var(--message-typing-dot-lift);
    }
  }
}