/* ============================================
   SHORTSPRO — SCENE STRIP (ADR-032 FE-1)
   Вертикальный таймлайн сцен справа от телефона.
   Стиль наследует glass-card / preview-thumb из theme.css.

   ADR-052: карточка SCENE LENGTH приведена к дизайн-коду сайта.
   Кнопка «Render changes» удалена — второй проход запускает GENERATE.
   ============================================ */

/* Контейнер: прижат к правой грани телефона, высота = высоте телефона */
.scene-strip {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 16px;
    width: 72px;
    height: 650px;
    /* НЕ длиннее телефона по вертикали */
    max-height: 650px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px var(--glass-shadow);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    z-index: 30;
}

.scene-strip::-webkit-scrollbar {
    width: 4px;
}

.scene-strip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
}

/* Скрыта пока нет сцен (управляется из ui-player.js) */
.scene-strip.empty {
    display: none;
}

/* Заголовок полосы */
.scene-strip-title {
    flex: 0 0 auto;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    text-transform: uppercase;
    padding: 2px 0 4px;
}

/* Один интерактивный кадрик сцены (9:16) */
.scene-frame {
    flex: 0 0 auto;
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 2px solid transparent;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.2, 0, 0.2, 1),
                box-shadow 0.2s ease;
    will-change: transform;
}

.scene-frame video,
.scene-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.scene-frame:hover {
    transform: scale(1.06);
    border-color: rgba(255, 255, 255, 0.5);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.scene-frame.active {
    border-image: var(--accent-gradient) 1;
    border-color: transparent;
    box-shadow: 0 0 14px var(--accent-glow);
}

/* Номер сцены (верхний левый угол) */
.scene-frame .scene-index {
    position: absolute;
    top: 3px;
    left: 4px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    z-index: 2;
}

/* Длительность сцены (нижняя плашка) */
.scene-frame .scene-dur {
    position: absolute;
    bottom: 3px;
    right: 4px;
    font-size: 8px;
    font-weight: 600;
    color: #fff;
    padding: 1px 4px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 2;
}

/* Полоса прячется при повёрнутом телефоне (нет места) */
.iphone-mockup.rotated .scene-strip,
.iphone-mockup.landscape .scene-strip {
    display: none;
}

/* При zoom телефона полосу тоже скрываем — масштаб ломает позицию */
.iphone-mockup.zoomed .scene-strip {
    display: none;
}

/* ============================================
   ADR-052 — SCENE EDITOR PANEL (редизайн)
   Раньше панель была черновой: сырой ×, эмодзи на кнопках,
   красная строка итога, разнокалиберные контролы, «мёртвая»
   Reset order. Приводим к языку остальных quick-action-панелей:
   те же пилюли, те же бейджи, тот же сегментированный свитч,
   что в Settings и Audio Library.
   ============================================ */

#sceneEditorPanel {
    padding-bottom: 16px;
}

/* ── Сегментированный свитч SCENE / TRANSITION ──────────────
   Тот же контрол, что .quality-toggle в Settings: подложка,
   бегунок-градиент, капслок Outfit. */
.se-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    border-radius: 14px;
}

.se-tab {
    flex: 1;
    padding: 9px 0;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.3s ease, background 0.3s ease;
}

.se-tab:hover:not(.active) {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.5);
}

.se-tab.active {
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4);
}

/* ── Заголовок выбранной сцены ──────────────────────────────
   Имя — капслоком в общем стиле панелей, длительность — тем же
   лиловым бейджем, что .setting-value. */
.se-scene-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2px 0 16px;
}

.se-scene-name {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.se-scene-dur {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    background: rgba(183, 148, 246, 0.1);
    color: #B794F6;
    border: 1px solid rgba(183, 148, 246, 0.2);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(183, 148, 246, 0.05);
}

/* Удалённая сцена: бейдж становится красным, имя гаснет */
.se-scene-label.is-deleted .se-scene-name {
    opacity: 0.5;
}

.se-scene-label.is-deleted .se-scene-dur {
    background: rgba(224, 85, 85, 0.1);
    color: #e05555;
    border-color: rgba(224, 85, 85, 0.25);
}

/* ── Степперы Start / End / Fade ────────────────────────────
   .setting-group из theme.css даёт нижний отступ; здесь строка
   становится горизонтальной. */
.se-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px !important;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
}

.se-stepper .setting-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    color: var(--text-secondary) !important;
}

.se-stepper-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Круглая кнопка ±: те же пропорции, что .btn-mini-control плеера */
.se-step-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(183, 148, 246, 0.25);
    background: rgba(255, 255, 255, 0.75);
    color: #B794F6;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Перебиваем глобальный button:hover (подъём на 5px) — в строке степпера
   он выглядит как дрожание. */
.se-step-btn:hover:not(:disabled) {
    background: #fff;
    color: #B794F6;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(183, 148, 246, 0.25);
    text-shadow: none;
}

.se-step-btn:active:not(:disabled) {
    transform: scale(0.92);
}

.se-step-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.4);
}

/* Значение — тот же бейдж, что .setting-value в остальных панелях */
.se-step-val {
    min-width: 52px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    background: rgba(183, 148, 246, 0.1);
    color: #B794F6;
    border: 1px solid rgba(183, 148, 246, 0.2);
    border-radius: 8px;
}

/* ── Удаление сцены ─────────────────────────────────────────
   Палитра та же, что у .btn-batch-delete в batch-баре. */
.se-delete-btn {
    width: 100%;
    margin: 4px 0 0;
    padding: 11px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(239, 68, 68, 0.15);
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.se-delete-btn:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.25);
    color: #EF4444;
    transform: none;
    box-shadow: none;
    text-shadow: none;
}

.se-delete-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Восстановление удалённой сцены — нейтральная, не красная */
.se-delete-btn.is-restore {
    border-color: rgba(183, 148, 246, 0.25);
    background: rgba(183, 148, 246, 0.08);
    color: #B794F6;
}

.se-delete-btn.is-restore:hover:not(:disabled) {
    background: rgba(183, 148, 246, 0.16);
    border-color: rgba(183, 148, 246, 0.35);
    color: #B794F6;
}

/* ── Итог по длительности ───────────────────────────────────
   Обычное состояние — спокойный серый, красным только при
   превышении лимита. Раньше строка была красной всегда. */
.se-totals {
    margin-top: 16px;
    padding: 10px 12px;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
}

.se-totals.has-changes {
    color: #B794F6;
    background: rgba(183, 148, 246, 0.08);
    border-color: rgba(183, 148, 246, 0.2);
}

.se-totals.over-limit {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

/* ── Подсказка: чем именно применяются правки ───────────────
   Кнопка запуска переехала в GENERATE (ADR-052), и без этой
   строки панель выглядит как форма без кнопки «ОК». */
.se-hint {
    margin: 10px 0 0;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--text-tertiary);
}

.se-hint b {
    color: #B794F6;
    font-weight: 800;
}

/* ── Reset order ────────────────────────────────────────────
   Вторичная кнопка-призрак: она нужна редко и не должна
   спорить с GENERATE. */
#btnSceneResetOrder {
    width: 100%;
    margin-top: 12px;
    padding: 10px 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.4);
    color: var(--text-secondary);
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

#btnSceneResetOrder:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
    text-shadow: none;
}

#btnSceneResetOrder:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Панель больше не двухкнопочная — оставляем только отступы */
#sceneEditorPanel .panel-actions-dual {
    display: block;
    padding: 0;
}

/* ADR-032 #2: кадрик сцены, играющей прямо сейчас */
.scene-frame.playing {
    box-shadow: inset 0 0 0 2px rgba(183, 148, 246, 0.9), 0 0 10px var(--accent-glow);
}

.scene-frame.playing::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    opacity: 0.85;
    z-index: 3;
    pointer-events: none;
}

/* ADR-032 FE-3: бэйдж пересобранного шорта на превью */
.recut-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 5;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    background: var(--accent-gradient, linear-gradient(135deg, #b794f6, #f687b3));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* ============================================
   ADR-032.1 — DELETED SCENE (клавиша Delete на таймлайне)
   ============================================ */

.scene-frame.deleted {
    opacity: 0.35;
    filter: grayscale(0.85);
}

.scene-frame.deleted::before {
    content: '✕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 700;
    color: #ff6b6b;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    z-index: 4;
    pointer-events: none;
}

/* ==================== ADR-043: REORDER ==================== */
/* Порядок сцен задаётся положением узла в DOM. Стили ниже обслуживают
   только жест перетаскивания и стрелки точного сдвига. */

.scene-frame {
    touch-action: pan-x;          /* вертикальный жест уходит в drag, не в скролл */
}

.scene-strip.reordering {
    cursor: grabbing;
}

.scene-strip.reordering .scene-frame:not(.dragging) {
    transition: transform 0.12s ease;
}

.scene-frame.dragging {
    pointer-events: none;         /* чтобы elementFromPoint видел кадрик ПОД курсором */
    opacity: 0.55;
    transform: scale(0.96);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    border-color: var(--accent-primary, #b794f6);
    z-index: 5;
}

/* ---- Стрелки точного сдвига ---- */
.scene-move {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 3;
}

.scene-frame:hover .scene-move,
.scene-frame.active .scene-move {
    opacity: 1;
}

.scene-move-btn {
    width: 18px;
    height: 15px;
    padding: 0;
    font-size: 8px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.scene-move-btn:hover {
    background: var(--accent-primary, #b794f6);
    transform: none;
    box-shadow: none;
}

.scene-frame.deleted .scene-move {
    display: none;                /* удалённую сцену переставлять незачем */
}