/**
 * 摄状元®数智影苑 — 视频编辑器V2增强样式
 * 裁剪手柄 + 音量可视化 + 转场标记 + 导出对话框
 * 版本: 2026-09-06
 */

/* ========================================
   裁剪手柄
   ======================================== */
.tl-clip {
  position: relative;
  overflow: visible !important;
}

.trim-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.tl-clip:hover .trim-handle,
.tl-clip.selected .trim-handle {
  opacity: 1;
}

.trim-left {
  left: -4px;
  background: linear-gradient(90deg, #f97316, transparent);
  border-radius: 4px 0 0 4px;
}

.trim-right {
  right: -4px;
  background: linear-gradient(90deg, transparent, #f97316);
  border-radius: 0 4px 4px 0;
}

.trim-handle::after {
  content: '⋮';
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.trim-handle:hover {
  width: 12px;
}

.trim-left:hover {
  left: -6px;
}

.trim-right:hover {
  right: -6px;
}

/* ========================================
   音量可视化条（音频轨道）
   ======================================== */
.tl-clip[data-track="audio"]::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 4px;
  right: 4px;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    rgba(76, 175, 80, 0.6) 0px,
    rgba(76, 175, 80, 0.6) 2px,
    transparent 2px,
    transparent 4px
  );
  border-radius: 2px;
  pointer-events: none;
}

/* ========================================
   转场标记
   ======================================== */
.tl-clip .trans-marker {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #f97316;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
  cursor: pointer;
}

/* ========================================
   字幕轨道增强
   ======================================== */
.tl-track[data-track="text"],
.tl-track[data-track="subtitle"] {
  background: rgba(171, 71, 188, 0.05);
}

.tl-clip.clip-text,
.tl-clip.clip-subtitle {
  background: linear-gradient(135deg, rgba(171,71,188,.4), rgba(171,71,188,.2)) !important;
  border: 1px solid rgba(171,71,188,.5);
  font-size: 11px;
}

/* ========================================
   播放头增强
   ======================================== */
.tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  z-index: 100;
  pointer-events: none;
}

.tl-playhead::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -5px;
  width: 12px;
  height: 12px;
  background: #ef4444;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* ========================================
   视频预览区
   ======================================== */
.vp-stage {
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.vp-stage video {
  background: #000;
}

.vp-controls .vp-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #666;
  border-radius: 6px;
  transition: all 0.15s;
  font-size: 16px;
}

.vp-controls .vp-btn:hover {
  background: rgba(0,0,0,.06);
  color: #333;
}

.vp-play-btn {
  width: 36px;
  height: 36px;
  background: #f97316 !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
}

.vp-play-btn:hover {
  background: #ea580c !important;
}

/* ========================================
   比例选择器
   ======================================== */
.aspect-selector {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #f3f4f6;
  border-radius: 8px;
}

.aspect-btn {
  padding: 4px 8px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: #666;
  transition: all 0.15s;
}

.aspect-btn:hover {
  background: rgba(0,0,0,.05);
}

.aspect-btn.active {
  background: #fff;
  color: #f97316;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ========================================
   编辑器布局增强
   ======================================== */
.editor-v2-layout {
  display: grid;
  grid-template-columns: 280px 1fr 260px;
  grid-template-rows: 1fr auto;
  gap: 0;
  height: calc(100vh - 140px);
  min-height: 500px;
}

.editor-v2-layout .editor-left-panel {
  grid-row: 1 / 3;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
}

.editor-v2-layout .editor-preview-area {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #1a1a2e;
}

.editor-v2-layout .editor-right-panel {
  grid-row: 1 / 3;
  border-left: 1px solid #e5e7eb;
  overflow-y: auto;
}

.editor-v2-layout .editor-timeline-area {
  grid-column: 2;
  border-top: 1px solid #e5e7eb;
  min-height: 200px;
  max-height: 300px;
}

/* Tab栏 */
.panel-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}

.panel-tab {
  flex: 1;
  padding: 10px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: #999;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.panel-tab:hover {
  color: #666;
}

.panel-tab.active {
  color: #f97316;
  border-bottom-color: #f97316;
}

.panel-content {
  padding: 12px;
}

/* ========================================
   时间线增强
   ======================================== */
.tl-toolbar {
  background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tl-btn {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: #666;
  transition: all 0.15s;
}

.tl-btn:hover {
  background: #f0f0f0;
  border-color: #bbb;
}

.tl-btn.active {
  background: #fff7ed;
  border-color: #f97316;
  color: #f97316;
}

/* ========================================
   移动端适配
   ======================================== */
@media (max-width: 768px) {
  .editor-v2-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
    height: auto;
  }

  .editor-v2-layout .editor-left-panel {
    grid-row: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    max-height: 200px;
  }

  .editor-v2-layout .editor-right-panel {
    grid-row: auto;
    border-left: none;
    border-top: 1px solid #e5e7eb;
    max-height: 250px;
  }

  .editor-v2-layout .editor-preview-area {
    min-height: 200px;
  }

  .editor-v2-layout .editor-timeline-area {
    grid-column: 1;
    min-height: 180px;
  }

  .fp-presets {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .cp-transitions {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ========================================
   导出对话框动画
   ======================================== */
.sz-export-overlay {
  animation: fadeIn 0.2s ease-out;
}

.sz-export-dialog {
  animation: slideUp 0.25s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ========================================
   片段选中状态增强
   ======================================== */
.tl-clip.selected {
  box-shadow: 0 0 0 2px #f97316, 0 2px 8px rgba(249,115,22,.3);
  z-index: 2;
}

/* ========================================
   空轨道提示
   ======================================== */
.tl-track:empty::after {
  content: '拖拽素材到此处';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: rgba(0,0,0,.15);
  pointer-events: none;
}