/* =============================================================
   NextGen Chatbot widget
   -------------------------------------------------------------
   UX principles:
   - Never covers page content when closed (small bubble, bottom-right).
   - On mobile, it stays well clear of the existing .sticky-cta.
   - When OPEN on mobile, it becomes a full-screen sheet
     (100dvh, safe-area insets) so the keyboard doesn't push it off
     screen and the user never has to fight a floating panel.
   - When OPEN on desktop, it's a 380×560 floating panel anchored
     bottom-right above the bubble.
   - Honors prefers-reduced-motion, no layout shift, no body scroll-lock
     until actually opened.
   ============================================================= */

#ngv-chat-root {
	/* The root is just a portal — all visible elements are absolutely
	   positioned children, so this never affects layout. */
	position: relative;
	z-index: 80;
}

/* CSS custom props for all bot surfaces */
.ngv-bot {
	--bot-brand: #e8392f;
	--bot-brand-600: #084ce0;
	--bot-cyan: #ffc426;
	--bot-ink: #0a0f1c;
	--bot-ink-2: #28324c;
	--bot-muted: #6b7693;
	--bot-hairline: #e4e9f2;
	--bot-surface: #ffffff;
	--bot-bg: #f5f8ff;
	--bot-user-bg: #e8392f;
	--bot-user-fg: #ffffff;
	--bot-shadow: 0 14px 44px rgba(11,40,120,0.18), 0 4px 12px rgba(11,40,120,0.10);
	--bot-radius: 22px;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--bot-ink);
}

/* -------- 1. Floating bubble (closed state) -------- */
.ngv-bot__bubble {
	position: fixed;
	right: calc(16px + env(safe-area-inset-right, 0px));
	bottom: calc(66px + env(safe-area-inset-bottom, 0px)); /* desktop baseline: +50px off floor */
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bot-brand) 0%, var(--bot-cyan) 100%);
	color: #fff;
	border: 0;
	cursor: pointer;
	box-shadow: var(--bot-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 80;
	transition: transform 160ms ease, box-shadow 160ms ease;
	-webkit-tap-highlight-color: transparent;
}
.ngv-bot__bubble:hover { transform: translateY(-2px) scale(1.04); }
.ngv-bot__bubble:active { transform: scale(0.96); }
.ngv-bot__bubble:focus-visible {
	outline: 3px solid rgba(232, 57, 47,0.35);
	outline-offset: 3px;
}
.ngv-bot__bubble svg {
	width: 26px; height: 26px;
}
/* "Bot" badge floats below icon on first-page load so people
   immediately recognise it's a chatbot rather than a support button. */
.ngv-bot__bubble::after {
	content: "Chat";
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	font-weight: 700;
	color: var(--bot-ink-2);
	background: #fff;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--bot-hairline);
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(11,40,120,0.08);
	pointer-events: none;
}
/* One-time pulse on first paint to draw a glance */
@keyframes ngv-bot-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(232, 57, 47,0.4), var(--bot-shadow); }
	50%      { box-shadow: 0 0 0 10px rgba(232, 57, 47,0),   var(--bot-shadow); }
}
.ngv-bot__bubble--pulse {
	animation: ngv-bot-pulse 2.2s ease-out 2;
}

/* Notification dot when visitor has an unseen message */
.ngv-bot__dot {
	position: absolute;
	top: 6px; right: 6px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: #ff4d5f;
	border: 2px solid #fff;
	display: none;
}
.ngv-bot__bubble[data-has-unseen="1"] .ngv-bot__dot { display: block; }

/* Mobile: lift 5px extra per user request, regardless of sticky-cta state. */
@media (max-width: 1023.98px) {
	.ngv-bot__bubble {
		bottom: calc(71px + env(safe-area-inset-bottom, 0px)); /* 66 + 5px extra on mobile */
	}
	/* When the sticky footer CTA is visible, push up above it. */
	body:has(.sticky-cta.is-visible) .ngv-bot__bubble {
		bottom: calc(135px + env(safe-area-inset-bottom, 0px)); /* clears the 48px-tall pill CTA + its 12px bottom offset */
	}
}

/* -------- 2. Panel (open state) --------
   Mobile = full-screen sheet. Desktop = floating card. */
.ngv-bot__panel {
	position: fixed;
	inset: 0;
	background: #fff;
	z-index: 90;
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
	box-shadow: var(--bot-shadow);
	will-change: transform;
	/* iOS safe areas */
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ngv-bot__panel[aria-hidden="false"] {
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.ngv-bot__panel { transition: none; }
}

@media (min-width: 720px) {
	.ngv-bot__panel {
		top: auto;
		left: auto;
		right: calc(16px + env(safe-area-inset-right, 0px));
		bottom: calc(136px + env(safe-area-inset-bottom, 0px)); /* panel tracks the lifted bubble */
		width: 380px;
		height: min(620px, calc(100vh - 120px));
		border-radius: var(--bot-radius);
		overflow: hidden;
		transform: translateY(16px) scale(0.98);
		opacity: 0;
		pointer-events: none;
	}
	.ngv-bot__panel[aria-hidden="false"] {
		transform: translateY(0) scale(1);
		opacity: 1;
		pointer-events: auto;
	}
}

/* Mobile: prevent body scroll while panel is open. */
body.ngv-chat-locked {
	overflow: hidden !important;
	touch-action: none;
}

/* -------- 3. Header -------- */
.ngv-bot__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--bot-brand) 0%, #1f6bff 70%, var(--bot-cyan) 100%);
	color: #fff;
	flex: none;
}
.ngv-bot__avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	display: grid; place-items: center;
	flex: none;
}
.ngv-bot__avatar svg { width: 22px; height: 22px; }
.ngv-bot__id {
	flex: 1;
	min-width: 0;
	line-height: 1.2;
}
.ngv-bot__title {
	font-weight: 700; font-size: 15px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ngv-bot__subtitle {
	font-size: 12px; opacity: 0.85; margin-top: 2px;
	display: flex; align-items: center; gap: 6px;
}
.ngv-bot__dotlive {
	width: 8px; height: 8px; border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
	animation: ngv-bot-live 2s infinite ease-out;
}
@keyframes ngv-bot-live {
	0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
	50%      { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}
.ngv-bot__close {
	background: rgba(255,255,255,0.14);
	color: #fff;
	border: 0;
	width: 36px; height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: grid; place-items: center;
	transition: background 120ms ease;
	-webkit-tap-highlight-color: transparent;
}
.ngv-bot__close:hover { background: rgba(255,255,255,0.28); }
.ngv-bot__close:focus-visible { outline: 3px solid rgba(255,255,255,0.7); outline-offset: 2px; }

/* -------- 4. Body (messages) -------- */
.ngv-bot__body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 16px;
	background: var(--bot-bg);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ngv-bot__msg {
	max-width: 86%;
	padding: 10px 14px;
	border-radius: 16px;
	line-height: 1.45;
	font-size: 14px;
	word-wrap: break-word;
	animation: ngv-bot-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ngv-bot-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ngv-bot__msg--bot {
	align-self: flex-start;
	background: #fff;
	color: var(--bot-ink);
	border: 1px solid var(--bot-hairline);
	border-bottom-left-radius: 4px;
	box-shadow: 0 4px 16px rgba(11,40,120,0.04);
}
.ngv-bot__msg--user {
	align-self: flex-end;
	background: var(--bot-user-bg);
	color: var(--bot-user-fg);
	border-bottom-right-radius: 4px;
}
.ngv-bot__msg a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ngv-bot__msg--bot a { color: var(--bot-brand-600); }
.ngv-bot__msg ul, .ngv-bot__msg ol {
	margin: 6px 0 0 18px; padding: 0;
}
.ngv-bot__msg li { margin: 2px 0; }

.ngv-bot__typing {
	align-self: flex-start;
	display: flex;
	gap: 4px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--bot-hairline);
	border-radius: 16px 16px 16px 4px;
}
.ngv-bot__typing span {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--bot-muted);
	animation: ngv-bot-typing 1.2s infinite ease-in-out;
}
.ngv-bot__typing span:nth-child(2) { animation-delay: 0.15s; }
.ngv-bot__typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes ngv-bot-typing {
	0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
	40%           { opacity: 1;    transform: translateY(-3px); }
}

/* -------- 5. Quick-reply chips -------- */
.ngv-bot__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 14px;
	background: #fff;
	border-top: 1px solid var(--bot-hairline);
	flex: none;
}
.ngv-bot__chip {
	background: var(--bot-bg);
	border: 1px solid var(--bot-hairline);
	color: var(--bot-ink-2);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
	-webkit-tap-highlight-color: transparent;
	/* 44px hit target via padding */
	min-height: 36px;
	line-height: 1;
}
.ngv-bot__chip:hover {
	background: #eaf0ff;
	border-color: #c9d7ff;
}
.ngv-bot__chip:focus-visible {
	outline: 3px solid rgba(232, 57, 47,0.35);
	outline-offset: 2px;
}

/* -------- 6. Input row -------- */
.ngv-bot__input {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--bot-hairline);
	flex: none;
}
.ngv-bot__input textarea {
	flex: 1;
	max-height: 120px;
	min-height: 40px;
	padding: 10px 12px;
	resize: none;
	border: 1px solid var(--bot-hairline);
	border-radius: 14px;
	font-family: inherit;
	font-size: 15px; /* 15px avoids iOS zoom-on-focus */
	line-height: 1.35;
	color: var(--bot-ink);
	background: #fff;
	outline: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ngv-bot__input textarea:focus {
	border-color: var(--bot-brand);
	box-shadow: 0 0 0 3px rgba(232, 57, 47,0.18);
}
.ngv-bot__send {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 0;
	background: var(--bot-brand);
	color: #fff;
	display: grid; place-items: center;
	cursor: pointer;
	flex: none;
	transition: background 120ms ease, transform 120ms ease;
	-webkit-tap-highlight-color: transparent;
}
.ngv-bot__send:hover { background: var(--bot-brand-600); }
.ngv-bot__send:active { transform: scale(0.92); }
.ngv-bot__send:disabled { opacity: 0.45; cursor: not-allowed; }
.ngv-bot__send svg { width: 16px; height: 16px; }

/* -------- 7. Disclaimer -------- */
.ngv-bot__foot {
	padding: 6px 14px 8px;
	text-align: center;
	font-size: 11px;
	color: var(--bot-muted);
	background: #fff;
	border-top: 1px solid var(--bot-hairline);
	flex: none;
}
.ngv-bot__foot a { color: var(--bot-muted); }

/* Print + print-only: hide chat entirely. */
@media print {
	#ngv-chat-root { display: none !important; }
}

/* Very small viewports (<340px) — keep chip count readable. */
@media (max-width: 339.98px) {
	.ngv-bot__chips { padding: 8px 10px; }
	.ngv-bot__chip { font-size: 12px; padding: 6px 10px; }
}