/* "Make an AI Video" (skia-video-backgrounds MP-04; frozen screen 14). 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 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/ai-video.css
   unchanged; SKIA's settings names, set on Video Studio's pages by video-windows-studio.css. */

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

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

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

/* The starting photo at this template's shape (frozen 14: 320 wide); when ready, the made video in its place (14 v3) */
.ai-video-photo {
    position: relative;
    width: 320px;
    max-height: 60vh;
    flex-shrink: 0;
    align-self: flex-start;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.ai-video-photo img,
.ai-video-photo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* No starting photo yet: a grey box (owner 2026-10-05: "Grey box, Make inactive") */
.ai-video-photo.no-picture,
.ai-video-thumb.no-picture {
    background: var(--color-border-medium);
}

.ai-video-badge {
    position: absolute;
    left: calc(var(--space-sm) + var(--space-xs));
    bottom: calc(var(--space-sm) + var(--space-xs));
    height: 28px;
    padding: 0 calc(var(--space-sm) + var(--space-xs) / 2);
    border-radius: var(--radius-3xl);
    background: color-mix(in srgb, var(--color-mark) 93.34%, transparent); /* frozen 14: rgba(8,8,20,0.7) */
    color: var(--color-white);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
}

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

.ai-video-state {
    padding-top: var(--space-lg);
}

.ai-video-label {
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
}

.ai-video-words, .ai-video-name {
    box-sizing: border-box;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 20%, transparent); /* frozen 14: white at 0.2 */
    background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    color: var(--color-text-primary);
    font-size: var(--font-sm);
    font-family: inherit;
    padding: calc(var(--space-sm) + var(--space-xs) / 2) calc(var(--space-sm) + var(--space-xs));
    resize: none;
}

/* "Give your video a name." under the Video name box (owner 2026-10-14 "Ask for a name") */
.ai-video-name-error {
    color: var(--color-error);
}

.ai-video-start {
    display: flex;
    align-items: center;
    gap: calc(var(--space-sm) + var(--space-xs));
}

.ai-video-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    object-fit: cover;
    display: block;
}

.ai-video-credit {
    flex-grow: 1;
    font-size: var(--font-xs);
    color: color-mix(in srgb, var(--color-text-primary) 75%, transparent); /* frozen 14: white at 0.75 */
}

.ai-video-choose,
.ai-video-again {
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 30%, transparent); /* frozen 14: white at 0.3 */
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
}

.ai-video-choose {
    height: 40px;
    padding: 0 calc(var(--space-sm) + var(--space-xs) * 1.5);
    font-size: calc(var(--font-sm) - var(--space-xs) / 4); /* frozen 14: 13px */
}

.ai-video-again {
    height: 44px;
    font-size: var(--font-sm);
}

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

.ai-video-lengths {
    display: flex;
    gap: var(--space-sm);
}

.ai-video-length {
    flex-grow: 1;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 30%, transparent);
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--font-sm);
    cursor: pointer;
}

.ai-video-length.on {
    border: 2px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 22%, transparent); /* frozen 14: primary at 0.22 */
    font-weight: var(--font-semibold);
}

.ai-video-cost {
    padding: calc(var(--space-sm) + var(--space-xs)) calc(var(--space-sm) + var(--space-xs) * 1.5); /* frozen 14: 12 / 14 */
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-warning) 12%, transparent); /* frozen 14: amber at 0.12, its edge at 0.45 */
    border: 1px solid color-mix(in srgb, var(--color-warning) 45%, transparent);
    font-size: var(--font-sm);
}

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

.ai-video-state-title {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
}

/* The making bar fills as Video Studio's clips are made (owner 2026-10-05: "Real progress") */
.ai-video-bar {
    height: 10px;
    border-radius: var(--radius-3xl);
    background: color-mix(in srgb, var(--color-text-primary) 12%, transparent); /* frozen 14: white at 0.12 */
    overflow: hidden;
}

.ai-video-bar-fill {
    height: 100%;
    background: var(--color-primary);
    transition: width 0.4s;
}

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

/* Frozen 14 v2 (ai-video-reliability MP-04; owner 3a): the bar moves from the first step — light stripes travel along
   the filled part between Video Studio's answers; none when the person asks for less motion */
@keyframes ai-video-moving {
    from { background-position: 0 0; }
    to { background-position: calc(var(--space-xl) + var(--space-sm)) 0; } /* frozen 14 v2: 40px */
}

.ai-video-moving {
    background-image: linear-gradient(90deg, transparent 0%,
        color-mix(in srgb, var(--color-text-primary) 28%, transparent) 50%, transparent 100%); /* frozen 14 v2: white at 0.28 */
    background-size: calc(var(--space-xl) + var(--space-sm)) 100%; /* frozen 14 v2: 40px */
    animation: ai-video-moving 1.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ai-video-moving { animation: none; }
}

/* Frozen 14 v2's second line: where the video is saved if the window is closed (owner "Add SKIA too") */
.ai-video-save {
    font-size: calc(var(--font-sm) - var(--space-xs) / 4); /* frozen 14 v2: 13px */
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text-primary) 70%, transparent); /* frozen 14 v2: white at 0.7 */
}

/* Frozen 16 v2's AI VIDEO card: the plain reason, and the reference support can look up (owner 2 "Pick A", "Full code") */
.ai-video-card-reason {
    font-size: var(--font-sm); /* frozen 16 v2: 14px */
    line-height: 1.5;
    color: var(--color-text-primary); /* frozen 16 v2: white */
}

.ai-video-card-ref {
    font-size: calc(var(--font-sm) - var(--space-xs) / 4); /* frozen 16 v2: 13px */
    color: color-mix(in srgb, var(--color-text-primary) 80%, transparent); /* frozen 16 v2: white at 0.8 */
    word-break: break-all;
}