/**
 * チャットボットのスタイル
 *
 * モバイル: 全画面表示（利用者の多くがスマートフォンの前提）。
 * デスクトップ（783px以上）: 右下の固定パネル。
 * 選択肢ボタンは44px以上のタップ領域、入力欄は16px以上
 * （iOS Safariのフォーカス時自動ズーム防止）。
 */

.merci-chatbot {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.4);
}

.merci-chatbot[hidden] {
	display: none;
}

/* パネル表示中は背景のスクロールを止める（スクロールはログ内で完結させる） */
.merci-chatbot-open,
.merci-chatbot-open body {
	overflow: hidden;
}

.merci-chatbot__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	/* ログの内容がパネル外・タイトルバー上へはみ出さないよう常にクリップする */
	overflow: hidden;
}

.merci-chatbot__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	padding: 12px 16px;
	background: #1a3c6e;
	color: #fff;
	/* テーマ側CSSの影響で吹き出しが上に乗らないよう、タイトルバーを
	   会話ログより手前に描画する（重なり順を明示する）。 */
	position: relative;
	z-index: 2;
}

.merci-chatbot__title {
	font-size: 16px;
	font-weight: 700;
}

.merci-chatbot__close {
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.merci-chatbot__log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	-webkit-overflow-scrolling: touch;
	position: relative;
	z-index: 1;
}

.merci-chatbot__message {
	display: flex;
	margin-bottom: 10px;
}

.merci-chatbot__message--bot {
	justify-content: flex-start;
}

.merci-chatbot__message--user {
	justify-content: flex-end;
}

.merci-chatbot__bubble {
	max-width: 85%;
	margin: 0;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 15px;
	line-height: 1.6;
	word-break: break-word;
}

.merci-chatbot__message--bot .merci-chatbot__bubble {
	background: #f0f2f5;
	color: #1e1e1e;
	border-bottom-left-radius: 4px;
}

.merci-chatbot__message--user .merci-chatbot__bubble {
	background: #1a3c6e;
	color: #fff;
	border-bottom-right-radius: 4px;
}

/* 一覧・金額内訳を含む吹き出しは内容依存の幅にしない（右端を揃える） */
.merci-chatbot__bubble--block {
	width: 85%;
}

.merci-chatbot__input {
	flex-shrink: 0;
	padding: 12px 16px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #ddd;
	background: #fff;
	max-height: 50%;
	overflow-y: auto;
	position: relative;
	z-index: 2;
}

.merci-chatbot__choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.merci-chatbot__choice {
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid #1a3c6e;
	border-radius: 8px;
	background: #fff;
	color: #1a3c6e;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.merci-chatbot__choice:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.merci-chatbot__choice--primary {
	background: #1a3c6e;
	color: #fff;
}

/* 入力フォームの下に添える補助ボタンの間隔 */
.merci-chatbot__choices--after-form {
	margin-top: 8px;
}

/* 戻る・やめる系の補助選択肢。主導線と見分けがつくよう控えめにする */
.merci-chatbot__choice--secondary {
	border-color: #9aa5b1;
	color: #4a5562;
	background: #f7f8fa;
	font-size: 14px;
}

.merci-chatbot__choice--toggle[aria-pressed="true"] {
	background: #e8f0fe;
	box-shadow: inset 0 0 0 2px #1a3c6e;
}

.merci-chatbot__choice-note {
	display: block;
	font-size: 12px;
	opacity: 0.75;
	margin-top: 2px;
}

.merci-chatbot__form {
	display: flex;
	gap: 8px;
}

.merci-chatbot__field {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #999;
	border-radius: 8px;
	font-size: 16px; /* iOSの自動ズーム防止のため16px未満にしない */
}

/* 選択済み機種の一覧（1機種=商品名+要約の縦積み、削除ボタンは右端固定） */
.merci-chatbot__items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.merci-chatbot__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.merci-chatbot__item + .merci-chatbot__item {
	border-top: 1px solid #ddd;
	padding-top: 10px;
}

.merci-chatbot__item-body {
	flex: 1 1 auto;
	min-width: 0; /* flex子のはみ出し防止。これが無いと長い商品名が幅を壊す */
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.merci-chatbot__item-title {
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* 要約（台数・オプション）と機種ごとの金額を1行に並べる。狭い画面で
   要約が長いときは金額が下段へ折り返し、縦1行分の増加に収める */
.merci-chatbot__item-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 2px 12px;
	min-width: 0;
}

.merci-chatbot__item-detail {
	flex: 1 1 auto;
	font-size: 13px;
	color: #555;
	overflow-wrap: anywhere;
}

.merci-chatbot__item-amount {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.merci-chatbot__items-note {
	margin: 0;
	font-size: 12px;
	color: #666;
}

.merci-chatbot__item-remove {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin-top: -6px; /* タップ領域44pxを保ちつつ行高への影響を抑える */
	border: 1px solid #bbb;
	border-radius: 50%;
	background: #fff;
	color: #555;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* 金額内訳（ラベル: 値）。値は金額で短いため右列を内容幅にし、
   ラベル側を伸縮させて長い割引名でも1文字ずつの縦折り返しを起こさない */
.merci-chatbot__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 12px;
	margin: 0;
	font-size: 14px;
}

.merci-chatbot__summary dt {
	color: #555;
	overflow-wrap: anywhere;
}

.merci-chatbot__summary dd {
	margin: 0;
	text-align: right;
}

.merci-chatbot__summary-strong {
	font-weight: 700;
	font-size: 16px;
	color: #1e1e1e;
}

/* デスクトップ: 右下パネル */
@media (min-width: 783px) {
	.merci-chatbot {
		background: transparent;
		pointer-events: none;
	}

	/* 幅はウィンドウの約50%、高さは約75%（2026-08-17 に50%から拡大）。
	   極端に大きい画面では上限（幅900px・高さ1000px）、小さいウィンドウでは
	   下限（幅400px・高さ560px＝タイトルバー約56px＋入力欄約100px＋会話ログ約400px）
	   で止め、それでもウィンドウに収まらない場合は余白24pxを残して収める
	   （1366×768 でブラウザUIを除いた高さ約650pxなら 75vh≒487px→下限560pxが効き、
	   ウィンドウ高−48px を超えないため入力欄が画面外に出ることはない）。
	   縦の内訳はパネル内の flex 配置（ヘッダー・入力欄は flex-shrink:0、会話ログだけが
	   flex:1 でスクロール、入力欄は max-height:50% で自前スクロール）のため、高さが
	   変わっても入力欄と送信ボタンは常に見える位置に留まる。
	   スマートフォン（782px以下）の全画面表示はこの外側の指定のまま。 */
	.merci-chatbot__panel {
		pointer-events: auto;
		inset: auto 24px 24px auto;
		width: min(clamp(400px, 50vw, 900px), calc(100vw - 48px));
		height: min(clamp(560px, 75vh, 1000px), calc(100vh - 48px));
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
	}
}

/* ---- 第6段階: 入口メニュー・FAQモード ---- */

/* 全ページ共通の常設ランチャー（右下）。パネル表示中は隠す */
.merci-chatbot-launcher {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	min-height: 48px;
	padding: 12px 18px;
	border: 0;
	border-radius: 24px;
	background: #1a3c6e;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.merci-chatbot-launcher:hover,
.merci-chatbot-launcher:focus-visible {
	background: #244f8f;
}

.merci-chatbot-open .merci-chatbot-launcher {
	display: none;
}

/* パネル上部の「質問する」（注文フローの途中で FAQ へ） */
.merci-chatbot__help {
	margin-left: auto;
	margin-right: 4px;
	min-height: 36px;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 18px;
	background: transparent;
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
}

.merci-chatbot__help[hidden] {
	display: none;
}

/* FAQの回答（段落＋FAQページへのリンク） */
.merci-chatbot__answer-paragraph {
	margin: 0 0 8px;
}

.merci-chatbot__answer-paragraph:last-child {
	margin-bottom: 0;
}

.merci-chatbot__answer-link {
	margin: 8px 0 0;
	font-size: 13px;
}

.merci-chatbot__answer-link a {
	color: #1a3c6e;
	text-decoration: underline;
}

/* 法務ページへのリンク（確認画面・複数を横並び） */
.merci-chatbot__legal-links a {
	margin-right: 14px;
}