/* ═══ LIBRARY — Justified Grid ═══ */
/* Client JS calculates exact card dimensions. */
/* Cards receive inline width/height. Rows fill 100%. */

/* Scrollable library view */
#view-library {
    overflow-y: auto !important;
    overflow-x: hidden;
    justify-content: flex-start !important;
}

/* Thin scrollbar */
#view-library::-webkit-scrollbar { width: 4px; }
#view-library::-webkit-scrollbar-track { background: transparent; }
#view-library::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 4px; }

/* Page container — 40px per side = 80px total */
.lib-page {
    padding: 20px 40px 100px;
    width: 100%;
}

/* Grid container — padding handled by .lib-page parent */
#lib-grid {
    padding: 0;
}

/* ═══ ROW — flex, 16px gap (matches Flow) ═══ */
.lib-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

/* ═══ CARD OVERRIDES FOR LIBRARY ═══ */
/* Cards use inline width/height from JS — flex: none */
#view-library .vcard {
    flex: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Thumb fills the card — height set by JS */
#view-library .vcard .thumb {
    width: 100%;
    min-height: 0;
}

#view-library .vcard .thumb img.cover,
#view-library .vcard .thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product images — centered with black bars in all card formats */
#view-library .vcard .thumb img.product {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Empty state */
.lib-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1.5rem;
}

.lib-empty p {
    color: #555;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ═══ FAB ═══ */
.lib-fab-wrap {
    position: fixed;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
}

.lib-fab-wrap .btn-start {
    pointer-events: auto;
    width: auto;
    min-width: 220px;
    padding: 0 32px;
    height: 72px;
    font-size: 13px;
    border-radius: 24px;
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══ RESPONSIVE — Mobile ═══ */
@media (max-width: 768px) {
    .lib-page {
        padding: 6px 6px 90px;
    }

    #lib-grid {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .lib-row {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 6px;
    }

    /* Mobile: override JS sizes, use fluid widths */
    #view-library .vcard.card-P {
        width: calc(50% - 3px) !important;
        height: auto !important;
    }

    #view-library .vcard.card-L {
        width: 100% !important;
        height: auto !important;
    }

    #view-library .vcard.card-P .thumb {
        aspect-ratio: 9/16;
        height: auto !important;
    }

    #view-library .vcard.card-L .thumb {
        aspect-ratio: 16/9;
        height: auto !important;
    }

    #view-library .vcard.card-S .thumb {
        width: min(45vh, 238px) !important;
        aspect-ratio: 1/1;
        height: auto !important;
    }

    /* Videos view — same mobile rules */
    #vid-only-grid {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px !important;
    }

    #view-videos .vcard.card-P {
        width: calc(50% - 3px) !important;
        height: auto !important;
    }

    #view-videos .vcard.card-L {
        width: 100% !important;
        height: auto !important;
    }

    #view-videos .vcard.card-P .thumb {
        aspect-ratio: 9/16;
        height: auto !important;
    }

    #view-videos .vcard.card-L .thumb {
        aspect-ratio: 16/9;
        height: auto !important;
    }

    #view-videos .vcard.card-S .thumb {
        width: min(45vh, 238px) !important;
        aspect-ratio: 1/1;
        height: auto !important;
    }
}

/* ═══ VIDEOS VIEW — mirrors library ═══ */
#view-videos {
    overflow-y: auto !important;
    overflow-x: hidden;
    justify-content: flex-start !important;
}
#view-videos::-webkit-scrollbar { width: 4px; }
#view-videos::-webkit-scrollbar-track { background: transparent; }
#view-videos::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 4px; }

#vid-only-grid {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Videos desktop: card-P = 4/row, card-L = 2/row */
#view-videos .vcard.card-P {
    width: calc(25% - 12px);
    height: auto;
}
#view-videos .vcard.card-L {
    width: calc(50% - 8px);
    height: auto;
}
#view-videos .vcard.card-S {
    width: calc(25% - 12px);
    height: auto;
}
#view-videos .vcard.card-P .thumb {
    aspect-ratio: 9/16;
    height: auto;
}
#view-videos .vcard.card-L .thumb {
    aspect-ratio: 16/9;
    height: auto;
}
#view-videos .vcard.card-S .thumb {
    aspect-ratio: 1/1;
    height: auto;
}

#view-videos .vcard {
    flex: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#view-videos .vcard .thumb { width: 100%; min-height: 0; }
#view-videos .vcard .thumb img.cover,
#view-videos .vcard .thumb video { width: 100%; height: 100%; object-fit: cover; }
#view-videos .vcard .thumb img.product { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ═══ SENTINEL — infinite scroll loader ═══ */
.lib-sentinel {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0 40px;
    gap: 6px;
}

.sentinel-loader {
    display: flex;
    gap: 6px;
    align-items: center;
}

.sentinel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: sentinel-pulse 1.2s ease-in-out infinite;
}

.sentinel-dot:nth-child(2) { animation-delay: 0.2s; }
.sentinel-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes sentinel-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}