/*
 * フロント側AI相談チャットウィジェット。
 * main.cssの:root変数(--paper/--line/--r/--sans等)は引き続き使うが、
 * Client request(2026-09): サイト全体の基礎カラー(--ink、黒)は暗すぎる
 * ため、このチャットのCTA要素(トグルボタン・ヘッダー・送信ボタン・
 * 自分の発言バブル)だけは鮮やかなグラデーションに変更している。
 * サイト全体には影響しない、このファイル内だけの独自変数。
 */
#ginalca-fc-root {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	font-family: var(--sans, "Helvetica Neue", "Hiragino Sans", sans-serif);
	--fc-accent-gradient: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
}

#ginalca-fc-toggle {
	height: 56px;
	padding: 0 20px 0 16px;
	border-radius: 999px;
	border: none;
	background-image: var(--fc-accent-gradient);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	gap: 9px;
	transition: transform 0.2s var(--ease, ease), filter 0.15s var(--ease, ease);
}
#ginalca-fc-toggle:hover {
	transform: scale(1.04);
	filter: brightness(0.94);
}
.ginalca-fc-toggle-icon {
	font-size: 22px;
	line-height: 1;
}
.ginalca-fc-toggle-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

#ginalca-fc-panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	width: min(360px, calc(100vw - 32px));
	height: min(520px, calc(100vh - 140px));
	background: var(--paper, #fff);
	border: 1px solid var(--line, #e9e9e9);
	border-radius: var(--r, 18px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#ginalca-fc-panel[hidden] {
	display: none;
}
/* Client request(2026-09): パネル右上の拡大表示切り替え。幅・高さとも
 * 大きくする(高さも広げる方針に変更 — パネルはbottom:72pxで下端を
 * 固定しているため、高さを広げるとヘッダーの画面上の位置は上に
 * ずれるが、この見た目の変化は許容する、とのクライアント確認済み)。
 */
#ginalca-fc-panel.is-expanded {
	width: min(560px, calc(100vw - 32px));
	height: min(720px, calc(100vh - 40px));
}

#ginalca-fc-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background-image: var(--fc-accent-gradient);
	color: #fff;
}
.ginalca-fc-header-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.ginalca-fc-header-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.ginalca-fc-header-desc {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}
/* Client報告(2026-09): 拡大表示ボタン追加時、×ボタンとの縦位置が
   文字の字形の違いでずれて見えたため、両方とも同じ大きさの正方形の
   箱に入れてflexで中央揃えする方式にし、間隔も詰めた(6px)。
   Client報告(2026-09追記): 閉じるボタンのfont-sizeを上げても、フォント
   の字形(グリフ)自体の縦位置の偏りが原因でズレが解消しなかったため、
   根本対応として×も拡大/縮小ボタンと同じSVGアイコンに統一した。
   SVGは幾何学的にviewBox中央に描かれるため、フォントの字形差による
   縦ズレが原理的に発生しない。 */
.ginalca-fc-header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}
#ginalca-fc-close,
#ginalca-fc-expand {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: none;
	border: none;
	color: #fff;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	opacity: 0.9;
}
#ginalca-fc-close:hover,
#ginalca-fc-expand:hover {
	opacity: 1;
}

#ginalca-fc-thread {
	flex: 1;
	overflow-y: auto;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	line-height: 1.6;
	background: var(--paper-2, #fafafa);
}

.ginalca-fc-msg {
	max-width: 84%;
	padding: 9px 12px;
	border-radius: 14px;
	white-space: pre-wrap;
	word-break: break-word;
}
.ginalca-fc-msg.is-user {
	align-self: flex-end;
	background-image: var(--fc-accent-gradient);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.ginalca-fc-msg.is-assistant {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--line, #e9e9e9);
	color: var(--ink-2, #2a2a2a);
	border-bottom-left-radius: 4px;
}

/* 出典(回答の根拠ページ) — 添付の参考UIに合わせ、吹き出し内の下部に
   区切り線付きで表示する。 */
.ginalca-fc-sources {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--line, #e9e9e9);
}
.ginalca-fc-sources-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--gray, #8d8d8d);
	margin-bottom: 4px;
}
.ginalca-fc-sources ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.ginalca-fc-sources a {
	font-size: 12px;
	color: var(--ink-2, #2a2a2a);
	text-decoration: underline;
}
.ginalca-fc-sources a:hover {
	color: var(--ink, #0e0e0e);
}

#ginalca-fc-faq,
.ginalca-fc-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
	align-self: flex-start;
	max-width: 100%;
}
#ginalca-fc-faq[hidden] {
	display: none;
}
.ginalca-fc-faq-chip {
	border: 1px solid var(--line, #e9e9e9);
	background: #fff;
	color: var(--ink-2, #2a2a2a);
	border-radius: 999px;
	padding: 7px 12px;
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
	text-align: left;
	transition: background 0.15s var(--ease, ease), border-color 0.15s var(--ease, ease);
}
.ginalca-fc-faq-chip:hover {
	background: var(--paper-2, #fafafa);
	border-color: var(--gray-2, #b6b6b6);
}

.ginalca-fc-category-link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-image: var(--fc-accent-gradient);
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	padding: 9px 14px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	transition: filter 0.15s var(--ease, ease);
}
.ginalca-fc-category-link:hover {
	filter: brightness(0.94);
}

#ginalca-fc-status {
	min-height: 18px;
	padding: 0 16px;
	font-size: 12px;
	color: var(--gray, #8d8d8d);
}

/* Client質問(2026-09): 「人が入力しているか」の防御として追加した
   Cloudflare Turnstileウィジェット用の余白。中身(チェックボックス等)は
   Cloudflare側のスクリプトが描画するため、ここでは配置調整のみ行う。
   未設定サイトではこの要素自体がinc/front-chat.php側で出力されない。 */
#ginalca-fc-turnstile {
	padding: 0 12px;
	display: flex;
	justify-content: center;
}

#ginalca-fc-form {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--line, #e9e9e9);
	background: var(--paper, #fff);
}
#ginalca-fc-input {
	flex: 1;
	resize: none;
	max-height: 90px;
	padding: 9px 12px;
	border: 1px solid var(--line, #e9e9e9);
	border-radius: 12px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
}
#ginalca-fc-input:focus {
	outline: none;
	border-color: var(--gray-2, #b6b6b6);
}
#ginalca-fc-send {
	border: none;
	background-image: var(--fc-accent-gradient);
	color: #fff;
	border-radius: 12px;
	padding: 0 16px;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.15s var(--ease, ease);
}
#ginalca-fc-send:hover:not(:disabled) {
	filter: brightness(0.94);
}
#ginalca-fc-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

#ginalca-fc-footer {
	padding: 8px 16px 12px;
	text-align: center;
	background: var(--paper, #fff);
}
#ginalca-fc-footer a {
	font-size: 11px;
	color: var(--gray, #8d8d8d);
	text-decoration: underline;
}

@media (max-width: 480px) {
	#ginalca-fc-root {
		right: 12px;
		bottom: 12px;
	}
	#ginalca-fc-panel {
		width: calc(100vw - 24px);
		height: min(70vh, 560px);
		bottom: 68px;
	}
	/* モバイルも幅に加えて高さを広げる(デスクトップと同じ方針)。 */
	#ginalca-fc-panel.is-expanded {
		width: calc(100vw - 24px);
		height: min(85vh, 720px);
	}
}