/* Reels editor (9:16) — layered on animator.css base styles, reels-specific bits only */

/* 9:16 stage needs little width — give the working space to the right panel */
.reels-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 480px); gap: 0.75rem; align-items: start; }
@media (max-width: 1100px) { .reels-grid { grid-template-columns: 1fr; } }

.reel-stage-wrap { display: flex; justify-content: center; }
.reel-stage {
  position: relative;
  aspect-ratio: 1080 / 1920;
  height: min(56vh, 620px);
  overflow: hidden;
  border-radius: 16px;
  border: 1px dashed rgba(38, 70, 83, 0.25);
  background: #101014;
  user-select: none;
}

.reel-node { position: absolute; cursor: grab; }
.reel-node:active { cursor: grabbing; }
.reel-node:not(.video):hover { outline: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 6px; }
.reel-node.is-selected { outline: 2px dashed rgba(255, 183, 3, 0.95); border-radius: 6px; }
.reel-node.video { cursor: default; }

.reel-node .stage-video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.reel-node .stage-image { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.reel-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; line-height: 1.1; word-break: break-word; pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }

/* composite-mode previews (exact compositing happens in the worker's ffmpeg) */
.reel-node .stage-video.composite-screen,
.reel-node .stage-video.composite-alphapair { mix-blend-mode: screen; }
.reel-node .stage-video.composite-chroma { opacity: 0.55; }
.chroma-badge { position: absolute; top: 8px; right: 8px; z-index: 5; background: rgba(16, 185, 129, 0.9); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 999px; pointer-events: none; }

#fx-grid-wrap { max-height: 62vh; overflow-y: auto; padding-right: 0.25rem; }

/* media gallery */
.asset-preview video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.upload-tile { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #6b7280; border: 2px dashed #cbd5e1; background: #fff; }
.upload-card:hover .upload-tile { color: #1d3557; border-color: #1d3557; }

/* matte layers: never shown on stage (they mask the background video at render) */
.reel-node .stage-video.composite-matte { display: none; }
.matte-badge { background: rgba(99, 102, 241, 0.92); }

/* collapsible right-panel sections */
.panel-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.panel-toggle i { font-size: 1rem; transition: transform 0.15s ease; }
.panel-section.is-collapsed .panel-toggle i { transform: rotate(-90deg); }
.panel-section.is-collapsed .panel-body { display: none; }
.panel-section .panel-body { min-width: 0; }

/* layer info + delete */
.layer-btn-danger { color: #c0392b; }
.layer-info {
  margin: 0 0 6px 28px; padding: 6px 10px; border-left: 2px solid #ccd;
  font-size: 12px; color: #555; background: rgba(120, 130, 160, 0.08); border-radius: 0 6px 6px 0;
}
.layer-info div { display: flex; gap: 8px; }
.layer-info div > span:first-child { min-width: 72px; color: #98a; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; line-height: 1.9; }
.layer-info code { font-size: 11px; word-break: break-all; }

/* editor-only: effect picker live preview sizing */
.fx-live.tfx-preview { font-size: 0.95rem; max-width: 100%; }
.fx-live.tfx-preview .tfx-line { white-space: nowrap; }