/* "Upload a video or photo" (Media Studio MP-02; formerly "Upload a video", skia-video-backgrounds MP-05; frozen screen 15, and 15b, 15c in approved-designs-uploads).
   Theme tokens only (Rule 10). The frame is AI Design's (ai-design-modal.css); the title, subtitle and close button are
   frozen 13's (video-picker.css); the bar is AI Video's (ai-video.css); the error cards are Find a photo's
   (photo-picker-modal.css).
   Owned and served by Video Studio for both apps (animated-videos MP-04), moved from SKIA's public/css/video-upload.css
   unchanged; SKIA's settings names, set on Video Studio's pages by video-windows-studio.css. */

.ai-design-modal.video-upload-modal {
    max-width: 920px;
    padding: calc(var(--space-lg) + var(--space-xs)); /* frozen 15: 28 */
    gap: calc(var(--space-md) + var(--space-xs) / 2); /* frozen 15: 18 */
}

.video-upload-modal .ai-design-header {
    align-items: flex-start;
    padding: 0;
    border-bottom: none;
}

.video-upload-body {
    min-height: 0;
    display: flex;
    gap: var(--space-xl); /* frozen 15: 32 */
    overflow-y: auto;
}

.video-upload-main {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-sm) + var(--space-xs) * 1.5); /* frozen 15: 14 */
}

/* Empty: drop a video, or choose a file (frozen 15: 260 high, dashed white at 0.3) */
.video-upload-drop {
    height: 260px;
    box-sizing: border-box;
    border-radius: var(--radius-xl);
    border: 2px dashed color-mix(in srgb, var(--color-text-primary) 30%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--space-sm) + var(--space-xs)); /* frozen 15: 12 */
    color: var(--color-text-primary);
}

.video-upload-drop.over {
    border-color: var(--color-primary);
}

.video-upload-drop-title {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
}

.video-upload-choose {
    height: 44px;
    padding: 0 calc(var(--space-md) + var(--space-xs)); /* frozen 15: 20 */
    border-radius: var(--radius-md);
    font-size: calc(var(--font-base) - var(--space-xs) / 4); /* frozen 15: 15px */
    font-weight: var(--font-semibold);
}

.video-upload-input {
    display: none;
}

/* Checked: the video at the template's shape (frozen 15: 200 wide), its name and the checks */
.video-upload-file {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.video-upload-preview {
    position: relative;
    width: 200px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

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

.video-upload-length {
    position: absolute;
    left: calc(var(--space-sm) + var(--space-xs) / 2); /* frozen 15: 10 */
    bottom: calc(var(--space-sm) + var(--space-xs) / 2);
    height: 24px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-3xl);
    background: var(--color-mark);
    color: var(--color-white);
    font-size: calc(var(--font-xs) - var(--space-xs) / 4); /* frozen 15: 11px */
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
}

.video-upload-checks {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-sm) + var(--space-xs) / 2); /* frozen 15: 10 */
}

.video-upload-name {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    overflow-wrap: anywhere;
}

.video-upload-check {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
}

.video-upload-tick {
    flex-shrink: 0;
    stroke: var(--color-success-alt); /* frozen 15: #34d399 */
}

.video-upload-note {
    font-size: var(--font-xs);
    color: color-mix(in srgb, var(--color-text-primary) 75%, transparent); /* frozen 15: white at 0.75 */
}

/* 15c: a template with no brand */
.video-upload-brand-note {
    font-size: calc(var(--font-sm) - var(--space-xs) / 4); /* frozen 15c: 13px */
    color: color-mix(in srgb, var(--color-warning-alt) 80%, var(--color-white)); /* frozen 15c: #fcd34d — the theme's nearest */
}

/* 15b: uploading */
.video-upload-sending {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.video-upload-progress {
    font-size: var(--font-sm);
}

.video-upload-use {
    height: 48px;
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
}

.video-upload-use:disabled {
    opacity: 0.45; /* frozen 15b, 15c */
    cursor: not-allowed;
}

.video-upload-again {
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 30%, transparent); /* frozen 15: white at 0.3 */
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--font-sm);
    cursor: pointer;
}

/* "Video format and specs" (frozen 15: 300 wide, 16 inside, white at 0.05 on white at 0.12) */
.video-upload-specs {
    width: 300px;
    flex-shrink: 0;
    align-self: flex-start;
    box-sizing: border-box;
    padding: var(--space-md);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 12%, transparent);
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-sm) + var(--space-xs) / 2); /* frozen 15: 10 */
}

.video-upload-specs-title {
    font-size: calc(var(--font-base) - var(--space-xs) / 4); /* frozen 15: 15px */
    font-weight: var(--font-semibold);
}

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

.video-upload-spec-name {
    font-size: var(--font-xs);
    color: color-mix(in srgb, var(--color-text-primary) 72%, transparent); /* frozen 15: white at 0.72 */
}

.video-upload-spec-value {
    font-size: var(--font-sm);
}

/* Phone width (Media Studio MP-02, frozen media-studio UploadPhone.dc.html): one column — the drop area 220 high, the file
   full width above its checks, then the specs */
@media (max-width: 600px) {
    .ai-design-modal.video-upload-modal {
        padding: var(--space-md);
        gap: calc(var(--space-sm) + var(--space-xs) * 1.5); /* frozen: 14 */
    }

    .video-upload-body {
        flex-direction: column;
        gap: var(--space-md);
    }

    .video-upload-drop {
        height: 220px;
    }

    .video-upload-file {
        flex-direction: column;
    }

    .video-upload-preview {
        width: 100%;
    }

    .video-upload-specs {
        width: auto;
        align-self: stretch;
    }
}