/* ════════════════════════════════════════════════════════════════
   Skeleton-лоадеры (vsk-*) — единая система плейсхолдеров загрузки.

   Анимация — бегущая светлая полоса (background-position по самому .vsk),
   видна при долгой загрузке (медленный интернет). Карточки ТОЧНО зеркалят
   реальные (порядок блоков + размеры) → минимум CLS и «узнаваемость».
   Подключается render-blocking глобально (modules/head.php). НЕ пуржится
   (нет в css: purgecss.config.js).

   Использование:
     • серверный начальный скелетон — include/skeleton.php → skeleton_cards()
     • скелетон при действиях юзера — assets/js/skeleton.js → window.VioSkeleton
   ════════════════════════════════════════════════════════════════ */

:root {
    --vsk-base: var(--c-slate-200, #e2e8f0);     /* заливка плейсхолдера */
    --vsk-hi:   rgba(255, 255, 255, 0.85);       /* бегущий блик (светлая поверхность) */
    --vsk-radius: var(--radius-md, 12px);
}

/* Тёмная поверхность (сайдбар чатов): переопределяем переменные каскадом —
   вложенные .vsk наследуют их. prefers-color-scheme НЕ используем: тема
   контента сайта светлая, тёмный плейсхолдер на светлом контенте = рассинхрон. */
.vsk-on-dark {
    --vsk-base: rgba(255, 255, 255, 0.10);
    --vsk-hi:   rgba(255, 255, 255, 0.22);
}

/* Базовый shimmer-блок: серая заливка + бегущая светлая полоса. */
.vsk {
    position: relative;
    overflow: hidden;
    border-radius: var(--vsk-radius);
    background-color: var(--vsk-base);
    background-image: linear-gradient(90deg, transparent 0%, var(--vsk-hi) 50%, transparent 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
    animation: vsk-shimmer 1.5s linear infinite;
}
@keyframes vsk-shimmer {
    to { background-position: -150% 0; }
}
/* Уважение prefers-reduced-motion: бегущую полосу заменяем мягким «дыханием»
   (opacity) — анимация ОСТАЁТСЯ (скелетон не статичен), но без резкого движения. */
@media (prefers-reduced-motion: reduce) {
    .vsk {
        background-image: none;
        animation: vsk-pulse 1.6s ease-in-out infinite;
    }
    @keyframes vsk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
}

/* ── Примитивы ─────────────────────────────────────────────────── */
.vsk-line        { height: 12px; width: 100%; border-radius: 6px; }
.vsk-line--sm    { width: 40%; }
.vsk-line--md    { width: 60%; }
.vsk-line--lg    { width: 80%; }
.vsk-line--full  { width: 100%; }
.vsk-line--title { height: 16px; width: 72%; }

.vsk-img         { width: 100%; border-radius: var(--vsk-radius); }

.vsk-circle      { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.vsk-circle--sm  { width: 22px; height: 22px; }
.vsk-circle--lg  { width: 44px; height: 44px; }

.vsk-pill        { height: 28px; width: 84px; border-radius: var(--radius-pill, 999px); }
.vsk-pill--btn   { height: 40px; width: 100%; border-radius: var(--radius-md, 10px); }

/* ── Раскладка ─────────────────────────────────────────────────── */
.vsk-card__pad { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.vsk-card__row { display: flex; gap: 10px; align-items: center; }
.vsk-card__col { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }

/* ── Карточка: продукт (≈ .product-item: обложка → рейтинг → название →
      «от автор» → цена → кнопка во всю ширину) ─────────────────── */
.vsk-card--product {
    background: var(--surface-subtle, #f8fafc);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 19px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.vsk-card--product .vsk-img { aspect-ratio: 372 / 195; border-radius: 0; }   /* как .product-item--image img (195px при 372px) */
.vsk-card--product .vsk-line--rating { width: 46px; height: 12px; }
.vsk-card--product .vsk-line--title  { width: 88%; height: 15px; margin-top: 2px; }
.vsk-card--product .vsk-line--author { width: 55%; height: 11px; }
.vsk-card--product .vsk-line--price  { width: 64px; height: 20px; margin-top: 4px; }
.vsk-card--product .vsk-pill--btn    { margin-top: 4px; }

/* в горизонтальном рейле discovery карточка фиксированной ширины */
.disc-rail .vsk-card--product {
    flex: 0 0 var(--disc-card-w, 280px);
    max-width: var(--disc-card-w, 280px);
}

/* в каталоге (.products-list — flex) зеркалим ширины .product-item
   (style.css: 31% / планшет 48% / ≤800px 100%). Порядок медиа повторяет .product-item. */
.products-list .vsk-card--product { width: 31%; }
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .products-list .vsk-card--product { width: calc((100% - 41px) / 2); }
}
@media screen and (max-width: 800px) {
    .products-list .vsk-card--product { width: 100%; }
}

/* ── Карточка: пост (≈ .post-card: автор → заголовок → обложка → текст →
      действия) ──────────────────────────────────────────────────── */
.vsk-card--post {
    background: var(--surface-base, #fff);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.vsk-post__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vsk-post__head .vsk-circle { width: 34px; height: 34px; }              /* = .post-author__avatar */
.vsk-card--post .vsk-line--name { width: 132px; height: 13px; }        /* = .post-author__name 14px */
.vsk-card--post .vsk-line--meta { width: 92px;  height: 11px; }        /* = .post-author__meta 12px */
.vsk-card--post .vsk-line--title { width: 70%; height: 16px; margin-bottom: 10px; }
.vsk-post__cover { aspect-ratio: 16 / 9; margin-bottom: 12px; }        /* = .post-card__cover */
.vsk-card--post .vsk-line--full,
.vsk-card--post .vsk-line--lg { margin-bottom: 8px; }
.vsk-post__actions { display: flex; gap: 18px; margin-top: 14px; }
.vsk-pill--act { width: 54px; height: 22px; }                          /* = .post-action-btn */

/* ── Карточка: автор-рекомендация (≈ .cr-rec-card: cover 76 + аватар 76
      наезжает + центрированные строки) ──────────────────────────── */
.vsk-card--creator {
    background: var(--surface-base, #fff);
    border: 1px solid var(--border-muted, #e5e7eb);
    border-radius: 18px;
    padding: 0 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.vsk-card--creator .vsk-rec-cover { align-self: stretch; margin: 0 -16px; height: 76px; border-radius: 0; }
.vsk-card--creator .vsk-rec-ava   { width: 76px; height: 76px; border-radius: 50%; margin: -38px 0 10px; box-shadow: 0 0 0 4px var(--surface-base, #fff); }
.vsk-card--creator .vsk-line      { margin: 0 auto 7px; }
.vsk-card--creator .vsk-rec-name   { width: 60%; height: 13px; }
.vsk-card--creator .vsk-rec-meta   { width: 42%; height: 11px; }
.vsk-card--creator .vsk-rec-reason { width: 72%; height: 11px; }

/* ── Карточка: блог (≈ .blog-card, grid 200|1fr, min-h 160) ────── */
.vsk-card--blog {
    display: grid;
    grid-template-columns: 200px 1fr;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 20px;
    overflow: hidden;
    min-height: 160px;
}
.vsk-card--blog .vsk-img { height: 100%; border-radius: 0; }
@media (max-width: 560px) {
    .vsk-card--blog { grid-template-columns: 130px 1fr; min-height: 130px; }
}

/* ── Карточка: подписка (≈ .sub-card / my-subs .sk, min-h 132) ─── */
.vsk-card--sub {
    background: var(--surface-base, #fff);
    border: 1px solid var(--border-muted, #e5e7eb);
    border-radius: var(--radius-lg, 16px);
    padding: 18px 20px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Чат-айтем (≈ .q3f9-chatitem) ──────────────────────────────── */
.vsk-chat {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
}

/* ── Сообщение-пузырь (≈ .q3f9-bubble) ─────────────────────────── */
.vsk-bubble { max-width: 72%; margin-bottom: 12px; }
.vsk-bubble .vsk { width: 100%; height: 40px; border-radius: 14px; }
.vsk-bubble--them { margin-right: auto; }
.vsk-bubble--me   { margin-left: auto; width: 55%; }