/**
 * music.css — 音樂生成專屬(只有 music/generate.html 引用)。
 *
 * 結果卡沿用語音合成的 `.clip`(它在 tts.css)—— 但這一頁不引 tts.css,
 * 所以那幾條在這裡各留一份。★ 兩支都要改的只有 `.clip` 本體,
 * 其餘(音色籌碼、情緒滑桿)是合成頁專屬的,不該跟過來。
 */

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

.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);
}

/* 歌詞用 pre 保住段落標籤與換行,但字型跟著內文走(不要變等寬) */
.clip__lyrics {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-family: inherit;
  font-size: var(--fs-xs);
  line-height: 1.9;
  white-space: pre-wrap;
  color: var(--text-dim);
  max-height: 190px;
  overflow-y: auto;
}

.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; }

.field__note code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-soft);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.92em;
}

/* ---------- 幫我想一個 ---------- */

.suggest { display: flex; gap: 8px; margin-bottom: 14px; }
.suggest__query { flex: 1; min-width: 0; }
/* 按鈕不要被壓扁 —— 它是這一列的主角 */
.suggest .btn { flex: none; white-space: nowrap; }

@media (max-width: 620px) {
  .suggest { flex-wrap: wrap; }
  .suggest .btn { width: 100%; }
}

/* 按鈕旁邊那一行。★ 預設安靜色,只有 warn 才轉暖 —— 它多數時候在報進度。 */
.suggest__note {
  margin: -6px 0 14px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-dim);
}

.suggest__note:empty { margin: 0; }
.suggest__note[data-state="warn"] { color: var(--warm-ink); }