/* ══════════════════════════════════════
   中间操作区 (main-console)
   ══════════════════════════════════════ */

.main-console {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-color);
}

/* 操作区内容滚动容器 */
.console-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* ── 页面标题 ── */
.console-page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

/* ── Model Selector 卡片 ── */
.config-box {
  background: var(--side-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
}

.config-box-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.config-box-row .input-group { flex: 1; }

/* ── 模式 Tab 条 ── */
.tool-tabs {
  display: inline-flex;
  background: var(--card-bg);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  align-self: flex-start;
  gap: 2px;
}

.tab-btn {
  padding: 7px 14px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: 0.15s;
}

.tab-btn.active       { background: var(--accent-blue);   color: #fff; }
.tab-btn.active.nova  { background: var(--accent-orange);  color: #fff; }
.tab-btn.active.wan   { background: var(--accent-purple);  color: #fff; }

/* ── 上传卡片 ── */
.upload-card {
  background: var(--card-bg);
  border: 2px dashed var(--border-color);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 110px;
}

.upload-card:hover {
  border-color: var(--accent-blue);
  background: rgba(83,155,245,0.05);
}

.upload-card .material-symbols-rounded { font-size: 28px; color: var(--text-secondary); }
.upload-card .upload-label { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.upload-card small { font-size: 11px; color: var(--text-secondary); }

/* ── Nova Shot Builder ── */
#shots-container { display: flex; flex-direction: column; gap: 10px; }

.shot-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
}

.shot-badge {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(232,164,64,.15);
  color: var(--accent-orange);
  font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.shot-body { display: flex; flex-direction: column; gap: 8px; }
.shot-body textarea { min-height: 56px; font-size: 12px; }

.shot-img-row { display: flex; align-items: center; gap: 8px; }

.shot-img-label {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px dashed var(--border-color);
  cursor: pointer;
  font-size: 11px; color: var(--text-secondary);
  background: var(--side-bg);
  transition: 0.15s;
  white-space: nowrap;
}
.shot-img-label:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
.shot-img-label .material-symbols-rounded { font-size: 14px; }

.shot-img-name { font-size: 11px; color: var(--text-secondary); flex: 1; }

.shot-remove-btn {
  background: none; border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 3px;
  border-radius: 5px;
  transition: 0.15s;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.shot-remove-btn:hover { color: var(--danger); background: rgba(248,81,73,.1); }
.shot-remove-btn .material-symbols-rounded { font-size: 16px; }

.btn-add-shot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px dashed var(--accent-orange);
  background: rgba(232,164,64,.05);
  color: var(--accent-orange);
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: 0.15s;
  width: 100%;
}
.btn-add-shot:hover { background: rgba(232,164,64,.12); }
.btn-add-shot .material-symbols-rounded { font-size: 16px; }

/* ── 底部固定参数区 ── */
.model-params-bar {
  flex-shrink: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--border-color);
  background: var(--side-bg);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.params-selects {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}

.param-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 90px;
}

.param-select-wrap label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.param-select-wrap select,
.param-select-wrap input[type="number"] {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 7px;
}

/* ── 生成按钮 ── */
.btn-create {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn-create:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-create:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-create.nova-btn { background: var(--accent-orange); }
.btn-create.wan-btn  { background: var(--accent-purple); }
.btn-create .material-symbols-rounded { font-size: 17px; }

/* ── 模型徽章（header 右侧） ── */
.model-badge {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
}
.model-badge.veo  { border-color: #539bf5; color: #539bf5; }
.model-badge.nova { border-color: #e8a440; color: #e8a440; }
.model-badge.wan  { border-color: #a78bfa; color: #a78bfa; }

/* ══════════════════════════════════════
   Wan 2.6 · Image to Video UI（对齐参考截图）
   说明：仅对 .wan-itv / .wan-params 生效，避免影响其它页面
   ══════════════════════════════════════ */

.wan-itv {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.wan-itv-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-primary);
}

/* 顶部模式 tabs（Start / Between / Reference） */
.itv-mode-tabs {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.02);
}

.itv-mode-tab {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}

.itv-mode-tab:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
}

.itv-mode-tab.active {
  border-color: rgba(83,155,245,0.85);
  box-shadow: 0 0 0 1px rgba(83,155,245,0.35) inset;
  color: var(--text-primary);
}

/* 生成配置卡片 */
.itv-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: visible;
}

.itv-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.itv-upload-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.itv-upload-row.between {
  grid-template-columns: 1fr auto 1fr;
}

.itv-upload-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.itv-upload-tile {
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 12px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  transition: 0.15s;
}

.itv-upload-tile:hover {
  border-color: rgba(83,155,245,0.45);
  background: rgba(83,155,245,0.05);
}

.itv-upload-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

.itv-upload-icon .material-symbols-rounded {
  font-size: 26px;
  color: var(--text-secondary);
}

.itv-upload-main {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.itv-upload-sub {
  font-size: 12px;
  color: rgba(139,148,158,0.9);
}

.itv-upload-filename {
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itv-mid-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(139,148,158,0.7);
}
.itv-mid-arrow .material-symbols-rounded { font-size: 20px; }

.itv-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
}

.itv-prompt {
  width: 100%;
  min-height: 84px;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  padding: 2px;
  overflow-y: auto;
}

.itv-prompt::placeholder { color: rgba(139,148,158,0.85); }
.itv-prompt[disabled] { opacity: 0.6; cursor: not-allowed; }

.itv-ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.itv-ai-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.itv-count {
  color: rgba(139,148,158,0.9);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Wan bottom params：下拉 + Create（固定底部） */
.wan-params {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.wan-params .params-selects {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: center;
}

.wan-params .param-select-wrap {
  min-width: 0;
}

.wan-params .param-select-wrap label {
  display: block;
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 2px;
}

.wan-params .param-select-wrap select,
.wan-params .param-select-wrap input[type="number"] {
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 12px;
  background: #1c2128;
  border: 1px solid rgba(255,255,255,0.07);
  color: #fff;
}

.wan-params .param-select-wrap select option {
  background: #1c2128;
  color: #fff;
}

.wan-params .btn-create {
  width: 100%;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
}

/* 在中间固定宽度列里，padding 更贴近参考截图 */
.console-scroll.wan-console {
  padding: 14px 14px 14px;
}

/* ══════════════════════════════════════
   AI Video Editor (VACE) — wan2.1-vace-plus
   ══════════════════════════════════════ */

.vace-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.vace-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vace-mode-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}

.vace-mode-tab .material-symbols-rounded { font-size: 18px; }

.vace-mode-tab:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}

.vace-mode-tab.active {
  border-color: var(--accent-purple);
  background: rgba(167,139,250,0.12);
  color: var(--accent-purple);
}

.vace-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: visible;
}

.vace-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vace-upload-tile {
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 20px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: 0.15s;
}

.vace-upload-tile:hover {
  border-color: rgba(167,139,250,0.45);
  background: rgba(167,139,250,0.05);
}

.vace-upload-icon .material-symbols-rounded {
  font-size: 32px;
  color: var(--text-secondary);
}

.vace-upload-main { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.vace-upload-sub { font-size: 12px; color: var(--text-secondary); }
.vace-upload-filename { font-size: 11px; color: var(--text-secondary); }

.vace-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
}

.vace-prompt-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.vace-prompt {
  width: 100%;
  min-height: 100px;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  padding: 8px;
  overflow-y: auto;
}

.vace-prompt::placeholder { color: rgba(139,148,158,0.85); }

.vace-prompt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vace-ref-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px dashed var(--border-color);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s;
}

.vace-ref-btn:hover {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

.vace-count {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.vace-scale-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.btn-create.vace-btn { background: var(--accent-purple); }

/* ── Shared toolbar pieces (reused in modal) ──────────────── */
.vace-local-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vace-local-toolbar-group label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.vace-local-toolbar-group input[type="range"] {
  width: 90px;
  accent-color: var(--accent-purple);
}
.vace-brush-size-value {
  font-size: 12px;
  color: var(--text-primary);
  min-width: 24px;
  font-variant-numeric: tabular-nums;
}
.vace-local-reset-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s;
}
.vace-local-reset-btn:hover { border-color: var(--accent-purple); color: var(--accent-purple); }
.vace-local-reset-btn .material-symbols-rounded { font-size: 18px; }

/* ── Draw Mask field (inside video_edit panel) ─────────────── */
.vace-mask-field {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vace-mask-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vace-mask-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.vace-mask-hint-text {
  font-size: 11px;
  color: var(--text-secondary);
}
.vace-mask-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vace-mask-thumb-wrap {
  flex: 1;
  min-height: 64px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
}
.vace-mask-thumb-icon { font-size: 26px; color: var(--text-secondary); opacity: 0.4; }
.vace-mask-thumb-label { font-size: 11px; color: var(--text-secondary); }
.vace-mask-thumb-wrap img { width: 100%; height: 64px; object-fit: contain; display: block; }
.vace-draw-mask-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent-purple);
  background: rgba(167,139,250,0.1);
  color: var(--accent-purple);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.vace-draw-mask-btn:hover { background: rgba(167,139,250,0.22); }
.vace-draw-mask-btn .material-symbols-rounded { font-size: 18px; }

/* ── Mask Modal Overlay ────────────────────────────────────── */
.vace-mask-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vace-mask-modal {
  background: var(--side-bg, #141424);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 100%;
  max-width: 920px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 96px rgba(0,0,0,0.55);
}
.vace-mask-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.vace-mask-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.vace-mask-modal-title .material-symbols-rounded { font-size: 20px; color: var(--accent-purple); }
.vace-mask-modal-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 2px;
}
.vace-mask-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: 0.15s;
  flex-shrink: 0;
}
.vace-mask-modal-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.vace-mask-modal-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.vace-mask-modal-canvas-area {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #0b0b0b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vace-mask-modal-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 14px;
}
.vace-mask-canvas-stack {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
#vace-mask-bg-canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 60vh;
  pointer-events: none;
}
#vace-mask-draw-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.vace-mask-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}
.vace-mask-footer-hint { font-size: 12px; color: var(--text-secondary); }
.vace-mask-footer-actions { display: flex; gap: 10px; }
.vace-mask-cancel-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: 0.15s;
}
.vace-mask-cancel-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.vace-mask-confirm-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  background: var(--accent-purple);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}
.vace-mask-confirm-btn:hover { opacity: 0.88; }
.vace-mask-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vace-mask-confirm-btn .material-symbols-rounded { font-size: 18px; }

/* Spin animation for loading indicator */
@keyframes vace-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.vace-spin { animation: vace-spin 0.9s linear infinite; display: inline-block; }

/* ══════════════════════════════════════
   AI Image Editor (wan2.5-i2i-preview)
   ══════════════════════════════════════ */

.i2i-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.i2i-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: visible;
}

.i2i-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.i2i-upload-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.i2i-upload-tile {
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 20px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: 0.15s;
}

.i2i-upload-tile:hover {
  border-color: rgba(167,139,250,0.45);
  background: rgba(167,139,250,0.05);
}

.i2i-upload-icon .material-symbols-rounded {
  font-size: 32px;
  color: var(--text-secondary);
}

.i2i-upload-main { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.i2i-upload-sub { font-size: 12px; color: var(--text-secondary); }
.i2i-upload-filename { font-size: 11px; color: var(--text-secondary); }

.i2i-uploaded-list {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.i2i-uploaded-item {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.i2i-uploaded-label { font-weight: 600; color: var(--text-primary); }
.i2i-uploaded-name { flex: 1; }
.i2i-uploaded-ok { font-size: 11px; color: var(--success); }

.i2i-url-section {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}

.i2i-url-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  text-align: left;
}

.i2i-url-toggle:hover { background: rgba(255,255,255,0.04); }
.i2i-url-toggle .material-symbols-rounded { font-size: 20px; color: var(--text-secondary); }

.i2i-url-body {
  display: none;
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
  flex-direction: column;
  gap: 10px;
}

.i2i-url-section.open .i2i-url-body { display: flex; }

.i2i-url-list { display: flex; flex-direction: column; gap: 8px; }

.i2i-url-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.i2i-url-label {
  flex: 0 0 42px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.i2i-url-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 8px;
  background: #1c2128;
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-primary);
}

.i2i-url-input::placeholder { color: rgba(139,148,158,0.7); }

.i2i-url-remove {
  flex-shrink: 0;
  padding: 4px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s;
}

.i2i-url-remove:hover {
  color: var(--danger);
  background: rgba(248,81,73,0.1);
}

.i2i-url-remove .material-symbols-rounded { font-size: 18px; }

.i2i-url-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px dashed var(--border-color);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s;
  align-self: flex-start;
}

.i2i-url-add:hover {
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}

.i2i-url-add .material-symbols-rounded { font-size: 16px; }

.i2i-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
}

.i2i-prompt-section label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.i2i-prompt {
  width: 100%;
  min-height: 100px;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  padding: 8px;
  overflow-y: auto;
}

.i2i-prompt::placeholder { color: rgba(139,148,158,0.85); }

.i2i-prompt-count {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.i2i-advanced-panel {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}

.i2i-advanced-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  text-align: left;
}

.i2i-advanced-toggle:hover { background: rgba(255,255,255,0.04); }
.i2i-advanced-toggle .material-symbols-rounded { font-size: 20px; color: var(--text-secondary); }

.i2i-advanced-body {
  display: none;
  padding: 14px 16px;
  border-top: 1px solid var(--border-color);
}

.i2i-advanced-panel.open .i2i-advanced-body { display: block; }

.i2i-advanced-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: start;
}

.i2i-fn-select {
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 8px;
  background: #1c2128;
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-primary);
  font-family: inherit;
}

.i2i-fn-select:focus {
  outline: none;
  border-color: var(--accent-purple);
}

.i2i-fn-select option {
  background: #1c2128;
  color: var(--text-primary);
}

.i2i-fn-prompt {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  background: #1c2128;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  color: var(--text-primary);
  resize: vertical;
}

.i2i-fn-prompt::placeholder { color: rgba(139,148,158,0.7); }

.btn-create.i2i-btn { background: var(--accent-purple); }

/* ══════════════════════════════════════
   3D Camera Control 組件
   ══════════════════════════════════════ */

.camera-control-panel {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg);
  overflow: hidden;
  flex-shrink: 0;
}

.camera-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(255,255,255,0.02);
}

.camera-control-icon {
  font-size: 20px;
  color: var(--text-secondary);
  margin-right: 8px;
}

.camera-control-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.camera-control-view-toggle {
  display: inline-flex;
  padding: 2px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-color);
  gap: 2px;
}

.camera-view-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.15s;
}

.camera-view-btn:hover {
  color: var(--text-primary);
}

.camera-view-btn.active {
  background: var(--accent-purple);
  color: #fff;
}

.camera-control-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.camera-slider-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
}

.camera-slider-row .camera-slider-label { grid-column: 1; }
.camera-slider-row .camera-slider-value { grid-column: 2; font-size: 12px; color: var(--text-secondary); }
.camera-slider-row .camera-range { grid-column: 1 / -1; }
.camera-slider-row .camera-range-labels { grid-column: 1 / -1; }

.camera-slider-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.camera-sliders-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.camera-slider-value-distance {
  color: var(--accent-orange);
}

.camera-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-secondary);
  padding: 0 2px;
  margin-top: 2px;
}

/* Range 滑桿通用 */
.camera-range {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-color);
  border-radius: 3px;
  outline: none;
}

.camera-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.15s;
}

.camera-range-azimuth::-webkit-slider-thumb { background: var(--accent-purple); }
.camera-range-azimuth::-moz-range-thumb { background: var(--accent-purple); }
.camera-range-elevation::-webkit-slider-thumb { background: #ec4899; }
.camera-range-elevation::-moz-range-thumb { background: #ec4899; }
.camera-range-distance::-webkit-slider-thumb { background: var(--accent-orange); }
.camera-range-distance::-moz-range-thumb { background: var(--accent-orange); }

.camera-range::-moz-range-track {
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
}

.camera-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.camera-3d-view {
  min-height: 240px;
  height: 240px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.camera-3d-placeholder {
  font-size: 13px;
  color: var(--text-secondary);
}

.camera-prompt-box {
  padding: 10px 12px;
  background: #0d1117;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.camera-prompt-text {
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════
   高级提示词面板 AdvancedPromptPanel
   ══════════════════════════════════════ */

.advanced-prompt-panel {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  flex-shrink: 0;
}

.advanced-prompt-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  text-align: left;
}

.advanced-prompt-toggle:hover {
  background: rgba(255,255,255,0.04);
}

.advanced-prompt-toggle .material-symbols-rounded {
  font-size: 20px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.advanced-prompt-panel.open .advanced-prompt-toggle .material-symbols-rounded {
  transform: rotate(0deg);
}

.advanced-prompt-body {
  display: none;
  padding: 14px 16px;
  border-top: 1px solid var(--border-color);
  flex-direction: column;
  gap: 16px;
}

.advanced-prompt-panel.open .advanced-prompt-body {
  display: flex;
}

.advanced-prompt-audio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-primary);
}

.advanced-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.advanced-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.advanced-section-header > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.btn-add-row, .btn-add-shot-config {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px dashed var(--border-color);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s;
}

.btn-add-row:hover, .btn-add-shot-config:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.btn-add-row .material-symbols-rounded, .btn-add-shot-config .material-symbols-rounded {
  font-size: 16px;
}

.advanced-config-list, .advanced-shot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.advanced-config-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.advanced-config-row .advanced-major-select,
.advanced-config-row .advanced-sub-select {
  flex: 0 0 140px;
  min-width: 0;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 8px;
  background: #1c2128;
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-primary);
}

.advanced-info-wrap {
  position: relative;
  flex-shrink: 0;
}

.advanced-info-icon {
  font-size: 18px !important;
  color: var(--text-secondary);
  cursor: help;
  padding: 4px;
}

.advanced-info-icon:hover {
  color: var(--accent-blue);
}

.advanced-tooltip {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 8px;
  min-width: 220px;
  max-width: 320px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

.advanced-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.advanced-tooltip strong { color: var(--accent-blue); }
.advanced-tooltip em { color: var(--text-secondary); font-size: 11px; }

.advanced-input-wrap {
  flex: 1;
  min-width: 0;
}

.advanced-content-input {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  color: var(--text-primary);
  resize: vertical;
  overflow-y: auto;
}

.advanced-content-input::placeholder {
  color: rgba(139,148,158,0.7);
}

.advanced-remove-btn {
  flex-shrink: 0;
  padding: 4px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s;
}

.advanced-remove-btn:hover {
  color: var(--danger);
  background: rgba(248,81,73,0.1);
}

.advanced-remove-btn .material-symbols-rounded { font-size: 18px; }

/* 镜头块 */
.advanced-shot-block {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.advanced-shot-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.advanced-shot-header label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.advanced-duration-input {
  width: 80px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
  background: #1c2128;
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-primary);
}

.advanced-duration-input.duration-over {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px rgba(248,81,73,0.3);
}

.advanced-remove-shot-btn {
  margin-left: auto;
  padding: 4px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.advanced-remove-shot-btn:hover {
  color: var(--danger);
  background: rgba(248,81,73,0.1);
}

.advanced-shot-configs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.advanced-duration-warn {
  font-size: 12px;
  color: var(--danger);
  min-height: 20px;
  visibility: hidden;
}

.advanced-duration-warn.visible {
  visibility: visible;
}

/* ════════ Upload Chooser Modal ════════ */
.upload-chooser-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.upload-chooser-modal {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px 24px;
  min-width: 320px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.upload-chooser-modal h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text-primary);
}

.upload-chooser-hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.upload-chooser-btns {
  display: flex;
  gap: 12px;
}

.upload-chooser-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 2px dashed var(--border-color);
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: 0.2s;
}

.upload-chooser-btn:hover {
  border-color: var(--accent-blue);
  background: rgba(83,155,245,0.08);
}

.upload-chooser-btn .material-symbols-rounded {
  font-size: 28px;
  color: var(--accent-blue);
}

.upload-chooser-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
}

.upload-chooser-close:hover {
  color: var(--text-primary);
}

/* Asset Picker */
.asset-picker-modal {
  min-width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.asset-picker-modal.asset-picker-square {
  width: 640px;
  height: 640px;
  min-width: 560px;
  min-height: 560px;
  max-width: min(90vw, 720px);
  max-height: min(90vh, 720px);
  padding: 20px 24px;
}

.asset-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.asset-picker-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}

.asset-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.asset-picker-search {
  min-width: 180px;
}

.asset-picker-search .asset-search-input {
  width: 100%;
  min-width: 140px;
}

.asset-picker-hint {
  margin: 0 0 12px;
  flex-shrink: 0;
}

.asset-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  /* 行高仅由「绝对定位子元素」撑开时，部分浏览器会把行算成 0；显式最小行高避免缩成细线 */
  grid-auto-rows: minmax(168px, auto);
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 12px;
  align-items: start;
}

.asset-picker-item {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.2s;
  background: var(--side-bg);
  min-height: 168px;
  width: 100%;
  min-width: 0;
  align-self: start;
}

.asset-picker-item:hover {
  border-color: var(--accent-blue);
}

.asset-picker-item.selected {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(83,155,245,0.3);
}

.asset-picker-thumb {
  position: relative;
  width: 100%;
  height: 140px;
  min-height: 140px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--side-bg);
}

.asset-picker-thumb img,
.asset-picker-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.asset-picker-item:hover .asset-picker-thumb img,
.asset-picker-item:hover .asset-picker-thumb video {
  filter: grayscale(1);
  opacity: 0.6;
}

.asset-picker-hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.2s;
}

.asset-picker-item:hover .asset-picker-hover-overlay {
  opacity: 1;
}

.asset-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: 0.2s;
}

.asset-picker-btn-select {
  background: var(--accent-blue);
  color: #fff;
}

.asset-picker-btn-select:hover {
  filter: brightness(1.1);
}

.asset-picker-btn-detail {
  background: var(--accent-blue);
  color: #fff;
  padding: 8px;
}

.asset-picker-btn-detail .material-symbols-rounded {
  font-size: 22px;
}

.asset-picker-btn-detail:hover {
  filter: brightness(1.1);
}

.asset-picker-name {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  flex-shrink: 0;
}

.asset-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin-top: auto;
}

.asset-picker-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.asset-picker-loading,
.asset-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
}

/* Upload thumbnails (below click area) */
.upload-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.upload-thumbnail {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.upload-thumbnail-inner {
  width: 100%;
  height: 100%;
  background: var(--side-bg);
}

.upload-thumbnail-inner img,
.upload-thumbnail-inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-thumbnail-poster-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 9px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
  padding: 2px;
  box-sizing: border-box;
}

.upload-thumbnail-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
}

.upload-thumbnail-remove:hover {
  background: var(--danger);
}