/* Video Maker modal */

.vm-modal-content {
    max-width: 540px;
    width: 94%;
    max-height: 92vh;
    overflow-y: auto;
}

.vm-body {
    padding: 16px 22px 22px;
    color: #e8e8ec;
}

.vm-step {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vm-field label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.vm-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.vm-row input[type="time"] {
    flex: 1;
    background: #1a1a1e;
    border: 1px solid #2e2e34;
    color: #f0f0f3;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
}

.vm-row button,
.vm-body select {
    background: #2a2a30;
    border: 1px solid #3a3a42;
    color: #e6e6ea;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}

.vm-row button:hover,
.vm-body select:hover {
    background: #33333a;
}

.vm-body select {
    width: 100%;
}

.vm-info {
    color: #d6d6da;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.vm-hint {
    color: #7a7a82;
    font-size: 12px;
}

.vm-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    /* No inner scroll region. The params grid grows to fit all checkboxes and
       the whole modal (.vm-modal-content, max-height 92vh / 100dvh) is the
       single scroll container. An inner scroll box here with
       overscroll-behavior:contain trapped scroll: once the cursor/finger was
       over the params grid you couldn't scroll back up to the fields above
       it. This matches the mobile rules below and removes the trap at every
       viewport width (incl. the Tbox PCM's 1602x720, which is wider than the
       768px mobile breakpoint so it previously hit the trapped desktop rule). */
    overflow: visible;
    padding: 10px;
    border: 1px solid #2a2a30;
    border-radius: 6px;
    background: #16161a;
}

/* Header row above the parameter grid: title + count + bulk-action buttons.
   Plain div instead of <label> — labels nesting buttons is invalid HTML and
   was causing iOS to treat taps inside the params box inconsistently. */
.vm-params-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.vm-params-title {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.vm-bulk-actions {
    display: inline-flex;
    gap: 6px;
}

.vm-bulk-btn {
    background: #2a2a30;
    color: #e6e6ea;
    border: 1px solid #3a3a42;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    font-family: inherit;
}

.vm-bulk-btn:hover {
    background: #33333a;
}

.vm-bulk-btn:active {
    transform: scale(0.96);
}

/* Flash the count red when the user tries to add a 13th param */
#vm-param-count.vm-cap-flash {
    color: #f5b2b2;
    font-weight: 700;
    animation: vm-cap-shake 0.35s ease-in-out;
}

@keyframes vm-cap-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

.vm-params label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #d0d0d5;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    padding: 3px 0;
}

.vm-params label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.vm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
    flex-wrap: wrap;
}

.vm-actions button,
.vm-actions a.vm-primary {
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid #3a3a42;
    background: #2a2a30;
    color: #e6e6ea;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    text-align: center;
}

.vm-actions .vm-primary {
    background: #c9a34a;
    border-color: #c9a34a;
    color: #1a1a1a;
    font-weight: 600;
}

.vm-actions .vm-primary:hover {
    background: #d8b050;
    border-color: #d8b050;
}

.vm-error,
.vm-error-msg {
    background: #3a1a1a;
    border: 1px solid #7a2a2a;
    color: #f2b2b2;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: pre-wrap;
}

.vm-gap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    color: #d0d0d5;
}

.vm-gap-list li {
    background: #1a1a1e;
    padding: 6px 10px;
    border-radius: 4px;
    border-left: 3px solid #c9a34a;
}

.vm-gap-list li.vm-gap-pending {
    border-left-color: #4a90c9;
    color: #cae0f5;
    font-style: italic;
}

.vm-stage {
    font-size: 15px;
    color: #e8e8ec;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}

.vm-progress-track {
    height: 10px;
    background: #1a1a1e;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #2a2a30;
}

.vm-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #c9a34a, #d8b050);
    width: 0%;
    transition: width 250ms ease;
}

#vm-preview {
    width: 100%;
    max-height: 60vh;
    background: #000;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .vm-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }

    .vm-body {
        padding: 14px 16px 20px;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile: let the params grid grow to fit ALL options and let the
       modal body scroll naturally instead of trapping a tiny inner scroll
       region (which was confusing on phones — users couldn't scroll the
       full list and had no clear way to bulk-select). */
    .vm-params {
        grid-template-columns: 1fr 1fr;
        max-height: none;
        overflow-y: visible;
        padding: 6px 8px;
        gap: 0;
    }

    /* Each row is its own tappable rectangle — full-width, generous height,
       and the entire label area toggles the checkbox (native <label> behavior).
       No transform: scale() because that doesn't enlarge the actual hit box
       reliably on iOS Safari, which was making the first/last items in the
       grid feel "dead" to taps. */
    .vm-params label {
        padding: 12px 8px;
        font-size: 15px;
        min-height: 44px;          /* Apple HIG minimum touch target */
        gap: 12px;
        border-radius: 6px;
        -webkit-tap-highlight-color: rgba(201, 163, 74, 0.25);
    }

    .vm-params label:active {
        background: rgba(255, 255, 255, 0.06);
    }

    .vm-params label input[type="checkbox"] {
        width: 22px;
        height: 22px;
        margin: 0;
        flex-shrink: 0;
    }

    .vm-bulk-btn {
        padding: 8px 16px;
        font-size: 13px;
        min-height: 38px;
    }

    .vm-params-header {
        margin-bottom: 8px;
    }

    /* Prevent iOS zoom when focusing time inputs */
    .vm-row input[type="time"],
    .vm-body select {
        font-size: 16px;
    }

    /* Touch-friendly button heights */
    .vm-row button,
    .vm-actions button,
    .vm-actions a.vm-primary {
        padding: 10px 14px;
        min-height: 40px;
    }

    .vm-actions {
        justify-content: stretch;
    }

    .vm-actions button,
    .vm-actions a.vm-primary {
        flex: 1;
    }

    #vm-preview {
        max-height: 50vh;
    }
}

@media (max-width: 420px) {
    .vm-params {
        grid-template-columns: 1fr;
    }
}

/* --- Clip list (My clips) ---------------------------------------- */

.vm-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.vm-list-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.vm-clip-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
}

.vm-clip-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
}

.vm-clip-list li:hover {
    background: rgba(255, 255, 255, 0.08);
}

.vm-clip-list .vm-clip-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vm-clip-list .vm-clip-when {
    font-size: 0.95rem;
}

.vm-clip-list .vm-clip-meta {
    font-size: 0.8rem;
    color: #8d8d99;
}

.vm-clip-list .vm-clip-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vm-clip-list .vm-clip-badge.done { background: #1f6b36; color: #caf5d1; }
.vm-clip-list .vm-clip-badge.failed { background: #712a2a; color: #f5caca; }
.vm-clip-list .vm-clip-badge.running { background: #2a4d71; color: #caddf5; }

.vm-clip-list li.disabled {
    opacity: 0.55;
    cursor: default;
}