/*
 * LTX Director 導演介面樣式（nmstudio #263，父 #257 切版一之 6）
 *
 * 時間軸為深色介面（嵌在淺色後台中），深色調色盤集中定義為 --ltx-* 變數，
 * 其餘類別一律走 var()，不散落 hex（動態幾何 left%/width% 例外，由 JS 計算）。
 * 強調色沿用全站 --primary-color。
 */
/* #312：配色對齊系統主題（淺色 + teal），原本 ComfyUI 深色不符主題 → 改用與新系統 ltx.css 同一套淺色 palette */
:root {
    --ltx-surface: #f3f8f7;
    --ltx-track-bg: #e9f1ef;
    --ltx-block-bg: #ffffff;
    --ltx-block-audio-bg: rgba(0, 146, 107, 0.12);
    --ltx-block-motion-bg: rgba(89, 184, 159, 0.16);
    --ltx-border: #cfe0db;
    --ltx-line: #bcdcd5;
    --ltx-text: #2c3e50;
    --ltx-text-dim: #5c7a73;
    --ltx-text-faint: #9aa7a3;
    --ltx-marker-text: #ffffff;
    --ltx-radius: 6px;
}

/* ---- 容器 ---- */
.ltx-director-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 8px);
    flex: 1;
    min-height: 0;
}

.ltx-director-stage {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--spacing-sm, 8px);
    background: var(--ltx-surface);
    border: 1px solid var(--ltx-border);
    border-radius: var(--border-radius-sm, 6px);
}

.ltx-director-placeholder {
    padding: var(--spacing-md, 12px);
    color: var(--ltx-text-dim);
    line-height: 1.7;
}

.ltx-director-nodelist {
    margin-top: var(--spacing-sm, 8px);
    font-size: 12px;
    opacity: 0.8;
}

/* ---- 模式切換列（由 layout-editor 插入於 .layout-editor-body）---- */
.ltx-mode-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    padding: 6px 10px;
    border-bottom: 1px solid var(--ltx-border);
}

.ltx-mode-badge {
    font-weight: 600;
}

/* ---- 共用：軌道、區塊 ---- */
.ltx-track { position: relative; }

.ltx-ruler {
    position: relative;
    height: 24px;
    border-bottom: 1px solid var(--ltx-border);
    font-size: 10px;
    color: var(--ltx-text-dim);
}

.ltx-ruler-tick {
    position: absolute;
    bottom: 2px;
    transform: translateX(-50%);
    white-space: nowrap;
    /* left% 由 JS 動態設定 */
}

.ltx-ruler-mark {
    display: block;
    width: 1px;
    height: 6px;
    margin: 0 auto 2px;
    background: var(--ltx-line);
}

.ltx-lane {
    position: relative;
    margin-top: 4px;
    background: var(--ltx-track-bg);
    border-radius: var(--ltx-radius);
    overflow: hidden;
}

.ltx-frames-track { height: 92px; }
.ltx-prompts-track { height: 56px; }
.ltx-audio-track,
.ltx-motion-track { height: 44px; }

.ltx-lane--disabled { opacity: 0.45; }

.ltx-lane-label {
    position: absolute;
    top: 2px;
    left: 6px;
    z-index: 3;                       /* 在關鍵影格之上，避免被 keyframe 蓋住看不清 */
    pointer-events: none;
    font-size: 10px;
    font-weight: 600;
    color: var(--ltx-text-faint);
    /* #597：加淺底小 chip，讓標籤壓在影格上仍可讀（原本與 keyframe 重疊糊成一團）*/
    background: var(--ltx-track-bg);
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.3;
}

/* #597：新增軌鈕原本無樣式 → 預設 button 佔正常流，在 44px 矮軌把下方空軌提示往下擠、
   被 .ltx-lane overflow:hidden 裁掉（文字跑出範圍）。改絕對定位移出流，置於左下角。 */
.ltx-lane-add {
    position: absolute;
    left: 6px;
    bottom: 4px;
    z-index: 3;
    width: 18px;
    height: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    color: var(--ltx-text-dim);
    background: var(--ltx-block-bg);
    border: 1px solid var(--ltx-border);
    border-radius: 4px;
    cursor: pointer;
}
.ltx-lane-add:hover { color: var(--primary-color, #4db8a8); border-color: var(--primary-color, #4db8a8); }

.ltx-track-empty {
    /* #597：填滿軌高、垂直置中、單行省略，確保提示不溢出矮軌（原本 8px 上下 padding + 換行會被裁）*/
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 8px 0 56px;
    font-size: 12px;
    color: var(--ltx-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ltx-global-prompt {
    position: absolute;
    top: 2px;
    right: 6px;
    max-width: 60%;
    font-size: 10px;
    color: var(--ltx-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 關鍵影格（影像軌）---- */
.ltx-keyframe {
    position: absolute;
    top: 4px;
    bottom: 4px;
    min-width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--ltx-border);
    border-radius: var(--ltx-radius);
    background: var(--ltx-block-bg);
    /* left% / width% 由 JS 動態設定 */
}

.ltx-keyframe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ltx-keyframe .fas {
    font-size: 18px;
    color: var(--ltx-text-dim);
}

.ltx-kf-marker {
    position: absolute;
    top: 2px;
    left: 2px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    background: var(--primary-color, #4db8a8);
    color: var(--ltx-marker-text);
}

/* ---- 通用區塊（prompt / audio / motion）---- */
.ltx-block {
    position: absolute;
    top: 18px;
    bottom: 4px;
    min-width: 18px;
    box-sizing: border-box;
    padding: 2px 6px;
    overflow: hidden;
    border: 1px solid var(--ltx-border);
    border-radius: var(--ltx-radius);
    background: var(--ltx-block-bg);
    font-size: 11px;
    color: var(--ltx-text);
    white-space: nowrap;
    text-overflow: ellipsis;
    /* left% / width% 由 JS 動態設定 */
}

.ltx-block--audio { background: var(--ltx-block-audio-bg); }
.ltx-block--motion { background: var(--ltx-block-motion-bg); }

/* ===== 切版二/三：可編輯 ===== */

/* 工具列（新增/儲存/生成）+ 未儲存標記 */
.ltx-toolbar { display: flex; gap: 6px; align-items: center; }
.ltx-dirty { margin-left: 6px; font-style: normal; font-size: 11px; color: var(--primary-color, #4db8a8); }

/* 全域設定列 + 欄位 */
.ltx-globals {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
    padding: 6px 2px;
}
.ltx-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ltx-text-dim); }
.ltx-field > span { font-size: 10px; color: var(--ltx-text-faint); }
.ltx-field-grow { flex: 1 1 220px; }
.ltx-field input,
.ltx-field select,
.ltx-field textarea {
    background: var(--ltx-track-bg); color: var(--ltx-text);
    border: 1px solid var(--ltx-border); border-radius: var(--ltx-radius);
    padding: 4px 6px; font-size: 12px;
}
.ltx-field input[type="number"] { width: 84px; }
.ltx-field textarea { resize: vertical; min-height: 48px; }

/* 影格：可拖曳 + 選取 + 拖圖回饋 + 右緣 resize handle */
.ltx-keyframe { cursor: grab; user-select: none; touch-action: none; }
.ltx-keyframe:active { cursor: grabbing; }
.ltx-keyframe.ltx-selected { border-color: var(--primary-color, #4db8a8); box-shadow: 0 0 0 1px var(--primary-color, #4db8a8); }
.ltx-keyframe.drag-over { outline: 2px dashed var(--primary-color, #4db8a8); outline-offset: -2px; }
.ltx-kf-resize {
    position: absolute; top: 0; right: 0; width: 8px; height: 100%;
    cursor: ew-resize; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18));
}

/* 下方檢視器（不顯示圖片） */
.ltx-inspector {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 10px; background: var(--ltx-surface);
    border: 1px solid var(--ltx-border); border-radius: var(--border-radius-sm, 6px);
}
.ltx-inspector--empty { color: var(--ltx-text-faint); font-size: 12px; }
.ltx-inspector-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ltx-text); }
.ltx-inspector-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
/* #312：inspector 為直向 flex，.ltx-field-grow 的 flex:1 1 220px 會把「本段 Prompt」直向撐高
   → textarea 一大片留白、長度/型別列被推遠。inspector 內改自然高度，讓欄位列緊貼 prompt。 */
.ltx-inspector .ltx-field-grow { flex: 0 0 auto; }
.ltx-inspector .ltx-field-grow textarea { min-height: 64px; }
.ltx-imgname { font-size: 11px; color: var(--ltx-text-dim); font-weight: 400; }
.ltx-inspector .link-btn {
    background: none; border: none; cursor: pointer; font-size: 12px;
    color: var(--primary-color, #4db8a8); padding: 0;
}
.ltx-inspector .link-btn.danger { color: #e06a6a; }

/* 右鍵選單 */
.ltx-ctxmenu {
    position: fixed; z-index: 10000; min-width: 168px; margin: 0; padding: 4px 0;
    list-style: none; background: var(--ltx-surface); color: var(--ltx-text);
    border: 1px solid var(--ltx-border); border-radius: var(--ltx-radius);
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
.ltx-ctxmenu li { padding: 6px 14px; font-size: 13px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.ltx-ctxmenu li:hover { background: var(--ltx-block-bg); }
.ltx-ctxmenu li.danger { color: #e06a6a; }

/* Toast */
.ltx-toast {
    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
    z-index: 10001; padding: 10px 18px; border-radius: 6px;
    background: var(--ltx-surface); color: var(--ltx-text); border: 1px solid var(--ltx-border);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4); opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.ltx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* #312：LTX 導演啟用時，隱藏該工作流 view 內非 LTX 的區段（對齊新系統：LTX 只顯示導演面板）。
   導演面板自帶生成按鈕與完整介面 → 隱藏 controls-footer / 影片預覽 / 生成輸出 / 參數標題 / 狀態卡。 */
.view-content.ltx-director-active .controls-footer,
.view-content.ltx-director-active .video-preview-section,
.view-content.ltx-director-active .generated-content-wrapper,
.view-content.ltx-director-active .params-section-header,
.view-content.ltx-director-active .workflow-status-card { display: none !important; }

/* #339：LTX 導演啟用 → 隱藏右側住民面板、中央延展滿版（對齊新系統 directorFull）。
   #right-sidebar 是 .main-content 的 flex 兄弟（非 .view-content 後代）→ 用 :has() 上鉤。
   kiosk Chrome 支援 :has()，class 移除即自動還原三欄。 */
.main-content:has(.view-content.active.ltx-director-active) #right-sidebar { display: none !important; }
.main-content:has(.view-content.active.ltx-director-active) #center-panel { flex: 1 1 auto; }

/* #357：LTX 導演掛載時把面板「搬出」受限容器 —— 原 .parameters-container max-height:400px 把導演面板
   截成太矮；外層 .parameters-section / .generation-controls 又加 padding/border/bg chrome。
   解除高度上限 + 去 chrome，讓導演面板撐滿中央（搭配 #339 隱右側欄、中央延展）。 */
.parameters-container.ltx-director-mounted {
  max-height: none !important;
  overflow: visible !important;
  display: block !important;     /* 蓋掉 grid 版本，避免時間軸被塞進欄 */
}
.view-content.ltx-director-active .parameters-section,
.view-content.ltx-director-active .generation-controls {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.view-content.ltx-director-active .ltx-director-panel {
  min-height: calc(100vh - 170px);   /* 給時間軸/檢視器足夠垂直空間，不再太矮 */
}

/* #10362 LTX 元素顯示/隱藏控制列（編輯佈局用）：走 ltx token，不硬編色 */
.ltx-visibility-controls {
  margin: 0 0 10px; padding: 10px 12px;
  background: var(--ltx-surface, #f6fbfa);
  border: 1px solid var(--ltx-border, #dce3e1);
  border-radius: var(--ltx-radius, 8px);
}
.ltx-visibility-head {
  font-size: 13px; font-weight: 600; margin-bottom: 8px;
  color: var(--ltx-text, #2c3e50);
}
.ltx-visibility-list {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.ltx-visibility-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ltx-text, #2c3e50); cursor: pointer;
}
.ltx-visibility-item input { cursor: pointer; }