/* 声で書く（public/js/voice.js）：入力欄の右のマイク。聞いているあいだは色が付き、「聞いています…」が出る */
.voice-box { flex: none; display: inline-flex; align-items: center; gap: var(--space-2, 8px); }
.voice-status { color: var(--brand-12); font-size: 0.8125rem; white-space: nowrap; }
.voice-status[hidden] { display: none; }
.voice-mic { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #7c869a; cursor: pointer; }
.voice-mic:hover:not(:disabled) { background: #f1f3f7; color: var(--brand-12); }
.voice-mic:focus-visible { outline: 2px solid var(--brand-12); outline-offset: 2px; }
.voice-mic:disabled { opacity: 0.45; cursor: not-allowed; }
.voice-mic[data-listening] { background: var(--brand-3); color: var(--brand-12); animation: voice-pulse 1.4s ease-in-out infinite; }
/* 「聞いています…」は、狭い画面と、トップの欄では、画面外の読み上げ用に回す（欄を押しつぶさない）。聞いている印は、マイクの色と脈打ち */
.pch-fill .voice-status,
.voice-status.voice-quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) { .voice-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 6px var(--brand-3); } }
@media (prefers-reduced-motion: reduce) { .voice-mic[data-listening] { animation: none; } }
/* トップの欄（top-hero.css .pch-clip と同じ大きさ。スマホは少し小さく） */
/* トップの欄の案内文が切れないよう、少し細く */
/* 欄が狭いので、マイクとクリップは小さく、ぴったり並べる（Claude・ChatGPT の入力欄のように、アイコンどうしを近づける） */
.pch-fill .voice-box { margin-right: -4px; }
.pch-fill .voice-mic,
.pch-fill .pch-clip { width: 32px; height: 36px; }
.pch-fill .voice-mic svg,
.pch-fill .pch-clip svg { width: 20px; height: 20px; }
.pch.is-phone .pch-fill .voice-mic,
.pch.is-phone .pch-fill .pch-clip { width: 28px; height: 36px; }
.pch.is-phone .pch-fill .voice-box { margin-right: -2px; }
/* 対話の質問欄：質問欄の枠の中、送るボタンの左。フォーム（#chat-form）の外に置く（フォームの button は送るボタン1つと決めている検査が多い） */
/* マイクのぶんの列を足す。質問欄の並べ方は4つ（chat-v2.css）：
   ① ふつう（二段）：書く欄の下に「全員に聞く」・残りの回数・送る → マイクは、残りの回数と送るの間
   ② 高さが低く幅が1000px 以下 ／ ③ 高さが低いあいだ（chat-low）：一段 a t l s → マイクは l と s の間
   ④ chat-low で幅が700px 以下（スマホで書いているとき）：二段（①と同じ）
   マイクの列が無い並びだと、マイクが3段目に落ちて枠が高くなり、キーボードを出したとき会話の欄が縮む（iPhone SE で83px：画面検査 mobile-keyboard-chat） */
html body.is-chat .cv .composer-box:has(> .voice-box) { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 't t t t' 'a l m s'; }
@media (max-height: 560px) and (max-width: 1000px) {
  html body.is-chat .cv .composer-box:has(> .voice-box) { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'a t l m s'; }
}
html body.is-chat.chat-low .cv .composer-box:has(> .voice-box) { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'a t l m s'; }
@media (max-width: 700px) {
  html body.is-chat.chat-low .cv .composer-box:has(> .voice-box) { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 't t t t' 'a l m s'; }
}
body.is-chat .cv .composer-box > .voice-box { grid-area: m; }
body.is-chat .cv .composer-box .voice-mic { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-face); }
/* 話し方を学ぶの欄 */
.rp-input .voice-box { align-self: flex-end; }