/*
 * 右下角的 AI 對話視窗。
 * 佈景主題要改位置或顏色，在 :root（或深色模式的選擇器）設下面這些變數，不用覆寫規則：
 *   --klab-post-ai-right / --klab-post-ai-bottom  按鈕離右邊、下面多遠（預設 20px）
 *   --klab-post-ai-accent / --klab-post-ai-accent-fg  按鈕與送出鈕的底色、字色
 *   --klab-post-ai-bg / --klab-post-ai-fg / --klab-post-ai-muted / --klab-post-ai-border  視窗底色、文字、次要文字、框線
 *   --klab-post-ai-q-bg  使用者問題泡泡的底色
 *   --klab-post-ai-head-bg  標題列與下方輸入／登入區的底色
 * 視窗打開時 <body> 有 class klab-post-ai-open。
 *
 * ⚠ 每個選擇器都帶 `.klab-post-ai` 前綴（特異度 0,2,0）：佈景主題常有 `.某class button { color: … }`（0,1,1），
 *   只用一個 class 會被蓋過 —— 踩過：圖示、關閉鈕、輸入框的字都被染成佈景主題的深藍，深色模式看不見。
 */
.klab-post-ai .klab-post-ai__fab {
	position: fixed;
	right: var(--klab-post-ai-right, 20px);
	bottom: var(--klab-post-ai-bottom, 20px);
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--klab-post-ai-accent, #2563eb);
	color: var(--klab-post-ai-accent-fg, #fff);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: transform 0.15s ease;
}
/* 對話框打開時藏起按鈕（用 ✕ 或 Esc 關），電腦版的對話框往下移到按鈕原本的位置 */
.klab-post-ai .klab-post-ai__fab[aria-expanded="true"] {
	display: none;
}
/* 手機版面板後面的遮罩，平常不顯示（手機的規則在檔尾 @media） */
.klab-post-ai .klab-post-ai__backdrop {
	display: none;
}
.klab-post-ai .klab-post-ai__fab:hover {
	transform: scale(1.06);
}
.klab-post-ai .klab-post-ai__fab:focus-visible {
	outline: 3px solid var(--klab-post-ai-accent, #2563eb);
	outline-offset: 3px;
}
.klab-post-ai .klab-post-ai__icon {
	width: 32px;
	height: 32px;
}
/* 對話泡泡裡的「AI」字樣：挖成按鈕底色，看起來是鏤空的 */
.klab-post-ai .klab-post-ai__icon-text {
	fill: var(--klab-post-ai-accent, #2563eb);
	font: 700 10px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.klab-post-ai .klab-post-ai__panel {
	position: fixed;
	right: var(--klab-post-ai-right, 20px);
	bottom: calc(var(--klab-post-ai-bottom, 20px) + 68px);
	z-index: 9991;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 380px;
	height: min(600px, calc(100vh - var(--klab-post-ai-bottom, 20px) - 100px));
	overflow: hidden;
	border: 1px solid var(--klab-post-ai-border, #dcdcde);
	border-radius: 14px;
	background: var(--klab-post-ai-bg, #fff);
	color: var(--klab-post-ai-fg, #1d2327);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.25);
	font-size: 15px;
	line-height: 1.6;
}
.klab-post-ai .klab-post-ai__panel[hidden] {
	display: none;
}
.klab-post-ai .klab-post-ai__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 8px 10px 16px;
	border-bottom: 1px solid var(--klab-post-ai-border, #dcdcde);
	font-weight: 600;
	background: var(--klab-post-ai-head-bg, #f0f2f5);
}
.klab-post-ai .klab-post-ai__close {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.klab-post-ai .klab-post-ai__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 16px;
}
/* 第一次打開、還沒問到伺服器時的「正在啟動…」 */
.klab-post-ai .klab-post-ai__loading {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 48px 0;
	color: var(--klab-post-ai-muted, #646970);
}
.klab-post-ai .klab-post-ai__loading[hidden],
.klab-post-ai .klab-post-ai__spinner[hidden] {
	display: none;
}
.klab-post-ai .klab-post-ai__spinner {
	flex: none;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 2px solid var(--klab-post-ai-border, #dcdcde);
	border-top-color: var(--klab-post-ai-accent, #2563eb);
	border-radius: 50%;
	animation: klab-post-ai-spin 0.8s linear infinite;
}
@keyframes klab-post-ai-spin {
	to {
		transform: rotate(360deg);
	}
}
/* 還沒登入時：對話區播示意動畫（front.js 的 playDemo），登入按鈕在下方、輸入框原本的位置 */
.klab-post-ai .klab-post-ai__demo[hidden],
.klab-post-ai .klab-post-ai__demo [hidden],
.klab-post-ai .klab-post-ai__login[hidden] {
	display: none;
}
.klab-post-ai .klab-post-ai__demo-label {
	margin: 0 0 10px;
	text-align: center;
	font-size: 0.8em;
	color: var(--klab-post-ai-muted, #646970);
}
.klab-post-ai .klab-post-ai__demo .klab-post-ai__q,
.klab-post-ai .klab-post-ai__demo .klab-post-ai__a {
	animation: klab-post-ai-fade 0.3s ease;
}
@keyframes klab-post-ai-fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
}
/* 回答的灰線：線 1.4em、線與線之間 0.6em、頭尾各 0.3em（使用者要的：線要粗、行距要保留），
   由左往右連續長出來，一條接一條。⚠ 不用上下 margin：相鄰兩條的 margin 會合併，行距就變矮了。 */
.klab-post-ai .klab-post-ai__demo .klab-post-ai__a {
	padding: 0.3em 0;
}
.klab-post-ai .klab-post-ai__line + .klab-post-ai__line {
	margin-top: 0.6em;
}
.klab-post-ai .klab-post-ai__line {
	display: block;
	height: 1.4em;
	border-radius: 0.25em;
	background: var(--klab-post-ai-q-bg, #e8efff);
	animation: klab-post-ai-type 0.5s linear both;
}
.klab-post-ai .klab-post-ai__line:nth-child(2) {
	animation-delay: 0.5s;
}
.klab-post-ai .klab-post-ai__line:nth-child(3) {
	width: 60%;
	animation-duration: 0.3s;
	animation-delay: 1s;
}
@keyframes klab-post-ai-type {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.klab-post-ai .klab-post-ai__line {
		animation: none;
	}
}
.klab-post-ai .klab-post-ai__login {
	padding: 12px;
	border-top: 1px solid var(--klab-post-ai-border, #dcdcde);
	background: var(--klab-post-ai-head-bg, #f0f2f5);
}
.klab-post-ai .klab-post-ai__login > :last-child {
	margin-bottom: 0;
}
.klab-post-ai .klab-post-ai__login-msg,
.klab-post-ai .klab-post-ai__privacy {
	margin: 0 0 0.75em;
}
.klab-post-ai .klab-post-ai__privacy {
	margin-top: 0.75em;
	font-size: 0.9em;
}
.klab-post-ai .klab-post-ai__privacy a {
	color: inherit;
}
/* Google 按鈕的 iframe 比外框寬 20px、左右各 -10px 邊界抵掉；很多佈景主題有 `iframe { max-width: 100% }`，
   會把它壓回外框寬，右邊框就被切掉。只在這裡解除。
   color-scheme: light —— 深色模式的頁面是 dark，iframe 跟著變 dark，但 Google 的內容是淺色；
   兩邊不一致時瀏覽器會在 iframe 後面墊不透明的白底（按鈕左右多出一條白邊）。指定成 light 就一致、底變透明。 */
.klab-post-ai .klab-post-ai__gbtn iframe {
	max-width: none;
	color-scheme: light;
}
.klab-post-ai .klab-post-ai__item + .klab-post-ai__item {
	margin-top: 14px;
}
/* 問題靠右、回答靠左，像對話 */
.klab-post-ai .klab-post-ai__q {
	width: fit-content;
	max-width: 85%;
	margin: 0 0 8px auto;
	padding: 8px 12px;
	border-radius: 14px 14px 4px 14px;
	background: var(--klab-post-ai-q-bg, #e8efff);
	white-space: pre-wrap;
}
.klab-post-ai .klab-post-ai__a p,
.klab-post-ai .klab-post-ai__a ul,
.klab-post-ai .klab-post-ai__a ol,
.klab-post-ai .klab-post-ai__a blockquote,
.klab-post-ai .klab-post-ai__a pre,
.klab-post-ai .klab-post-ai__table {
	margin: 0 0 0.5em;
}
.klab-post-ai .klab-post-ai__a ul,
.klab-post-ai .klab-post-ai__a ol {
	padding-left: 1.4em;
}
/* 回答裡的標題（模型的 #～######）：不用 h1～h6，佈景主題的標題樣式太大 */
.klab-post-ai .klab-post-ai__a .klab-post-ai__h {
	margin-top: 0.8em;
	font-weight: 700;
}
.klab-post-ai .klab-post-ai__a .klab-post-ai__h:first-child {
	margin-top: 0;
}
.klab-post-ai .klab-post-ai__a code {
	padding: 0.1em 0.3em;
	border-radius: 4px;
	background: var(--klab-post-ai-q-bg, #e8efff);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
}
/* 程式碼區塊與表格太寬就自己左右捲，不撐開面板 */
.klab-post-ai .klab-post-ai__a pre {
	overflow-x: auto;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--klab-post-ai-q-bg, #e8efff);
	line-height: 1.5;
	white-space: pre;
}
.klab-post-ai .klab-post-ai__a pre code {
	padding: 0;
	background: none;
}
.klab-post-ai .klab-post-ai__a hr {
	margin: 0.8em 0;
	border: 0;
	border-top: 1px solid var(--klab-post-ai-border, #dcdcde);
}
.klab-post-ai .klab-post-ai__table {
	overflow-x: auto;
}
.klab-post-ai .klab-post-ai__table table {
	width: auto;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9em;
}
.klab-post-ai .klab-post-ai__table th,
.klab-post-ai .klab-post-ai__table td {
	padding: 4px 8px;
	border: 1px solid var(--klab-post-ai-border, #dcdcde);
	text-align: left;
	white-space: nowrap;
}
/* 對話最下方的「清除對話」：置中的底線文字 */
.klab-post-ai .klab-post-ai__clear {
	margin: 16px 0 4px;
	text-align: center;
	font-size: 0.85em;
	color: var(--klab-post-ai-muted, #646970);
}
.klab-post-ai .klab-post-ai__clear[hidden],
.klab-post-ai .klab-post-ai__clear [hidden] {
	display: none;
}
.klab-post-ai .klab-post-ai__clear button {
	margin: 0 0.3em;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
/* 下方（輸入區或登入區）跟標題列同一個底色，上下夾住中間的對話，才分得出哪裡是對話、哪裡是輸入 */
.klab-post-ai .klab-post-ai__form {
	padding: 10px 12px 12px;
	border-top: 1px solid var(--klab-post-ai-border, #dcdcde);
	background: var(--klab-post-ai-head-bg, #f0f2f5);
}
.klab-post-ai .klab-post-ai__form[hidden] {
	display: none;
}
.klab-post-ai .klab-post-ai__input {
	box-sizing: border-box;
	width: 100%;
	max-height: 120px;
	padding: 8px 10px;
	border: 1px solid var(--klab-post-ai-border, #dcdcde);
	border-radius: 10px;
	background: var(--klab-post-ai-bg, #fff); /* 下方區塊有底色，輸入框用面板底色才看得出是框 */
	color: inherit;
	font: inherit;
	/* 16px 以上 iOS 才不會在點輸入框時自動放大畫面 */
	font-size: max(16px, 1em);
	resize: none;
}
.klab-post-ai .klab-post-ai__bar {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}
.klab-post-ai .klab-post-ai__remaining,
.klab-post-ai .klab-post-ai__who {
	font-size: 0.85em;
	color: var(--klab-post-ai-muted, #646970);
}
.klab-post-ai .klab-post-ai__who {
	margin: 6px 0 0;
}
.klab-post-ai .klab-post-ai__send {
	min-height: 40px;
	padding: 0 1.2em;
	border: 0;
	border-radius: 999px;
	background: var(--klab-post-ai-accent, #2563eb);
	color: var(--klab-post-ai-accent-fg, #fff);
	font: inherit;
	cursor: pointer;
}
.klab-post-ai .klab-post-ai__send:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}
.klab-post-ai .klab-post-ai__logout {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

@media (min-width: 601px) {
	.klab-post-ai .klab-post-ai__fab[aria-expanded="true"] ~ .klab-post-ai__panel {
		bottom: var(--klab-post-ai-bottom, 20px);
		height: min(600px, calc(100vh - var(--klab-post-ai-bottom, 20px) - 32px));
	}
}

/* 手機：從底部展開，左右貼齊，高度跟著可視範圍（鍵盤彈出時會縮） */
@media (max-width: 600px) {
	.klab-post-ai .klab-post-ai__panel {
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: 85vh;
		height: 85dvh;
		border-width: 1px 0 0;
		border-radius: 16px 16px 0 0;
	}
	/* 面板後面整片霧面遮罩，不露出面板上方的文章。鍵盤後面那一塊在版面範圍外、fixed 畫不到，由 .klab-post-ai__under 補。 */
	.klab-post-ai .klab-post-ai__fab[aria-expanded="true"] + .klab-post-ai__backdrop {
		position: fixed;
		inset: -100vh 0; /* 多延伸的部分在 iOS 也畫不到鍵盤後面（見 __under），保留原值 */
		z-index: 9990;
		display: block;
		background: rgba(0, 0, 0, 0.35);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
	/* iPhone 底部的安全區放在下方區塊裡，底色才會一路延伸到螢幕底（放在面板上會露出一條面板底色） */
	.klab-post-ai .klab-post-ai__form,
	.klab-post-ai .klab-post-ai__login {
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
	}
}

/* iOS 半透明鍵盤後面透出的那段文章（位置由 front.js 的 placeUnder 算，只在手機版打開時出現）。插在 .klab-post-ai 旁邊，不在它裡面。 */
.klab-post-ai__under {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 9990;
	background: rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	pointer-events: none;
}
.klab-post-ai__under[hidden] {
	display: none;
}