/* KSP AI Assistant — giao dien giai thich + tim kinh.
   Mau theo site: nau vang #8b5a2b / #b08434, nen giay kem #fdfaf4.
   Nut noi dat tren banner cai app cua PWA (#ksp-install dung bottom:12px, z-index 99998). */

:root {
	--ksp-ai-brown: #8b5a2b;
	--ksp-ai-gold: #b08434;
	--ksp-ai-paper: #fdfaf4;
	--ksp-ai-ink: #2c2317;
}

/* ---------- hop giai thich ---------- */
.ksp-ai-box {
	position: absolute;
	z-index: 99999;
	width: max-content;
	max-width: min(420px, calc(100vw - 24px));
	background: var(--ksp-ai-paper);
	border: 1px solid #e2d6bf;
	border-left: 4px solid var(--ksp-ai-gold);
	border-radius: 10px;
	box-shadow: 0 10px 34px rgba(60, 40, 10, .22);
	padding: 14px 16px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ksp-ai-ink);
	font-family: inherit;
	overscroll-behavior: contain;
}

.ksp-ai-src {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ksp-ai-brown);
	font-weight: 700;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px dashed #e2d6bf;
}

.ksp-ai-q { font-weight: 600; margin-bottom: 8px; }

.ksp-ai-quote {
	font-style: italic;
	color: #6b5a3e;
	background: rgba(176, 132, 52, .08);
	border-radius: 6px;
	padding: 7px 10px;
	margin-bottom: 12px;
	font-size: 14px;
	max-height: 86px;
	overflow-y: auto;            /* cuon duoc thay vi cat ngang dong chu */
	-webkit-overflow-scrolling: touch;
}

.ksp-ai-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ksp-ai-btn {
	font: inherit;
	font-size: 15px;
	border-radius: 6px;
	padding: 10px 16px;
	cursor: pointer;
	border: 1px solid transparent;
	min-height: 44px;           /* du lon de cham tren dien thoai */
	line-height: 1.2;
}
.ksp-ai-btn-yes { background: var(--ksp-ai-brown); color: #fff; }
.ksp-ai-btn-yes:hover { background: #76491f; }
.ksp-ai-btn-no { background: #fff; color: #5a4a33; border-color: #d9cdb6; }
.ksp-ai-btn-no:hover { background: #f3ece0; }

.ksp-ai-body { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ksp-ai-err { color: #a33a1a; }
.ksp-ai-hint { font-size: 13px; color: #8a7558; font-style: italic; margin-top: 6px; }

.ksp-ai-loading .ksp-ai-dots,
.ksp-ai-suggest.ksp-ai-loading .ksp-ai-dots {
	color: var(--ksp-ai-brown);
	font-style: italic;
	animation: ksp-ai-pulse 1.4s ease-in-out infinite;
}
@keyframes ksp-ai-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- tren dien thoai: thanh truot tu day man hinh ---------- */
@media (max-width: 767px) {
	.ksp-ai-box.is-sheet {
		position: fixed;
		left: 0; right: 0; bottom: 0; top: auto;
		width: auto; max-width: none;
		border-radius: 16px 16px 0 0;
		border-left: none;
		border-top: 4px solid var(--ksp-ai-gold);
		padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
		max-height: 70vh;
		overflow-y: auto;
		box-shadow: 0 -8px 30px rgba(60, 40, 10, .28);
		animation: ksp-ai-up .18s ease-out;
	}
	.ksp-ai-box.is-sheet .ksp-ai-body { max-height: 44vh; }
	.ksp-ai-box.is-sheet .ksp-ai-btn { flex: 1 1 auto; }
	@keyframes ksp-ai-up { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* ---------- nut tim kinh ---------- */
.ksp-ai-fab {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 99997;                 /* duoi banner cai app, tren noi dung */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ksp-ai-brown);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 18px;
	min-height: 48px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(60, 40, 10, .3);
}
.ksp-ai-fab:hover { background: #76491f; }
.ksp-ai-fab svg { flex: none; }

/* Dang doc sach: theme them .body--disabled vao body va hien nut lat trang o goc duoi phai.
   Nut "Tim kinh" phai bien di, neu khong se de len nut sang trang. */
body.body--disabled .ksp-ai-fab,
body:has(.book-container.showBook) .ksp-ai-fab,
body.ksp-ai-sheet-open .ksp-ai-fab,
body:has(.ksp-ai-box.is-sheet:not([hidden])) .ksp-ai-fab {
	display: none !important;
}

/* Khi banner cai app dang hien, day nut len tren cho khoi che nhau */
body:has(#ksp-install[style*="flex"]) .ksp-ai-fab { bottom: calc(96px + env(safe-area-inset-bottom)); }

@media (max-width: 480px) {
	.ksp-ai-fab { padding: 12px 14px; }
	.ksp-ai-fab-t { display: none; }    /* chi con bieu tuong kinh lup */
}

/* ---------- hop tim kinh ---------- */
.ksp-ai-modal { position: fixed; inset: 0; z-index: 100000; }
.ksp-ai-backdrop { position: absolute; inset: 0; background: rgba(40, 28, 10, .45); }
body.ksp-ai-locked { overflow: hidden; }

.ksp-ai-panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(620px, calc(100vw - 24px));
	max-height: min(78vh, 760px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--ksp-ai-paper);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(40, 28, 10, .4);
	padding: 22px 22px 24px;
	color: var(--ksp-ai-ink);
}
.ksp-ai-x {
	position: absolute; top: 8px; right: 10px;
	background: none; border: none; font-size: 30px; line-height: 1;
	color: #8a7558; cursor: pointer; width: 44px; height: 44px;
}
.ksp-ai-h { margin: 0 0 14px; font-size: 21px; color: var(--ksp-ai-brown); }

/* Khi ban phim bung, panel thap lai va cuon duoc — giu o nhap luon nhin thay */
.ksp-ai-panel { display: flex; flex-direction: column; }
.ksp-ai-head {
	position: sticky;
	top: -22px;                      /* bu padding tren cua panel */
	z-index: 2;
	background: var(--ksp-ai-paper);
	padding-top: 2px;
	margin: 0 0 4px;
}
.ksp-ai-results { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.ksp-ai-input {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 16px;                /* >=16px de iOS khong tu phong to trang */
	padding: 13px 14px;
	border: 1px solid #d9cdb6;
	border-radius: 8px;
	background: #fff;
	color: var(--ksp-ai-ink);
	min-height: 48px;
}
.ksp-ai-input:focus { outline: 2px solid var(--ksp-ai-gold); outline-offset: 1px; }

.ksp-ai-results { margin-top: 14px; min-height: 40px; }
.ksp-ai-muted { color: #8a7558; font-size: 14px; margin: 6px 0; font-style: italic; }
.ksp-ai-list { list-style: none; margin: 0; padding: 0; }
.ksp-ai-list li { border-bottom: 1px solid #ece2cf; }
.ksp-ai-list a {
	display: block; padding: 12px 6px; text-decoration: none; color: var(--ksp-ai-ink);
}
.ksp-ai-list a:hover { background: rgba(176, 132, 52, .1); }
.ksp-ai-t { display: block; font-weight: 600; }
.ksp-ai-c { display: block; font-size: 12.5px; color: #8a7558; margin-top: 2px; }

.ksp-ai-ask {
	margin-top: 16px;
	width: 100%;
	font: inherit; font-size: 15px; font-weight: 600;
	background: #fff; color: var(--ksp-ai-brown);
	border: 1px solid var(--ksp-ai-gold);
	border-radius: 8px; padding: 13px; min-height: 48px; cursor: pointer;
}
.ksp-ai-ask:hover { background: rgba(176, 132, 52, .12); }

.ksp-ai-suggest {
	margin-top: 14px;
	background: rgba(176, 132, 52, .09);
	border-radius: 8px;
	padding: 13px 15px;
	font-size: 15px;
	line-height: 1.7;
}
.ksp-ai-suggest a { color: var(--ksp-ai-brown); font-weight: 600; }

@media (max-width: 767px) {
	.ksp-ai-panel {
		position: fixed;
		left: 0; right: 0; top: auto; bottom: 0;
		transform: none;
		width: auto;
		max-height: 88dvh;               /* JS ghi de theo visualViewport khi ban phim bung */
		border-radius: 16px 16px 0 0;
		padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
	}
	/* Ban phim dang bung -> bo dem duoi cho khoi thua */
	.ksp-ai-panel[style*="bottom"] { padding-bottom: 14px; }

	/* Hop giai thich: thap hon de khong che 2 nut keo chon chu cua iOS */
	.ksp-ai-box.is-sheet { max-height: 54vh; }
	.ksp-ai-box.is-sheet .ksp-ai-quote { max-height: 66px; }
	.ksp-ai-box.is-sheet.has-result { max-height: 70vh; }
}

/* Con tro nhap nhay trong luc AI dang viet dan ra */
.ksp-ai-caret {
	display: inline-block;
	width: 2px; height: 1em;
	margin-left: 2px;
	vertical-align: -.15em;
	background: var(--ksp-ai-brown);
	animation: ksp-ai-blink .9s step-end infinite;
}
@keyframes ksp-ai-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ============================================================
   THANH CONG CU: tim kinh / sang-toi / ngon ngu
   Gop 3 nut vao mot cum goc duoi phai, thay vi 3 nut noi roi rac.
   ============================================================ */
.ksp-ai-bar {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 99997;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.ksp-ai-bar .ksp-ai-fab { position: static; right: auto; bottom: auto; }
.ksp-ai-barrow { display: flex; gap: 8px; }

.ksp-ai-tool {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ksp-ai-paper);
	color: var(--ksp-ai-brown);
	border: 1px solid #ddd0b6;
	border-radius: 999px;
	padding: 9px 14px;
	min-height: 40px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(60, 40, 10, .18);
}
.ksp-ai-tool:hover { background: #f3ece0; }
.ksp-ai-tool svg { flex: none; }

@media (max-width: 480px) {
	.ksp-ai-tool { padding: 9px 11px; }
	.ksp-ai-bar .ksp-ai-tool-t { display: none; }   /* chi an trong thanh cong cu */
}

/* An ca thanh cong cu khi dang doc sach / khi hop giai thich mo */
body.body--disabled .ksp-ai-bar,
body:has(.book-container.showBook) .ksp-ai-bar,
body.ksp-ai-sheet-open .ksp-ai-bar { display: none !important; }
body:has(#ksp-install[style*="flex"]) .ksp-ai-bar { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* Khung chon ngon ngu (GTranslate nam ben trong) */
.ksp-ai-langbox {
	background: var(--ksp-ai-paper);
	border: 1px solid #ddd0b6;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(60, 40, 10, .25);
	padding: 12px 14px;
	min-width: 190px;
	max-height: 55vh;
	overflow-y: auto;
}
.ksp-ai-langhead {
	font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
	color: var(--ksp-ai-brown); font-weight: 700; margin-bottom: 8px;
}
.ksp-ai-langbox select { font-size: 16px; padding: 8px; width: 100%; }

/* Nut mo rong vung chon — cuu canh khi khong keo duoc 2 nut cua iOS */
.ksp-ai-expand {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	margin: -4px 0 12px;
	font-size: 13px; color: #8a7558;
}
.ksp-ai-chip {
	font: inherit; font-size: 13px;
	background: #fff; color: var(--ksp-ai-brown);
	border: 1px solid #ddd0b6; border-radius: 999px;
	padding: 7px 13px; min-height: 36px; cursor: pointer;
}
.ksp-ai-chip:hover { background: rgba(176, 132, 52, .12); }