/* BODHI Dashboard · css/scene-preview.css · 本场预览剪辑器：多轨时间线 / 播放器 / 裁剪把手 / 导出
   ⚠ 层叠顺序 = index.html 里 <link> 的先后，别随手调换。*/

/* overlay 默认有 1rem padding，会把全屏卡片压出边框 → 本编辑器的 overlay 去 padding */
.sp-overlay-root { padding: 0; }

/* ── 本场预览剪辑器（features/scene-preview/ 组件包）──────────────────
   镜次面板「▶ 本场预览」→ 全屏：双缓冲连续播放（悬浮控件）+ 轨道播放头游标
   + 逐段入出点剪辑 + 后台 ffmpeg 导出。 */
.modal-card-scene-preview {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* 主体两栏：左=资源库侧栏（Takes/DX/VO），右=播放器+时间线 */
.sp-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.sp-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sp-side {
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgb(231 229 228);
}
.dark .sp-side { border-color: rgb(68 64 60); }
.sp-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px 4px;
}
.sp-side-tabs { display: flex; gap: 2px; }
.sp-side-tab {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 5px;
  color: rgb(120 113 108);
}
.sp-side-tab:hover { background: rgba(176,134,66,.12); }
.sp-side-tab-on { background: rgba(176,134,66,.18); color: #b08642; font-weight: 600; }
.sp-side-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 6px 8px;
}
.sp-side-group {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: rgb(168 162 158);
  text-transform: uppercase;
  padding: 7px 2px 2px;
  position: sticky;
  top: 0;
  background: inherit;
  backdrop-filter: blur(2px);
}
.sp-side-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 6px;
  font-size: 11px;
}
.sp-side-item:hover { background: rgba(176,134,66,.10); }
.sp-side-thumb {
  flex: 0 0 52px;
  height: 26px;
  border-radius: 4px;
  background-color: rgb(41 37 36);
  background-size: cover;
  background-position: left center;
}
.sp-side-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
}
.sp-side-used {
  font-size: 10px;
  color: #b08642;
  font-family: var(--font-mono, monospace);
}
.sp-side-add, .sp-side-play {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgb(120 113 108);
  background: rgba(120,113,108,.10);
}
.sp-side-add:hover { background: rgba(176,134,66,.25); color: #b08642; }
.sp-side-play { font-size: 9px; }
.sp-side-play:hover { background: rgba(176,134,66,.25); color: #b08642; }

/* 播放器：每视频轨一个 <video> 叠放（多轨主时钟引擎）；占满剩余高度 */
.sp-player {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.sp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* 悬浮播放控件：贴视频底部，hover / 键盘聚焦时浮现 */
.sp-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 26px 14px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
  opacity: 0;
  transition: opacity 140ms;
  cursor: default;
}
.sp-player:hover .sp-overlay,
.sp-overlay:focus-within { opacity: 1; }
/* 三段布局：两侧等宽（flex:1）把中间播放簇挤到正中 */
.sp-overlay-side { flex: 1 1 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-overlay-side-r { justify-content: flex-end; }
.sp-overlay-center { display: flex; align-items: center; gap: 6px; }
.sp-ctl {
  font-size: 15px;
  line-height: 1;
  min-width: 32px;
  height: 30px;
  padding: 0 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,.12);
  cursor: pointer;
}
.sp-ctl:hover { background: rgba(255,255,255,.26); }
.sp-ctl-on { background: rgba(176,134,66,.85); }
.sp-ctl-on:hover { background: rgba(176,134,66,1); }
.sp-ctl-rate {
  font-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
}
.sp-ctl-rate option { color: #1c1917; }
.sp-hud {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  margin-left: 6px;
}

/* 底部区：轨道 + trim 行 + 导出（固定 min-height，防切段时高度抖动引发滚动跳） */
.sp-bottom {
  border-top: 1px solid rgb(231 229 228);
}
.dark .sp-bottom { border-color: rgb(68 64 60); }
.sp-export-section { padding: 4px 16px 8px; }
.sp-exports-list { max-height: 16vh; overflow-y: auto; }

/* 轨道容器：只此容器横向滚动；顶部 16px 为 seek 条 + 播放头抓手区 */
.sp-timeline-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 16px 4px;
}
.sp-timeline-pad { position: relative; display: inline-block; min-width: 100%; }
.sp-seek-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  /* 自定义游标光标：与播放头同款红色三角+杆（热点=三角尖 x7,y1），兜底 ew-resize */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='26'><path d='M1 1h13v7l-6.5 6z' fill='%23e2483d' stroke='white' stroke-width='1.2'/><rect x='6.7' y='13' width='1.6' height='12' rx='0.8' fill='%23e2483d'/></svg>") 7 1, ew-resize;
  touch-action: none;
  z-index: 6;
}
.sp-timeline-inner {
  position: relative;
  display: block;
  margin-top: 16px;
  min-width: 100%;
}
/* 多轨行：clip 绝对定位（left=start*pps）；主视频轨底色略深 */
.sp-track {
  position: relative;
  margin-bottom: 3px;
  border-radius: 4px;
  background: rgba(120, 113, 108, .10);
}
.dark .sp-track { background: rgba(255,255,255,.05); }
.sp-track-main { background: rgba(120, 113, 108, .16); }
.dark .sp-track-main { background: rgba(255,255,255,.08); }
.sp-track-droptarget { outline: 2px dashed #b08642; outline-offset: -2px; }
.sp-track-label {
  position: sticky;
  left: 2px;
  top: 2px;
  display: inline-block;
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  background: rgba(0,0,0,.28);
  color: #fff;
  padding: 0 4px;
  border-radius: 3px;
  margin: 2px;
  z-index: 4;
  pointer-events: none;
}

/* 全轨道竖向播放头游标（transform 定位；grip 上探进 seek 条区） */
.sp-playhead {
  position: absolute;
  top: -14px;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: 5;
  pointer-events: none;
}
.sp-playhead::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: #e2483d;
  box-shadow: 0 0 3px rgba(0,0,0,.4);
}
.sp-playhead-grip {
  position: absolute;
  top: 0;
  left: -6px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top: 9px solid #e2483d;
}
.sp-clip {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: grab;
  background-color: rgb(41 37 36);
  background-size: cover;
  background-position: center;
  border: 2px solid transparent;
  transition: border-color 100ms;
  touch-action: none;
}
.sp-clip-active {
  border-color: #b08642;
  box-shadow: 0 0 0 1px #b08642;
}
.sp-clip-dragging { opacity: .75; cursor: grabbing; z-index: 6; }
.sp-clip-dragnew { border-color: #b08642; border-style: dashed; }
/* 音频段：无 strip 底图，绿系渐变条 */
.sp-clip-audio {
  background: linear-gradient(180deg, rgba(34,120,90,.9), rgba(24,84,64,.9));
}
.sp-clip-mute {
  position: absolute;
  top: 2px;
  right: 14px;   /* 避开右裁剪把手（12px） */
  font-size: 10px;
  line-height: 1;
  padding: 1px 2px;
  border-radius: 3px;
  background: rgba(0,0,0,.45);
  z-index: 3;
  opacity: 0;
  transition: opacity 100ms;
}
.sp-clip:hover .sp-clip-mute,
.sp-clip-active .sp-clip-mute,
.sp-clip-mute-on { opacity: 1; }
.sp-clip-mute-on { background: rgba(190,40,40,.75); }
.sp-clip-label {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  white-space: nowrap;
}
.sp-clip-dur {
  position: absolute;
  bottom: 4px;
  right: 3px;
  font-size: 9px;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 0 3px;
  border-radius: 3px;
  white-space: nowrap;
}
/* 多轨视频层：每视频轨一个 <video> 叠放；空档位显示纯黑占位 */
.sp-vid-layer { position: absolute; inset: 0; }
.sp-player-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.18);
  font-size: 28px;
  pointer-events: none;
}

/* 时间线卡片左右裁剪把手（选中/悬停显示；拖动中强制显示，滑窗式裁入出点） */
.sp-clip-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(176, 134, 66, .92);
  cursor: ew-resize;
  touch-action: none;
  z-index: 3;
}
.sp-clip-handle-l { left: 0; border-radius: 4px 0 0 4px; }
.sp-clip-handle-r { right: 0; border-radius: 0 4px 4px 0; }
.sp-clip:hover .sp-clip-handle,
.sp-clip-active .sp-clip-handle,
.sp-clip-trimming .sp-clip-handle { display: flex; }
.sp-clip-handle-grip {
  width: 2px;
  height: 60%;
  background: #fff;
  border-radius: 1px;
  pointer-events: none;
}
.sp-clip-handle:hover,
.sp-clip-trimming .sp-clip-handle { background: rgba(201, 163, 107, .95); }

/* trim 信息行（大 trim 条已并入时间线卡片把手，2026-07-11） */
.sp-trim-panel { font-size: 12px; min-height: 34px; }
.sp-take-sel { width: auto; }
.sp-trim-num {
  width: 4.5rem;
  padding: 2px 6px;
  border: 1px solid rgb(214 211 209);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}
.dark .sp-trim-num { border-color: rgb(68 64 60); color: rgb(231 229 228); }

/* 已导出版本列表 */
.sp-export-item {
  border: 1px solid rgb(231 229 228);
  border-radius: 6px;
  padding: 6px 8px;
}
.dark .sp-export-item { border-color: rgb(68 64 60); }