/**
 * tts.css — 語音合成專屬(只有 voice/tts.html 引用)。
 *
 * 情緒那一塊沿用 advfield.css 的 `.recipe` 外觀(第四個共用它的元件),
 * 這裡只加它沒有的:滑桿列與音色籌碼。
 * ★ 與語音辨識共用的部分(主視覺、進度提示的顏色)在 `voice.css`。
 */

/* ---------- 音色 ---------- */

.voices { display: flex; flex-wrap: wrap; gap: 8px; }

.voice {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-soft);
  overflow: hidden;
}

.voice--on { border-color: var(--warm-ink); background: var(--surface); }

.voice__pick {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.voice--on .voice__pick { color: var(--warm-ink); font-weight: 500; }

.voice__tag {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--line);
  color: var(--text-dim);
  font-size: var(--fs-2xs);
}

.voice__x {
  padding: 0 10px 0 4px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.voice__x:hover { color: var(--warm-ink); }

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

.voices__acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

.voices__time {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-sm);
  color: var(--warm-ink);
}

/* ---------- 滑桿 ---------- */

/* ★ `margin: 0` 不能省 —— range 的 UA 預設是左右各 2px,配上 width:100%
 * 就是 4px 的溢出(量到欄位 378 vs 374,一路傳到 form)。頁面層看不出來,
 * 因為外面那層把它吃掉了。 */
.tts-speed input, .emo__slider {
  width: 100%;
  margin: 0;
  accent-color: var(--warm-ink);
}

.emo__mode { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: var(--fs-sm); }

.emo__row {
  display: grid;
  grid-template-columns: 3.4em 1fr 2.2em;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: var(--fs-sm);
}

/* 等寬數字:拉滑桿時整列不會左右抖 */
.emo__out {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  text-align: right;
}

.emo__vectors { margin: 4px 0 10px; }
.emo__ref { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.emo__weight { margin-bottom: 4px; }

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

.clip {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.clip__audio { width: 100%; }

.clip__text {
  margin: 10px 0 8px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text);
}

.clip__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.clip__meta .btn { margin-left: auto; }

/* 換音色之後的卡片:主播放器是成品,下面那個是換之前的,供 A/B 比對 */
/* ★★ 底色**不能**用 --surface-soft:--warm-ink 疊在它上面淺色量到 4.49:1,
 * 差 0.01 過不了 AA(CLAUDE.md 記過同一顆,「已修改」那個標記踩的是同一個)。
 * 改成不填底、只描一圈邊 —— 文字坐在卡片的 --surface 上是 4.68:1,
 * 而邊框一樣看得出它是一塊標記。 */
.clip__tag {
  padding: 1px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--warm-ink);
  font-weight: 500;
}

.clip__before {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* 取名那一列(存成預設)。★ 不用 window.prompt() —— 原生對話框會把整頁凍住。 */
.voices__name { display: flex; gap: 8px; margin-top: 8px; }
.voices__name input { flex: 1; min-width: 0; }