/**
 * SOGO AI Consult チャットUI（モバイルファースト）。
 *
 * デザインコンセプト：落ち着いた被害相談窓口。
 * ベース白／薄いグレー背景／ネイビーのアクセント。強い色は電話CTAのみ。
 */

.sogo-ai-consult {
	--sogo-ai-primary: #2b4a6f;
	--sogo-ai-primary-dark: #203a58;
	--sogo-ai-primary-tint: #eef3f8;
	--sogo-ai-tel: #23795a;
	--sogo-ai-tel-dark: #1d654b;
	--sogo-ai-user-bubble: #56728f;
	/* サイト既存CTA「無料相談はこちら」系ボタンと同一色（rgb(222,55,0)） */
	--sogo-ai-cta: #de3700;
	--sogo-ai-cta-dark: #c53100;
	--sogo-ai-bg: #f5f7f9;
	--sogo-ai-border: #dfe5eb;
	--sogo-ai-text: #2f3a45;
	--sogo-ai-muted: #6b7684;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--sogo-ai-border);
	border-radius: 14px;
	background: #fff;
	color: var(--sogo-ai-text);
	font-size: 16px;
	line-height: 1.7;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(32, 58, 88, 0.06);
}

.sogo-ai-consult *,
.sogo-ai-consult *::before,
.sogo-ai-consult *::after {
	box-sizing: border-box;
}

/* ---- ヘッダー（相談窓口の入口） ---- */

.sogo-ai-header {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 12px 7px;
	/* 案内エリアは濃紺（既存ブランドカラー）、白系チャットと明確に分離する */
	background: #203a58;
	border-bottom: 1px solid var(--sogo-ai-border);
}

.sogo-ai-header-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	/* 寒色背景に埋もれないよう円背景のみ白に（アイコン自体は不変） */
	background: #fff;
	color: var(--sogo-ai-primary);
}

.sogo-ai-header-body {
	/* タイトル開始位置を左軸として、匿名・説明・チップを同じ軸に揃える */
	flex: 1;
	min-width: 0;
	text-align: left;
}

/* テーマ側の p マージンに上書きされないよう、案内エリア内の間隔を明示する
   （匿名バッジ→AI説明文の間隔を詰め、一つの案内ブロックとして見せる） */
.sogo-ai-header-body p {
	margin: 0;
}

.sogo-ai-header-body .sogo-ai-header-title {
	margin-bottom: 3px;
}

.sogo-ai-header-body .sogo-ai-anon {
	margin-bottom: 2px;
}

.sogo-ai-header-body .sogo-ai-header-tags {
	margin-top: 3px;
}

.sogo-ai-header-title {
	/* 第1階層：カード内で最も強い要素（濃紺背景上は白） */
	margin: 0 0 3px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.sogo-ai-anon {
	/* 第2階層：匿名相談の安心材料（バッジより一段強い） */
	display: inline-flex;
	align-items: center;
	margin: 0 0 3px;
	padding: 2px 9px;
	/* 濃紺背景向けの半透明白バッジ */
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}

.sogo-ai-lock {
	/* 匿名バッジ・保存説明で共通の単色鍵アイコン（色は文字色を継承） */
	flex-shrink: 0;
	vertical-align: -2px;
	margin-right: 4px;
}

.sogo-ai-header-sub {
	/* 第3階層：サービス説明（タイトルを最も強く見せるため一段弱く） */
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

.sogo-ai-header-tags {
	/* 第4階層：補助情報（AI説明文と同じ左軸） */
	margin: 3px 0 0;
	line-height: 1;
}

.sogo-ai-tag {
	display: inline-block;
	margin: 0 6px 0 0;
	padding: 3px 9px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	/* 濃紺背景上の白い補助チップ */
	background: #fff;
	color: var(--sogo-ai-primary-dark);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

/* ---- メッセージ表示 ---- */

.sogo-ai-messages {
	/* 初期状態はコンテンツ量に応じた高さにし、初回メッセージ下の
	   巨大な空白を作らない。会話が増えたら max-height で内部スクロール。 */
	height: auto;
	min-height: 0;
	max-height: 65vh;
	max-height: 65svh;
	overflow-y: auto;
	padding: 14px 12px;
	background: var(--sogo-ai-bg);
	-webkit-overflow-scrolling: touch;
}

.sogo-ai-msg {
	display: flex;
	margin-bottom: 14px;
}

.sogo-ai-msg--user {
	justify-content: flex-end;
}

.sogo-ai-msg--assistant {
	flex-direction: column;
	align-items: flex-start;
}

/* AI相談員ラベルとアイコン */

.sogo-ai-msg-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px 2px;
}

.sogo-ai-avatar {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--sogo-ai-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0-4.5-4.5A4.5 4.5 0 0 0 12 12Zm0 2c-4.1 0-7.5 2.1-7.5 4.8V20a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1v-1.2c0-2.7-3.4-4.8-7.5-4.8Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center 3px;
	background-size: 13px;
}

.sogo-ai-msg-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--sogo-ai-muted);
}

.sogo-ai-bubble {
	max-width: 88%;
	padding: 11px 14px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.75;
	white-space: pre-wrap;
	word-break: break-word;
}

.sogo-ai-msg--assistant .sogo-ai-bubble {
	background: #fff;
	border: 1px solid var(--sogo-ai-border);
	border-bottom-left-radius: 4px;
	color: var(--sogo-ai-text);
}

.sogo-ai-msg--user .sogo-ai-bubble {
	background: var(--sogo-ai-user-bubble);
	color: #fff;
	border-bottom-right-radius: 4px;
}

/* 初回メッセージはカード風に少し目立たせる */

.sogo-ai-msg--intro .sogo-ai-bubble {
	max-width: 100%;
	padding: 14px 16px;
	background: #fbfcfe;
	border: 1px solid var(--sogo-ai-border);
	border-left: 3px solid var(--sogo-ai-primary);
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(32, 58, 88, 0.06);
}

.sogo-ai-typing {
	color: #8a94a1;
	font-size: 14px;
}

.sogo-ai-system-note {
	text-align: center;
	color: #a04a3a;
	font-size: 13px;
	margin: 8px 0;
}

.sogo-ai-error-block {
	margin: 8px 0;
}

.sogo-ai-error-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 320px;
	margin: 0 auto;
}

.sogo-ai-btn--retry {
	background: #fff;
	color: var(--sogo-ai-primary);
	border: 1px solid var(--sogo-ai-primary);
}

/* ---- 入力エリア ---- */

.sogo-ai-input-notes {
	padding: 10px 14px 0;
	background: #fff;
	border-top: 1px solid var(--sogo-ai-border);
}

.sogo-ai-input-notes p {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--sogo-ai-muted);
}

.sogo-ai-input-form {
	/* スマホは縦並び（textareaを横幅いっぱいに、送信ボタンを下へ） */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 8px 12px 6px;
	background: #fff;
}

.sogo-ai-input {
	flex: 1;
	width: 100%;
	resize: none;
	min-height: 96px; /* 3〜4行程度が見える高さ */
	border: 1px solid var(--sogo-ai-border);
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 16px; /* iOSの自動ズーム防止 */
	line-height: 1.6;
	font-family: inherit;
	color: var(--sogo-ai-text);
	background: #fdfdfe;
}

.sogo-ai-input:focus {
	outline: none;
	border-color: var(--sogo-ai-primary);
	box-shadow: 0 0 0 3px rgba(43, 74, 111, 0.15);
	background: #fff;
}

.sogo-ai-send {
	flex-shrink: 0;
	width: 100%;
	min-height: 50px; /* タップターゲット確保 */
	border: none;
	border-radius: 12px;
	background: var(--sogo-ai-cta);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.sogo-ai-send:hover {
	background: var(--sogo-ai-cta-dark);
}

.sogo-ai-send:active {
	background: #a82a00;
}

.sogo-ai-send:focus-visible {
	outline: 2px solid var(--sogo-ai-primary-dark);
	outline-offset: 2px;
}

.sogo-ai-send:disabled {
	background: #a5b3c2;
	cursor: default;
}

.sogo-ai-note {
	margin: 0;
	/* iPhone Safariの下部UI・セーフエリアとの干渉を回避 */
	padding: 4px 12px calc(12px + env(safe-area-inset-bottom, 0px));
	font-size: 12px;
	line-height: 1.5;
	color: var(--sogo-ai-muted);
	text-align: center;
	background: #fff;
}

/* ---- CTA共通 ---- */

.sogo-ai-cta {
	padding: 0 12px;
	background: var(--sogo-ai-bg);
}

.sogo-ai-cta:empty {
	padding: 0;
}

.sogo-ai-btn {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px;
	border: none;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.4;
}

/* ---- soft CTA（案内カード） ---- */

.sogo-ai-soft {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--sogo-ai-border);
	border-left: 3px solid var(--sogo-ai-primary);
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 12px;
}

.sogo-ai-soft-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--sogo-ai-primary-dark);
}

.sogo-ai-soft-text {
	font-size: 13px;
	line-height: 1.7;
	color: var(--sogo-ai-text);
	margin-bottom: 2px;
}

.sogo-ai-soft-btn {
	/* 人間相談へ進む主要アクション：サイト共通CTA色 */
	min-height: 46px;
	border: 1px solid var(--sogo-ai-cta);
	border-radius: 12px;
	background: var(--sogo-ai-cta);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
}

.sogo-ai-soft-btn:hover {
	background: var(--sogo-ai-cta-dark);
	border-color: var(--sogo-ai-cta-dark);
}

.sogo-ai-soft-btn--secondary {
	/* AI相談を続けるサブアクション：白＋ネイビー */
	background: #fff;
	border-color: var(--sogo-ai-primary);
	color: var(--sogo-ai-primary);
	font-weight: 600;
}

.sogo-ai-soft-btn--secondary:hover {
	background: var(--sogo-ai-primary-tint);
	border-color: var(--sogo-ai-primary);
}

/* ---- main CTA ---- */

.sogo-ai-card {
	background: #fff;
	border: 1px solid var(--sogo-ai-border);
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 12px;
}

.sogo-ai-main-notice {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: var(--sogo-ai-primary-tint);
	border-radius: 10px;
}

.sogo-ai-main-notice p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--sogo-ai-primary-dark);
}

.sogo-ai-card-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 電話CTA：最も目立つが、落ち着いた深緑で */

.sogo-ai-btn--tel {
	/* 第一選択の主要アクション：サイト共通CTA色 */
	background: var(--sogo-ai-cta);
	color: #fff;
	min-height: 52px;
	font-size: 16px;
}

.sogo-ai-btn--tel::before {
	content: "\260E\FE0E";
	margin-right: 8px;
}

.sogo-ai-btn--tel:hover {
	background: var(--sogo-ai-cta-dark);
}

.sogo-ai-btn--tel,
.sogo-ai-btn--tel:visited {
	color: #fff;
	text-decoration: none;
}

/* メールCTA：やや控えめだが十分に選択肢として見える */

.sogo-ai-btn--mail {
	background: #fff;
	color: var(--sogo-ai-primary);
	border: 1.5px solid var(--sogo-ai-primary);
	min-height: 50px;
}

.sogo-ai-btn--mail:hover {
	background: var(--sogo-ai-primary-tint);
}

.sogo-ai-tel-number {
	margin: 12px 0 2px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: var(--sogo-ai-primary-dark);
}

.sogo-ai-tel-note {
	margin: 2px 0 8px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--sogo-ai-muted);
	text-align: center;
}

.sogo-ai-callback-link {
	display: block;
	width: 100%;
	border: none;
	background: none;
	padding: 8px 0;
	font-size: 13px;
	color: var(--sogo-ai-primary);
	text-decoration: underline;
	cursor: pointer;
	text-align: center;
}

/* ---- フォーム ---- */

.sogo-ai-handoff-form {
	margin-top: 14px;
	border-top: 1px solid var(--sogo-ai-border);
	padding-top: 12px;
}

.sogo-ai-form-notice {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: var(--sogo-ai-primary-tint);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--sogo-ai-primary-dark);
}

.sogo-ai-field {
	margin-bottom: 12px;
}

.sogo-ai-field-label {
	display: block;
}

.sogo-ai-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--sogo-ai-text);
}

.sogo-ai-text,
.sogo-ai-select {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--sogo-ai-border);
	border-radius: 10px;
	font-size: 16px;
	font-family: inherit;
	background: #fdfdfe;
	color: var(--sogo-ai-text);
}

.sogo-ai-text:focus,
.sogo-ai-select:focus {
	outline: none;
	border-color: var(--sogo-ai-primary);
	box-shadow: 0 0 0 3px rgba(43, 74, 111, 0.15);
	background: #fff;
}

.sogo-ai-radio {
	display: block;
	padding: 9px 4px;
	font-size: 15px;
	cursor: pointer;
}

.sogo-ai-form-error {
	margin: 0 0 10px;
	font-size: 13px;
	color: #a04a3a;
	min-height: 1em;
}

.sogo-ai-btn--submit {
	background: var(--sogo-ai-primary-dark);
	color: #fff;
}

.sogo-ai-btn--submit:disabled {
	background: #a5b3c2;
	cursor: default;
}

/* CTA表示中に通常入力フォーム一式を一時的に隠すUI用class
   （DOMは削除せず、フォーカスも受けない状態にする） */
.sogo-ai-composer-hidden {
	display: none !important;
}

.sogo-ai-form-done {
	margin-top: 14px;
	padding: 14px;
	background: #eef7f0;
	border: 1px solid #cbe3d1;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.7;
}

.sogo-ai-form-done p {
	margin: 0;
}

/* ---- タブレット以上 ---- */

@media (min-width: 768px) {
	.sogo-ai-consult {
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
	}

	.sogo-ai-header {
		padding: 12px 16px 10px;
	}

	.sogo-ai-header-title {
		font-size: 18px;
	}

	.sogo-ai-messages {
		height: 480px;
		max-height: none;
		padding: 18px 16px;
	}

	.sogo-ai-input-form {
		flex-direction: row;
	}

	.sogo-ai-input {
		min-height: 76px;
	}

	.sogo-ai-send {
		width: auto;
		min-width: 76px;
		align-self: flex-end;
	}

	.sogo-ai-bubble {
		max-width: 80%;
	}

	.sogo-ai-cta {
		padding: 0 16px;
	}

	.sogo-ai-card-row {
		flex-direction: row;
	}

	.sogo-ai-card-row .sogo-ai-btn {
		flex: 1;
	}
}