@scope (.personification-control) {
  :scope {
    gap: var(--space-sm);
  }

  .personification-control__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .personification-indicator {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
  }

  .personification-indicator__pulse,
  .personification-indicator__dot {
    grid-area: 1 / 1;
    border-radius: var(--radius-full);
  }

  .personification-indicator__pulse {
    width: 100%;
    height: 100%;
    background: var(--color-warning);
    opacity: 0.55;
    animation: personification-pulse 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .personification-indicator__dot {
    width: 100%;
    height: 100%;
    background: var(--color-warning);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-warning) 25%, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    .personification-indicator__pulse {
      animation: none;
      opacity: 0;
    }
  }
}

@keyframes personification-pulse {
  75%, 100% {
    transform: scale(2.4);
    opacity: 0;
  }
}