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

.dot-flashing {
  position: relative;
  display: inline-block;

  width: 3px;
  height: 3px;
  border-radius: 9999px;

  /* чутка дальше от текста (было 6px) */
  margin-left: 8px;
  margin-right: 0;

  background-color: var(--dot-color, #111);
  opacity: 0.2;
  animation: dotFade 1200ms ease-in-out infinite;
  animation-delay: 160ms;
  will-change: opacity;
}

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

/* расстояние между точками чуть увеличили (было -6px / 6px) */
.dot-flashing::before { left: -7px; animation-delay: 0ms; }
.dot-flashing::after  { left:  7px; 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; }

@media (prefers-reduced-motion: reduce) {
  .dot-flashing, .dot-flashing::before, .dot-flashing::after {
    animation-duration: 1800ms;
  }
}