/* ==========================================================================
   «ИИ думает» — ожидание ответа модели
   ==========================================================================
   Ставится на место будущего текста: искра, строка состояния и полосы размером с
   ожидаемый ответ. Полосы держат место, чтобы результат не выпрыгивал и страница не
   дёргалась в момент, когда человек читает подсказку.

   Всё движение выключается при prefers-reduced-motion (класс is-still ставит скрипт):
   пульсация и бегущий блик — ровно то, что просят убрать, а смысл индикатора от этого
   не теряется. */

.ai-think {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
}
.ai-think-orb {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  animation: ai-think-pulse 1.7s ease-in-out infinite;
}
.ai-think-orb svg { width: 16px; height: 16px; }
.ai-think.is-still .ai-think-orb { animation: none; }

.ai-think-copy { min-width: 0; flex: 1; }
.ai-think-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.ai-think-head b {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text);
}
/* Счётчик секунд появляется только на долгом ожидании — см. SECONDS_AFTER. */
.ai-think-head em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.ai-think-head em[hidden] { display: none; }
.ai-think-hint {
  display: block;
  margin-top: 0.1rem;
  color: var(--color-text-muted);
  font-size: 0.71rem;
  line-height: 1.4;
}
.ai-think-hint.is-in { animation: ai-think-hint-in 0.35s ease both; }
.ai-think.is-still .ai-think-hint.is-in { animation: none; }

/* Полосы на месте будущего текста. Разная ширина — чтобы это читалось как текст, а не
   как прогресс-бар: прогресса здесь нет, и обещать его нечем. */
.ai-think-bars {
  flex: 1.4;
  min-width: 0;
  display: grid;
  gap: 0.32rem;
  padding-top: 0.25rem;
}
.ai-think-bars i {
  display: block;
  height: 0.48rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--color-surface-muted) 0%,
    color-mix(in srgb, var(--color-primary) 22%, var(--color-surface-muted)) 50%,
    var(--color-surface-muted) 100%
  );
  background-size: 220% 100%;
  animation: ai-think-shimmer 1.5s linear infinite;
}
.ai-think-bars i:nth-child(2) { width: 88%; animation-delay: 0.15s; }
.ai-think-bars i:nth-child(3) { width: 64%; animation-delay: 0.3s; }
.ai-think-bars i:nth-child(4) { width: 42%; animation-delay: 0.45s; }
.ai-think.is-still .ai-think-bars i { animation: none; }

@keyframes ai-think-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.75; }
}
@keyframes ai-think-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
@keyframes ai-think-hint-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* В пузыре тестового чата полосы лишние: ширина пузыря и есть будущий ответ, а вторая
   «строка текста» внутри него читалась бы как часть реплики. */
.test-chat-bubble .ai-think-bars { display: none; }
.test-chat-bubble .ai-think { align-items: center; }

@media (max-width: 640px) {
  .ai-think-bars { display: none; }
}