/**
 * 音声ヒアリング PR-A＝「まず話す」画面（2026-10-08）。
 *
 * mitsukuru-design に準拠。色・余白・角丸は `.pnm-hearing` の変数（wizard.css）を使う＝新しい色を作らない。
 * ボタンは wizard.css の `.pnm-btn` をそのまま使う。モバイルファースト・横スクロールを出さない。
 *
 * @package PN_Mitsukuru
 */

.pnm-vi {
	margin: 0 0 16px;
}

.pnm-vi[hidden],
.pnm-vi [hidden] {
	display: none !important;
}

/* 2026-10-09（崇さんの指示）：最初は小さく＝余白を詰め、STEP バーと設問が画面内に見える大きさにする。
   見出しはやめた（説明文が枠の一番上）＝枠の上の余白も 8px に詰めた。 */
.pnm-vi__panel {
	padding: 8px 16px 16px;
	background: var(--pnm-bg);
	border: 1px solid var(--pnm-border);
	border-radius: var(--pnm-radius-lg);
}

.pnm-vi__lead {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pnm-text);
}

.pnm-vi__text {
	display: block;
	width: 100%;
	max-width: 100%;
	/* 最初は3行ほど（rows="3"）・文字が増えたら JS（autosize()）が伸ばす・この上限を超えたらスクロール。 */
	min-height: 0;
	max-height: 240px;
	padding: 8px 16px;
	font-family: inherit;
	font-size: 16px; /* iOS で入力時に拡大されない大きさ。 */
	line-height: 1.8;
	color: var(--pnm-text);
	background: var(--pnm-bg);
	border: 1px solid var(--pnm-border);
	border-radius: var(--pnm-radius);
	resize: none;
	overflow-y: hidden;
}

.pnm-vi__text:focus {
	outline: 2px solid var(--pnm-primary);
	outline-offset: 0;
	border-color: var(--pnm-primary);
}

/* 確定前の文字（認識中）。欄の外に薄く出す。 */
.pnm-vi__interim {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--pnm-text-muted);
	overflow-wrap: anywhere;
}

.pnm-vi__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
}

.pnm-vi__mic:focus-visible,
.pnm-vi .pnm-btn:focus-visible {
	outline: 2px solid var(--pnm-primary-dark);
	outline-offset: 2px;
}

/* 録音中：ボタンを塗りつぶして「いま聞いている」ことを示す（pnm-voice-input と同じ色）。 */
.pnm-vi.is-recording .pnm-vi__mic {
	color: var(--pnm-bg);
	background: var(--pnm-badge-req);
	border-color: var(--pnm-badge-req);
}

.pnm-vi__count {
	margin-left: auto;
	font-size: 13px;
	color: var(--pnm-text-muted);
}

.pnm-vi__count.is-over {
	color: var(--pnm-badge-req);
	font-weight: 700;
}

.pnm-vi__note,
.pnm-vi__status {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--pnm-text-muted);
}

.pnm-vi__error {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--pnm-badge-req);
}

.pnm-vi__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.pnm-vi__actions .pnm-btn {
	width: 100%;
	max-width: 100%;
	white-space: normal;
}

/* 「フォームで答える（スキップ）」＝グレーのボタン（2026-10-09・崇さんの指示）。緑の［この内容をフォームに反映する］の隣（スマホは縦）。 */
.pnm-vi .pnm-vi__skip {
	color: var(--pnm-text-muted);
	background: var(--pnm-bg-subtle);
	border-color: var(--pnm-border);
}

.pnm-vi .pnm-vi__skip:hover {
	color: var(--pnm-text);
	background: var(--pnm-border);
}

/* 「話して入力する」のボタン（2026-10-08）：pnm-voice-intake.js がウィザードの STEP バー（.pnm-progress）のすぐ下・中央に置く。
   ⚠️ 「次へ」（.pnm-btn--primary）より目立たせない＝枠線グリーンのゴーストボタン（.pnm-btn--ghost）のまま、文字を少し小さく。 */
.pnm-hearing .pnm-vi-open {
	display: flex;
	justify-content: center;
	margin: -8px 0 24px;
}

.pnm-hearing .pnm-vi-open__btn {
	gap: 8px;
	max-width: 100%;
	padding: 8px 24px;
	font-size: 14px;
	white-space: normal;
}

.pnm-hearing .pnm-vi-open__btn:focus-visible {
	outline: 2px solid var(--pnm-primary-dark);
	outline-offset: 2px;
}

.pnm-hearing .pnm-vi-open__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.pnm-hearing .pnm-vi-open__icon svg {
	display: block;
}

@media ( min-width: 768px ) {
	.pnm-vi__panel {
		padding: 8px 24px 16px;
	}

	.pnm-vi__actions {
		flex-direction: row;
		align-items: center;
	}

	.pnm-vi__actions .pnm-btn {
		width: auto;
	}
}

/* --- PR-B：「お話から入力」の印（2026-10-08）---------------------------------
   ウィザードの欄のラベルの中に、pnm-voice-mark.js が足す小さな印。色は `.pnm-hearing` の変数だけ。 */
.pnm-hearing .pnm-vi-mark {
	display: inline-block;
	margin-left: 8px;
	padding: 0 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--pnm-primary-dark);
	background: var(--pnm-primary-light);
	border: 1px solid var(--pnm-primary);
	border-radius: 9999px;
	vertical-align: middle;
	white-space: nowrap;
}