/*
 * 音声AIヒアリング（試作・2026-11-06）[pnm_voice_hearing]
 * デザインは mitsukuru-design スキル（グリーン基調・ピル型ボタン・8px グリッド・Noto Sans JP）。
 * ⚠️ 白い文字を乗せるボタンは --pnm-vh-primary-strong（#4A7A26）＝#7CB342 の上の白は文字のコントラストが足りない。
 */
.pnm-vh {
	--pnm-vh-primary: #7CB342;
	--pnm-vh-primary-dark: #689A38;
	--pnm-vh-primary-strong: #4A7A26;
	--pnm-vh-primary-light: #EFF6E4;
	--pnm-vh-text: #2B2B2B;
	--pnm-vh-muted: #5F6670;
	--pnm-vh-bg: #FFFFFF;
	--pnm-vh-subtle: #F7F8F5;
	--pnm-vh-border: #E5E7EB;
	--pnm-vh-danger: #B42318;
	max-width: 480px;
	margin: 0 auto;
	padding: 24px 16px 32px;
	box-sizing: border-box;
	font-family: 'Noto Sans JP', sans-serif;
	color: var(--pnm-vh-text);
	background: var(--pnm-vh-bg);
	line-height: 1.8;
}

.pnm-vh *,
.pnm-vh *::before,
.pnm-vh *::after {
	box-sizing: border-box;
}

.pnm-vh__screen {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pnm-vh__screen[hidden] {
	display: none;
}

/* 固定ヘッダー（SWELL の #fix_header・スマホの sticky の #header・管理バー）の下に見出しが隠れないように（2026-11-06）。
   --pnm-vh-scroll-offset は JS が表示中のヘッダーの高さ＋16px を入れる（fixedHeaderOffset()）。 */
.pnm-vh__screen,
.pnm-vh__title {
	scroll-margin-top: var(--pnm-vh-scroll-offset, 16px);
}

.pnm-vh__badge {
	align-self: flex-start;
	margin: 0;
	padding: 2px 12px;
	border-radius: 9999px;
	background: var(--pnm-vh-primary-light);
	color: var(--pnm-vh-primary-strong);
	font-size: 12px;
	font-weight: 700;
}

.pnm-vh__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.pnm-vh__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
}

.pnm-vh__em {
	color: var(--pnm-vh-primary-strong);
}

.pnm-vh__lead {
	margin: 0;
	font-size: 15px;
	color: var(--pnm-vh-muted);
}

.pnm-vh__label {
	margin: 0 0 8px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
}

/* 顔（画像・画像が無いときは緑の円に名前） */
.pnm-vh__face {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-radius: 9999px;
	overflow: hidden;
	background: var(--pnm-vh-primary-light);
	flex: 0 0 auto;
}

.pnm-vh__face--lg {
	width: 128px;
	height: 128px;
}

.pnm-vh__face--md {
	width: 136px;
	height: 136px;
}

.pnm-vh__face-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pnm-vh__face--none {
	background: var(--pnm-vh-primary-strong);
}

.pnm-vh__face-text {
	color: #FFFFFF;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* 話す速さ */
.pnm-vh__speed {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pnm-vh__seg {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	padding: 4px;
	border-radius: 9999px;
	background: var(--pnm-vh-subtle);
}

.pnm-vh__seg-item {
	position: relative;
	margin: 0;
}

.pnm-vh__seg-item input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
}

.pnm-vh__seg-item span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: 9999px;
	font-size: 14px;
	color: var(--pnm-vh-muted);
	cursor: pointer;
}

.pnm-vh__seg-item input:checked + span {
	background: #FFFFFF;
	color: var(--pnm-vh-primary-strong);
	font-weight: 700;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.pnm-vh__seg-item input:focus-visible + span {
	outline: 2px solid var(--pnm-vh-primary-strong);
	outline-offset: 2px;
}

.pnm-vh__note {
	margin: 0;
	padding: 16px;
	border-radius: 12px;
	background: var(--pnm-vh-subtle);
	font-size: 13px;
	line-height: 1.7;
	color: var(--pnm-vh-muted);
}

/* ボタン */
.pnm-vh__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 14px 28px;
	border-radius: 9999px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pnm-vh__btn--primary {
	border: 0;
	background: var(--pnm-vh-primary-strong);
	color: #FFFFFF;
}

.pnm-vh__btn--primary:hover {
	background: #3A611E;
}

.pnm-vh__btn--primary:disabled {
	opacity: 0.6;
	cursor: default;
}

.pnm-vh__btn--secondary {
	min-height: 48px;
	border: 2px solid var(--pnm-vh-primary-strong);
	background: #FFFFFF;
	color: var(--pnm-vh-primary-strong);
	font-size: 15px;
}

.pnm-vh__btn:focus-visible,
.pnm-vh__ctrl:focus-visible,
.pnm-vh__link:focus-visible {
	outline: 2px solid var(--pnm-vh-primary-strong);
	outline-offset: 3px;
}

/* エラー */
.pnm-vh__error {
	padding: 16px;
	border: 1px solid #F4C7C3;
	border-radius: 12px;
	background: #FEF3F2;
	font-size: 14px;
}

.pnm-vh__error p {
	margin: 0;
}

.pnm-vh__error p + p {
	margin-top: 8px;
}

.pnm-vh__error-text {
	color: var(--pnm-vh-danger);
}

.pnm-vh__link {
	color: var(--pnm-vh-primary-strong);
	font-weight: 700;
}

/* ② 会話 */
.pnm-vh__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pnm-vh__top p {
	margin: 0;
}

.pnm-vh__who {
	font-size: 15px;
	font-weight: 700;
}

.pnm-vh__progress-text {
	font-size: 13px;
	color: var(--pnm-vh-muted);
}

.pnm-vh__bar {
	height: 8px;
	margin-top: -16px;
	border-radius: 9999px;
	background: var(--pnm-vh-subtle);
	overflow: hidden;
}

.pnm-vh__bar-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 9999px;
	background: var(--pnm-vh-primary);
	transition: width 0.3s ease;
}

.pnm-vh__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.pnm-vh__avatar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 176px;
	height: 176px;
}

.pnm-vh__ring {
	position: absolute;
	inset: 12px;
	border-radius: 9999px;
	background: var(--pnm-vh-primary);
	opacity: 0;
}

.pnm-vh__stage[data-state="talk"] .pnm-vh__ring {
	animation: pnmVhPulse 1.6s ease-out infinite;
}

.pnm-vh__stage[data-state="listen"] .pnm-vh__face {
	box-shadow: 0 0 0 4px var(--pnm-vh-primary-light);
}

.pnm-vh__stage[data-state="paused"] .pnm-vh__face {
	filter: grayscale(0.6);
	opacity: 0.7;
}

@keyframes pnmVhPulse {
	0% {
		transform: scale(1);
		opacity: 0.45;
	}
	100% {
		transform: scale(1.3);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pnm-vh__stage[data-state="talk"] .pnm-vh__ring {
		animation: none;
		opacity: 0.25;
	}
}

.pnm-vh__status {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--pnm-vh-primary-strong);
}

.pnm-vh__caption {
	min-height: 3.6em;
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.8;
	text-align: center;
}

.pnm-vh__caption-user {
	margin: -16px 0 0;
	font-size: 13px;
	color: var(--pnm-vh-muted);
	text-align: center;
}

.pnm-vh__caption-user:empty {
	display: none;
}

/* 選択肢のボタン（AI の show_choices）。字幕のすぐ下。スマホ2列・PC は最大3列。 */
.pnm-vh__choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: -8px;
}

.pnm-vh__choices[hidden] {
	display: none;
}

.pnm-vh__choices-hint,
.pnm-vh__choices-more {
	margin: 0;
	font-size: 13px;
	color: var(--pnm-vh-muted);
	text-align: center;
}

.pnm-vh__choices-more[hidden] {
	display: none;
}

.pnm-vh__choices-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.pnm-vh__choice {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 8px 12px;
	border: 2px solid var(--pnm-vh-border);
	border-radius: 16px;
	background: #FFFFFF;
	color: var(--pnm-vh-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
}

.pnm-vh__choice:hover:not(:disabled) {
	border-color: var(--pnm-vh-primary);
}

.pnm-vh__choice:focus-visible {
	outline: 2px solid var(--pnm-vh-primary-strong);
	outline-offset: 2px;
}

/* 選んだボタン＝ミツクルの primary（#7CB342）。⚠️ 白い文字はコントラストが足りないので濃い文字にする。 */
.pnm-vh__choice[aria-pressed="true"] {
	border-color: var(--pnm-vh-primary-dark);
	background: var(--pnm-vh-primary);
	color: #17240B;
	font-weight: 700;
}

.pnm-vh__choice:disabled {
	cursor: default;
}

.pnm-vh__choice.is-leaving {
	opacity: 0;
	pointer-events: none;
}

/* 下の「記録した内容」へ移る動き（JS が座標を入れる）。 */
.pnm-vh__choice--ghost {
	position: fixed;
	z-index: 99999;
	margin: 0;
	pointer-events: none;
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}

.pnm-vh__choices-done {
	min-height: 52px;
	font-size: 16px;
}

.pnm-vh__choices-done[hidden] {
	display: none;
}

.pnm-vh__chip.is-new {
	border-color: var(--pnm-vh-primary);
	background: var(--pnm-vh-primary-light);
	animation: pnmVhChipIn 0.6s ease-out;
}

@keyframes pnmVhChipIn {
	0% {
		transform: scale(0.85);
	}
	60% {
		transform: scale(1.06);
	}
	100% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pnm-vh__choice,
	.pnm-vh__choice--ghost {
		transition: none;
	}

	.pnm-vh__chip.is-new {
		animation: none;
	}
}

@media (min-width: 768px) {
	.pnm-vh__choices-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 紹介カード（AI の introduce_offer）。字幕の下。 */
.pnm-vh__offer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--pnm-vh-border);
	border-radius: 16px;
	background: #FFFFFF;
}

.pnm-vh__offer[hidden] {
	display: none;
}

.pnm-vh__offer-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.pnm-vh__offer-kind {
	padding: 2px 10px;
	border-radius: 9999px;
	background: var(--pnm-vh-primary-light);
	color: var(--pnm-vh-primary-strong);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
}

/* キャンペーンの札は目立つ色（濃い文字でコントラストを保つ）。 */
.pnm-vh__offer-kind[data-kind="campaign"] {
	background: #FFF4E5;
	color: #8A4B00;
}

.pnm-vh__offer-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.pnm-vh__offer-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--pnm-vh-muted);
}

.pnm-vh__offer-btns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.pnm-vh__offer-btn {
	min-height: 56px;
	padding: 8px 12px;
	border: 2px solid var(--pnm-vh-border);
	border-radius: 9999px;
	background: #FFFFFF;
	color: var(--pnm-vh-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pnm-vh__offer-btn--yes {
	border-color: var(--pnm-vh-primary-strong);
	color: var(--pnm-vh-primary-strong);
	font-weight: 700;
}

.pnm-vh__offer-btn:focus-visible {
	outline: 2px solid var(--pnm-vh-primary-strong);
	outline-offset: 2px;
}

/* 選んだボタン＝primary の緑（濃い文字）。 */
.pnm-vh__offer-btn[aria-pressed="true"] {
	border-color: var(--pnm-vh-primary-dark);
	background: var(--pnm-vh-primary);
	color: #17240B;
	font-weight: 700;
}

.pnm-vh__offer-btn:disabled {
	cursor: default;
}

.pnm-vh__offer-btn:disabled:not([aria-pressed="true"]) {
	opacity: 0.5;
}

.pnm-vh__offer-done {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--pnm-vh-primary-strong);
}

.pnm-vh__offer-done:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.pnm-vh__offer-btn {
		transition: none;
	}
}

.pnm-vh__paused {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px;
	border-radius: 16px;
	background: var(--pnm-vh-primary-light);
	text-align: center;
}

.pnm-vh__paused[hidden] {
	display: none;
}

.pnm-vh__paused p {
	margin: 0;
	font-size: 14px;
}

.pnm-vh__record {
	padding: 16px;
	border-radius: 16px;
	background: var(--pnm-vh-subtle);
}

.pnm-vh__record-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
}

.pnm-vh__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pnm-vh__chips:empty::before {
	content: attr(data-empty); /* 文言は辞書（none_yet）から JS・テンプレートが入れる */
	font-size: 12px;
	color: var(--pnm-vh-muted);
}

.pnm-vh__chip {
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--pnm-vh-border);
	border-radius: 9999px;
	background: #FFFFFF;
	font-size: 12px;
	line-height: 1.6;
}

.pnm-vh__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 16px 0;
	border-top: 1px solid var(--pnm-vh-border);
}

.pnm-vh__ctrl {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 64px;
	min-height: 64px;
	padding: 8px;
	border: 1px solid var(--pnm-vh-border);
	border-radius: 9999px;
	background: #FFFFFF;
	color: var(--pnm-vh-muted);
	font-family: inherit;
	cursor: pointer;
}

.pnm-vh__ctrl-label {
	font-size: 11px;
	line-height: 1;
}

.pnm-vh__ctrl--mic {
	width: 88px;
	height: 88px;
	border: 0;
	background: var(--pnm-vh-primary-strong);
	color: #FFFFFF;
}

.pnm-vh__ctrl--mic.is-off {
	background: #FFFFFF;
	border: 2px solid var(--pnm-vh-muted);
	color: var(--pnm-vh-muted);
}

/* 開始画面の上の行：バッジ（左）と言語の切り替え（右・2026-11-08）。 */
.pnm-vh__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pnm-vh__head .pnm-vh__badge {
	align-self: center;
}

.pnm-vh__lang {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--pnm-vh-muted);
}

.pnm-vh__lang-select {
	min-height: 44px;
	padding: 6px 28px 6px 12px;
	border: 1px solid var(--pnm-vh-border);
	border-radius: 9999px;
	background: #FFFFFF;
	color: var(--pnm-vh-text);
	font-family: inherit;
	font-size: 16px; /* 16px 未満だと iPhone が拡大する */
	cursor: pointer;
}

.pnm-vh__lang-select:focus-visible {
	outline: 2px solid var(--pnm-vh-primary-strong);
	outline-offset: 2px;
}

/* 日本語（記録の文字）の下に出す訳（選択肢のボタン・③の見出し）。 */
.pnm-vh__ja,
.pnm-vh__tr {
	display: block;
}

.pnm-vh__tr {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pnm-vh-muted);
}

.pnm-vh__choice[aria-pressed="true"] .pnm-vh__tr {
	color: inherit;
}

.pnm-vh__choice {
	flex-direction: column;
}

.pnm-vh__persona-card[hidden] {
	display: none;
}

/* 顔：画像と、画像が無いときの名前の両方を持ち、--none で切り替える（話し相手を選び直したときに JS が入れ替える）。 */
.pnm-vh__face:not(.pnm-vh__face--none) .pnm-vh__face-text,
.pnm-vh__face--none .pnm-vh__face-img {
	display: none;
}

.pnm-vh__face--sm {
	width: 64px;
	height: 64px;
}

.pnm-vh__face--sm .pnm-vh__face-text {
	font-size: 12px;
	letter-spacing: 0;
	padding: 0 4px;
	text-align: center;
	line-height: 1.3;
}

/* 話し相手を選ぶ（2026-11-08・2列のカード）。選んでいる人＝緑の枠と淡い緑の背景・話す顔。 */
.pnm-vh__persona {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pnm-vh__persona-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.pnm-vh__persona-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-height: 44px;
	padding: 16px;
	border: 2px solid var(--pnm-vh-border);
	border-radius: 16px;
	background: #FFFFFF;
	color: var(--pnm-vh-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pnm-vh__persona-card:hover {
	border-color: var(--pnm-vh-primary);
}

.pnm-vh__persona-card[aria-pressed="true"] {
	border-color: var(--pnm-vh-primary-strong);
	background: var(--pnm-vh-primary-light);
}

.pnm-vh__persona-card:focus-visible {
	outline: 2px solid var(--pnm-vh-primary-strong);
	outline-offset: 3px;
}

.pnm-vh__persona-name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.pnm-vh__persona-desc {
	font-size: 12px;
	line-height: 1.6;
	color: var(--pnm-vh-muted);
}

@media (prefers-reduced-motion: reduce) {
	.pnm-vh__persona-card {
		transition: none;
	}
}

/* ボタンで答えるモード（2026-11-07）：マイクのボタンの代わりに出すモードの表示。 */
.pnm-vh__ctrl[hidden],
.pnm-vh__mode[hidden],
.pnm-vh__type[hidden],
.pnm-vh__fallback[hidden] {
	display: none;
}

.pnm-vh__mode {
	margin: 0;
	padding: 8px 16px;
	border-radius: 9999px;
	background: var(--pnm-vh-primary-light);
	color: var(--pnm-vh-primary-strong);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

/* 文字で答える欄（ボタンで答えるモード）。1行＋［送る］。 */
.pnm-vh__type {
	display: flex;
	gap: 8px;
	margin: 0;
}

.pnm-vh__type-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid #C9CDD3;
	border-radius: 9999px;
	background: #FFFFFF;
	color: var(--pnm-vh-text);
	font-family: inherit;
	font-size: 16px; /* 16px 未満だと iPhone が拡大する */
	line-height: 1.5;
}

.pnm-vh__type-input:focus {
	border-color: var(--pnm-vh-primary-strong);
	outline: 2px solid var(--pnm-vh-primary-light);
}

.pnm-vh__type-send {
	flex: 0 0 auto;
	min-width: 72px;
	min-height: 48px;
	padding: 10px 20px;
	border: 0;
	border-radius: 9999px;
	background: var(--pnm-vh-primary-strong);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.pnm-vh__type-send:hover {
	background: #3A611E;
}

.pnm-vh__type-send:focus-visible,
.pnm-vh__textlink:focus-visible {
	outline: 2px solid var(--pnm-vh-primary-strong);
	outline-offset: 3px;
}

/* マイクが使えなかったとき：エラーの下に「ボタンで答えて始める」。 */
.pnm-vh__fallback {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #F4C7C3;
}

.pnm-vh__error .pnm-vh__fallback-text {
	color: var(--pnm-vh-text);
}

.pnm-vh__error .pnm-vh__fallback + p {
	margin-top: 12px;
}

/* 開始画面：見出しのすぐ下の「目安」と大きな開始ボタン・同意・マイクを使わずに始める（2026-11-08）。 */
.pnm-vh__duration {
	margin: -4px 0 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--pnm-vh-muted);
}

.pnm-vh__go {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	width: 100%;
	margin-top: 4px;
	text-align: left;
}

.pnm-vh__btn--go {
	min-height: 64px;
	font-size: 18px;
}

.pnm-vh__go .pnm-vh__consent {
	margin: 0;
}

.pnm-vh__go .pnm-vh__nomic {
	margin: -4px 0 0;
}

/* 開始前の同意（2026-11-08）と、本日の受付の終了。 */
.pnm-vh__consent {
	margin: -8px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--pnm-vh-muted);
}

.pnm-vh__consent .pnm-vh__link {
	margin-left: 4px;
	font-weight: 500;
}

.pnm-vh__closed {
	margin: 0;
	padding: 16px;
	border-radius: 12px;
	background: var(--pnm-vh-subtle);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.pnm-vh__nomic[hidden],
.pnm-vh__btn[hidden] {
	display: none;
}

/* ③「この内容で提案書をつくる」（2026-11-08・PR-4）。 */
.pnm-vh__propose {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 2px solid var(--pnm-vh-primary-light);
	border-radius: 16px;
	background: #FFFFFF;
}

.pnm-vh__propose[hidden],
a.pnm-vh__btn[hidden] {
	display: none;
}

.pnm-vh__propose-lead,
.pnm-vh__propose-status {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}

.pnm-vh__propose-status:empty {
	display: none;
}

a.pnm-vh__btn {
	text-decoration: none;
}

/* ③の最後の選択・連絡先・ほかの興味（2026-11-08・PR-A）。 */
.pnm-vh__final,
.pnm-vh__more {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pnm-vh__final[hidden],
.pnm-vh__more[hidden],
.pnm-vh__contact[hidden],
.pnm-vh__final-btns > [hidden] {
	display: none;
}

.pnm-vh__final-btns {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pnm-vh__final-btns .pnm-vh__btn[aria-pressed="true"] {
	box-shadow: 0 0 0 3px var(--pnm-vh-primary-light);
}

.pnm-vh__final-note,
.pnm-vh__more-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}

.pnm-vh__final-note:empty {
	display: none;
}

.pnm-vh__contact {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.pnm-vh__contact-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pnm-vh__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pnm-vh__field-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
}

.pnm-vh__badge-req,
.pnm-vh__badge-opt {
	display: inline-block;
	padding: 0 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.8;
}

.pnm-vh__badge-req {
	background: var(--pnm-vh-primary-strong);
	color: #FFFFFF;
}

.pnm-vh__badge-opt {
	background: var(--pnm-vh-subtle);
	color: var(--pnm-vh-muted);
	border: 1px solid var(--pnm-vh-border);
}

.pnm-vh__input {
	width: 100%;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid #C9CDD3;
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--pnm-vh-text);
	font-family: inherit;
	font-size: 16px; /* 16px 未満だと iPhone が拡大する */
	line-height: 1.5;
}

.pnm-vh__input:focus {
	border-color: var(--pnm-vh-primary-strong);
	outline: 2px solid var(--pnm-vh-primary-light);
}

/* 開始画面の小さなリンク「マイクを使わずに始める」。 */
.pnm-vh__nomic {
	margin: -12px 0 0;
	text-align: center;
}

.pnm-vh__textlink {
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--pnm-vh-primary-strong);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}

.pnm-vh__textlink:disabled {
	opacity: 0.6;
	cursor: default;
}

/* 読み上げだけ（見た目には出さない）。 */
.pnm-vh__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ③ 確認 */
/* 見出しと説明文の間を詰める（画面の gap 24px を打ち消して 8px に）。 */
.pnm-vh__screen--confirm .pnm-vh__title + .pnm-vh__lead {
	margin-top: -16px;
}

.pnm-vh__list {
	margin: 0;
	border: 1px solid var(--pnm-vh-border);
	border-radius: 16px;
	overflow: hidden;
}

.pnm-vh__list dt {
	padding: 12px 16px 0;
	font-size: 12px;
	color: var(--pnm-vh-muted);
}

.pnm-vh__list dd {
	margin: 0;
	padding: 0 16px 12px;
	border-bottom: 1px solid var(--pnm-vh-border);
	font-size: 15px;
}

.pnm-vh__list dd:last-child {
	border-bottom: 0;
}

.pnm-vh__list dd.is-empty {
	color: var(--pnm-vh-muted);
}

/* ③ ご紹介したもの */
.pnm-vh__offers[hidden] {
	display: none;
}

.pnm-vh__offers-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pnm-vh__offers-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--pnm-vh-subtle);
	font-size: 14px;
}

.pnm-vh__offers-badge {
	flex: 0 0 auto;
	padding: 2px 10px;
	border: 1px solid var(--pnm-vh-border);
	border-radius: 9999px;
	background: #FFFFFF;
	color: var(--pnm-vh-muted);
	font-size: 12px;
}

.pnm-vh__offers-badge.is-yes {
	border-color: var(--pnm-vh-primary-light);
	background: var(--pnm-vh-primary-light);
	color: var(--pnm-vh-primary-strong);
	font-weight: 700;
}

.pnm-vh__summary {
	padding: 16px;
	border-radius: 16px;
	background: var(--pnm-vh-subtle);
}

.pnm-vh__summary-text {
	margin: 0;
	font-size: 14px;
	white-space: pre-wrap;
}

.pnm-vh__saved {
	margin: 0;
	font-size: 13px;
	color: var(--pnm-vh-primary-strong);
}

.pnm-vh__saved:empty {
	display: none;
}

@media (min-width: 768px) {
	.pnm-vh {
		max-width: 640px;
		padding: 48px 24px;
	}

	.pnm-vh__title {
		font-size: 28px;
	}
}

/* ③提案書をつくっているあいだ（2026-11-08・PR-B）：丸3つを線でつなぐ。いまの段階は緑で脈打ち、終わった段階は緑で塗り、次の丸へ線が伸びる。 */
.pnm-vh__gen {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pnm-vh__gen[hidden],
.pnm-vh__propose [data-pnm-vh-propose-retry][hidden] {
	display: none;
}

.pnm-vh__gen-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pnm-vh__gen-face.pnm-vh__face {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
}

.pnm-vh__gen-note[hidden] {
	display: none;
}

.pnm-vh__gen-lead,
.pnm-vh__gen-note {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
}

.pnm-vh__gen-note {
	font-size: 13px;
	color: var(--pnm-vh-muted);
}

.pnm-vh__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pnm-vh__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.pnm-vh__step-dot {
	position: relative;
	z-index: 1;
	width: 20px;
	height: 20px;
	border: 2px solid var(--pnm-vh-border);
	border-radius: 50%;
	background: #FFFFFF;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 前の丸からこの丸までの線（丸の中心どうしを結ぶ）。 */
.pnm-vh__step-line {
	position: absolute;
	top: 9px;
	right: 50%;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: var(--pnm-vh-border);
	overflow: hidden;
}

.pnm-vh__step-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--pnm-vh-primary);
	transition: width 0.8s ease;
}

.pnm-vh__step-label {
	font-size: 12px;
	line-height: 1.5;
	color: var(--pnm-vh-muted);
}

.pnm-vh__step.is-active .pnm-vh__step-fill,
.pnm-vh__step.is-done .pnm-vh__step-fill {
	width: 100%;
}

.pnm-vh__step.is-active .pnm-vh__step-dot {
	border-color: var(--pnm-vh-primary);
	background: var(--pnm-vh-primary-light);
	animation: pnm-vh-step-pulse 1.4s ease-in-out infinite;
}

.pnm-vh__step.is-done .pnm-vh__step-dot {
	border-color: var(--pnm-vh-primary);
	background: var(--pnm-vh-primary);
}

.pnm-vh__step.is-active .pnm-vh__step-label,
.pnm-vh__step.is-done .pnm-vh__step-label {
	color: var(--pnm-vh-text);
	font-weight: 700;
}

/* 待つのをやめたら（失敗・時間切れ）、脈打ちを止める。 */
.pnm-vh__gen.is-stopped .pnm-vh__step-dot {
	animation: none;
}

@keyframes pnm-vh-step-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(124, 179, 66, 0.45);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(124, 179, 66, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pnm-vh__step-dot,
	.pnm-vh__step-fill {
		transition: none;
	}
	.pnm-vh__step.is-active .pnm-vh__step-dot {
		animation: none;
	}
}

/* 押して話す（2026-11-08・PR-D）：切り替えのスイッチ・押しているあいだのマイク・周りの音の案内。 */
.pnm-vh__ptt {
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 8px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.pnm-vh__ptt[hidden],
.pnm-vh__ptt-suggest[hidden] {
	display: none;
}

.pnm-vh__ptt-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pnm-vh__ptt-switch {
	position: relative;
	width: 44px;
	height: 26px;
	border-radius: 9999px;
	background: var(--pnm-vh-border);
	transition: background-color 0.2s ease;
}

.pnm-vh__ptt-switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
}

.pnm-vh__ptt-input:checked + .pnm-vh__ptt-switch {
	background: var(--pnm-vh-primary-strong);
}

.pnm-vh__ptt-input:checked + .pnm-vh__ptt-switch::after {
	transform: translateX(18px);
}

.pnm-vh__ptt-input:focus-visible + .pnm-vh__ptt-switch {
	outline: 2px solid var(--pnm-vh-primary);
	outline-offset: 2px;
}

/* 押しているあいだだけ話すマイク：スクロール・文字の選択・長押しのメニューを止める。 */
.pnm-vh__ctrl--mic.is-ptt {
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	background: #FFFFFF;
	border: 3px solid var(--pnm-vh-primary-strong);
	color: var(--pnm-vh-primary-strong);
}

.pnm-vh__ctrl--mic.is-ptt.is-held {
	background: var(--pnm-vh-primary-strong);
	color: #FFFFFF;
	transform: scale(1.06);
	box-shadow: 0 0 0 8px var(--pnm-vh-primary-light);
}

.pnm-vh__ptt-suggest {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 2px solid var(--pnm-vh-primary-light);
	border-radius: 16px;
	background: #FFFFFF;
}

.pnm-vh__ptt-suggest p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
	.pnm-vh__ptt-switch,
	.pnm-vh__ptt-switch::after {
		transition: none;
	}
	.pnm-vh__ctrl--mic.is-ptt.is-held {
		transform: none;
	}
}

/* かんたん会員登録（2026-11-08・PR-E）：公開範囲が「会員」で未ログインのときの開始画面。 */
.pnm-vh-signup {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pnm-vh-signup .pnm-vh__title,
.pnm-vh-signup .pnm-vh__lead,
.pnm-vh-signup .pnm-vh__nomic {
	margin: 0;
}

.pnm-vh__signup-msg {
	margin: 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--pnm-vh-subtle);
	font-size: 14px;
	line-height: 1.7;
}

.pnm-vh__signup-msg.is-ok {
	background: var(--pnm-vh-primary-light);
}

/* 使えない人の画面（2026-11-08 崇さん指示）：上半分は共通（見出し・説明・話し相手4人）、下半分は場合ごとの次の一歩。 */
.pnm-vh-locked {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
}

.pnm-vh-locked .pnm-vh__title,
.pnm-vh-locked .pnm-vh__lead,
.pnm-vh-locked .pnm-vh__nomic {
	margin: 0;
}

.pnm-vh-locked__people {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 8px 0;
	padding: 0;
	list-style: none;
}

.pnm-vh-locked__person {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.pnm-vh-locked__face {
	display: block;
	width: 88px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--pnm-vh-primary-light);
	object-fit: cover;
}

.pnm-vh-locked__face--none {
	background: var(--pnm-vh-primary);
}

.pnm-vh-locked__name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}

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

.pnm-vh-locked__note,
.pnm-vh-locked__or {
	margin: 0;
	font-size: 14px;
	color: var(--pnm-vh-muted);
}

.pnm-vh-locked__or {
	margin-top: 8px;
	padding-top: 24px;
	border-top: 1px solid var(--pnm-vh-border);
	color: var(--pnm-vh-text);
	font-weight: 700;
}

.pnm-vh-locked .pnm-vh__signup-msg,
.pnm-vh-signup--embedded {
	text-align: left;
}

/* 見出しは文の切れ目で折り返す（「す」だけが次の行に落ちない）。 */
.pnm-vh-locked .pnm-vh__title {
	text-wrap: balance;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

@media (max-width: 340px) {
	.pnm-vh-locked__people {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

/* /talk/ の中のログインフォーム（2026-11-08）。 */
.pnm-vh-login {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: left;
}

.pnm-vh-login__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 0;
	font-size: 14px;
}

.pnm-vh-locked__pick {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 8px 4px;
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.pnm-vh-locked__pick.is-selected {
	background: var(--pnm-vh-primary-light);
	box-shadow: inset 0 0 0 2px var(--pnm-vh-primary);
}

.pnm-vh-locked__pick:focus-visible {
	outline: 3px solid var(--pnm-vh-primary-strong);
	outline-offset: 2px;
}

@media (hover: hover) {
	.pnm-vh-locked__pick:hover {
		background: var(--pnm-vh-subtle);
	}

	.pnm-vh-locked__pick.is-selected:hover {
		background: var(--pnm-vh-primary-light);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pnm-vh-locked__pick {
		transition: none;
	}
}

@media (max-width: 420px) {
	.pnm-vh-locked__pick {
		padding: 8px 0;
	}

	.pnm-vh-locked__name {
		font-size: 12px;
		letter-spacing: -0.02em;
		white-space: nowrap;
	}
}

/* 始める前の連絡先（公開範囲「だれでも」の未ログイン・2026-11-09）。 */
.pnm-vh__startform {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 16px;
	border: 1px solid var(--pnm-vh-border);
	border-radius: 16px;
	background: var(--pnm-vh-bg);
}

.pnm-vh__startform[hidden] {
	display: none;
}

.pnm-vh__startform-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.pnm-vh__startform-lead,
.pnm-vh__startform .pnm-vh__consent {
	margin: 0;
	font-size: 14px;
	color: var(--pnm-vh-muted);
}

.pnm-vh__startform-error {
	margin: 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: #FEF3F2;
	color: var(--pnm-vh-danger);
	font-size: 14px;
}

.pnm-vh__startform-error[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.pnm-vh__startform {
		padding: 32px;
	}
}