/* 照片轉 3D:目錄選擇、進度條、模型舞台。只有 image/model3d.html 引用。
   ★ 模型庫的卡片沿用 `.songs*`(在 form.css,這一頁本來就載得到)。 */

/* ---------- 目錄選擇 ---------- */

.dirpick {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  overflow: hidden;
}

.dirpick__crumb {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dirpick__list { max-height: 220px; overflow-y: auto; }

.dirpick__row {
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dirpick__row:hover { background: var(--surface); }
.dirpick__name { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 500;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dirpick__count { flex: none; font-size: var(--fs-2xs); color: var(--text-dim); }
.dirpick__empty { margin: 0; padding: 12px; font-size: var(--fs-xs); color: var(--text-dim); }

/* ---------- 結果區 ---------- */

.m3d { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }

.m3d-head { display: flex; align-items: center; gap: 10px; margin: 0; }
.m3d-head__name { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 700; }

/* ★ 高度用 vh 綁在視窗上。用 % 的話會落進「列高取決於內容、內容又想以列高
     為上限」的循環,實測完全沒有作用(出圖卡那條地雷同一個成因)。 */
.m3d-stage {
  height: 62vh;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  overflow: hidden;
}

.m3d-stage canvas { display: block; width: 100%; height: 100%; }

/* ---------- 進度 ---------- */

.m3d-progress { padding: 16px; border: 1px solid var(--line);
                border-radius: var(--radius); background: var(--surface); }
.m3d-progress__stage { margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 500; }
.m3d-progress__meta { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--text-dim); }

.m3d-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-soft);
  overflow: hidden;
}

.m3d-bar__fill {
  display: block;
  height: 100%;
  background: var(--brand-warm);
  /* ★ 進度只會往前(後端壓住不讓它倒退),所以轉場只需要單向的平滑 */
  transition: width 0.4s ease-out;
}