/* akong-typing-indicator · Web 样式 · 用 var(--ak-*) 接 @akong/tokens */

.ak-typing-indicator {
  /* 圆点颜色 · prop color 通过 inline --ak-typing-indicator-color 覆盖 */
  --ak-typing-indicator-color: var(--ak-fg-tertiary);
  /* 圆点尺寸 · 跟 size modifier 联动 */
  --ak-typing-indicator-dot-size: 8px;
  /* 圆点间隙 · 跟 size modifier 联动 */
  --ak-typing-indicator-gap: 4px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ak-typing-indicator-gap);
  /* 默认无气泡时尽量贴合内容 · padding 0 */
  padding: 0;
  border-radius: 0;
  background: transparent;
  /* 视觉微调: 沿基线对齐文字 */
  vertical-align: middle;
  /* 防止外部 line-height 把 inline-flex 拉变形 */
  line-height: 0;
}

/* === 圆点 base === */
.ak-typing-indicator__dot {
  display: inline-block;
  width: var(--ak-typing-indicator-dot-size);
  height: var(--ak-typing-indicator-dot-size);
  border-radius: 50%;
  background: var(--ak-typing-indicator-color);
  /* 默认无动画 · 由 variant 注入 */
}

/* === Sizes (dot size + gap) === */
.ak-typing-indicator--sm {
  --ak-typing-indicator-dot-size: 6px;
  --ak-typing-indicator-gap: 3px;
}
.ak-typing-indicator--md {
  --ak-typing-indicator-dot-size: 8px;
  --ak-typing-indicator-gap: 4px;
}
.ak-typing-indicator--lg {
  --ak-typing-indicator-dot-size: 10px;
  --ak-typing-indicator-gap: 4px;
}

/* === inBubble: 套气泡风格 (assistant 气泡位置 · 左对齐) === */
.ak-typing-indicator--in-bubble {
  background: var(--ak-bg-subtle);
  border-radius: var(--ak-radius-2xl, 16px);
  padding: 12px;
  /* 让圆点在气泡里有合适的高度 (避免气泡塌成一条线) */
  line-height: normal;
}

/* === Variant: dots · 依次跳动 (translateY -4px) === */
.ak-typing-indicator--dots .ak-typing-indicator__dot {
  animation: ak-typing-indicator-bounce 1.4s ease-in-out infinite;
}
.ak-typing-indicator--dots .ak-typing-indicator__dot:nth-child(1) { animation-delay: 0s; }
.ak-typing-indicator--dots .ak-typing-indicator__dot:nth-child(2) { animation-delay: 0.16s; }
.ak-typing-indicator--dots .ak-typing-indicator__dot:nth-child(3) { animation-delay: 0.32s; }

/* === Variant: pulse · 同时 opacity 0.4 ↔ 1 === */
.ak-typing-indicator--pulse .ak-typing-indicator__dot {
  animation: ak-typing-indicator-pulse 1.4s ease-in-out infinite;
}

/* === Variant: wave · scale 0.8 ↔ 1.2 错峰 === */
.ak-typing-indicator--wave .ak-typing-indicator__dot {
  animation: ak-typing-indicator-wave 1.4s ease-in-out infinite;
}
.ak-typing-indicator--wave .ak-typing-indicator__dot:nth-child(1) { animation-delay: 0s; }
.ak-typing-indicator--wave .ak-typing-indicator__dot:nth-child(2) { animation-delay: 0.16s; }
.ak-typing-indicator--wave .ak-typing-indicator__dot:nth-child(3) { animation-delay: 0.32s; }

/* === Keyframes === */
@keyframes ak-typing-indicator-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

@keyframes ak-typing-indicator-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes ak-typing-indicator-wave {
  0%, 60%, 100% { transform: scale(0.8); }
  30% { transform: scale(1.2); }
}

/* === a11y: 减少动画偏好 · 静态显示 === */
@media (prefers-reduced-motion: reduce) {
  .ak-typing-indicator__dot {
    animation: none !important;
  }
}