/* ==========================================================================
	 AIチャットサポートウィジェット CSS
	 --------------------------------------------------------------------------
	 ・すべてのセレクタを #aichat 配下に限定し、既存サイトのCSSと絶対に
		 衝突しないようにしている(例: #aichat .aichat-panel のように必ず前置)
	 ・カラー/余白などの調整値は :root ではなく #aichat 直下のCSS変数として
		 定義し、他のウィジェットや既存サイトのCSS変数と混ざらないようにする
	 ========================================================================== */

#aichat {
	/* ---- デザイントークン(このウィジェット内だけで使う変数) ---- */
	--aichat-navy: #16233F;      /* ベースカラー(ヘッダー・送信ボタンなど) */
	--aichat-navy-mid: #1E3160;  /* ホバー時などの少し明るいネイビー */
	--aichat-brass: #C79A46;     /* アクセントカラー(真鍮色) */
	--aichat-brass-soft: #E4C888;
	--aichat-paper: #F7F6F2;     /* パネル全体の背景 */
	--aichat-ai-bubble: #EEF1F6; /* AI発言の吹き出し背景 */
	--aichat-line: #E2E0D8;      /* 罫線色 */
	--aichat-text: #16233F;      /* 基本文字色 */
	--aichat-text-sub: #5B6472;  /* 補足文字色 */

	/* フォントサイズの基準になる値。ボタン等のpx指定はできるだけ
		 この値からの計算にせず、読みやすさ優先で直接指定している。 */
	font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
	color: var(--aichat-text);
}

/* すべての子要素で box-sizing を統一(親サイトの指定に依存しないようにする) */
#aichat, #aichat * {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
	 ① フローティングボタン(常に画面左下に固定表示)
	 -------------------------------------------------------------------------- */
#aichat .aichat-toggle {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9998; /* パネルより下、他サイトの要素より上にくる想定 */

	display: flex;
	align-items: center;
	gap: 8px;

	padding: 12px 18px;
	border: none;
	border-radius: 100px;
	background: var(--aichat-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;

	box-shadow: 0 8px 24px rgba(22, 35, 63, 0.35);
	transition: background 0.15s, transform 0.1s;
}
#aichat .aichat-toggle:hover {
	background: var(--aichat-navy-mid);
}
#aichat .aichat-toggle:active {
	transform: scale(0.97);
}
#aichat .aichat-toggle-icon {
	font-size: 18px;
}

/* パネルが開いている間は、ボタンを隠す(閉じるボタンと役割が重複するため) */
#aichat.aichat-is-open .aichat-toggle {
	display: none;
}

/* --------------------------------------------------------------------------
	 ② チャットパネル本体
	 PC: 左下に固定表示される、幅380pxのカード
	 スマホ: 画面いっぱいに表示する(下のmedia queryで上書き)
	 -------------------------------------------------------------------------- */
#aichat .aichat-panel {
	/* 初期状態は非表示。JSが #aichat に .aichat-is-open を付けたときだけ表示する */
	display: none;

	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9999;

	width: 380px;
	max-width: calc(100vw - 40px);
	height: 600px;
	max-height: calc(100vh - 40px);

	background: var(--aichat-paper);
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(22, 35, 63, 0.3);
	overflow: hidden;

	flex-direction: column; /* display:flex にした時に縦積みにするため(下で有効化) */
}

/* 開いている時だけ表示する。JSは display の出し分けだけを気にすればいいように、
	 ここで display:flex まで含めてこのクラスが担う。 */
#aichat.aichat-is-open .aichat-panel {
	display: flex;
}

/* --------------------------------------------------------------------------
	 ③ ヘッダー
	 -------------------------------------------------------------------------- */
#aichat .aichat-header {
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;

	padding: 16px 16px 14px;
	background: var(--aichat-navy);
	color: #fff;
	position: relative;
}
/* ヘッダー下部の細いアクセントライン */
#aichat .aichat-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--aichat-brass) 0%, var(--aichat-brass-soft) 60%, transparent 100%);
}

#aichat .aichat-header-title {
	display: flex;
	align-items: center;
	gap: 10px;
}
#aichat .aichat-header-mark {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--aichat-brass);
	color: var(--aichat-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
}
#aichat .aichat-header-name {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
#aichat .aichat-header-sub {
	margin: 2px 0 0;
	font-size: 11px;
	color: #C9CFDC;
}

#aichat .aichat-close {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
#aichat .aichat-close:hover {
	background: rgba(255,255,255,0.22);
}

/* --------------------------------------------------------------------------
	 ④ メッセージ表示エリア
	 -------------------------------------------------------------------------- */
#aichat .aichat-thread {
	flex: 1; /* ヘッダーと入力フォームの間を、可変で埋める */
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 発言1件分の行(左寄せ=AI / 右寄せ=ユーザー、をJS側でクラス指定して切り替える) */
#aichat .aichat-row {
	display: flex;
}
#aichat .aichat-row.is-ai {
	justify-content: flex-start;
}
#aichat .aichat-row.is-user {
	justify-content: flex-end;
}

/* 吹き出し共通スタイル */
#aichat .aichat-bubble {
	max-width: 85%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.65;
	white-space: pre-wrap; /* AIの回答内の改行をそのまま見た目に反映する */
	word-break: break-word;
}
#aichat .aichat-row.is-ai .aichat-bubble {
	background: var(--aichat-ai-bubble);
	border-bottom-left-radius: 4px;
}
#aichat .aichat-row.is-user .aichat-bubble {
	background: var(--aichat-navy);
	color: #fff;
	border-bottom-right-radius: 4px;
}

/* 「AIが入力中…」を示す3点アニメーション */
#aichat .aichat-typing {
	display: flex;
	gap: 4px;
	padding: 4px 2px;
}
#aichat .aichat-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8891A0;
	animation: aichat-bounce 1.2s infinite;
}
#aichat .aichat-typing span:nth-child(2) { animation-delay: 0.15s; }
#aichat .aichat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aichat-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
	 ⑤ 入力フォーム
	 -------------------------------------------------------------------------- */
#aichat .aichat-form {
	flex-shrink: 0;
	display: flex;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid var(--aichat-line);
	background: #fff;
}
#aichat .aichat-input {
	flex: 1;
	min-width: 0; /* flexアイテムがはみ出さないようにするための定番指定 */
	border: 1px solid var(--aichat-line);
	border-radius: 100px;
	padding: 10px 15px;
	font-size: 13.5px;
	font-family: inherit;
	background: var(--aichat-paper);
	outline: none;
}
#aichat .aichat-input:focus {
	border-color: var(--aichat-brass);
}
#aichat .aichat-send {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: var(--aichat-navy);
	color: var(--aichat-brass-soft);
	font-size: 14px;
	cursor: pointer;
}
#aichat .aichat-send:hover {
	background: var(--aichat-navy-mid);
}
#aichat .aichat-send:disabled {
	opacity: 0.5;
	cursor: default;
}

#aichat .aichat-hint {
	flex-shrink: 0;
	margin: 0;
	padding: 6px 14px 10px;
	font-size: 10.5px;
	color: var(--aichat-text-sub);
	background: #fff;
	text-align: center;
}

/* --------------------------------------------------------------------------
	 ⑥ レスポンシブ対応
	 スマホ(横幅600px以下)ではパネルを画面いっぱいに表示する
	 -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	#aichat .aichat-panel {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0; /* 全画面表示なので角丸は不要 */
	}

	/* --- フローティングボタン ---
	   スマホはフッター(固定の下部メニュー等)と重ならないよう、画面左端の
	   縦方向中央に配置する。文字ラベルは消してアイコンのみの小さな丸ボタンにし、
	   場所を取らないようにする。 */
	#aichat .aichat-toggle {
		left: auto;
		right: 12px;
		bottom: auto;
		top: 50%;
		transform: translateY(-50%);

		width: 44px;
		height: 44px;
		padding: 0;
		gap: 0;
		border-radius: 50%;
		justify-content: center;
	}
	#aichat .aichat-toggle-text {
		/* スマホでは文字ラベルを非表示にし、アイコンだけにする */
		display: none;
	}
	#aichat .aichat-toggle-icon {
		font-size: 20px;
	}

	/* --- 入力欄のズーム対策 ---
	   iOS Safariは、フォーカスした入力欄のfont-sizeが16px未満だと、
	   画面全体を自動的に拡大(ズーム)する仕様がある。PC向けには13.5pxを
	   指定しているが、スマホではそれが原因で入力時に画面がはみ出して見えるため、
	   スマホの時だけ16px以上に上書きしてズームの発生自体を防ぐ。 */
	#aichat .aichat-input {
		font-size: 16px;
	}
}