/**
 * batbot-trang.css — Chatbot Bát Tự, giao diện kiểu ChatGPT.
 *
 * Dùng biến màu của theme Bazifu (--bz-*), có giá trị dự phòng để chạy được
 * cả khi đặt trong theme khác. Mọi màu chữ đều buộc theo --bz-text để nền tối
 * không bị mất chữ.
 */

.batbot-trang {
	display: flex;
	flex-direction: column;
	/* Theme đặt chiều cao cho khung cha; ở theme khác thì tự chiếm gần hết màn hình. */
	min-height: 0;
	height: 100%;
	flex: 1 1 auto;
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	color: var(--bz-text, #0d0d0d);
	font-family: var(--bz-font, ui-sans-serif, -apple-system, "Segoe UI", sans-serif);
}

/* ---------- Vùng hội thoại ---------- */
.batbot-trang .batbot-log {
	flex: 1 1 auto;
	min-height: 0;             /* để vùng cuộn nằm gọn trong khung, không đẩy trang dài ra */
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 26px 0 28px;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Thanh trượt luôn thấy được, nếu không người dùng tưởng bị mất nội dung. */
	scrollbar-width: thin;
	scrollbar-color: var(--bz-line, #e5e5e5) transparent;
	padding-right: 6px;
}
.batbot-trang .batbot-log::-webkit-scrollbar { width: 8px; }
.batbot-trang .batbot-log::-webkit-scrollbar-track { background: transparent; }
.batbot-trang .batbot-log::-webkit-scrollbar-thumb {
	background: var(--bz-line, #e5e5e5);
	border-radius: 4px;
}
.batbot-trang .batbot-log:hover::-webkit-scrollbar-thumb {
	background: var(--bz-text-3, #8f8f8f);
}
.batbot-trang .batbot-msg {
	display: flex;
	max-width: 100%;
}

/* Tin người dùng: bong bóng bên phải */
.batbot-trang .batbot-user {
	justify-content: flex-end;
}
.batbot-trang .batbot-user .batbot-bong {
	max-width: 80%;
	padding: 11px 16px;
	border-radius: 20px;
	background: var(--bz-bg-soft, #f4f4f4);
	color: var(--bz-text, #0d0d0d);
	font-size: 15.5px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* Tin bot: phẳng, không nền, chiếm cả dòng — như ChatGPT */
.batbot-trang .batbot-bot {
	justify-content: flex-start;
}
.batbot-trang .batbot-bot .batbot-bong {
	max-width: 100%;
	padding: 0;
	background: none;
	color: var(--bz-text, #0d0d0d);
	font-size: 16px;
	line-height: 1.75;
	overflow-wrap: anywhere;
}

/* Khối "Vì sao luận vậy" — một khối gọn, KHÔNG lồng bong bóng */
.batbot-trang .batbot-cancu {
	justify-content: flex-start;
}
.batbot-trang .batbot-cancu .batbot-bong {
	max-width: 100%;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--bz-bg-soft, #f7f7f7);
	border: 1px solid var(--bz-line, #e5e5e5);
	border-left: 3px solid var(--bz-accent, #8f4b1e);
	color: var(--bz-text-2, #5d5d5d);
	font-size: 14px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

/* Trạng thái đang tra cứu */
.batbot-trang .batbot-dang-nghi .batbot-bong {
	color: var(--bz-text-3, #8f8f8f);
	font-style: italic;
}

/* ---------- Khu vực nhập ---------- */
.batbot-trang .batbot-duoi {
	position: sticky;
	bottom: 0;
	background: var(--bz-bg, #fff);
	padding: 12px 0 16px;
}
.batbot-trang .batbot-nhac {
	margin: 0 0 14px;
	padding: 11px 15px;
	border: 1px solid var(--bz-line, #e5e5e5);
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bz-text-2, #5d5d5d);
	background: var(--bz-bg-soft, #fafafa);
}
.batbot-trang .batbot-nhac[hidden] { display: none; }
.batbot-trang .batbot-nhac a {
	color: var(--bz-accent, #8f4b1e);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.batbot-trang .batbot-input {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 8px 8px 8px 18px;
	border: 1px solid var(--bz-line, #e5e5e5);
	border-radius: 26px;
	background: var(--bz-bg, #fff);
	box-shadow: var(--bz-shadow, 0 2px 6px rgba(0, 0, 0, .06));
	transition: border-color .15s;
}
.batbot-trang .batbot-input:focus-within {
	border-color: var(--bz-text-3, #8f8f8f);
}
.batbot-trang .batbot-input textarea,
.batbot-trang .batbot-input input[type="text"] {
	flex: 1 1 auto;
	border: 0;
	outline: 0;
	background: none;
	color: var(--bz-text, #0d0d0d);
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	padding: 9px 0;
	resize: none;
	max-height: 160px;
}
.batbot-trang .batbot-input textarea::placeholder {
	color: var(--bz-text-3, #8f8f8f);
}

.batbot-trang #batbot-send {
	width: 38px;
	height: 38px;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: var(--bz-btn, #0d0d0d);
	color: var(--bz-btn-text, #fff);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: opacity .15s;
}
.batbot-trang #batbot-send:hover { opacity: .86; }
.batbot-trang #batbot-send:disabled { opacity: .4; cursor: default; }
.batbot-trang #batbot-send svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.batbot-trang .batbot-note {
	margin: 10px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--bz-text-3, #8f8f8f);
}

@media (max-width: 640px) {
	.batbot-trang .batbot-user .batbot-bong { max-width: 88%; }
	.batbot-trang .batbot-bot .batbot-bong { font-size: 15.5px; }
}

/* ---------- Nội dung khối căn cứ ---------- */
.batbot-trang .batbot-cancu-tieude {
	font-weight: 600;
	font-size: 13px;
	color: var(--bz-text, #0d0d0d);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.batbot-trang .batbot-cancu-tieude::before {
	content: "📋";
	font-size: 13px;
}
.batbot-trang .batbot-cancu-list {
	margin: 0 0 8px;
	padding-left: 18px;
}
.batbot-trang .batbot-cancu-list li {
	margin: 3px 0;
	color: var(--bz-text-2, #5d5d5d);
}
.batbot-trang .batbot-cancu-note {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--bz-text-3, #8f8f8f);
}
.batbot-trang .batbot-cancu-note:first-child { margin-top: 0; }