/* Стили экрана редизайна (redesign.js): плейсхолдеры слайдов + кнопка пейволла. */

/* Кнопка «Продолжить редизайн» в плашке результата (пейволл). */
.result-notice [data-pay] { margin-top: 4px; }

/* Плейсхолдеры «после» до готовности/при ошибке слайда. */
.result-pairs .slide-pending,
.result-pairs .slide-failed {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--line, #d9d1c6);
  border-radius: 8px;
  background: #f3efe8;
  color: var(--muted, #706d67);
  font-size: 12px;
}
.result-pairs .slide-failed {
  color: var(--accent-dark, #c92d17);
  border-color: var(--accent-dark, #c92d17);
}

/* Якорный слайд: он нарисован Фазой A и задал стиль всей серии. Отдельного блока
   «паспорт стиля» больше нет — эталоны живут прямо в доске «До / После». */
.result-pair--anchor > div:last-child > small {
  color: var(--accent-dark, #c92d17);
  font-weight: 600;
}

/* Расход по карточке (токены + себестоимость в USD).
   Аналитика беты: это НАШИ затраты, а не цена для клиента. */
.cost-line {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cost-line.hidden { display: none; }

/* Плашка результата, когда не получилось ничего: базовый стиль зелёный («успех»),
   поэтому перекрашиваем — зелёная галочка над нулём слайдов вводит в заблуждение. */
.result-notice--error {
  background: #fdecea;
  border-color: #f0b7ae;
}
.result-notice--error .success-icon {
  background: var(--accent-dark, #c92d17);
}

/* Связь с сервером потеряна: работа на сервере при этом продолжается, поэтому
   предупреждение мягкое и не подменяет собой экран прогресса. */
.offline-line {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--accent-dark, #c92d17);
}
.offline-line.hidden { display: none; }

/* Обложка на экране обработки.
   Настоящее фото появляется только с первым ответом статуса: до этого сервер ещё
   ходит на WB за карточкой, и это занимает секунды. Раньше в разметке на это время
   лежала демо-обложка из прототипа — пользователь смотрел на чужой товар и считал,
   что редизайн уже идёт по нему. Теперь img стартует без src, а место держит
   скелетон: у .example-slide уже есть aspect-ratio 3/4 и фон, поэтому вёрстка не
   прыгает, когда картинка приезжает. */
.example-slide--processing:not(.is-ready) {
  background-image: linear-gradient(100deg, #ece7df 25%, #f7f3ed 45%, #ece7df 65%);
  background-size: 300% 100%;
  animation: livePreviewShimmer 1.4s ease-in-out infinite;
}
/* Картинка загрузилась — гасим мерцание и мягко проявляем фото. */
.example-slide--processing.is-ready {
  animation: livePreviewFadeIn .35s ease both;
}
@keyframes livePreviewShimmer {
  from { background-position: 120% 0; }
  to   { background-position: -20% 0; }
}
@keyframes livePreviewFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Бесконечная анимация — первый кандидат на отключение: экран живёт минутами. */
@media (prefers-reduced-motion: reduce) {
  .example-slide--processing:not(.is-ready) { animation: none; }
  .example-slide--processing.is-ready { animation: none; }
}

.history-card__cost {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}