/*
 * Vita Chat widget (handoff section 6). Scoped under #vita-chat so the theme's Bootstrap and
 * global button/input rules cannot change it, and it cannot change the theme.
 * Breakpoint 992px, the same as the theme redesign: below it the panel is a bottom sheet.
 */
#vita-chat {
	--vc-olive: #5F5D4E;
	--vc-olive-hover: #4A4940;
	--vc-olive-deep: #3F3E34;
	--vc-ink: #17171A;
	--vc-muted: #8D8878;
	--vc-faint: #A29D8E;
	--vc-border: #DDD8CF;
	--vc-card: #EBE7DE;
	--vc-surface: #F6F5F1;
	--vc-online: #7FA36B;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--vc-ink);
	line-height: 1.5;
}
#vita-chat *, #vita-chat *::before, #vita-chat *::after { box-sizing: border-box; }
#vita-chat button, #vita-chat input { font-family: inherit; margin: 0; }
#vita-chat [hidden] { display: none !important; }

/* ---------- launcher ---------- */
#vita-chat .vc-launcher {
	position: fixed;
	z-index: 99990;
	right: 16px;
	bottom: 46px;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
#vita-chat .vc-launcher-circle {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--vc-olive);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(63,62,52,.35);
	transition: background .18s;
}
#vita-chat .vc-launcher:hover .vc-launcher-circle { background: var(--vc-olive-hover); }
#vita-chat .vc-dot {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--vc-online);
	border: 2px solid #fff;
}
#vita-chat.vc-offline .vc-dot { background: #C9C4B6; }
#vita-chat .vc-dot-inline { display: none; }
#vita-chat .vc-launcher-label {
	height: 40px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	border-radius: 20px;
	background: #fff;
	color: var(--vc-olive-deep);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	box-shadow: 0 6px 18px rgba(30,28,20,.16), 0 0 0 1px rgba(0,0,0,.04);
	white-space: nowrap;
}
#vita-chat .vc-unread {
	position: absolute;
	top: -2px;
	left: -2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #C0533A;
	border: 2px solid #fff;
}
#vita-chat.vc-open .vc-launcher { display: none; }

/* ---------- panel: mobile bottom sheet ---------- */
#vita-chat .vc-scrim {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99991;
	background: rgba(20,20,16,.38);
}
#vita-chat.vc-open .vc-scrim { display: block; }
#vita-chat .vc-panel {
	position: fixed;
	z-index: 99992;
	left: 0;
	right: 0;
	bottom: 0;
	height: 75vh;
	height: 75dvh;
	max-height: 660px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 22px 22px 0 0;
	overflow: hidden;
	box-shadow: 0 -10px 40px rgba(30,28,20,.2);
}
#vita-chat .vc-handle { flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: #D9D5CB; }
#vita-chat .vc-head {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px 12px 16px;
	background: #fff;
	border-bottom: 1px solid #ECE9E3;
}
#vita-chat .vc-avatar {
	position: relative;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--vc-olive);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Prata", Georgia, serif;
	font-size: 18px;
}
#vita-chat .vc-avatar-dot {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--vc-online);
	border: 2px solid #fff;
}
#vita-chat.vc-offline .vc-avatar-dot { background: #C9C4B6; }
#vita-chat .vc-titles { flex: 1; min-width: 0; }
#vita-chat .vc-title { font-family: "Prata", Georgia, serif; font-size: 17px; line-height: 1.25; color: var(--vc-ink); }
#vita-chat .vc-status { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--vc-muted); }
#vita-chat .vc-close {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--vc-border);
	background: #fff;
	color: var(--vc-olive-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

#vita-chat .vc-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--vc-surface);
}
#vita-chat .vc-list { display: flex; flex-direction: column; gap: 10px; }
#vita-chat .vc-day { align-self: center; padding: 2px 0 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--vc-faint); }
#vita-chat .vc-row { display: flex; flex-direction: column; max-width: 82%; }
#vita-chat .vc-vita { align-self: flex-start; align-items: flex-start; }
#vita-chat .vc-you { align-self: flex-end; align-items: flex-end; }
#vita-chat .vc-bubble {
	padding: 10px 14px;
	font-size: 14.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
#vita-chat .vc-vita .vc-bubble { background: #fff; border: 1px solid var(--vc-card); color: var(--vc-ink); border-radius: 16px 16px 16px 4px; }
#vita-chat .vc-you .vc-bubble { background: var(--vc-olive); color: #fff; border-radius: 16px 16px 4px 16px; }
#vita-chat .vc-kind-lead .vc-bubble { background: #E9E7DF; color: var(--vc-olive-deep); }
#vita-chat .vc-kind-closed .vc-bubble { background: transparent; border-style: dashed; color: var(--vc-muted); }
#vita-chat .vc-time { margin-top: 4px; padding: 0 4px; font-size: 11px; color: var(--vc-faint); }
#vita-chat .vc-pending .vc-bubble { opacity: .7; }
#vita-chat .vc-failed { cursor: pointer; }
#vita-chat .vc-failed .vc-bubble { background: #8E8B7D; }
#vita-chat .vc-failed .vc-time { color: #B04A33; }

#vita-chat .vc-typing {
	align-self: flex-start;
	display: flex;
	gap: 4px;
	padding: 13px 14px;
	background: #fff;
	border: 1px solid var(--vc-card);
	border-radius: 16px 16px 16px 4px;
}
#vita-chat .vc-typing span { width: 6px; height: 6px; border-radius: 50%; background: #B8B3A5; animation: vc-blink 1.2s infinite ease-in-out; }
#vita-chat .vc-typing span:nth-child(2) { background: #A29D8E; animation-delay: .15s; }
#vita-chat .vc-typing span:nth-child(3) { background: #8D8878; animation-delay: .3s; }
@keyframes vc-blink { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { #vita-chat .vc-typing span { animation: none; } }

#vita-chat .vc-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#vita-chat .vc-quick:empty { display: none; }
#vita-chat .vc-chip {
	height: 38px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #CFC9BC;
	border-radius: 19px;
	font-size: 13.5px;
	color: var(--vc-olive-deep);
	cursor: pointer;
	transition: border-color .18s;
}
#vita-chat .vc-chip:hover { border-color: var(--vc-olive); }

#vita-chat .vc-lead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--vc-card);
	border-radius: 14px;
}
#vita-chat .vc-lead-title { font-size: 14px; line-height: 1.45; color: var(--vc-ink); }
#vita-chat .vc-lead-input {
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--vc-border);
	border-radius: 2px;
	background: #fff;
	font-size: 16px;
	color: var(--vc-ink);
	outline: none;
}
#vita-chat .vc-lead-input:focus { border-color: var(--vc-olive); }
#vita-chat .vc-lead-btn {
	height: 44px;
	border: 0;
	border-radius: 2px;
	background: var(--vc-olive);
	color: #fff;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: .04em;
	cursor: pointer;
}
#vita-chat .vc-lead-btn:hover { background: var(--vc-olive-hover); }
#vita-chat .vc-lead-btn:disabled { opacity: .6; }
#vita-chat .vc-lead-error { font-size: 13px; color: #B04A33; }
#vita-chat .vc-lead-note { font-size: 11.5px; color: var(--vc-muted); }
#vita-chat .vc-lead-note a { color: var(--vc-olive); text-decoration: underline; }

#vita-chat .vc-composer {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
	margin: 0;
	border-top: 1px solid #ECE9E3;
	background: #fff;
}
#vita-chat .vc-input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--vc-border);
	border-radius: 22px;
	background: #fff;
	font-size: 16px; /* 16px on phones: no iOS zoom on focus */
	color: var(--vc-ink);
	outline: none;
}
#vita-chat .vc-input:focus { border-color: var(--vc-olive); }
#vita-chat .vc-send {
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vc-olive);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
#vita-chat .vc-send:hover { background: var(--vc-olive-hover); }

/* ---------- desktop: pill launcher + popover ---------- */
@media (min-width: 992px) {
	#vita-chat .vc-launcher {
		right: 28px;
		bottom: 28px;
		flex-direction: row;
		gap: 10px;
		height: 54px;
		padding: 0 22px 0 18px;
		border-radius: 27px;
		background: var(--vc-olive);
		color: #fff;
		box-shadow: 0 12px 28px rgba(63,62,52,.35);
		transition: background .18s;
	}
	#vita-chat .vc-launcher:hover { background: var(--vc-olive-hover); }
	#vita-chat .vc-launcher-circle { width: auto; height: auto; background: none; box-shadow: none; }
	#vita-chat .vc-launcher-circle .vc-dot { display: none; }
	#vita-chat .vc-launcher-label { height: auto; padding: 0; background: none; box-shadow: none; color: #fff; font-size: 15px; }
	#vita-chat .vc-dot-inline { display: block; position: static; width: 9px; height: 9px; border: 0; background: #9CC489; }
	#vita-chat.vc-offline .vc-dot-inline { background: #C9C4B6; }

	#vita-chat.vc-open .vc-scrim { display: none; }
	#vita-chat .vc-panel {
		left: auto;
		right: 28px;
		bottom: 28px;
		width: 384px;
		height: 580px;
		max-height: calc(100vh - 56px);
		border-radius: 14px;
		box-shadow: 0 24px 60px rgba(30,28,20,.28), 0 0 0 1px rgba(0,0,0,.06);
	}
	#vita-chat .vc-handle { display: none; }
	#vita-chat .vc-head { padding: 16px 16px 16px 18px; background: var(--vc-olive); border-bottom: 0; }
	#vita-chat .vc-avatar { background: #fff; color: var(--vc-olive); }
	#vita-chat .vc-avatar-dot { border-color: var(--vc-olive); }
	#vita-chat .vc-title { color: #fff; }
	#vita-chat .vc-status { color: rgba(255,255,255,.78); }
	#vita-chat .vc-close { width: 36px; height: 36px; border-color: rgba(255,255,255,.3); background: transparent; color: #fff; }
	#vita-chat .vc-chip { height: 36px; border-radius: 18px; }
	#vita-chat .vc-input { font-size: 14.5px; }
	#vita-chat .vc-composer { padding: 12px; }
}

/* The site's reCAPTCHA badge sits bottom-right; keep the launcher clear of it. */
body:has(.grecaptcha-badge) #vita-chat .vc-launcher { bottom: 92px; }
@media (min-width: 992px) {
	body:has(.grecaptcha-badge) #vita-chat .vc-launcher { bottom: 92px; }
}
