/* 「图像与影音」工作台：逐镜头生成 + 时间线（timeline.js）。
   沿用 core/web/assets/app.css 的配色变量；类名都以 tl- 开头并挂在 .tl-app 下，
   不影响 core 里旧的 .timeline / .tl-clip 示意样式。 */

.tl-app {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.tl-app button,
.tl-app .tl-btnlink {
  background: var(--panel3, #1c2740);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.tl-app button:hover, .tl-app .tl-btnlink:hover { border-color: var(--accent); }
.tl-app button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tl-app button.danger { color: var(--rose); }
.tl-app input, .tl-app select, .tl-app textarea {
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 8px;
  font: inherit;
  font-size: 12.5px;
}
.tl-spacer { flex: 1 1 auto; }

/* 顶部工具条 */
.tl-bar, .tl-add, .tl-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-title { width: 150px; font-weight: 600; }
.tl-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-status {
  position: relative;
  flex: 1 1 120px;
  min-width: 0;
  overflow: visible;
  font-size: 12px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tl-status.flash::after {
  content: attr(data-flash);
  position: absolute;
  left: 0; top: 130%;
  z-index: 5;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 6px 10px;
  color: var(--text);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.tl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.tl-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.tl-dot.warm { background: var(--amber); animation: tl-pulse 1.4s infinite; }
@keyframes tl-pulse { 50% { opacity: .35; } }

/* 预览 + 检查器 */
.tl-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr);
  gap: 10px;
  flex: 1 1 auto;
  min-height: 180px;
}
.tl-canvas {
  position: relative;
  background: #000;
  border: 1px solid var(--line-soft);
  border-radius: var(--r, 10px);
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 180px;
}
.tl-video { width: 100%; height: 100%; object-fit: contain; display: block; }
.tl-canvas.blank .tl-video { visibility: hidden; }
.tl-canvas.blank::after {
  content: attr(data-label);
  position: absolute;
  color: var(--faint);
  font-size: 13px;
}
.tl-insp {
  border: 1px solid var(--line-soft);
  border-radius: var(--r, 10px);
  background: #0b1220;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}
.tl-insp textarea { resize: vertical; width: 100%; box-sizing: border-box; }
.tl-insp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.tl-insp-row input[type=number] { width: 64px; }
.tl-in-label { flex: 1 1 auto; font-weight: 600; }
.tl-badge { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--panel3, #1c2740); color: var(--muted); }
.tl-dim { color: var(--faint); font-size: 11.5px; }
.tl-hint { color: var(--faint); font-size: 12.5px; line-height: 1.6; }
.tl-err { color: var(--rose); font-size: 12px; }

/* 添加镜头 */
.tl-prompt { flex: 1 1 260px; }

/* 播放控制 */
.tl-play { width: 38px; }
.tl-time { font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; color: var(--muted); }

/* 时间线 */
.tl-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r, 10px);
  background: #0b1220;
  padding: 6px 8px 10px;
  flex: none;
  cursor: text;
}
.tl-ruler {
  position: relative;
  height: 16px;
  margin-left: 42px;
  border-bottom: 1px solid var(--line-soft);
}
.tl-ruler span {
  position: absolute;
  top: 0;
  font-size: 10px;
  color: var(--faint);
  transform: translateX(-50%);
  white-space: nowrap;
}
.tl-ruler span::after {
  content: '';
  position: absolute;
  left: 50%; top: 12px;
  width: 1px; height: 4px;
  background: var(--line);
}
.tl-lane { display: flex; align-items: stretch; gap: 8px; margin-top: 6px; }
.tl-app .tl-tag { align-self: center; }
.tl-app .tl-track {
  position: relative;
  display: flex;
  gap: 3px;
  height: 46px;
  flex: none;
}
.tl-item {
  flex: none;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 4px 7px;
  overflow: hidden;
  cursor: grab;
  font-size: 11px;
  line-height: 1.35;
  color: #e6dcff;
  background: linear-gradient(180deg, rgba(155,108,255,.45), rgba(124,58,237,.3));
  border: 1px solid rgba(155,108,255,.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tl-item b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-item small { color: rgba(230,220,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-item.sel { outline: 2px solid var(--teal-lite, #5eead4); outline-offset: 1px; }
.tl-item.drag { opacity: .45; }
.tl-item.st-queued, .tl-item.st-submitting { background: repeating-linear-gradient(135deg, rgba(120,130,160,.18) 0 8px, rgba(120,130,160,.1) 8px 16px); border-color: var(--line); color: var(--muted); }
.tl-item.st-waiting_node { background: repeating-linear-gradient(135deg, rgba(244,194,107,.2) 0 8px, rgba(244,194,107,.08) 8px 16px); border-color: rgba(244,194,107,.5); color: var(--amber); }
.tl-item.st-generating { background: linear-gradient(90deg, rgba(42,208,200,.25), rgba(59,110,245,.25)); border-color: rgba(42,208,200,.55); color: var(--teal-lite, #5eead4); animation: tl-pulse 1.6s infinite; }
.tl-item.st-failed { background: rgba(255,122,138,.14); border-color: rgba(255,122,138,.55); color: var(--rose); }
.tl-empty { color: var(--faint); font-size: 12.5px; align-self: center; padding: 0 6px; white-space: nowrap; }
.tl-head {
  position: absolute;
  top: 4px; bottom: 4px;
  width: 2px;
  margin-left: 50px; /* 8px 内边距 + 42px 轨道标签 */
  background: var(--rose);
  pointer-events: none;
  box-shadow: 0 0 6px var(--rose);
}

@media (max-width: 900px) {
  .tl-stage { grid-template-columns: 1fr; }
}