/* ==========================================================================
   Индикатор «бот печатает» — три точки волной (без scale)
   ========================================================================== */

.dot-flashing {
  /* базовая (средняя) точка; две другие — псевдоэлементы */
  position: relative;
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 6px;                 /* расстояние от текста слева/справа */
  border-radius: 9999px;
  vertical-align: -0.2em; /* опустили точки ближе к нижней кромке текста */     /* на уровне обычной точки в слове */
  background-color: var(--dot-color, #111); /* почти чёрный в лайте */
  opacity: 0.2;
  animation: dotFade 1200ms ease-in-out infinite;
  animation-delay: 160ms;        /* средняя точка стартует после левой */
}

.dot-flashing::before,
.dot-flashing::after {
  content: '';
  position: absolute;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background-color: var(--dot-color, #111);
  opacity: 0.2;
  animation: dotFade 1200ms ease-in-out infinite;
}

.dot-flashing::before {
  left: -12px;                   /* левая точка */
  animation-delay: 0ms;          /* появляется первой */
}

.dot-flashing::after {
  left: 12px;                    /* правая точка */
  animation-delay: 320ms;        /* появляется последней */
}

/* Волна по непрозрачности: мягкое появление → пик → затухание */
@keyframes dotFade {
  0%   { opacity: 0.15; }
  20%  { opacity: 0.55; }
  40%  { opacity: 0.95; }
  60%  { opacity: 0.55; }
  100% { opacity: 0.15; }
}

/* Тёмная тема — делаем точки светлее, чтобы читались на тёмном фоне */
.dark .dot-flashing {
  --dot-color: #e5e7eb; /* gray-200 */
}

/* Уважение системных настроек */
@media (prefers-reduced-motion: reduce) {
  .dot-flashing, .dot-flashing::before, .dot-flashing::after {
    animation-duration: 1800ms;
  }
}