/**
 * workspace.css — 四個工作模式共用的骨架。
 *
 * 模式列刻意不寫進 nav.css:那支檔案的職責是全站導覽,
 * 不含任何頁面專屬樣式,才能被每一頁原樣引用。
 */

.ws {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 26px 96px;
}

/* ---------- 左右欄 ---------- */

.ws-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.ws-panel {
  flex: none;
  width: 420px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.ws-result {
  flex: 1;
  min-width: 0;   /* 沒有這行,內部的圖會把 flex 項目撐爆 */
  /* 右欄拉到與委託單同高。★ 用 align-self 而不是 .ws-body 的 align-items:
   * stretch —— 後者雙向,出圖多張時左邊的委託單卡也會被拉成空蕩蕩的長條。 */
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* 直接子層接手高度:generate/inpaint 是 .grid,edit/ppt 的空狀態直接掛這層 */
.ws-result > .grid,
.ws-result > .grid__empty {
  flex: 1;
  min-height: 0;
}

/* .grid 沒有其他樣式,改 flex 欄向與原本的區塊堆疊等價(卡片無外距、
 * flex-grow 預設 0),只為了讓空狀態長到滿。 */
/* 出圖多張時整欄可捲 —— 每張都受 max-height 限制,不會把頁面撐長 */
.grid { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.grid > .grid__empty { flex: 1; }

/* ---------- 底部風格條 ---------- */

.ws-styles {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ---------- 窄螢幕 ---------- */

@media (max-width: 940px) {
  .ws-body { flex-direction: column; }
  .ws-panel { width: 100%; }
  .ws-result { width: 100%; }
}

@media (max-width: 620px) {
  .ws { padding: 0 18px 72px; }
}

/* 空狀態帶主視覺 —— 進頁面時右側原本是一大塊只有一行虛線提示的空白,
 * 質感就是在這裡掉的。圖是首頁那張卡片主視覺,概念延續。
 *
 * ★ 圖不能鋪滿到文字底下:底部用遮罩淡出,留一段乾淨的落腳處給提示文字,
 *   否則對比會落在圖的隨機亮度上,量不準也讀不清。
 * ★ 暗色沿用專案既有的代償手法(--art-blend: screen + --art-opacity),
 *   img/ 那幾張都是為暖白底生成的。 */
.grid__empty {
  position: relative;
  /* z-index: 0 讓這裡成為堆疊脈絡,底下的 ::before 才壓得到 -1 去。
   * 不設的話絕對定位的偽元素會畫在行內文字**之上**,把提示蓋掉。 */
  z-index: 0;
  display: grid;
  align-content: end;
  min-height: 340px;
  padding: 0 24px 40px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-dim);
  text-align: center;
  overflow: hidden;
}

.grid__empty::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* ★ 底部留白用固定 px 不用 %。右欄現在會拉到與委託單同高(700~900px 不等),
   *   34% 在高一點的版面上等於 280px 的空洞,圖與提示文字會斷成兩截。 */
  inset: 0 0 96px 0;
  background: url("../img/card-image.jpg") center 32% / cover no-repeat;
  opacity: var(--art-opacity);
  mix-blend-mode: var(--art-blend);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
}


/* ★ 不要鎖 16:9 —— 這裡顯示的是**使用者自己的圖**,直式的被 cover 裁掉之後
 * 看起來像「工具把我的圖放大裁掉了」(實測有人這樣誤判)。
 * ★ 但也不能讓它照原比例無限長高:右欄已經與左邊的委託單同高,一張直式圖
 *   會把整頁撐長,圖越多越亂。改成**在那個高度內完整顯示**(contain),
 *   長寬比保留、版面高度固定。 */
.grid__item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* ★ 上限用 vh 不用 % —— 百分比的 max-height 需要父層有「確定」的高度,
 *   而右欄的高度是 align-self: stretch 從那一列推出來的,算版面時解不出來
 *   (實測寫 100% 完全沒有作用,圖照樣把右欄撐到比左欄高 371px)。
 *   用視窗高度當上限,版面高度就與圖的比例無關了。 */
.grid__item img {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;   /* 被上限夾到時完整顯示,不裁切 */
  background: var(--surface-soft);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
}

.job {
  display: grid;
  place-content: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  padding: 20px;
  text-align: center;
}

.job__msg { font-size: var(--fs-sm); color: var(--text-dim); }

/* 暖橘系文字在當前主題下可讀的版本。這個專案沒有紅色,凡是要用暖橘寫字
 * ——失敗訊息、送出前的必要性提示、字數超出建議範圍、強調段——一律走這個
 * 代幣,不要裸用 --brand-warm。
 * 理由是同一個:--brand-warm 原色對淺色 --surface 只有 2.36:1(實測),
 * 比 --text-dim 的 3.74:1 還低 —— 套上「警告」之後文字反而比常態更難讀,
 * 狀態切換讓可讀性倒退,這比差 4.5:1 那個門檻更難接受。
 * 淺色用加深版 #b05f08(與 --brand-warm 同色相 31°,只降明度)達 4.68:1;
 * 暗色主題原色本身已 7.56:1,代幣直接指回 --brand-warm。
 * ★ 命名刻意是「暖橘系文字」而不是「警告色」:先前分成 warn/accent 兩套
 *   是假的區分,問題與解法完全相同,分開只會讓下一處遺漏。
 * 定義在這裡而非 base.css —— base.css 是本計畫零改動的三支檔案之一。 */
:root {
  --warm-ink: #b05f08;
}

:root[data-theme="dark"] {
  --warm-ink: var(--brand-warm);
}

.job--failed .job__msg { color: var(--warm-ink); }

.job__bar {
  display: block;
  width: 160px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
  overflow: hidden;
}

/* ★ 知道確切百分比時停掉滑動動畫、寬度由 JS 指定。
 * 不定動畫在「不知道還要多久」時是對的,但一旦知道就該說出來 ——
 * 音樂一首要 5~11 分鐘,滑動的橫條跟沒有回饋差不多。 */
.job__fill--known { animation: none; transition: width 0.4s ease; }

/* 單色進度條。★ 不要用 warm→cool 漸層,中點會出橄欖綠 */
.job__fill {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: var(--brand-warm);
  animation: job-slide 1.1s ease-in-out infinite;
}

@keyframes job-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ---- 圖庫(gallery.js)---- */


/* ---------- 風格按鈕(點開對話框) ---------- */

.pickbtn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  text-align: left;
  transition: border-color 0.18s ease;
}

.pickbtn:hover { border-color: var(--line-strong); }

.pickbtn__thumb {
  flex: none;
  width: 68px;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  object-fit: cover;
  opacity: var(--art-opacity);
  mix-blend-mode: var(--art-blend);
}

.pickbtn__text { flex: 1; min-width: 0; }

.pickbtn__name {
  display: block;
  font-size: var(--fs-md);
  color: var(--text);
}

.pickbtn__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.pickbtn__cue {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* ---------- 圖庫按鈕 ---------- */

.gal { margin-top: 10px; }

/* 「儲存風格」貼在圖庫下面。★ 間距比 .gal 的 10px 窄 —— 兩顆是同一組
 * (都是「這次生成之後可以做的事」),離太開會看起來像兩件不相干的功能。 */
.mystyles { margin-top: 6px; }

.btn--wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.btn__count {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}