/**
 * Optiora Skeleton Elements — premium loading placeholders.
 * Extends Skeleton Elements (vendor) with Optiora tokens and layout recipes.
 */

:root {
    --skeleton-color: #e8e4dc;
    --skeleton-icon-color: rgba(15, 23, 42, 0.18);
    --os-skeleton-bg: #efeae2;
    --os-skeleton-highlight: #f7f3ec;
    --os-skeleton-wave: rgba(255, 248, 238, 0.55);
    --os-radius: 14px;
    --os-radius-sm: 10px;
    --os-radius-lg: 18px;
    --os-gap: 12px;
}

html[data-theme="dark"] {
    --skeleton-color: #2a2f3a;
    --skeleton-icon-color: rgba(248, 250, 252, 0.22);
    --os-skeleton-bg: #222733;
    --os-skeleton-highlight: #2e3544;
    --os-skeleton-wave: rgba(255, 255, 255, 0.06);
}

/* Soften Skeleton Elements wave for Optiora */
.skeleton-effect-wave,
.os-skeleton.skeleton-effect-wave {
    animation-duration: 1.45s;
    animation-timing-function: ease-in-out;
}

.skeleton-block {
    background: var(--os-skeleton-bg) !important;
    border-radius: 6px;
}

.om-skeleton {
    background: linear-gradient(
        90deg,
        var(--os-skeleton-bg) 0%,
        var(--os-skeleton-highlight) 50%,
        var(--os-skeleton-bg) 100%
    );
    background-size: 200% 100%;
    animation: omSkeleton 1.8s ease-in-out infinite;
    border-radius: 8px;
}

/* ── Shared shell ─────────────────────────────── */
.os-skeleton {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.os-skeleton[aria-hidden="true"] {
    pointer-events: none;
}

.os-fade-in {
    animation: osFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes osFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.os-swap-out {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ── Nav search rows ──────────────────────────── */
.os-nav-search-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
}

.os-nav-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
}

.os-nav-search-thumb {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.os-nav-search-lines {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.os-nav-search-lines .skeleton-block:first-child {
    width: 68%;
    height: 12px;
}

.os-nav-search-lines .skeleton-block:last-child {
    width: 42%;
    height: 10px;
}

/* ── Product cards ────────────────────────────── */
.os-product-grid-skeleton {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.os-product-card-skeleton {
    border-radius: var(--os-radius-lg);
    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
    background: var(--card, #fff);
    overflow: hidden;
    padding: 0;
}

.os-product-card-skeleton .os-cover {
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: 0;
}

.os-product-card-skeleton .os-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.os-product-card-skeleton .os-title {
    height: 14px;
    width: 78%;
}

.os-product-card-skeleton .os-meta {
    height: 10px;
    width: 48%;
}

.os-product-card-skeleton .os-chips {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.os-product-card-skeleton .os-chip {
    height: 22px;
    width: 64px;
    border-radius: 999px;
}

.os-product-card-skeleton .os-btn {
    height: 42px;
    width: 100%;
    margin-top: 8px;
    border-radius: 12px;
}

/* ── Stats ────────────────────────────────────── */
.os-stats-skeleton {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.os-stat-skeleton {
    border-radius: 16px;
    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
    background: var(--card, #fff);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.os-stat-skeleton .os-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.os-stat-skeleton .os-label {
    height: 10px;
    width: 46%;
}

.os-stat-skeleton .os-value {
    height: 22px;
    width: 58%;
}

.os-stat-skeleton .os-bar {
    height: 4px;
    width: 100%;
    border-radius: 999px;
    margin-top: 4px;
}

/* ── Forms ────────────────────────────────────── */
.os-form-skeleton {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.os-form-field-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.os-form-field-skeleton .os-label {
    height: 12px;
    width: 34%;
}

.os-form-field-skeleton .os-input {
    height: 46px;
    width: 100%;
    border-radius: 12px;
}

.os-form-field-skeleton .os-textarea {
    height: 110px;
    width: 100%;
    border-radius: 12px;
}

.os-form-field-skeleton .os-btn {
    height: 44px;
    width: 160px;
    border-radius: 12px;
    margin-top: 4px;
}

/* ── Tables ───────────────────────────────────── */
.os-table-skeleton {
    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
    border-radius: 14px;
    overflow: hidden;
    background: var(--card, #fff);
}

.os-table-skeleton .os-thead,
.os-table-skeleton .os-row {
    display: grid;
    grid-template-columns: repeat(var(--os-cols, 4), minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px;
    align-items: center;
}

.os-table-skeleton .os-thead {
    background: rgba(15, 23, 42, 0.03);
    border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.08));
}

.os-table-skeleton .os-row + .os-row {
    border-top: 1px solid var(--border, rgba(15, 23, 42, 0.06));
}

.os-table-skeleton .skeleton-block {
    height: 12px;
}

/* ── Gallery / image tiles ────────────────────── */
.os-gallery-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--os-gap);
}

.os-gallery-tile-skeleton {
    aspect-ratio: 1;
    width: 100%;
    border-radius: var(--os-radius-lg);
}

.os-image-preview-skeleton {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 16px;
}

.os-thumb-row-skeleton {
    display: flex;
    gap: 10px;
    overflow: hidden;
}

.os-thumb-skeleton {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    flex-shrink: 0;
}

/* ── Comment cards ────────────────────────────── */
.os-comments-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.os-comment-skeleton {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border, rgba(15, 23, 42, 0.06));
}

.os-comment-skeleton .os-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    flex-shrink: 0;
}

.os-comment-skeleton .os-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.os-comment-skeleton .os-lines .skeleton-block:nth-child(1) { width: 36%; height: 10px; }
.os-comment-skeleton .os-lines .skeleton-block:nth-child(2) { width: 92%; height: 12px; }
.os-comment-skeleton .os-lines .skeleton-block:nth-child(3) { width: 70%; height: 12px; }

/* ── Product picker rows ──────────────────────── */
.os-picker-list-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.os-picker-row-skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(15, 23, 42, 0.06));
}

.os-picker-row-skeleton .os-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    flex-shrink: 0;
}

.os-picker-row-skeleton .os-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.os-picker-row-skeleton .os-lines .skeleton-block:first-child { width: 62%; height: 12px; }
.os-picker-row-skeleton .os-lines .skeleton-block:last-child { width: 38%; height: 10px; }

/* ── Image gen checklist thumb ────────────────── */
.os-igen-thumb-skeleton {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: block;
}

/* ── Workspace group skeleton ─────────────────── */
.os-group-skeleton {
    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
    border-radius: 18px;
    background: var(--card, #fff);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.os-group-skeleton .os-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.os-group-skeleton .os-header .skeleton-block:first-child { width: 40%; height: 14px; }
.os-group-skeleton .os-header .skeleton-block:last-child { width: 24%; height: 10px; }

.os-group-skeleton .os-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.os-group-skeleton .os-tile {
    aspect-ratio: 1;
    border-radius: 18px;
}

/* Align legacy placeholders with Optiora warm skeleton colors */
.image-gen-skeleton,
.pv-result-skeleton,
.pt-result-skeleton {
    background: linear-gradient(
        90deg,
        var(--os-skeleton-bg) 0%,
        var(--os-skeleton-highlight) 50%,
        var(--os-skeleton-bg) 100%
    );
    background-size: 200% 100%;
    animation: omSkeleton 1.8s ease-in-out infinite;
}

@media (max-width: 1100px) {
    .os-product-grid-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .os-stats-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .os-group-skeleton .os-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--os-skeleton-bg, #efeae2) 0%,
        var(--os-skeleton-highlight, #f7f3ec) 50%,
        var(--os-skeleton-bg, #efeae2) 100%
    );
    background-size: 200% 100%;
    animation: omSkeleton 1.8s ease-in-out infinite;
    z-index: 0;
}

.gallery-item img {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item img.is-loaded {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item::before { animation: none; }
    .gallery-item img { opacity: 1; transition: none; }
}

/* Reusable recipe hosts for SSR pages that opt into async shells later */
[data-os-skeleton-host].os-is-loading {
    min-height: 1px;
}

.acct-table-wrap[data-os-skeleton-host],
.dash-stats[data-os-skeleton-host],
.amazon-form-card[data-os-skeleton-host] {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-effect-wave,
    .skeleton-effect-fade,
    .skeleton-effect-pulse,
    .skeleton-effect-blink,
    .om-skeleton,
    .image-gen-skeleton,
    .pv-result-skeleton,
    .pt-result-skeleton,
    .os-fade-in {
        animation: none !important;
    }

    .skeleton-effect-wave,
    .os-skeleton.skeleton-effect-wave {
        -webkit-mask-image: none;
        mask-image: none;
    }
}