/**
 * 138io AI受付 — スタイル
 *
 * 競合回避: すべてのセレクタを .io138-air 配下に閉じ込める。
 *           Code Snippets #23 の .io-conn / .io-conn__* とは交差しない。
 *           !important は使わない。
 *
 * レイアウト: PC は中央カード型、スマホはほぼ全画面チャット型。
 *             JS で分岐せず CSS のみで切り替える。
 */

.io138-air {
	--io138-air-fg: #334155;
	--io138-air-fg-strong: #1e293b;
	--io138-air-muted: #64748b;
	--io138-air-line: #cbd5e1;
	--io138-air-bg: #ffffff;
	--io138-air-soft: #f8fafc;
	--io138-air-accent: #1d4ed8;
	--io138-air-danger: #b91c1c;

	box-sizing: border-box;
	margin: 0 0 24px;
	color: var(--io138-air-fg);
	font-size: 15px;
	line-height: 1.7;
}

.io138-air *,
.io138-air *::before,
.io138-air *::after {
	box-sizing: inherit;
}

/* ---- PC: 中央カード型 ---- */
.io138-air__card {
	max-width: 680px;
	margin: 0 auto;
	padding: 20px;
	background: var(--io138-air-bg);
	border: 1px solid var(--io138-air-line);
	border-radius: 10px;
}

.io138-air__prompt {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--io138-air-fg-strong);
	white-space: pre-wrap;
}

.io138-air__example {
	margin: 0 0 12px;
	color: var(--io138-air-muted);
	font-size: 13px;
}

.io138-air__notice {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: var(--io138-air-soft);
	border-left: 3px solid var(--io138-air-line);
	font-size: 14px;
	white-space: pre-wrap;
}

/* 途中の回答を受け付けたことを示す 1 行（次の質問の上） */
.io138-air__ack {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: #15803d;
}

.io138-air__notice--error {
	border-left-color: var(--io138-air-danger);
	color: var(--io138-air-danger);
}

/* ---- 選択肢 ---- */
.io138-air__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 14px;
}

.io138-air__opt,
.io138-air__ghost,
.io138-air__primary {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.io138-air__opt {
	background: var(--io138-air-bg);
	border: 2px solid var(--io138-air-line);
	color: var(--io138-air-fg-strong);
}

.io138-air__opt:hover,
.io138-air__opt:focus-visible {
	background: var(--io138-air-soft);
	border-color: var(--io138-air-accent);
	outline: none;
}

.io138-air__primary {
	background: var(--io138-air-accent);
	border: 2px solid var(--io138-air-accent);
	color: #fff;
	text-align: center;
}

.io138-air__ghost {
	background: transparent;
	border: 1px solid var(--io138-air-line);
	color: var(--io138-air-muted);
	font-weight: 500;
	text-align: center;
}

/*
 * 操作ボタンは番号を出さず「アイコン（左・18px）＋文字」に統一する。
 * 選択肢（__opt）は左寄せ、補助操作（__aux）は中央寄せ。
 */
.io138-air__iconBtn {
	display: flex;
	align-items: center;
	gap: 10px;
}

.io138-air__iconBtn svg {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.io138-air__opt.io138-air__iconBtn {
	justify-content: flex-start;
	text-align: left;
}

.io138-air__opt.io138-air__iconBtn svg {
	color: var(--io138-air-accent);
}

.io138-air__aux.io138-air__iconBtn {
	justify-content: center;
	gap: 8px;
}

.io138-air__btnText {
	min-width: 0;
}

.io138-air__ghost:hover,
.io138-air__ghost:focus-visible {
	border-color: var(--io138-air-accent);
	color: var(--io138-air-fg-strong);
}

.io138-air__primary[disabled] {
	opacity: 0.6;
	cursor: default;
}

/*
 * ---- 押した直後の反応と応答待ち（v0.2.3） ----
 * タップの遅延を避け、押した瞬間に色を変える。応答待ちの間は、押したボタンを選択済みの見た目で残し、
 * 他の回答の操作は薄くして止める（JS の markBusy が disabled を付ける）。
 */
.io138-air button {
	touch-action: manipulation;
}

.io138-air__opt:active,
.io138-air__ghost:active {
	background: var(--io138-air-soft);
	border-color: var(--io138-air-accent);
}

.io138-air__primary:active {
	filter: brightness(0.9);
}

.io138-air__opt.io138-air__is-selected,
.io138-air__ghost.io138-air__is-selected {
	background: #eff6ff;
	border-color: var(--io138-air-accent);
	color: var(--io138-air-accent);
	opacity: 1;
}

.io138-air__primary.io138-air__is-selected {
	opacity: 1;
}

.io138-air__card[aria-busy="true"] button[disabled]:not(.io138-air__is-selected) {
	opacity: 0.5;
	cursor: default;
}

.io138-air__busy {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--io138-air-accent);
	font-size: 14px;
	font-weight: 600;
}

.io138-air__busy::before {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: io138-air-spin 0.8s linear infinite;
}

@keyframes io138-air-spin {
	to {
		transform: rotate(360deg);
	}
}

/* 「最初からやり直す」は補助の中でも優先度が低いため、枠を外して文字リンク風にする（押せる高さ 44px は保つ）。 */
.io138-air__aux--restart {
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- 入力 ---- */
.io138-air__input {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 12px;
}

.io138-air__textarea,
.io138-air__text,
.io138-air__select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--io138-air-line);
	border-radius: 8px;
	background: var(--io138-air-bg);
	color: var(--io138-air-fg);
	font-family: inherit;
	font-size: 16px; /* iOS の自動ズームを防ぐ */
	line-height: 1.6;
}

.io138-air__field {
	display: block;
	margin: 0 0 12px;
}

.io138-air__label {
	display: block;
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--io138-air-muted);
}

/* ---- 自由入力欄の安全 UI ---- */

.io138-air__labelRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
}

/* ラベル行の中ではラベル単体の下余白を殺す */
.io138-air__labelRow > .io138-air__label {
	margin: 0;
}

/* AI 処理対象バッジ。意味は併記テキストが伝え、アイコンは装飾。 */
.io138-air__aiBadge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 7px 1px 5px;
	border: 1px solid var(--io138-air-line);
	border-radius: 999px;
	background: var(--io138-air-soft);
	color: var(--io138-air-accent);
	font-size: 12px;
	line-height: 1.6;
	white-space: nowrap;
}

.io138-air__aiBadge svg {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

.io138-air__aiBadgeText {
	font-weight: 600;
}

/* 「ⓘ なぜ？」。details / summary のネイティブ開閉を使う。 */
.io138-air__why {
	font-size: 12px;
	color: var(--io138-air-accent);
}

.io138-air__why > summary {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	/* 負の margin で、レイアウトを広げずにタップ領域だけを確保する */
	padding: 13px 8px;
	margin: -13px -8px;
	border-radius: 6px;
	cursor: pointer;
	list-style: none;
	line-height: 1.6;
}

.io138-air__why > summary::-webkit-details-marker {
	display: none;
}

.io138-air__why > summary:focus-visible {
	outline: 2px solid var(--io138-air-accent);
	outline-offset: 2px;
}

/* 開いたら行いっぱいに広げて本文を読みやすくする */
.io138-air__why[open] {
	flex: 1 1 100%;
}

.io138-air__whyBody {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--io138-air-soft);
	color: var(--io138-air-fg);
	font-size: 13px;
	line-height: 1.7;
	white-space: pre-wrap;
}

/* 常時表示の注意文。muted は薄いのでコントラストの高い fg を使う。 */
.io138-air__hint {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--io138-air-fg);
}

.io138-air__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 14px;
}

.io138-air__fixed {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--io138-air-muted);
}

/* ---- まとめ ---- */
.io138-air__summary {
	margin: 0 0 14px;
	padding: 14px;
	background: var(--io138-air-soft);
	border: 1px solid var(--io138-air-line);
	border-radius: 8px;
}

.io138-air__summaryTitle {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--io138-air-muted);
}

.io138-air__summaryBody,
.io138-air__completion {
	margin: 0 0 12px;
	font-family: inherit;
	font-size: 14px;
	white-space: pre-wrap;
	word-break: break-word;
}

.io138-air__fields {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 14px;
	margin: 0;
	font-size: 14px;
}

.io138-air__fields dt {
	color: var(--io138-air-muted);
}

.io138-air__fields dd {
	margin: 0;
	word-break: break-word;
}

/* ---- 共通行 ---- */
.io138-air__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.io138-air__row--common {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--io138-air-line);
}

.io138-air__row > button {
	flex: 1 1 auto;
	width: auto;
}

/* ---- 期限警告 ---- */
.io138-air__warn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	max-width: 680px;
	margin: 0 auto 10px;
	padding: 10px 12px;
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	font-size: 14px;
}

.io138-air__warn button {
	width: auto;
	min-width: 90px;
}

.io138-air__consentText {
	margin: 0 0 12px;
	padding: 12px;
	background: var(--io138-air-soft);
	border-radius: 8px;
	font-size: 14px;
	white-space: pre-wrap;
}

.io138-air__link {
	display: inline-block;
	margin: 0 0 14px;
	font-size: 14px;
}

.io138-air__turnstile {
	margin: 10px 0;
}

/* Turnstile 直前の案内 2 行。行間 6px、2 行目と Turnstile の間 14px */
.io138-air__tsGuide {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--io138-air-fg);
}

.io138-air__tsGuideLead {
	margin: 0 0 6px;
}

.io138-air__tsGuideNote {
	margin: 0;
}

.io138-air__tsGuide + .io138-air__turnstile {
	margin-top: 0;
}

/* ---- スマホ: ほぼ全画面チャット型 ---- */
@media (max-width: 600px) {
	.io138-air {
		font-size: 16px;
	}

	.io138-air__card {
		min-height: calc(100dvh - 140px);
		margin: 0 -16px;
		padding: 16px;
		border-left: none;
		border-right: none;
		border-radius: 0;
		display: flex;
		flex-direction: column;
	}

	.io138-air__row > button {
		flex: 1 1 100%;
	}

	.io138-air__warn {
		margin: 0 -16px 10px;
		border-radius: 0;
	}

	/* 狭い画面ではバッジごと次行へ落とす。アイコンとテキストは分離させない。 */
	.io138-air__labelRow {
		gap: 6px 8px;
	}

	.io138-air__hint,
	.io138-air__why,
	.io138-air__whyBody {
		font-size: 13px;
	}

	/*
	 * ---- スマホの浮動チャットパネル ----
	 * パネル全体（.io138-air）を fixed にし、内部は「ヘッダー＋会話本文（スクロール）＋入力エリア」の縦並び。
	 * 入力欄自体は fixed にしない。上に元ページが少し見えるよう余白を残し、四辺とも背景から浮かせる。
	 * 高さは top / bottom で決める（100vh を使わない）。下端はキーボードの高さ（--io138-air-kb）に追従する。
	 */
	.io138-air {
		position: fixed;
		z-index: 9990;
		top: calc(env(safe-area-inset-top, 0px) + 68px);
		left: 10px;
		right: 10px;
		bottom: calc(var(--io138-air-kb, 0px) + env(safe-area-inset-bottom, 0px) + 10px);
		margin: 0;
		display: flex;
		flex-direction: column;
		background: var(--io138-air-bg);
		/* 白背景のページでも外周が分かる濃さ（黒い太枠にはしない） */
		border: 1px solid #94a3b8;
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.12);
		overflow: hidden;
	}

	/*
	 * キーボード表示中（JS が visualViewport から判定）: 元ページを見せるより入力領域を優先し、上余白を 14px に詰める。
	 * 上端は可視領域の上端（--io138-air-vvtop）基準。下端はキーボードの上 8px。安全注意文や「なぜ？」は隠さない。
	 * 高さは可視領域の高さ（--io138-air-vvh）から決める（下端を bottom で決めると、iOS で fixed の基準が縮んだときに二重に差し引く）。
	 */
	.io138-air.io138-air--kb {
		top: calc(var(--io138-air-vvtop, 0px) + env(safe-area-inset-top, 0px) + 14px);
		bottom: auto;
		height: calc(var(--io138-air-vvh, 100dvh) - env(safe-area-inset-top, 0px) - 22px);
	}

	/*
	 * キーボード非表示のとき（v0.2.4）: 下端を固定せず内容の高さにする（内容が少ない画面で本文に空白を作らない）。
	 * 最大の高さは従来の top / bottom から決まる高さと同じ式（100% は fixed の基準 = 従来と同じ基準）で、超える内容は本文だけがスクロール。
	 * Safari のツールバーの伸縮で基準が伸びても、内容が収まる限りパネルの高さは変わらない。キーボード表示中（--kb）は対象外。
	 */
	.io138-air:not(.io138-air--kb) {
		bottom: auto;
		max-height: calc(100% - env(safe-area-inset-top, 0px) - 68px - var(--io138-air-kb, 0px) - env(safe-area-inset-bottom, 0px) - 10px);
	}

	/* 閉じた状態: パネルを完全に隠す（再表示ボタンは出さない） */
	.io138-air.io138-air--closed {
		display: none;
	}

	/* ヘッダーバー（タイトル＋閉じる） */
	.io138-air__header {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		height: 44px;
		padding: 0 4px 0 16px;
		background: var(--io138-air-accent);
		color: #fff;
	}

	.io138-air__title {
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	.io138-air__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: none;
		border-radius: 8px;
		color: #fff;
		cursor: pointer;
	}

	.io138-air__close svg {
		width: 20px;
		height: 20px;
		stroke-width: 2;
	}

	.io138-air__close:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -4px;
	}

	/* 受付停止中などで中身が無いときは、空のパネルを出さない */
	.io138-air:empty {
		display: none;
	}

	.io138-air__warn {
		flex-shrink: 0;
		margin: 0;
		border-width: 0 0 1px;
		border-radius: 0;
	}

	/* 読み込み中・同意・エラーなど分割しない画面は、カード自体がスクロールする */
	.io138-air__card {
		flex: 1 1 auto;
		min-height: 0;
		margin: 0;
		padding: 16px 14px;
		border: none;
		border-radius: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* 会話の画面: カードは枠だけ。本文だけがスクロールする（二重スクロールにしない） */
	.io138-air__card--split {
		padding: 0;
		overflow: hidden;
	}

	.io138-air__body {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		padding: 16px 14px 12px;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.io138-air__card--split .io138-air__composer {
		flex-shrink: 0;
		padding: 10px 14px 12px;
		border-top: 1px solid var(--io138-air-line);
		background: var(--io138-air-soft);
	}

	/* 入力エリアの高さを抑える: 送信ボタンを入力欄の横へ（注意文と「なぜ？」は安全 UI のため残す） */
	.io138-air__card--split .io138-air__composer .io138-air__input {
		flex-direction: row;
		align-items: stretch;
		gap: 8px;
	}

	.io138-air__card--split .io138-air__composer .io138-air__textarea {
		flex: 1 1 auto;
		min-width: 0;
		height: 88px;
		min-height: 0;
		resize: none;
	}

	.io138-air__card--split .io138-air__composer .io138-air__primary {
		flex: 0 0 auto;
		width: auto;
		min-width: 64px;
		padding: 0 12px;
	}
}

/*
 * テーマの「トップへ戻る」ボタン（Lightning の #page_top）を、スマホのパネルの表示中だけ隠す（v0.2.3）。
 * .io138-air の外を対象にする例外（この ↑ と、下の v0.2.4 の背景のスクロール停止だけ）。body のクラスは JS（syncPageClass）が表示中だけ付ける。
 * !important は使わず、id を含むセレクタの詳細度でテーマの指定より優先させる。
 */
@media (max-width: 600px) {
	body.io138-air-panel-open #page_top,
	body.io138-air-panel-open .page_top_btn {
		display: none;
	}

	/* 表示中は背景ページをスクロールさせない（v0.2.4。html のクラスは JS の lockPage が表示中だけ付ける。タップの遮断は inert） */
	html.io138-air-lock,
	html.io138-air-lock body {
		overflow: hidden;
		overscroll-behavior: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.io138-air * {
		transition: none;
	}

	.io138-air__busy::before {
		animation: none;
	}
}

/* ---- 本人確認（rev3 addendum 7）: Google / メール OTP ---- */
.io138-air__verifyLead {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.7;
}

.io138-air__verifyMethods {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 12px;
}

.io138-air__gsi {
	min-height: 44px;
}

.io138-air__otp {
	letter-spacing: 0.2em;
	font-size: 18px;
}

.io138-air__verifyPhone {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	color: var(--io138-air-accent);
}

.io138-air__verifiedNote {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #15803d;
}