#apcb-widget-root {
	--apcb-button-color: #2563eb;
	--apcb-bottom-offset: 24px;
	--apcb-right-offset: 20px;
	position: fixed;
	right: var(--apcb-right-offset);
	bottom: var(--apcb-bottom-offset);
	z-index: 999999;
	/*
	 * サイト側で設定されているフォントをそのまま使う（テーマ非依存を保つため、
	 * 特定テーマのCSS変数名には依存せず、bodyから継承されるfont-familyに委ねる）。
	 * OSフォントへのフォールバック一式は、テーマ側が独自のフォント指定を持たない
	 * 場合に備えてbody側で既に用意されているはずのものに任せる。
	 */
	font-family: inherit;
}

.apcb-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: none;
	background: var(--apcb-button-color);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.apcb-toggle:hover {
	transform: scale(1.05);
}

.apcb-toggle--active {
	transform: scale(0.95);
}

.apcb-panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	width: min(340px, calc(100vw - 40px));
	max-height: min(480px, calc(100vh - 140px));
	/* iOS Safariはアドレスバーの表示/非表示で実際の表示領域が変わるが、
	   100vhは「アドレスバーが隠れた時点の最大サイズ」で固定計算されるため、
	   スクロール中にパネルが実際の表示領域からズレて見える（かぶる）不具合があった。
	   100dvh（動的ビューポート単位、iOS Safari 15.4+）はその時点の実表示領域を返すため
	   後勝ちで上書きし、非対応ブラウザでは無効な宣言として無視されvhのままフォールバックする。 */
	max-height: min(480px, calc(100dvh - 140px));
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.98);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.apcb-panel--open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.apcb-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	background: var(--apcb-button-color);
	color: #fff;
	flex-shrink: 0;
}

.apcb-panel__title {
	font-size: 15px;
	font-weight: bold;
	flex: 1;
	text-align: center;
}

.apcb-panel__back,
.apcb-panel__close {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 0 0 auto;
	min-width: 54px;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	padding: 4px;
	white-space: nowrap;
	opacity: 0.9;
	transition: opacity 0.15s ease;
}

.apcb-panel__back:hover,
.apcb-panel__close:hover {
	opacity: 1;
}

.apcb-panel__back[hidden] {
	/*
	 * hidden属性標準のdisplay:noneのままだと、戻るボタンがflexレイアウトから
	 * 完全に消えて幅を失い、中央のタイトル（.apcb-panel__title、flex:1）が
	 * 左（閉じるボタン側）に寄って見えてしまう。表示上は隠しつつ幅だけ保持し、
	 * タイトルの中央揃えを保つ。
	 */
	display: flex;
	visibility: hidden;
}

.apcb-panel__close {
	font-size: 22px;
	margin-right: 4px;
}

.apcb-panel__body {
	padding: 0px 16px;
	/* scrollbar-color（Firefox）はつまみの角丸・余白を一切カスタマイズできず、
	   トラックいっぱいに塗りつぶされた棒がパネル右端・上端にぴったり付いてしまう。
	   ::-webkit-scrollbar-thumbのborderトリック（下記）はWebKit/Blink系にしか
	   効かないため、ブラウザを問わず確実に余白を作れるよう、スクロール領域自体を
	   marginでパネル右端・上端から少し内側にずらす（スクロールバーもこの領域の
	   内側に収まるため、結果的にどのブラウザでも上端・右端から余白が空く。
	   paddingでは同じ理由でスクロールバー自体の位置は動かせない）。 */
	margin: 8px 6px 0 0;
	max-height: 350px;
	overflow-y: auto;
	background: #fff;
	transition: opacity 0.14s ease, transform 0.14s ease;
	/* スクロールバーの色は.apcb-panel__headerの背景と同じ--apcb-button-color
	   （管理画面の色設定、chatbot-widget.jsがroot要素にセット済み）を使う。 */
	scrollbar-width: thin;
	scrollbar-color: var(--apcb-button-color) transparent;
}

.apcb-panel__body::-webkit-scrollbar {
	width: 10px;
}

.apcb-panel__body::-webkit-scrollbar-track {
	background: transparent;
}

.apcb-panel__body::-webkit-scrollbar-thumb {
	background: var(--apcb-button-color);
	border-radius: 999px;
	/* トラック幅より細いつまみにして周囲に余白を作る（トラックは透明なので
	   境界線ぶんが余白として見える）。background-clipで色が境界線側に
	   はみ出さないようにする。 */
	border: 3px solid transparent;
	background-clip: padding-box;
}

.apcb-panel__body--transitioning {
	opacity: 0;
	transform: translateX(6px);
}

.apcb-node__title {
	margin: 24px auto 24px;
	font-size: 15px;
	font-weight: bold;
	color: #111;
	text-align: center;
}

.apcb-node__message {
	margin: 24px auto 24px;
	font-size: 14px;
	line-height: 1.7;
	color: #333;
	white-space: pre-wrap;
	text-align: center;
}

.apcb-node__message a {
	color: var(--apcb-button-color);
}

.apcb-node__choices {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 24px auto 32px;
}

.apcb-choice {
	text-align: center;
	padding: 16px 16px;
	border: none;
	border-radius: 10px;
	background: #fff;
	color: #111;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.apcb-choice:hover {
	background: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
	transform: translateX(2px);
}

.apcb-choice:active {
	transform: translateX(0);
}

.apcb-choice--primary {
	text-align: center;
	background: var(--apcb-button-color);
	border-color: var(--apcb-button-color);
	color: #fff;
	font-weight: bold;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.apcb-choice--primary:hover {
	/*
	 * .apcb-choice:hover が background:#fff を指定しており、同じ詳細度のセレクタ同士では
	 * 後勝ちにならないと上書きされない（このルール側でbackground未指定だと白背景が残って
	 * しまっていた）。強調ボタンの色を明示的に指定し直し、影を強めるだけにする。
	 */
	background: var( --apcb-button-color );
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.apcb-choice--primary:active {
	transform: translateY(0);
}

@media ( max-width: 480px ) {
	#apcb-widget-root {
		right: 12px;
	}

	.apcb-panel {
		width: calc(100vw - 24px);
	}
}

/* SPのみ、パネルの背面に暗いオーバーレイを敷いてモーダル風に見せる。
   .apcb-overlayの生成・表示切り替えはchatbot-widget.js側で行う。 */
.apcb-overlay {
	display: none;
}

@media ( max-width: 768px ) {
	.apcb-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.apcb-overlay--visible {
		display: block;
	}

	/* 380px以下（次のブロックで上書き）を除き、パネルは画面中央に配置する。
	   position:fixedに切り替えるため、#apcb-widget-root基準のright/bottomは打ち消す。
	   開閉アニメーションのtransformは中央寄せのtranslate(-50%,-50%)と合成する。 */
	.apcb-panel {
		position: fixed;
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translate(-50%, -50%) translateY(10px) scale(0.98);
		transform-origin: center;
	}

	.apcb-panel.apcb-panel--open {
		transform: translate(-50%, -50%) translateY(0) scale(1);
	}
}

/* 380px以下のみ、中央配置をやめて元の右下アンカー表示に戻し、bottomだけ-8pxにする。 */
@media ( max-width: 380px ) {
	.apcb-panel {
		position: absolute;
		top: auto;
		left: auto;
		right: 0;
		bottom: -8px;
		transform: translateY(10px) scale(0.98);
		transform-origin: bottom right;
	}

	.apcb-panel.apcb-panel--open {
		transform: translateY(0) scale(1);
	}
}