@layer components {
  /* Who else has the same thing open, at the place where you act on it: moving dots and bare names. */
  .typing-indicator {
    display: none;
    opacity: 0;
    padding-inline-start: 0.4em;
    transition: opacity 300ms ease, display 300ms allow-discrete;
  }

  .typing-indicator--active {
    display: flex;
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }

  .typing-indicator__author {
    line-height: 1;
    overflow-wrap: anywhere;
    padding-inline-start: 1.5em;
  }
}