/* wait-companion.css v1.3.0 - "email me" / "alert me" are big on/off buttons for one job (44px+ taps, filled with a check when on) */
/* wait-companion.css v1.2.1 - paused: the spinner on the session's first clip stops too */
/* wait-companion.css v1.2.0 - paused (nothing online to start it): a still, dimmed bar instead of a moving one */
/* wait-companion.css v1.1.2 - free plan keep note with a pin link under the latest result */
/* wait-companion.css v1.0.0 - honest wait time, progress bar, ready alerts */
.fs-wait-slot:empty { display: none; }

.fs-wait {
    width: 100%;
    max-width: 420px;
    margin: var(--spacing-sm, 8px) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    text-align: center;
}

.fs-wait-bar {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full, 999px);
    background: var(--bg-tertiary, rgba(127, 127, 127, 0.2));
    overflow: hidden;
}

.fs-wait-bar-fill {
    display: block;
    height: 100%;
    width: 2%;
    border-radius: inherit;
    background: var(--accent-primary, #c8a45c);
    transition: width 1s linear;
}

.fs-wait-bar--indeterminate .fs-wait-bar-fill {
    width: 35%;
    transition: none;
    animation: fs-wait-slide 1.6s var(--ease-in-out, ease-in-out) infinite;
}

@keyframes fs-wait-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(290%); }
}

/* Paused: nothing is moving, so the bar doesn't move either. */
.fs-wait-bar--paused .fs-wait-bar-fill,
.fs-wait-bar--indeterminate.fs-wait-bar--paused .fs-wait-bar-fill {
    animation: none;
    width: 100%;
    opacity: 0.3;
}

.fs-wait-paused .generation-spinner,
.generating-history-loading.fs-wait-paused .generating-history-spinner {
    animation: none;
    border-top-color: rgba(200, 164, 92, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .fs-wait-bar-fill { transition: none; }
    .fs-wait-bar--indeterminate .fs-wait-bar-fill {
        animation: none;
        width: 100%;
        opacity: 0.45;
    }
}

.fs-wait .fs-wait-text {
    margin: var(--spacing-xs, 4px) 0 0;
    color: var(--text-primary);
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-medium, 500);
}

.fs-wait .fs-wait-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-xs, 11px);
    font-variant-numeric: tabular-nums;
}
.fs-wait-sub:empty { display: none; }

.fs-wait-actions { margin-top: var(--spacing-xs, 4px); }
.fs-wait-actions:empty { display: none; }

.fs-wait-link:focus-visible { outline: none; box-shadow: var(--fs-focus-ring, 0 0 0 2px var(--accent-primary)); }

.fs-wait-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Story progress line in the action bar under the active clip */
.fs-story-progress-text {
    margin: 0 0 var(--spacing-sm, 8px);
    color: var(--text-secondary);
    font-size: var(--text-sm, 13px);
}

/* Free plan: one quiet line under the latest result about keeping the scene */
.fs-keep-note {
    margin: var(--spacing-sm, 8px) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-xs, 12px);
    line-height: 1.5;
}
.fs-keep-note-pin {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    min-height: 24px;
}
.fs-keep-note-pin:disabled { opacity: 0.6; cursor: default; }

/* "Email me when this one is ready" / "Alert me in this browser": one job only.
   Big, thumb-sized buttons; on = filled, accent border, check mark. */
.fs-wait-toggles {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm, 8px);
    width: 100%;
    max-width: 360px;
    margin: var(--spacing-sm, 8px) auto 0;
}
.fs-wait-toggles:empty { display: none; }
.fs-wait-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-base, 15px);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
}
.fs-wait-toggle:hover { background: var(--bg-hover, rgba(127, 127, 127, 0.12)); }
.fs-wait-toggle:focus-visible { outline: none; box-shadow: var(--fs-focus-ring, 0 0 0 2px var(--accent-primary)); }
.fs-wait-toggle:disabled { opacity: 0.6; cursor: progress; }
.fs-wait-toggle.is-on {
    border-color: var(--accent-primary);
    background: rgba(127, 127, 127, 0.14);
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
}
.fs-wait-toggle-icon { display: inline-flex; flex: 0 0 auto; color: var(--text-secondary); }
.fs-wait-toggle.is-on .fs-wait-toggle-icon { color: var(--accent-primary); }
.fs-wait-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-wait-toggle-label { font-weight: 600; line-height: 1.3; }
.fs-wait-toggle-sub { color: var(--text-secondary); font-size: var(--text-sm, 13px); line-height: 1.3; }
.fs-wait .fs-wait-email-error {
    margin: 0;
    color: var(--color-error, #dc2626);
    font-size: var(--text-sm, 13px);
}
.fs-wait .fs-wait-email-always {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm, 13px);
    text-align: left;
}
.fs-wait-email-always svg { flex: 0 0 auto; color: var(--accent-primary); }
.fs-wait-email-always a { color: var(--accent-primary); display: inline-block; min-height: 24px; }