/* ============================================================
   AI Chat Hub — скелетон-загрузчики (skeleton.css)
   Пульсирующие плейсхолдеры на время загрузки данных.
   Тема: цвета берутся из var(--surface)/var(--surface-2),
   поэтому работает и в тёмной, и в любой переопределённой теме.
   Подключается вместе с skeleton.js (окно window.Skeleton).
   ============================================================ */

/* --- База: пульс surface -> surface-2 -> surface --- */
.skel {
  display: block;
  flex: none;
  background-color: var(--surface);
  animation: skel-pulse 1.4s ease-in-out infinite;
  animation-delay: var(--skel-d, 0s);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes skel-pulse {
  0%, 100% { background-color: var(--surface);   opacity: 0.4; }
  50%      { background-color: var(--surface-2); opacity: 0.7; }
}

/* --- Stagger: задержка 0.05s * n, максимум 0.3s --- */
.skel:nth-child(1)   { --skel-d: 0.05s; }
.skel:nth-child(2)   { --skel-d: 0.10s; }
.skel:nth-child(3)   { --skel-d: 0.15s; }
.skel:nth-child(4)   { --skel-d: 0.20s; }
.skel:nth-child(5)   { --skel-d: 0.25s; }
.skel:nth-child(n+6) { --skel-d: 0.30s; }

/* --- Варианты --- */

/* Строка текста */
.skel-line {
  height: 14px;
  border-radius: 7px;
}

/* Круг 44px (аватар чата, кнопка-иконка) */
.skel-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

/* Прямоугольник карточки (размер из контекста или inline) */
.skel-card {
  width: 100%;
  min-height: 80px;
  border-radius: 16px;
}

/* Пилюля 44px высотой (чип/фильтр; ширина задаётся inline) */
.skel-chip {
  height: 44px;
  border-radius: 22px;
}

/* Квадрат 44px со скруглением 14px (аватар модели) */
.skel-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

/* Поле ввода: пилюля 44px на всю ширину */
.skel-input {
  width: 100%;
  height: 44px;
  border-radius: 22px;
}

/* Область графика 140px */
.skel-chart {
  width: 100%;
  height: 140px;
  border-radius: 16px;
}

/* Ряд таблицы */
.skel-table-row {
  width: 100%;
  height: 44px;
  border-radius: 10px;
}

/* --- Вспомогательные контейнеры (создаёт skeleton.js) --- */

/* Хост-обёртка от Skeleton.replace: изолирует вставку для done() */
.skel-host { display: block; width: 100%; pointer-events: none; }

/* Ряд: аватар/круг + колонка строк */
.skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

/* Колонка строк текста рядом с аватаром */
.skel-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Сетка карточек */
.skel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  pointer-events: none;
}

/* Вертикальный отступ между соседними рядами/карточками списка */
.skel-item + .skel-item { margin-top: 12px; }

/* --- Доступность: без анимации --- */
@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
    opacity: 0.55;
    background-color: var(--surface-2);
  }
}