/* "Choose from Media Studio" (Media Studio MP-02; formerly "From Video Studio") — choose a video or photo (skia-video-backgrounds MP-03; frozen screen 13, clip sets 13b), owned and served
   by Video Studio for both apps (animated-videos MP-04, moved from SKIA's public/css/video-picker.css unchanged).
   SKIA's colour, spacing and type settings only (SKIA Rule 10): SKIA has them; Video Studio's pages set them from its
   own colours in video-windows-studio.css.
   The frame and header are SKIA's window frame (ai-design-modal.css); the error cards are Find a photo's
   (photo-picker-modal.css). */

.ai-design-modal.video-picker-modal {
    max-width: 1200px;
    height: 85vh;
}

.video-picker-header {
    align-items: flex-start;
    padding: var(--space-lg) calc(var(--space-lg) + var(--space-xs)) calc(var(--space-sm) + var(--space-xs) * 1.5); /* frozen 13: 24 / 28, 14 above the tabs */
    border-bottom: none; /* frozen 13: no line under the title */
}

.video-picker-modal .ai-design-close,
.ai-video-modal .ai-design-close,
.video-upload-modal .ai-design-close {
    width: 44px; /* frozen 13, 14 and 15: a 44 × 44 close button */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--font-2xl) - var(--space-xs) / 2); /* frozen 13: 22px */
}

.video-picker-titles {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.video-picker-modal .video-picker-title,
.ai-video-modal .video-picker-title,
.video-upload-modal .video-picker-title { /* frozen 13, 14 and 15 */
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
}

.video-picker-subtitle {
    font-size: var(--font-sm);
    color: color-mix(in srgb, var(--color-text-primary) 78%, transparent); /* frozen 13: white at 0.78 */
}

.video-picker-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: var(--space-lg);
    padding: 0 calc(var(--space-lg) + var(--space-xs)) var(--space-lg); /* frozen 13: 28 at the sides */
}

.video-picker-list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-sm) + var(--space-xs)); /* frozen 13: 12 */
    overflow-y: auto;
}

/* Tabs: All · Briefs · Explainers · Shorts · Clips (frozen 13: 36px pills; the chosen one bold with a primary ring) */
.video-picker-tabs {
    display: flex;
    gap: var(--space-sm);
}

.video-picker-tab {
    height: 36px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-3xl);
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 25%, transparent); /* frozen 13: white at 0.25 */
    background: transparent;
    color: var(--color-text-primary);
    font-size: calc(var(--font-sm) - var(--space-xs) / 4); /* frozen 13: 13px */
    cursor: pointer;
}

.video-picker-tab.on {
    border: 2px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 25%, transparent); /* frozen 13: primary at 0.25 */
    font-weight: var(--font-semibold);
}

/* Five across (frozen 13), each card its picture's height, packed into columns as SKIA's Templates list (Masonry; owner
   2026-10-18: "the videos and images in the right proportions") */
.video-picker-grid {
    --picker-gap: calc(var(--space-sm) + var(--space-xs));
    display: block;
    position: relative;
    /* Masonry gives the grid its height; in the scrolling list it must not shrink below it, or the note below sits on the cards */
    flex-shrink: 0;
}

.video-picker-sizer,
.video-picker-card {
    width: calc((100% - 4 * var(--picker-gap)) / 5);
    box-sizing: border-box;
}

.video-picker-gutter {
    width: var(--picker-gap);
}

.video-picker-card {
    margin-bottom: var(--picker-gap);
}

/* A tab with none of its type: one line across the grid (owner 2026-10-04: "A one-line note") */
.video-picker-empty {
    grid-column: 1 / -1;
}

.video-picker-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--space-xs) * 1.5);
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 18%, transparent); /* frozen 13: white at 0.18 */
    background: color-mix(in srgb, var(--color-text-primary) 4%, transparent); /* frozen 13: white at 0.04 */
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
}

.video-picker-card.picked {
    border: 3px solid var(--color-primary);
}

.video-picker-card:disabled {
    cursor: not-allowed;
    opacity: 0.55; /* frozen 13: a video longer than 60 seconds */
}

.video-picker-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: calc(var(--radius-sm) * 1.5);
    overflow: hidden;
}

/* A video without a picture: a grey card (owner 2026-10-04: "Keep grey card") */
.video-picker-thumb.no-picture {
    background: var(--color-border-medium); /* grey in every theme (the glass tokens are near white in the light theme) */
}

.video-picker-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-picker-length {
    position: absolute;
    right: calc(var(--space-xs) * 1.5);
    bottom: calc(var(--space-xs) * 1.5);
    height: 22px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-3xl);
    background: var(--color-mark); /* frozen 13 */
    color: var(--color-white);
    font-size: calc(var(--font-xs) - var(--space-xs) / 4); /* frozen 13: 11px */
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
}

.video-picker-name {
    font-size: calc(var(--font-sm) - var(--space-xs) / 4); /* frozen 13: 13px */
    font-weight: var(--font-semibold);
}

.video-picker-type,
.video-picker-flag {
    padding: calc(var(--space-xs) / 2) var(--space-sm);
    border-radius: var(--radius-3xl);
    font-size: calc(var(--font-xs) - var(--space-xs) / 4); /* frozen 13: 11px */
}

.video-picker-type {
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    font-weight: var(--font-semibold);
}

.video-picker-flag {
    background: color-mix(in srgb, var(--color-warning) 18%, transparent); /* frozen 13: amber at 0.18, its edge at 0.55 */
    border: 1px solid color-mix(in srgb, var(--color-warning) 55%, transparent);
}

.video-picker-flag.too-long {
    background: color-mix(in srgb, var(--color-error) 15%, transparent); /* frozen 13: red at 0.15, its edge at 0.6 */
    border: 1px solid color-mix(in srgb, var(--color-error) 60%, transparent);
}

.video-picker-shape {
    font-size: calc(var(--font-xs) - var(--space-xs) / 4); /* frozen 13: 11px */
    color: color-mix(in srgb, var(--color-text-primary) 75%, transparent); /* frozen 13: white at 0.75 */
}

.video-picker-note {
    font-size: var(--font-xs);
    color: color-mix(in srgb, var(--color-text-primary) 75%, transparent);
}

/* The chosen video, cropped to the template's shape (frozen 13: 300 wide) */
.video-picker-side {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-sm) + var(--space-xs) * 1.5);
}

.video-picker-preview {
    position: relative;
    /* The picked item at its own shape, 300 wide or 50vh tall at most (owner 2026-10-18: "not the Preview") */
    aspect-ratio: var(--picked-w) / var(--picked-h);
    width: min(300px, calc(50vh * var(--picked-w) / var(--picked-h)));
    max-height: 50vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.video-picker-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--color-border-medium);
}

.video-picker-picked-name {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
}

.video-picker-picked-type {
    font-size: calc(var(--font-sm) - var(--space-xs) / 4); /* frozen 13: 13px */
    font-weight: var(--font-semibold);
    color: var(--color-primary-pale); /* frozen 13 */
}

.video-picker-picked-detail {
    font-size: calc(var(--font-sm) - var(--space-xs) / 4); /* frozen 13: 13px */
    color: color-mix(in srgb, var(--color-text-primary) 78%, transparent); /* frozen 13: white at 0.78 */
}

.video-picker-picked-note {
    font-size: var(--font-xs);
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text-primary) 78%, transparent);
}

.video-picker-use {
    margin-top: auto;
    height: 48px;
    border-radius: var(--radius-md);
    font-size: calc(var(--font-base) - var(--space-xs) / 4); /* frozen 13: 15px */
    font-weight: var(--font-semibold);
}

/* A clip set (frozen 13b): one card, its clips stacked behind the front picture — Video Studio's dashboard set card */
.video-picker-thumb.video-picker-stack {
    background: color-mix(in srgb, var(--color-text-primary) 4%, transparent); /* frozen 13b: white at 0.04 */
}

.video-picker-sheet {
    position: absolute;
    border-radius: calc(var(--radius-sm) * 1.5); /* frozen 13b: 6px */
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 30%, transparent); /* frozen 13b: white at 0.3 */
    overflow: hidden;
}

.video-picker-sheet.back { /* frozen 13b: 8 / 12 / 26 / 40 */
    inset: var(--space-sm) calc(var(--space-sm) + var(--space-xs)) calc(var(--space-lg) + var(--space-xs) / 2) calc(var(--space-xl) + var(--space-sm));
    background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}

.video-picker-sheet.middle { /* frozen 13b: 15 / 22 / 19 / 30 */
    inset: calc(var(--space-md) - var(--space-xs) / 4) calc(var(--space-lg) - var(--space-xs) / 2) calc(var(--space-md) + var(--space-xs) * 0.75) calc(var(--space-xl) - var(--space-xs) / 2);
    background: color-mix(in srgb, var(--color-text-primary) 16%, transparent);
}

.video-picker-sheet.front { /* frozen 13b: 22 / 32 / 12 / 20, its shadow 0 2 8 at 0.55 */
    inset: calc(var(--space-lg) - var(--space-xs) / 2) var(--space-xl) calc(var(--space-sm) + var(--space-xs)) calc(var(--space-md) + var(--space-xs));
    box-shadow: 0 calc(var(--space-xs) / 2) var(--space-sm) color-mix(in srgb, var(--color-black) 55%, transparent);
}

.video-picker-sheet.front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The opened set: "← [tab]", then the set's name and "5 clips · [shape]" (frozen 13b) */
.video-picker-tabs.video-picker-set-head {
    align-items: center;
    gap: var(--space-md);
}

.video-picker-set-titles {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-xs) / 2);
}

.video-picker-set-name {
    margin: 0;
    font-size: var(--font-lg); /* frozen 13b: 18px */
    font-weight: var(--font-bold);
}

.video-picker-set-detail {
    font-size: var(--font-xs);
    color: color-mix(in srgb, var(--color-text-primary) 75%, transparent); /* frozen 13b: white at 0.75 */
}

/* Eight tabs (Media Studio MP-02, Photos after Animations): they keep their size and scroll sideways when the list is
   narrower than they are (frozen media-studio ChoosePhone.dc.html) */
.video-picker-tabs:not(.video-picker-set-head) {
    flex-shrink: 0; /* scrolling sideways, the row would otherwise shrink to nothing in the list's column */
    overflow-x: auto;
}

.video-picker-tab {
    flex-shrink: 0;
}

/* The photo preview popup (Media Studio MP-02, photo-preview.js): the photo full size and a close button */
.ai-design-modal.photo-preview-modal {
    position: relative;
    width: auto;
    max-width: 90vw;
    max-height: 90vh;
    padding: var(--space-md);
}

.photo-preview-modal .photo-preview-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-3xl);
    background: var(--color-mark);
    color: var(--color-white);
    font-size: calc(var(--font-2xl) - var(--space-xs) / 2);
    opacity: 1;
}

.photo-preview-img {
    display: block;
    max-width: calc(90vw - var(--space-md) * 2);
    max-height: calc(90vh - var(--space-md) * 2);
    object-fit: contain;
    border-radius: var(--radius-lg);
}

/* Phone width (frozen media-studio ChoosePhone.dc.html): one column — the cards two across, then the chosen one as a row
   (its picture 96 × 54, its words) above the notes and the button */
@media (max-width: 600px) {
    .ai-design-modal.video-picker-modal {
        height: 90vh;
    }

    .video-picker-header {
        padding: var(--space-md) var(--space-md) var(--space-sm); /* frozen: 16 / 16 / 8 */
    }

    .video-picker-body {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .video-picker-list {
        padding: 0 var(--space-md);
    }

    .video-picker-grid {
        --picker-gap: calc(var(--space-sm) + var(--space-xs) / 2); /* frozen: 10 */
    }

    .video-picker-sizer,
    .video-picker-card {
        width: calc((100% - var(--picker-gap)) / 2);
    }

    .video-picker-side {
        width: auto;
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        column-gap: calc(var(--space-sm) + var(--space-xs)); /* frozen: 12 */
        row-gap: calc(var(--space-xs) / 2);
        padding: calc(var(--space-sm) + var(--space-xs)) var(--space-md) var(--space-md); /* frozen: 12 / 16 / 16 */
        border-top: 1px solid var(--color-border-subtle);
    }

    .video-picker-side:empty {
        display: none;
    }

    .video-picker-preview {
        width: auto;
        height: 54px;
        grid-row: span 3;
        border-radius: calc(var(--radius-sm) * 1.5); /* frozen: 6 */
    }

    .video-picker-picked-note,
    .video-picker-use {
        grid-column: 1 / -1;
        margin-top: calc(var(--space-sm) + var(--space-xs) / 2);
    }
}

/* A website's picker (Media Studio MP-03, frozen ChooseSite.dc.html): "Upload a video" and "Make an AI Video" beside the close
   button */
.video-picker-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.video-picker-action {
    height: 36px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    font-size: calc(var(--font-sm) - var(--space-xs) / 4); /* 13px */
}

@media (max-width: 600px) {
    .video-picker-header {
        flex-wrap: wrap;
    }

    .video-picker-actions {
        order: 3;
        width: 100%;
        margin-left: 0;
    }

    .video-picker-action {
        flex: 1;
    }
}