/* 明示的にONにした後だけ動く、肌・プラン診断・AI質問共通の音声案内 */
.speech-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.speech-guide-mascot {
  position: relative;
  display: grid;
  flex: 0 0 80px;
  place-items: end center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--surface-warm);
  box-shadow: var(--shadow-xs);
  pointer-events: none;
}

.speech-guide-mascot img {
  display: block;
  width: 56px;
  max-width: none;
  height: 84px;
  object-fit: contain;
  transform: translateY(3px);
  transform-origin: 50% 82%;
}

.speech-guide-role {
  flex: 1 1 150px;
  min-width: 120px;
  color: var(--muted-strong);
  font-size: var(--fs-2xs);
  font-weight: 800;
  line-height: 1.5;
}

.speech-guide.is-enabled .speech-guide-mascot {
  border-color: var(--brand);
  background: var(--brand-softer);
  /* 2026-09-03: 旧テーマの緑 rgba(62,107,87,…) が1箇所だけ残っていた。紺へ揃える。 */
  box-shadow: 0 0 0 3px rgba(26, 48, 94, .12);
}

/* 2026-09-15(発注者「なぞのアニメーション…意味が分からない」): 無限ループの
 * speech-guide-mascot-wave を削除。発話中も静止した絵のまま表示する
 * (reduce-motion 節の `animation: none` はテスト voice-mascot-v19.test.js:73
 * の期待どおり残す)。 */

.speech-guide .btn {
  min-height: 44px;
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 900;
}

.speech-guide-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--muted-strong);
  font-size: var(--fs-2xs);
  font-weight: 800;
}

.speech-guide-mode select {
  box-sizing: border-box;
  min-height: 44px;
  max-width: 130px;
  padding: 8px 28px 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.speech-guide-toggle[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

.speech-guide-stop {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.speech-guide-stop[hidden] { display: none !important; }

.speech-guide-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.speech-guide-status.is-visible {
  position: static;
  width: auto;
  height: auto;
  flex-basis: 100%;
  clip: auto;
  overflow: visible;
  color: var(--text-status-danger);
  font-size: 13px;
  line-height: 1.55;
  white-space: normal;
}

/* 音声bankが無いときは、押しても動かない操作を出さない(不能なaffordanceを
 * 置かない)。ただし節ごと消すとページから機能が失われたように見えるため、
 * 「音声案内：…」の1行を意図的な小さな注記として必ず残す。文言は
 * voice-bank.js の UNSUPPORTED_MESSAGE が見出しを兼ねる。 */
.speech-guide.is-unavailable {
  display: block !important;
  min-height: 0 !important;
  margin-top: 8px !important;
  /* 節が .container を兼ねる肌ページでは、左右のgutterを保って本文カードと
   * 端を揃える。縦の余白だけ落とす(padding:0 だと注記が画面端に付く)。 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.speech-guide.is-unavailable > :not(.speech-guide-status) { display: none !important; }
.speech-guide.is-unavailable .speech-guide-status.is-visible {
  display: block;
  /* 文字量ぶんだけの小さな注記にする。全幅の帯にすると、本文カードより
   * 広い節(肌ページの .container)で右端が本文と揃わず崩れて見える。 */
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.55;
}
/* 節そのものが本文カラム(.container)のときは、中央寄せの本文と軸を合わせる。 */
.speech-guide.container.is-unavailable .speech-guide-status.is-visible {
  margin-inline: auto;
}

@media (max-width: 420px) {
  .speech-guide { width: 100%; }
  .speech-guide .btn { flex: 1 1 auto; }
  .speech-guide-mascot { flex-basis: 64px; width: 64px; height: 64px; border-radius: 15px; }
  .speech-guide-mascot img { width: 45px; height: 68px; transform: translateY(2px); }
  .speech-guide-mode { flex-basis: 100%; }
  .speech-guide-mode select { flex: 1 1 auto; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .speech-guide.is-speaking .speech-guide-mascot img { animation: none; }
}