/* AI相談ボタン フロント用スタイル */

/* ---- フローティングボタン本体 ---- */
.aicb-root {
	position: fixed;
	bottom: 24px;
	z-index: 99990;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.aicb--right { right: 24px; }
.aicb--left  { left: 24px; }

.aicb-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: none;
	border-radius: 999px;
	background: var(--aicb-btn-bg, #1a73e8);
	color: var(--aicb-btn-color, #fff);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
	transition: transform .15s ease, box-shadow .15s ease;
}
.aicb-toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.aicb-toggle-icon { display: inline-flex; }

/* ---- パネル ---- */
.aicb-panel {
	position: absolute;
	bottom: calc(100% + 12px);
	width: 280px;
	max-width: calc(100vw - 48px);
	/* 低ビューポート高（横向きスマホ等）でも画面外にはみ出さず自前でスクロールできるようにする */
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	color: #222;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
	padding: 16px;
	box-sizing: border-box;
}

/* スクリーンリーダー専用テキスト（新しいタブで開く旨の通知など） */
.aicb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.aicb--right .aicb-panel { right: 0; }
.aicb--left  .aicb-panel { left: 0; }

.aicb-panel-title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	color: #555;
}

.aicb-services {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.aicb-service {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px; /* タップターゲット確保（WCAG 2.5.5） */
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fafafa;
	color: #222;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
	transition: background .15s ease, border-color .15s ease;
}
/* テーマの a:visited リセットに文字色を奪われないよう明示する */
.aicb-service:visited {
	color: #222;
}
.aicb-service:hover {
	background: #f0f4ff;
	border-color: var(--aicb-btn-bg, #1a73e8);
	color: #222;
}
.aicb-service-arrow {
	font-size: 12px;
	color: #999;
}

/* ---- プロンプト開示 ---- */
.aicb-preview {
	margin-top: 12px;
	font-size: 12px;
}
.aicb-preview summary {
	cursor: pointer;
	color: #666;
}
.aicb-preview-text {
	margin: 8px 0 0;
	padding: 8px;
	max-height: 140px;
	overflow-y: auto;
	background: #f5f5f5;
	border-radius: 6px;
	font-size: 11px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-all;
}

/* ---- 注記 ---- */
.aicb-note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #666; /* 白背景でコントラスト比 4.5:1 以上（WCAG AA） */
}

/* ---- ショートコード（インライン設置） ---- */
.aicb-inline-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 1em 0;
}
.aicb-inline-group .aicb-service {
	flex: 0 1 auto;
	gap: 6px;
}
.aicb-inline-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--aicb-btn-bg, #1a73e8);
	color: var(--aicb-btn-color, #fff);
	font-weight: 700;
	text-decoration: none;
	transition: opacity .15s ease;
}
/* テーマの a:visited リセットに文字色を奪われないよう明示する */
.aicb-inline-btn:visited {
	color: var(--aicb-btn-color, #fff);
}
.aicb-inline-btn:hover {
	opacity: .85;
	color: var(--aicb-btn-color, #fff);
}

/* ==========================================================
 * デザインパターン
 * .aicb-btn はフローティングボタン(.aicb-toggle)と
 * ショートコード単体ボタン(.aicb-inline-btn)の共通クラス
 * ========================================================== */

/* --- square: スクエア --- */
.aicb-btn.aicb-style--square {
	border-radius: 10px;
}

/* --- circle: アイコンのみ（円形／フローティング専用。インラインはピル型のまま） --- */
.aicb-toggle.aicb-style--circle {
	width: 56px;
	height: 56px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
}
.aicb-toggle.aicb-style--circle .aicb-toggle-icon svg {
	width: 26px;
	height: 26px;
}
.aicb-toggle.aicb-style--circle .aicb-toggle-label {
	/* ラベルは視覚的に隠す（スクリーンリーダーには読ませる） */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- gradient: グラデーション --- */
.aicb-btn.aicb-style--gradient {
	background: linear-gradient(135deg, var(--aicb-btn-bg, #1a73e8), var(--aicb-btn-bg2, #8b5cf6));
}

/* --- glass: ガラス（すりガラス） --- */
.aicb-btn.aicb-style--glass {
	background: rgba(255, 255, 255, .55);
	color: #111;
	border: 1px solid rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

/* --- outline: アウトライン --- */
.aicb-btn.aicb-style--outline {
	background: #fff;
	color: var(--aicb-btn-bg, #1a73e8);
	border: 2px solid var(--aicb-btn-bg, #1a73e8);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* --- neon: ネオン --- */
.aicb-btn.aicb-style--neon {
	background: #14141f;
	color: #fff;
	border: 1px solid var(--aicb-btn-bg, #1a73e8);
	/* color-mix() 非対応ブラウザ向けフォールバック（後続の宣言が無効な場合に有効になる） */
	box-shadow: 0 0 6px var(--aicb-btn-bg, #1a73e8), 0 0 18px var(--aicb-btn-bg, #1a73e8);
	box-shadow: 0 0 6px var(--aicb-btn-bg, #1a73e8),
		0 0 18px color-mix(in srgb, var(--aicb-btn-bg, #1a73e8) 55%, transparent),
		inset 0 0 6px color-mix(in srgb, var(--aicb-btn-bg, #1a73e8) 35%, transparent);
	text-shadow: 0 0 6px var(--aicb-btn-bg, #1a73e8);
}

/* --- pop: 立体（押し込み） --- */
.aicb-btn.aicb-style--pop {
	border-radius: 12px;
	/* color-mix() 非対応ブラウザ向けフォールバック */
	box-shadow: 0 5px 0 rgba(0, 0, 0, .45), 0 8px 16px rgba(0, 0, 0, .2);
	box-shadow: 0 5px 0 color-mix(in srgb, var(--aicb-btn-bg, #1a73e8) 60%, #000),
		0 8px 16px rgba(0, 0, 0, .2);
}
.aicb-btn.aicb-style--pop:hover {
	transform: none;
}
.aicb-btn.aicb-style--pop:active {
	transform: translateY(4px);
	/* color-mix() 非対応ブラウザ向けフォールバック */
	box-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--aicb-btn-bg, #1a73e8) 60%, #000),
		0 2px 6px rgba(0, 0, 0, .2);
}

/* --- soft: ソフト（ニューモーフィズム風） --- */
.aicb-btn.aicb-style--soft {
	background: #f0f2f7;
	color: #444;
	box-shadow: 6px 6px 12px rgba(0, 0, 0, .12), -6px -6px 12px rgba(255, 255, 255, .95);
}
.aicb-btn.aicb-style--soft .aicb-toggle-icon,
.aicb-btn.aicb-style--soft .aicb-toggle-label {
	color: var(--aicb-btn-bg, #1a73e8);
}

/* --- pulse: パルス（波紋アニメ） --- */
.aicb-btn.aicb-style--pulse {
	position: relative;
	/* ::after(z-index:-1) がボタンの背面・かつ周囲要素の前面に収まるよう独立したスタッキングコンテキストを作る */
	isolation: isolate;
}
.aicb-btn.aicb-style--pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--aicb-btn-bg, #1a73e8);
	z-index: -1;
	animation: aicb-pulse 2s ease-out infinite;
}
@keyframes aicb-pulse {
	0%   { transform: scale(1); opacity: .6; }
	70%  { transform: scale(1.35); opacity: 0; }
	100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.aicb-btn.aicb-style--pulse::after { animation: none; }
}

/* ---- スマホ調整 ---- */
@media (max-width: 480px) {
	.aicb-root { bottom: 16px; }
	.aicb--right { right: 16px; }
	.aicb--left  { left: 16px; }
	/* min-height 44px でタップターゲットを確保する（WCAG 2.5.5） */
	.aicb-toggle {
		padding: 10px 16px;
		font-size: 14px;
		min-height: 44px;
		box-sizing: border-box;
	}
}