/**
 * modal.css — 對話框與它裡面的兩種網格(風格、圖庫)。
 *
 * 拆成獨立檔:workspace.css 已經 298 行,加不進去了。
 * 有用到對話框的頁面才引(generate / edit / inpaint / ppt 都有)。
 */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;          /* nav 是 100,要蓋過它 */
  display: grid;
  place-items: center;
  padding: 24px;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--text) 45%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(880px, 100%);
  max-height: min(720px, 88vh);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card-hover);
  overflow: hidden;
}

.modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.modal__title {
  flex: 1;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.modal__close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.modal__close:hover {
  color: var(--text);
  background: var(--surface-soft);
}

.modal__body {
  flex: 1;
  min-height: 0;        /* 沒有這行 overflow 不會生效,內容會把框撐破 */
  overflow-y: auto;
  padding: 18px;
}

.modal__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

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

/* ---------- 風格網格 ---------- */

.pick {
  display: grid;
  /* ★ 固定三欄不用 auto-fill:880px 的對話框下 auto-fill 會排到四欄、
   *   每張只剩約 200px,風格縮圖與圖庫成品都看不清楚。三欄約 268px。
   *   minmax(0, 1fr) 的 0 不能省 —— 預設 min-width: auto 會讓內容(圖)
   *   把欄位撐寬,整列就溢出了。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pick__item {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  text-align: left;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.pick__item:hover { transform: translateY(-2px); }

/* 選中態:單色實邊。★ 不要用 warm→cool 漸層框,中點會出橄欖綠 */
.pick__item[aria-checked="true"] {
  border-color: var(--brand-warm);
  box-shadow: inset 0 0 0 1px var(--brand-warm);
}

/* ★ 22 種風格裡有兩種不是 16:9(手帳時間軸 1:1、手繪導覽地圖 7:9),
 * cover 會把它們裁掉一半。用 contain 讓縮圖忠實反映該風格的實際版面。 */
.pick__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--surface-soft);
  opacity: var(--art-opacity);
  mix-blend-mode: var(--art-blend);
}

.pick__body { padding: 9px 11px 11px; }

/* PPT 的「跟隨簡報」那一格沒有自己的圖。用與縮圖相同的 16:9 佔位,
 * 不然它會矮一截、整列跟著歪。 */
.pick__blank {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-bottom: 1px dashed var(--line-strong);
  background: var(--surface-soft);
  font-size: var(--fs-lg);
  color: var(--text-dim);
}

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

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

/* ---------- 圖庫網格 ---------- */

.shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.shelf__item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* 格子維持等高才排得整齊,但用 contain 不裁切 —— 圖庫裡現在什麼比例都有
 * (修改與局部重繪的輸出跟著來源圖走)。 */
.shelf__item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--surface-soft);
}

.shelf__meta {
  display: block;
  padding: 7px 9px 8px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* 選圖模式:整格是一顆按鈕。用 display: block 讓裡面的圖照常填滿,
 * 邊框由 .shelf__item 提供,這裡只負責可點與 hover 回饋。 */
.shelf__use {
  display: block;
  width: 100%;
  transition: opacity 0.18s ease;
}

.shelf__use:hover { opacity: 0.8; }

/* 刪除鈕常駐而非 hover 才出現 —— 觸控裝置沒有 hover,
 * 而且先前量過:hover 才顯示的東西在捲軸上根本不會重繪 */
.shelf__del {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 62%, transparent);
  color: var(--bg);
  font-size: var(--fs-xs);
  line-height: 1;
}

.shelf__del:hover {
  background: var(--text);
}

.modal__empty {
  padding: 48px 20px;
  color: var(--text-dim);
  text-align: center;
}

@media (max-width: 620px) {
  .modal { padding: 12px; }
  .modal__box { max-height: 92vh; }
  /* 窄螢幕退成兩欄:對話框寬度已經跟著視窗縮,三欄會小到看不出差別 */
  .pick,
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 我的風格(js/mystyles.js) ---------- */

/* 風格網格裡的區塊標題。橫跨整列,不然它會佔掉一格變成「第一個風格」。 */
.pick__group {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.pick__group:not(:first-child) {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* 對話框上半:把這次生成的圖存成風格 */
.mystyle__save {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.mystyle__save .field__input { margin: 4px 0 10px; }

/* 出圖多張時挑一張當縮圖。★ 只有一張時仍然畫出來 —— 讓使用者看得到
 * 「存下去的是這張」,而不是猜。 */
.mystyle__pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.mystyle__thumb {
  width: 104px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  overflow: hidden;
}

.mystyle__thumb[aria-pressed="true"] {
  border-color: var(--brand-warm);
  box-shadow: inset 0 0 0 1px var(--brand-warm);
}

.mystyle__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  opacity: var(--art-opacity);
  mix-blend-mode: var(--art-blend);
}

.mystyle__save .modal__hint { display: block; margin-bottom: 10px; }