/* --- チャットボット用スタイル（統合版） --- */

/* 1. 右下の起動ボタン */
#chat-launcher {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 80px;
	height: 80px;
	background-color: #007bff; /* アースインフィニティのカラー */
	color: white;
	border-radius: 50%;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.3s;
}

#chat-launcher:hover {
	transform: scale(1.05);
}

/* 2. チャットウィンドウ本体 */
#chat-container {
	position: fixed;
	/* ボタンの少し上に表示 */
	bottom: 110px;

	/* ▼ 右寄せを指定 */
	right: 20px;
	left: auto; /* 念のため左寄せをリセット */

	width: 350px;
	height: 500px;

	background-color: white;
	border: 2px solid #ccc; /* 枠線 */
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

	display: flex;
	flex-direction: column;
	font-family: "Arial", sans-serif;
	overflow: hidden;
	z-index: 9999;

	/* ▼ アニメーション用：初期状態は非表示 */
	visibility: hidden;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

/* 3. 表示時のスタイル（activeクラスがついたとき） */
#chat-container.active {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

/* --- 以下、中身のパーツ --- */

/* チャットヘッダー（閉じるボタン含む） */
#chat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	background-color: #90d6ff; /* 少しグレーにして本文と区別 */
	border-bottom: 1px solid #ddd;
	color: #333;
	font-weight: bold;
}

#close-btn {
	font-size: 24px;
	cursor: pointer;
	line-height: 20px;
	color: #888;
}
#close-btn:hover {
	color: #333;
}

/* チャットボディ（スクロールエリア） */
#chat-body {
	flex: 1;
	padding: 12px;
	overflow-y: auto;
	background-color: #f9f9f9;
}

/* 吹き出し共通スタイル */
.bubble {
	display: flex;
	align-items: flex-start;
	margin: 8px 0;
	gap: 8px;
	line-height: 1.4;
}

.bubble img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	margin-top: 2px;
}

/* 吹き出しテキスト */
.bubble span {
	padding: 10px 14px;
	border-radius: 16px;
	max-width: 220px;
	display: inline-block;
	word-wrap: break-word; /* 長い文字の折り返し */
}

/* Botメッセージ */
.bot-msg {
	flex-direction: row;
}
.bot-msg span {
	background-color: #e0f0ff;
	color: #333;
	border-top-left-radius: 0; /* 吹き出しっぽく角を調整 */
}

/* ユーザーメッセージ */
.user-msg {
	flex-direction: row-reverse;
}
.user-msg span {
	background-color: #d1f7d6;
	color: #333;
	border-top-right-radius: 0;
}

/* ボタン群エリア */
#options {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
	/* 右寄せにするか左のままにするかはお好みで。現在は左寄せ */
}

/* 選択肢ボタン */
.option-button {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 10px;
	border-radius: 20px; /* 角丸を強めに */
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	transition: background-color 0.2s;
}
.option-button:hover {
	background-color: #0056b3;
}

/* タイピング風表示 */
.typing span {
	font-style: italic;
	color: #aaa;
	background-color: transparent;
}