/* --- 波浪式 AI 加载动画 --- */

/* 定义新的波浪动画效果 */
@keyframes stylish-wave {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* 
  找到 AI 正在输入时，那三个小圆点的父容器。
  这确保我们只修改加载动画，不影响其他地方。
*/
div.flex.h-6.items-center.justify-center > div.flex.gap-2 {
    /* 你可以在这里调整动画的整体间距等，但通常不需要 */
}

/* 
  定位到加载动画的每一个小圆点 (span 元素)
*/
div.flex.h-6.items-center.justify-center > div.flex.gap-2 > span {
    animation: stylish-wave 1.3s infinite ease-in-out !important; /* 应用新的动画并强制覆盖默认动画 */
    background-color: #4A90E2 !important; /* 给小圆点换个更漂亮的颜色 */
    border-radius: 50%; /* 确保它们是完美的圆形 */
    width: 8px !important; /* 统一尺寸 */
    height: 8px !important; /* 统一尺寸 */
}

/* 
  为第二个和第三个小圆点设置动画延迟，形成波浪效果
*/
div.flex.h-6.items-center.justify-center > div.flex.gap-2 > span:nth-child(2) {
    animation-delay: -0.2s !important;
}

div.flex.h-6.items-center.justify-center > div.flex.gap-2 > span:nth-child(3) {
    animation-delay: -0.4s !important;
}