/* VNJP Hộp thư — khung chat website */
#vnjp-chat {
	--vic-color: #1877f2;
	--vic-bottom: 30px;
	--vic-bg: #fff;
	--vic-text: #1c1e21;
	--vic-muted: #65676b;
	--vic-line: #e4e6eb;
	--vic-staff: #f0f2f5;
	position: fixed;
	z-index: 99990;
	right: 25px; /* Cột hai nút ngay trên nút «lên đầu trang» (right 30px, 40×40px), thẳng tâm. */
	bottom: calc(var(--vic-bottom) + 50px + env(safe-area-inset-bottom, 0px));
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	color: var(--vic-text);
}
#vnjp-chat.vic--left { right: auto; left: 20px; }
#vnjp-chat *, #vnjp-chat *::before, #vnjp-chat *::after { box-sizing: border-box; }
#vnjp-chat button, #vnjp-chat input, #vnjp-chat textarea {
	margin: 0; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; min-height: 0;
}
#vnjp-chat button { padding: 0; border: 0; background: none; cursor: pointer; line-height: inherit; }
#vnjp-chat [hidden] { display: none !important; }

/* Khối nút: hai vòng tròn trắng bóng nhẹ đứng cạnh nhau [cú TomolanAI · bong bóng chat], khe hở ~1/5 đường kính.
   Chỉ icon; rê chuột / focus thì hiện nhãn nhỏ phía trên nút. */
#vnjp-chat .vic-dock {
	--vic-ball: radial-gradient(circle at 32% 26%, #fff 0%, #f8f9fc 45%, #eceff6 100%);
	--vic-ball-shadow: 0 8px 22px rgba(30, 41, 70, .14), 0 2px 5px rgba(30, 41, 70, .08), inset 0 -2px 5px rgba(30, 41, 70, .06), inset 0 2px 2px #fff;
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#vnjp-chat .vic-dock .vic-seg {
	position: relative; inset: auto; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0;
	width: 50px; height: 50px; min-width: 0; padding: 0; margin: 0;
	border: 1px solid rgba(206, 213, 229, .95); border-radius: 50%;
	background: var(--vic-ball); box-shadow: var(--vic-ball-shadow); color: #1f2937;
	font: 600 13px/1 inherit; white-space: nowrap; cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
#vnjp-chat .vic-dock .vic-seg:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(30, 41, 70, .18), 0 3px 6px rgba(30, 41, 70, .1), inset 0 -2px 5px rgba(30, 41, 70, .06), inset 0 2px 2px #fff;
}
#vnjp-chat .vic-dock .vic-seg:active { transform: translateY(0) scale(.96); }
#vnjp-chat .vic-dock .vic-seg:focus-visible { outline: 3px solid color-mix(in srgb, var(--vic-color) 45%, #fff); outline-offset: 2px; }

/* Icon. */
#vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon,
#vnjp-chat .vic-dock .vic-ico {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px;
	background: none; box-shadow: none; border-radius: 0;
}
#vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon img { display: block; width: 34px; height: 34px; flex: none; }
#vnjp-chat .vic-dock .vic-ico svg { display: block; width: 30px; height: 30px; filter: drop-shadow(0 2px 3px rgba(8, 102, 255, .28)); }

/* Nhãn nhỏ hiện khi rê chuột. */
#vnjp-chat .vic-dock .vic-label,
#vnjp-chat .vic-dock .tomolan-btn-text {
	position: absolute; bottom: calc(100% + 10px); left: 50%; display: block; max-width: none; margin: 0;
	padding: 6px 10px; border-radius: 8px; background: #1f2937; color: #fff; font-size: 12px; line-height: 1.2;
	opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
#vnjp-chat .vic-dock .vic-seg:is(:hover, :focus-visible) :is(.vic-label, .tomolan-btn-text) { opacity: 1; transform: translate(-50%, 0); }

#vnjp-chat .vic-badge {
	position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
	background: #e41e3f; color: #fff; font-size: 12px; line-height: 16px; text-align: center; border: 2px solid #fff;
}
#vnjp-chat .vic-badge:empty { display: none; }
#vnjp-chat.vic--unread .vic-badge { animation: vic-pulse 1.4s ease-in-out 3; }
@keyframes vic-pulse { 50% { transform: scale(1.2); } }

/* Khung. Khung chat và khung TomolanAI (khi đã gộp nút) cùng cỡ, cùng chỗ: ngay trên hai nút, sát mép phải.
   --vic-panel-bottom(-m) do PHP in theo ô «Cách đáy» (mặc định 92px máy tính, 86px điện thoại). */
#vnjp-chat .vic-panel,
html.vic-docked .tomolan-popup {
	position: fixed; left: auto; right: 90px; bottom: calc(var(--vic-panel-bottom, 20px) + env(safe-area-inset-bottom, 0px));
	width: min(440px, calc(100vw - 40px)); height: min(760px, calc(100vh - var(--vic-panel-bottom, 20px) - 20px));
	border-radius: 20px;
}
#vnjp-chat .vic-panel {
	display: flex; flex-direction: column; background: var(--vic-bg); overflow: hidden;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .1);
	animation: vic-in .16s ease-out;
}
#vnjp-chat.vic--left .vic-panel { right: auto; left: 20px; }
@keyframes vic-in { from { opacity: 0; transform: translateY(8px); } }
#vnjp-chat .vic-head {
	display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px;
	background: var(--vic-color); color: #fff;
}
#vnjp-chat .vic-head-text { flex: 1; min-width: 0; }
#vnjp-chat .vic-head-text strong { display: block; font-size: 16px; }
#vnjp-chat .vic-head-text span { display: block; font-size: 13px; opacity: .9; }
#vnjp-chat .vic-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; }
#vnjp-chat .vic-close:hover, #vnjp-chat .vic-close:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }

#vnjp-chat .vic-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px 6px; overscroll-behavior: contain; }
#vnjp-chat .vic-msg { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 8px; }
#vnjp-chat .vic-msg--me { align-items: flex-end; }
#vnjp-chat .vic-who { margin: 0 0 2px 10px; font-size: 12px; color: var(--vic-muted); }
#vnjp-chat .vic-bubble {
	max-width: 85%; padding: 8px 12px; border-radius: 18px; background: var(--vic-staff);
	overflow-wrap: anywhere; white-space: normal;
}
#vnjp-chat .vic-msg--me .vic-bubble { background: var(--vic-color); color: #fff; }
#vnjp-chat .vic-bubble a { color: inherit; text-decoration: underline; }
#vnjp-chat .vic-msg--sending .vic-bubble { opacity: .65; }
#vnjp-chat .vic-msg--failed .vic-bubble { background: #fff; color: var(--vic-text); border: 1px solid #e41e3f; }
#vnjp-chat .vic-time { margin: 2px 10px 0; font-size: 11px; color: var(--vic-muted); }
#vnjp-chat .vic-retry { margin: 2px 10px 0; font-size: 12px; color: #e41e3f; text-decoration: underline; text-align: right; }

#vnjp-chat .vic-form { padding: 8px 12px 10px; border-top: 1px solid var(--vic-line); background: var(--vic-bg); }
#vnjp-chat .vic-intro { display: grid; gap: 6px; margin-bottom: 8px; }
#vnjp-chat .vic-input, #vnjp-chat .vic-text {
	width: 100%; padding: 8px 12px; border: 1px solid var(--vic-line); border-radius: 10px;
	background: var(--vic-bg); color: var(--vic-text); font-size: 15px; outline: none;
}
#vnjp-chat .vic-input:focus, #vnjp-chat .vic-text:focus { border-color: var(--vic-color); }
#vnjp-chat .vic-hint { margin: 0; font-size: 12px; color: var(--vic-muted); }
#vnjp-chat .vic-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
#vnjp-chat .vic-row { display: flex; align-items: flex-end; gap: 6px; }
#vnjp-chat .vic-text { flex: 1; min-height: 40px; max-height: 120px; border-radius: 20px; resize: none; line-height: 1.4; }
#vnjp-chat .vic-send {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 40px; height: 40px; border-radius: 50%; color: var(--vic-color);
}
#vnjp-chat .vic-send:hover, #vnjp-chat .vic-send:focus-visible { background: var(--vic-staff); outline: none; }
#vnjp-chat .vic-error { margin: 4px 4px 0; font-size: 13px; color: #e41e3f; }
#vnjp-chat .vic-error:empty { display: none; }
#vnjp-chat .vic-messenger { display: inline-block; margin: 6px 4px 0; font-size: 13px; color: var(--vic-muted); text-decoration: none; }
#vnjp-chat .vic-messenger:hover { color: var(--vic-color); text-decoration: underline; }

/* Điện thoại */
@media (hover: none) {
	#vnjp-chat .vic-dock .vic-seg:is(:hover, :focus-visible) :is(.vic-label, .tomolan-btn-text) { opacity: 0; }
}
@media (max-width: 720px) {
	#vnjp-chat.vic--hide-mobile { display: none; }
	#vnjp-chat.vic--left { left: 14px; }
	#vnjp-chat { right: 27px; }
	#vnjp-chat .vic-dock .vic-seg { width: 46px; height: 46px; }
}
@media (max-width: 768px) {
	/* Cùng mốc 768px với CSS điện thoại của TomolanAI. */
	#vnjp-chat .vic-panel,
	#vnjp-chat.vic--left .vic-panel,
	html.vic-docked .tomolan-popup {
		left: 10px; right: 10px; width: auto; bottom: calc(var(--vic-panel-bottom-m, 86px) + env(safe-area-inset-bottom, 0px));
		height: calc(100vh - var(--vic-panel-bottom-m, 86px) - 16px); height: calc(100dvh - var(--vic-panel-bottom-m, 86px) - 16px);
		border-radius: 18px;
	}
	#vnjp-chat .vic-input, #vnjp-chat .vic-text { font-size: 16px; } /* iPhone không tự phóng to */
}

/* Chế độ tối của site */
html.vnjp-dark #vnjp-chat {
	--vic-bg: #1f2023;
	--vic-text: #e4e6eb;
	--vic-muted: #a8abb2;
	--vic-line: #34363b;
	--vic-staff: #2d2f34;
}
html.vnjp-dark #vnjp-chat .vic-badge { border-color: #1f2023; }

@media (prefers-reduced-motion: reduce) {
	#vnjp-chat .vic-seg, #vnjp-chat .vic-label, #vnjp-chat .tomolan-btn-text, #vnjp-chat .vic-panel, #vnjp-chat .vic-badge { transition: none; animation: none; }
}
@media print {
	#vnjp-chat { display: none !important; }
}

/* Nút tin nhắn: chỉ bong bóng xanh, không vòng tròn trắng, không viền. */
#vnjp-chat .vic-dock .vic-launcher,
#vnjp-chat .vic-dock .vic-launcher:hover { background: none; border: 0; box-shadow: none; }
#vnjp-chat .vic-dock .vic-launcher .vic-ico { width: 50px; height: 50px; flex-basis: 50px; }
#vnjp-chat .vic-dock .vic-launcher .vic-ico svg { width: 50px; height: 50px; filter: drop-shadow(0 4px 8px rgba(8, 102, 255, .35)); }
@media (max-width: 720px) {
	#vnjp-chat .vic-dock .vic-launcher .vic-ico, #vnjp-chat .vic-dock .vic-launcher .vic-ico svg { width: 46px; height: 46px; }
}
/* Nút tin nhắn trong suốt hơn; rê chuột thì rõ lại. */
#vnjp-chat .vic-dock .vic-launcher .vic-ico { opacity: .95; transition: opacity .15s ease; }
#vnjp-chat .vic-dock .vic-launcher:is(:hover, :focus-visible) .vic-ico, #vnjp-chat.vic--open .vic-dock .vic-launcher .vic-ico { opacity: 1; }
/* Nút con cú giống nút tin nhắn: chỉ hình con cú, không vòng tròn trắng, không viền, mờ 50%; rê chuột thì rõ. */
#vnjp-chat .vic-dock #tomolan-floating-button,
#vnjp-chat .vic-dock #tomolan-floating-button:hover { background: none; border: 0; box-shadow: none; }
#vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon { width: 50px; height: 50px; flex-basis: 50px; opacity: .95; transition: opacity .15s ease; }
#vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon img { width: 50px; height: 50px; filter: none; }
#vnjp-chat .vic-dock #tomolan-floating-button:is(:hover, :focus-visible) .tomolan-btn-icon,
html.vic-docked:has(.tomolan-popup.is-open) #vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon { opacity: 1; }
@media (max-width: 720px) {
	#vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon, #vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon img { width: 46px; height: 46px; }
}
/* Tiêu đề khung chat giống hệt khung TomolanAI (màu #2563eb → #1d4ed8, ô logo, nút đóng vuông bo góc). */
#vnjp-chat .vic-head { padding: 14px 16px; gap: 10px; color: #fff; background: linear-gradient(135deg, #2563eb, #1d4ed8); }
#vnjp-chat .vic-logo { display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .18); overflow: hidden; }
#vnjp-chat .vic-logo img { display: block; width: 26px; height: 26px; object-fit: contain; border-radius: 50%; }
#vnjp-chat .vic-head-text strong { font-size: 15px; font-weight: 700; line-height: 1.2; }
#vnjp-chat .vic-head-text span { font-size: 12px; opacity: .92; line-height: 1.2; margin-top: 2px; }
#vnjp-chat .vic-close { width: 44px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .15); }
#vnjp-chat .vic-close:hover, #vnjp-chat .vic-close:focus-visible { background: rgba(255, 255, 255, .25); }
/* Con cú nhỏ hơn ~10% và sát xuống nút tin nhắn. */
#vnjp-chat .vic-dock #tomolan-floating-button { margin-bottom: -8px; }
#vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon,
#vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon img { width: 40px; height: 40px; flex-basis: 40px; }
@media (max-width: 720px) {
	#vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon,
	#vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon img { width: 37px; height: 37px; flex-basis: 37px; }
}
/* Nút tin nhắn nhỏ hơn 8%. */
#vnjp-chat .vic-dock .vic-launcher .vic-ico, #vnjp-chat .vic-dock .vic-launcher .vic-ico svg { width: 46px; height: 46px; flex-basis: 46px; }
@media (max-width: 720px) {
	#vnjp-chat .vic-dock .vic-launcher .vic-ico, #vnjp-chat .vic-dock .vic-launcher .vic-ico svg { width: 42px; height: 42px; flex-basis: 42px; }
}
/* Dời xuống: con cú 20% chiều cao nút, tin nhắn 10%. */
#vnjp-chat .vic-dock #tomolan-floating-button .tomolan-btn-icon { transform: translateY(calc(20% + 5px)); }
#vnjp-chat .vic-dock .vic-launcher .vic-ico { transform: translateY(10%); }
/* Chống nhảy: trang có khung chat thì nút con cú chỉ hiện khi đã nằm trong cột nút (JS thêm lớp .vic-seg). */
html:has(#vnjp-chat) #tomolan-floating-button:not(.vic-seg) { visibility: hidden; }
/* Điện thoại: hai khung chat gần như toàn màn hình (cách mép 8px); cột nút ẩn khi khung đang mở. */
@media (max-width: 768px) {
	#vnjp-chat .vic-panel,
	#vnjp-chat.vic--left .vic-panel,
	html.vic-docked .tomolan-popup {
		left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		height: calc(100vh - 16px); height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
	}
	#vnjp-chat.vic--open .vic-dock,
	html:has(.tomolan-popup.is-open) #vnjp-chat .vic-dock { display: none; }
}
/* Điện thoại khi bàn phím mở: khung co theo phần màn hình còn thấy (JS đặt --vic-vvh/--vic-vvtop theo visualViewport).
   Chữ ô nhập 16px để iPhone không tự phóng to trang. */
@media (max-width: 768px) {
	html.vic-vv #vnjp-chat .vic-panel,
	html.vic-vv.vic-docked .tomolan-popup {
		top: calc(var(--vic-vvtop, 0px) + 8px); bottom: auto;
		height: calc(var(--vic-vvh, 100dvh) - 16px);
	}
	html.vic-docked .tomolan-popup :is(input, textarea, select) { font-size: 16px !important; }
}
/* Ẩn nút báo lỗi (vnjp-floating-report) và nút furigana nổi khi một trong hai khung chat đang mở. */
html:has(#vnjp-chat.vic--open) :is(#vnjp-report-fab, #vnjp-ruby-fab, .vnjp-ruby-fab, .vnjp-lp-fab),
html:has(.tomolan-popup.is-open) :is(#vnjp-report-fab, #vnjp-ruby-fab, .vnjp-ruby-fab, .vnjp-lp-fab) { display: none !important; }