@layer components {
  #typing-indicator {
    padding: 0 8px;

    @media (min-width: 768px) {
      padding: 0 20px;
    }
  }

  .typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background-color: var(--color-canvas);
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin: 4px 0;
  }

  .typing-dot {
    width: 7px;
    height: 7px;
    background-color: var(--color-ink-medium);
    border-radius: 50%;
    animation: typing-bounce 1.4s ease-in-out infinite;

    &:nth-child(1) { animation-delay: 0s; }
    &:nth-child(2) { animation-delay: 0.2s; }
    &:nth-child(3) { animation-delay: 0.4s; }
  }
}

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}