/* ============================================================
   介護度判定 チャットページ固有CSS
   共通UI・トークンは common.css（:root）。ここは main（サービス固有）専用。
   方針：ケアプラン作成のチャットUIに寄せる。
     - 白カードを撤去し、body のグレー背景に同化（吹き出しだけ色を持つ）
     - 選択肢はエリア固定せず、会話の流れの末尾（最新質問の直下）に表示
     - ページ全体が自然にスクロール（app-fixed はしない）
     - 新規メッセージは下から fadeInUp（チャット感）
   ブレークポイント規約：スマホ ~599 / タブレット 600~1023 / PC 1024~
   ============================================================ */

.chat-section {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* チャットカードは背景・枠なし＝ページのグレーに同化 */
.chat-container {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* メッセージ列：内部スクロールせず、内容ぶん伸びてページ全体でスクロール */
.chat-messages {
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 0.5rem 0;
}

/* --- メッセージ吹き出し ------------------------------------------------ */
.message {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	/* 下から流れて出るチャット感 */
	animation: fadeInUp 0.3s ease-out;
	/* 固定ヘッダー分のオフセット（頭出しスクロール時に隠れないように） */
	scroll-margin-top: calc(var(--header-h) + 1rem);
}

.message.bot {justify-content: flex-start;}

/* ユーザーアイコンは廃止。吹き出しは右寄せ */
.message.user {justify-content: flex-end;}

.message-bubble {
	max-width: 78%;
	padding: 0.85rem 1.1rem;
	border-radius: 14px;
	font-size: 1.05rem;
	line-height: 1.7;
	word-wrap: break-word;
}

/* 通常のボット吹き出し＝白 */
.message.bot .message-bubble {
	background-color: #ffffff;
	border: 1px solid #e6e0ea;
	color: var(--c-text);
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* 冒頭あいさつ＝ピンクで特別感（ケアプランと同系） */
.message.bot.welcome .message-bubble {
	background-color: var(--c-accent-pink);
	border: 1px solid #eabad0;
	color: var(--c-text);
}

/* ユーザー回答＝薄ピンク */
.message.user .message-bubble {
	background-color: #f6eef3;
	border: 1px solid #e4cdda;
	color: var(--c-text);
}

/* ボットアバター（ユーザー側は廃止） */
.bot-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background-color: var(--c-primary);
	overflow: hidden;
}

/* 回答一覧（判定生成前に、結果とは分けて表示する確認ブロック） */
.answer-summary {
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	padding: 1rem 1.25rem;
	margin: 0 auto;
	max-width: 1000px;
	width: 100%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	animation: fadeInUp 0.3s ease-out;
}

.answer-summary h4 {
	color: var(--c-primary);
	font-size: 1.1rem;
	margin-bottom: 0.75rem;
}

.answer-summary dl {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 0.4rem 1rem;
}

.answer-summary dt {
	font-weight: 700;
	color: var(--c-text);
}

.answer-summary dd {
	color: var(--c-text);
}

/* 確認ステップ（Q9回答後・生成前）の操作ボタン群 */
.answer-summary.confirm-step .confirm-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}
.confirm-actions .confirm-run-btn {
	background: var(--c-primary);
	color: #ffffff;
	border: none;
	padding: 1rem 2rem;
	border-radius: 0.6rem;
	cursor: pointer;
	transition: all 0.3s;
	font-size: 1.15rem;
	font-weight: 600;
	width: 100%;
	max-width: 600px;
	text-align: center;
}
.confirm-actions .confirm-run-btn:hover {
	background-color: var(--c-primary-light);
}
.confirm-actions .confirm-back-btn {
	background: transparent;
	border: 1px solid var(--c-border);
	color: #777;
	border-radius: var(--radius-card);
	cursor: pointer;
	padding: 0.5rem 1.25rem;
	font-size: 0.9rem;
	transition: all 0.2s ease;
}
.confirm-actions .confirm-back-btn:hover {
	background: #f0f0f0;
	color: var(--c-primary);
	border-color: var(--c-primary-light);
}

/* 戻るボタンのリロード風アイコン：テキストと横並び・中央寄せ（両サイト共通の見た目） */
.back-btn,
.confirm-actions .confirm-back-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
}
.back-btn-icon {
	display: inline-flex;
	line-height: 0;
}
.back-btn-icon svg {
	display: block;
	width: 1.1em;
	height: 1.1em;
}

/* --- 入力エリア：会話の流れの末尾に置かれる（固定フッターではない） ------ */
.chat-input {
	background: transparent;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* 選択肢：常に縦1列（4択） */
.option-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 600px;
	margin: 0 auto;
}

.option-btn {
	padding: 0.9rem 1.25rem;
	background-color: #ffffff;
	border: 2px solid var(--c-answer-green);
	color: var(--c-answer-green-dark);
	border-radius: var(--radius-card);
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.5;
	font-weight: 700;
	width: 100%;
}

.option-btn:hover {
	background-color: var(--c-answer-green);
	border-color: var(--c-answer-green);
	color: #ffffff;
	transform: translateY(-2px);
}

/* 「一つ前に戻る」ボタン（選択肢の下・小さめ・控えめ） */
.back-button-area {
	max-width: 600px;
	margin: 0.6rem auto 0;
	text-align: center;
}

.back-btn {
	background: transparent;
	border: 1px solid var(--c-border);
	color: #777;
	border-radius: var(--radius-card);
	cursor: pointer;
	padding: 0.4rem 1rem;
	font-size: 0.9rem;
	transition: all 0.2s ease;
}

.back-btn:hover {
	background: #f0f0f0;
	color: var(--c-primary);
	border-color: var(--c-primary-light);
}

/* 判定生成中のローディング（スピナー＋テキスト）。流れの末尾に表示される */
.typing-indicator {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	color: var(--c-text);
}

.typing-indicator .spinner {
	display: inline-block;
	width: 26px;
	height: 26px;
	border: 3px solid var(--c-accent-pink);
	border-top-color: var(--c-primary);
	border-radius: 50%;
	animation: spin 0.9s linear infinite;
	flex-shrink: 0;
}

@keyframes spin {
	0%   {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

/* 新規メッセージが下から流れて出るアニメーション */
@keyframes fadeInUp {
	from {opacity: 0; transform: translateY(20px);}
	to   {opacity: 1; transform: translateY(0);}
}

/* 結果後のアクションボタン群 */
.action-buttons {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
	margin-bottom: 1rem;
}

.care-plan-btn {
	background: var(--c-primary);
	color: #ffffff;
	border: none;
	padding: 1rem 2rem;
	border-radius: 0.6rem;
	cursor: pointer;
	transition: all 0.3s;
	font-size: 1.15rem;
	font-weight: 600;
	width: 100%;
	max-width: 600px;
	text-align: center;
}

.care-plan-btn:hover {
	background-color: var(--c-primary-light);
}

/* --- 判定結果カード（新形式応答時） -------------------------------------
   横幅は .answer-summary と揃える（max-width:1000px・中央寄せ・白カード）。
   吹き出し（78%制限）ではなくカードとして表示する。 */
.result-card {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	padding: 1.5rem 1.75rem;
	margin: 0 auto;
	max-width: 1000px;
	width: 100%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	animation: fadeInUp 0.3s ease-out;
	line-height: 1.8;
	color: var(--c-text);
}

/* カード最上部の見出し「介護度簡易判定結果」 */
.result-card-title {
	color: var(--c-primary);
	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 1rem;
}

/* 判定区分バッジ：色の印象で警告に見えないよう、白背景・黒文字・黒枠のニュートラルな体裁 */
.result-badge {
	display: block;
	width: fit-content;
	margin: 0 auto 1.5rem;
	padding: 0.5rem 1.5rem;
	background-color: #ffffff;
	border: 1.5px solid var(--c-text);
	border-radius: 8px;
	color: var(--c-text);
	font-size: 1.3rem;
	font-weight: 700;
	text-align: center;
}

/* 各セクション */
.result-section {
	margin-bottom: 1.4rem;
}

.result-section h4 {
	color: var(--c-primary);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	padding-left: 0.6rem;
	border-left: 4px solid var(--c-primary-light);
}

.result-section p {
	margin: 0 0 0.6rem;
}

.result-section p:last-child {
	margin-bottom: 0;
}

/* 手助けポイントの箇条書き */
.result-points {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.result-points li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.5rem;
}

.result-points li::before {
	content: "・";
	position: absolute;
	left: 0.2rem;
	color: var(--c-primary-light);
	font-weight: 700;
}

/* 注意事項・お知らせ（フロント固定文言）：区切り線で分け、小さめ・控えめに */
.result-note {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--c-border);
	font-size: 0.85rem;
	line-height: 1.7;
	color: #777;
}

.result-note p {
	margin: 0 0 0.6rem;
}

.result-note p:last-child {
	margin-bottom: 0;
}

.result-note strong {
	color: var(--c-primary);
	font-weight: 700;
}

/* 結果カード内の「ご回答の一覧」：優先度低めに控えめに見せる（小さめ・淡色・1問1行） */
.result-answers dl {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 0.3rem 1rem;
	margin: 0;
	font-size: 0.9rem;
	color: #888;
}
.result-answers dt {
	font-weight: 500;
}
.result-answers dd {
	margin: 0;
	color: #666;
	white-space: pre-wrap;
	word-break: break-word;
}

/* コピーボタン（介護相談踏襲）。カード下部・右寄せ・アイコンのみ */
.copy-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-top: 0.9rem;
	width: 28px;
	height: 28px;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 6px;
	color: #9aa0a6;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.copy-btn:hover {
	opacity: 1;
	background-color: var(--c-accent-pink);
	color: var(--c-text);
}

.copy-btn.copied {
	opacity: 1;
	color: var(--c-answer-green-dark);
}

.copy-btn-icon {
	display: inline-flex;
	line-height: 0;
}
.copy-btn-icon svg {display: block;}

/* 次のステップ：ロボアイコンの吹き出しの中に、見出し＋各ボタン＋説明を入れる */
.message-bubble.next-steps {
	max-width: 100%;
	width: 100%;
}

.next-steps-lead {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	line-height: 1.7;
}

/* 吹き出し内なのでボタン群は横幅いっぱいを使い、上限だけ設ける */
.next-steps .action-buttons {
	max-width: 520px;
	margin: 0 auto;
}

/* 各ボタン＋直下に説明1行 */
.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* 説明文：吹き出し（白背景）の中なので、はっきり読める濃さ・大きさにする */
.action-desc {
	margin: 0.4rem 0 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--c-text);
	text-align: center;
}

/* 「もう一度判定する」はやり直し操作。外部リンクの3ボタンと区別してアウトライン調に */
.restart-btn {
	background: #ffffff;
	color: var(--c-primary);
	border: 2px solid var(--c-primary-light);
	padding: 0.85rem 2rem;
	border-radius: 0.6rem;
	cursor: pointer;
	transition: all 0.2s;
	font-size: 1.1rem;
	font-weight: 600;
	width: 100%;
	max-width: 600px;
	text-align: center;
}

.restart-btn:hover {
	background: var(--c-accent-pink);
	border-color: var(--c-primary);
}

/* --- PC（1024px以上）：チャット・バナー・ヘッダーの右端を揃える ---------
   右下 contact_box 回避幅を3者の container に付けて右端を一致させる。
   チャットとバナーは同じ .container（max-width/左右padの外箱）を使う。 */
@media (min-width: 1024px) {
	.chat-section .container,
	#banner_section .container,
	nav .container {
		padding-right: var(--contactbox-w);
	}
	.banner_section {margin-top: 1rem;}
}

/* --- スマホ（599px以下） --------------------------------------------- */
@media (max-width: 599px) {
	/* ロボアイコンとセリフを横並び→縦積み（アイコンの下に吹き出し）。狭い横幅を有効活用 */
	.message.bot {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
	}
	.message.bot .message-bubble {max-width: 100%;}
	.message-bubble {font-size: 1rem;}
	.answer-summary dl {grid-template-columns: 1fr;}
	.answer-summary dt {margin-top: 0.4rem;}
	.result-answers dl {grid-template-columns: 1fr; gap: 0;}
	.result-answers dt {margin-top: 0.4rem;}

	/* 判定結果カード：スマホは余白を詰める */
	.result-card {padding: 1.1rem 1.1rem;}
	.result-card-title {font-size: 1.15rem;}
	.result-badge {font-size: 1.15rem; padding: 0.45rem 1.1rem;}
	.result-section h4 {font-size: 1.05rem;}
}