/**
 * AI RAG Chatbot — front-end widget styles.
 * Colors/fonts driven by CSS custom properties set inline by chatbot.js
 * from the /wparc/v1/config REST response, so the whole widget follows
 * the admin's Theme settings without editing this file.
 *
 * Every rule is scoped under #wparc-chatbot-root (ID + class = specificity
 * 1,1,0) rather than a bare class. Host themes commonly ship resets like
 * `[type="button"], button { width: auto }` — an attribute selector has the
 * SAME specificity as a single class, so on a tie the later-loaded
 * stylesheet wins regardless of which one "should" apply. Scoping under the
 * root ID guarantees our rules always win without needing !important.
 */

#wparc-chatbot-root {
	--wparc-primary: #4f46e5;
	--wparc-secondary: #111827;
	--wparc-accent: #22c55e;
	--wparc-text: #111827;
	--wparc-bg: #ffffff;
	--wparc-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	--wparc-font-heading: 'Sora', var(--wparc-font);
	--wparc-radius: 18px;
	all: initial;
	font-family: var(--wparc-font);
	color-scheme: light;
}
#wparc-chatbot-root * { box-sizing: border-box; font-family: inherit; }

/* ---------- Launcher ---------- */
#wparc-chatbot-root .wparc-launcher {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999999;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--wparc-primary), color-mix(in srgb, var(--wparc-primary) 55%, var(--wparc-accent)) 60%, color-mix(in srgb, var(--wparc-primary) 45%, #7c3aed));
	box-shadow:
		0 12px 28px -6px color-mix(in srgb, var(--wparc-primary) 55%, transparent),
		0 4px 12px rgba(0,0,0,.18),
		inset 0 1px 0 rgba(255,255,255,.25);
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
#wparc-chatbot-root .wparc-launcher::before {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--wparc-primary), var(--wparc-accent), color-mix(in srgb, var(--wparc-primary) 40%, #7c3aed), var(--wparc-primary));
	opacity: .45;
	filter: blur(7px);
	z-index: -1;
	animation: wparc-spin 7s linear infinite;
	transition: opacity .25s ease;
}
#wparc-chatbot-root .wparc-launcher:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 38px -6px color-mix(in srgb, var(--wparc-primary) 60%, transparent), 0 6px 16px rgba(0,0,0,.22); }
#wparc-chatbot-root .wparc-launcher:hover::before { opacity: .7; }
#wparc-chatbot-root .wparc-launcher:active { transform: translateY(-1px) scale(.97); }

/* Two staggered rings that expand and fade outward on a loop -- a "sonar
   ping" wave layered on top of the rotating glow ring, so the launcher
   reads as alive at rest, not just on hover. Paused once the panel is
   open, since the button becomes a static close (X) at that point. */
#wparc-chatbot-root .wparc-launcher-wave {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--wparc-primary) 55%, var(--wparc-accent));
	opacity: 0;
	pointer-events: none;
	animation: wparc-wave-ripple 2.4s ease-out infinite;
}
#wparc-chatbot-root .wparc-launcher-wave.wparc-wave-2 { animation-delay: 1.3s; }
#wparc-chatbot-root .wparc-launcher.wparc-launcher-open .wparc-launcher-wave { animation-play-state: paused; opacity: 0; }

#wparc-chatbot-root .wparc-launcher-icon {
	position: absolute;
	width: 22px;
	height: 22px;
	fill: #fff;
	transition: opacity .22s ease, transform .32s cubic-bezier(.34,1.56,.64,1);
}
#wparc-chatbot-root .wparc-launcher-icon-custom {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
}
#wparc-chatbot-root .wparc-launcher-icon-close { opacity: 0; transform: rotate(-90deg) scale(.4); }
#wparc-chatbot-root .wparc-launcher.wparc-launcher-open .wparc-launcher-icon-chat { opacity: 0; transform: rotate(90deg) scale(.4); }
#wparc-chatbot-root .wparc-launcher.wparc-launcher-open .wparc-launcher-icon-close { opacity: 1; transform: rotate(0) scale(1); }

#wparc-chatbot-root .wparc-launcher .wparc-dot {
	position: absolute;
	top: 0; right: 1px;
	width: 12px; height: 12px;
	background: linear-gradient(135deg, #ff5f6d, #ef4444);
	border-radius: 50%;
	border: 2px solid #fff;
	display: none;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
#wparc-chatbot-root .wparc-launcher.has-unread .wparc-dot { display: block; animation: wparc-pop .3s cubic-bezier(.34,1.56,.64,1); }
#wparc-chatbot-root.wparc-pos-left .wparc-launcher { right: auto; left: 24px; }

/* Admin-configurable hover tooltip (Settings > General & Branding). Lives
   inside the launcher button but is aria-hidden -- the button's own
   aria-label already carries the accessible name, this is purely visual. */
#wparc-chatbot-root .wparc-launcher-tooltip {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	transform: translateY(-50%) translateX(4px);
	background: var(--wparc-secondary);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -.01em;
	white-space: nowrap;
	padding: 8px 14px;
	border-radius: 10px;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 10px 24px -6px rgba(0,0,0,.35);
	transition: opacity .18s ease, transform .18s ease;
}
#wparc-chatbot-root .wparc-launcher-tooltip::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 6px solid transparent;
	border-left-color: var(--wparc-secondary);
}
#wparc-chatbot-root .wparc-launcher:hover .wparc-launcher-tooltip,
#wparc-chatbot-root .wparc-launcher:focus-visible .wparc-launcher-tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}
#wparc-chatbot-root .wparc-launcher.wparc-launcher-open .wparc-launcher-tooltip { display: none; }

/* Periodic "nudge": every 2 minutes (see scheduleTooltipNudge() in
   chatbot.js), the tooltip briefly shows itself with a playful bounce even
   without hover, to catch the eye of a visitor who hasn't opened the chat
   yet. Reuses the same opacity/transform end-state as :hover above, so the
   bounce hands off cleanly to the CSS transition once it finishes. */
#wparc-chatbot-root .wparc-launcher-tooltip.wparc-tooltip-nudge {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
	animation: wparc-tooltip-nudge-bounce .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wparc-tooltip-nudge-bounce {
	0%   { transform: translateY(-50%) translateX(10px) scale(.85); }
	55%  { transform: translateY(-50%) translateX(-4px) scale(1.05); }
	100% { transform: translateY(-50%) translateX(0) scale(1); }
}
#wparc-chatbot-root .wparc-launcher.wparc-launcher-nudge {
	animation: wparc-launcher-nudge-pulse .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wparc-launcher-nudge-pulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

#wparc-chatbot-root.wparc-pos-left .wparc-launcher-tooltip {
	right: auto;
	left: calc(100% + 14px);
	transform: translateY(-50%) translateX(-4px);
}
#wparc-chatbot-root.wparc-pos-left .wparc-launcher-tooltip::after {
	left: auto; right: 100%;
	border-left-color: transparent;
	border-right-color: var(--wparc-secondary);
}
#wparc-chatbot-root.wparc-pos-left .wparc-launcher:hover .wparc-launcher-tooltip,
#wparc-chatbot-root.wparc-pos-left .wparc-launcher:focus-visible .wparc-launcher-tooltip {
	transform: translateY(-50%) translateX(0);
}
#wparc-chatbot-root.wparc-pos-left .wparc-launcher-tooltip.wparc-tooltip-nudge {
	animation-name: wparc-tooltip-nudge-bounce-left;
}
@keyframes wparc-tooltip-nudge-bounce-left {
	0%   { transform: translateY(-50%) translateX(-10px) scale(.85); }
	55%  { transform: translateY(-50%) translateX(4px) scale(1.05); }
	100% { transform: translateY(-50%) translateX(0) scale(1); }
}

/* ---------- Panel ---------- */
#wparc-chatbot-root .wparc-panel {
	position: fixed;
	bottom: 92px;
	right: 24px;
	z-index: 999999;
	width: 396px;
	max-width: calc(100vw - 32px);
	height: 620px;
	max-height: calc(100vh - 150px);
	background: var(--wparc-bg);
	color: var(--wparc-text);
	border-radius: 28px;
	box-shadow:
		0 32px 80px -16px rgba(0,0,0,.32),
		0 10px 28px -8px color-mix(in srgb, var(--wparc-primary) 22%, transparent),
		0 0 0 1px rgba(0,0,0,.045);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px) scale(.96);
	pointer-events: none;
	transition: opacity .26s ease, transform .32s cubic-bezier(.22,1,.36,1);
}
#wparc-chatbot-root .wparc-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#wparc-chatbot-root.wparc-pos-left .wparc-panel { right: auto; left: 24px; }

/* ---------- Header ---------- */
#wparc-chatbot-root .wparc-header {
	position: relative;
	background: linear-gradient(125deg, var(--wparc-primary), color-mix(in srgb, var(--wparc-primary) 50%, #6d28d9) 70%, color-mix(in srgb, var(--wparc-primary) 35%, var(--wparc-accent)));
	color: #fff;
	padding: 20px 20px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	overflow: hidden;
}
#wparc-chatbot-root .wparc-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% -20%, rgba(255,255,255,.28), transparent 55%);
	pointer-events: none;
}
#wparc-chatbot-root .wparc-header img.wparc-logo {
	width: 36px; height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(255,255,255,.35);
	position: relative;
}
#wparc-chatbot-root .wparc-header-info { flex: 1; min-width: 0; position: relative; }
#wparc-chatbot-root .wparc-header-title {
	font-family: var(--wparc-font-heading);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -.01em;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#wparc-chatbot-root .wparc-header-status { font-size: 12px; opacity: .88; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
#wparc-chatbot-root .wparc-header-status::before {
	content: '';
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 rgba(74,222,128,.6);
	display: inline-block;
	animation: wparc-status-pulse 2s infinite;
}
#wparc-chatbot-root .wparc-header-actions { display: flex; gap: 6px; position: relative; }

/* ---------- Language switcher ----------
 * Rendered as a direct child of #wparc-chatbot-root (NOT nested inside
 * .wparc-header/.wparc-panel, which both have overflow:hidden for their
 * rounded-corner card look -- an absolutely-positioned dropdown nested in
 * either would get clipped to a sliver). position:fixed + coordinates set
 * inline by JS (toggleLangMenu(), from the globe button's actual
 * getBoundingClientRect()) so it lands correctly regardless of widget
 * position (bottom-right/bottom-left) or panel size. */
#wparc-chatbot-root .wparc-lang-menu {
	position: fixed;
	background: var(--wparc-bg, #fff);
	border: 1px solid color-mix(in srgb, var(--wparc-text, #111827) 12%, transparent);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0,0,0,.24);
	padding: 6px;
	min-width: 172px;
	display: none;
	flex-direction: column;
	gap: 2px;
	z-index: 1000000;
}
#wparc-chatbot-root .wparc-lang-menu.open { display: flex; }
#wparc-chatbot-root .wparc-lang-option {
	border: none;
	background: transparent;
	text-align: left;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13px;
	color: var(--wparc-text, #111827);
	cursor: pointer;
	font-family: var(--wparc-font, inherit);
}
#wparc-chatbot-root .wparc-lang-option:hover { background: color-mix(in srgb, var(--wparc-text, #111827) 10%, transparent); }
#wparc-chatbot-root .wparc-lang-option.active {
	font-weight: 700;
	color: var(--wparc-primary);
	background: color-mix(in srgb, var(--wparc-primary) 10%, transparent);
}
#wparc-chatbot-root .wparc-icon-btn {
	background: rgba(255,255,255,.16);
	border: none;
	padding: 0;
	color: #fff;
	width: 34px; height: 34px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}
#wparc-chatbot-root .wparc-icon-btn:hover { background: rgba(255,255,255,.3); transform: translateY(-1px); }
#wparc-chatbot-root .wparc-icon-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: #fff; }
#wparc-chatbot-root .wparc-icon-btn.wparc-call-btn.active { background: #ef4444; }
#wparc-chatbot-root .wparc-icon-btn.wparc-mute-btn.wparc-muted { background: rgba(255,255,255,.35); }
#wparc-chatbot-root .wparc-icon-btn.wparc-mute-btn.wparc-muted svg { opacity: .85; }

/* Per-message play/pause button sits inline next to a bot bubble (light
   background), so it needs its own colors -- the base .wparc-icon-btn
   styling above is tuned for the header's gradient background instead. */
#wparc-chatbot-root .wparc-msg .wparc-play-btn {
	width: 26px; height: 26px;
	background: #eef0f6;
	flex-shrink: 0;
	align-self: flex-end;
	margin-bottom: 2px;
}
#wparc-chatbot-root .wparc-msg .wparc-play-btn:hover { background: #e2e5ee; transform: none; }
#wparc-chatbot-root .wparc-msg .wparc-play-btn svg { width: 12px; height: 12px; fill: var(--wparc-primary); }
#wparc-chatbot-root .wparc-msg.user .wparc-play-btn { display: none; }

/* ---------- Body / messages ---------- */
#wparc-chatbot-root .wparc-body {
	flex: 1;
	overflow-y: auto;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background:
		radial-gradient(circle at top right, color-mix(in srgb, var(--wparc-primary) 7%, transparent), transparent 42%),
		radial-gradient(circle at bottom left, color-mix(in srgb, var(--wparc-accent) 5%, transparent), transparent 45%),
		var(--wparc-bg);
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--wparc-primary) 30%, #d1d5db) transparent;
}
#wparc-chatbot-root .wparc-body::-webkit-scrollbar { width: 6px; }
#wparc-chatbot-root .wparc-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--wparc-primary) 30%, #d1d5db); border-radius: 6px; }

#wparc-chatbot-root .wparc-msg { display: flex; gap: 8px; max-width: 88%; align-items: flex-end; animation: wparc-fade-in .22s ease; }
#wparc-chatbot-root .wparc-msg.user { align-self: flex-end; flex-direction: row-reverse; }
#wparc-chatbot-root .wparc-msg.bot::before {
	content: '\2726';
	width: 24px; height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wparc-primary), var(--wparc-accent));
	color: #fff;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
#wparc-chatbot-root .wparc-msg.bot.wparc-has-avatar::before {
	display: none;
}
#wparc-chatbot-root .wparc-msg-avatar {
	width: 24px; height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
#wparc-chatbot-root .wparc-msg-bubble {
	padding: 11px 15px;
	border-radius: var(--wparc-radius);
	font-size: 14px;
	font-weight: 450;
	line-height: 1.55;
	word-wrap: break-word;
	white-space: pre-wrap;
}
#wparc-chatbot-root .wparc-msg-bubble strong { font-weight: 700; }
#wparc-chatbot-root .wparc-msg-bubble a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
#wparc-chatbot-root .wparc-msg.bot .wparc-msg-bubble a { color: var(--wparc-primary); }
#wparc-chatbot-root .wparc-msg.user .wparc-msg-bubble a { color: #fff; text-decoration-color: rgba(255,255,255,.6); }
#wparc-chatbot-root .wparc-msg-bubble a:hover { opacity: .82; }
#wparc-chatbot-root .wparc-msg.bot .wparc-msg-bubble {
	background: #f3f4f8;
	color: var(--wparc-text);
	border-bottom-left-radius: 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#wparc-chatbot-root .wparc-msg.user .wparc-msg-bubble {
	background: linear-gradient(135deg, var(--wparc-primary), color-mix(in srgb, var(--wparc-primary) 55%, var(--wparc-accent)));
	color: #fff;
	font-weight: 500;
	border-bottom-right-radius: 6px;
	box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--wparc-primary) 45%, transparent);
}

#wparc-chatbot-root .wparc-typing {
	display: flex; gap: 5px;
	padding: 13px 16px;
	background: #f3f4f8;
	border-radius: var(--wparc-radius);
	border-bottom-left-radius: 6px;
	width: fit-content;
	margin-left: 32px;
}
#wparc-chatbot-root .wparc-typing span {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wparc-primary), var(--wparc-accent));
	animation: wparc-bounce 1.2s infinite ease-in-out;
}
#wparc-chatbot-root .wparc-typing span:nth-child(2) { animation-delay: .15s; }
#wparc-chatbot-root .wparc-typing span:nth-child(3) { animation-delay: .3s; }

/* ---------- Quick replies ----------
 * Rendered inline in #wparc-body, right after the message they follow, so
 * they scroll away with the rest of the conversation instead of staying
 * pinned in a fixed bar. Left padding lines chips up under the bot avatar. */
#wparc-chatbot-root .wparc-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 0 32px; }
#wparc-chatbot-root .wparc-chip {
	border: 1.5px solid color-mix(in srgb, var(--wparc-primary) 35%, #e5e7eb);
	color: var(--wparc-primary);
	background: color-mix(in srgb, var(--wparc-primary) 5%, #fff);
	padding: 8px 15px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#wparc-chatbot-root .wparc-chip:hover {
	background: linear-gradient(135deg, var(--wparc-primary), color-mix(in srgb, var(--wparc-primary) 55%, var(--wparc-accent)));
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--wparc-primary) 55%, transparent);
}
#wparc-chatbot-root .wparc-chip-menu {
	border-color: color-mix(in srgb, var(--wparc-secondary) 30%, #e5e7eb);
	color: var(--wparc-secondary);
	background: #f8f9fb;
}
#wparc-chatbot-root .wparc-chip-menu:hover { background: var(--wparc-secondary); color: #fff; box-shadow: 0 6px 14px -4px rgba(0,0,0,.3); }

#wparc-chatbot-root .wparc-chip-action {
	background: linear-gradient(135deg, var(--wparc-primary), color-mix(in srgb, var(--wparc-primary) 55%, var(--wparc-accent)));
	color: #fff;
	border-color: transparent;
	font-weight: 700;
}
#wparc-chatbot-root .wparc-chip-action:hover {
	background: linear-gradient(135deg, var(--wparc-primary), color-mix(in srgb, var(--wparc-primary) 55%, var(--wparc-accent)));
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* ---------- Input ---------- */
#wparc-chatbot-root .wparc-input-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 14px 14px;
	padding: 6px 6px 6px 16px;
	border-radius: 26px;
	background: #f3f4f8;
	border: 1.5px solid transparent;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#wparc-chatbot-root .wparc-input-row:focus-within {
	border-color: var(--wparc-primary);
	background: var(--wparc-bg);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wparc-primary) 14%, transparent);
}
#wparc-chatbot-root .wparc-input-row textarea {
	flex: 1;
	resize: none;
	border: none;
	background: transparent;
	padding: 9px 0;
	font-size: 14px;
	max-height: 100px;
	min-height: 22px;
	outline: none;
	color: var(--wparc-text);
}
#wparc-chatbot-root .wparc-input-row textarea::placeholder { color: #9ca3af; }
#wparc-chatbot-root .wparc-mic-btn {
	position: relative;
	background: transparent;
}
#wparc-chatbot-root .wparc-mic-btn svg { fill: #6b7280; }
#wparc-chatbot-root .wparc-mic-btn:hover { background: color-mix(in srgb, var(--wparc-primary) 12%, transparent); transform: none; }
#wparc-chatbot-root .wparc-mic-btn:hover svg { fill: var(--wparc-primary); }
#wparc-chatbot-root .wparc-mic-btn.wparc-mic-listening { background: #ef4444; }
#wparc-chatbot-root .wparc-mic-btn.wparc-mic-listening svg { fill: #fff; }
#wparc-chatbot-root .wparc-mic-btn.wparc-mic-listening::before {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid #ef4444;
	animation: wparc-pulse 1.4s ease-out infinite;
}
#wparc-chatbot-root .wparc-send-btn {
	width: 40px; height: 40px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, var(--wparc-primary), var(--wparc-accent));
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--wparc-primary) 50%, transparent);
	transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
#wparc-chatbot-root .wparc-send-btn:hover { transform: scale(1.08) rotate(-4deg); box-shadow: 0 6px 18px -2px color-mix(in srgb, var(--wparc-primary) 60%, transparent); }
#wparc-chatbot-root .wparc-send-btn:active { transform: scale(.94) rotate(0); }
#wparc-chatbot-root .wparc-send-btn svg { width: 17px; height: 17px; flex-shrink: 0; fill: #fff; }
#wparc-chatbot-root .wparc-send-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }

#wparc-chatbot-root .wparc-powered { text-align: center; font-size: 10.5px; color: #b5b8c0; padding: 6px 0 10px; letter-spacing: .01em; }

/* ---------- Voice call overlay ---------- */
#wparc-chatbot-root .wparc-call-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, var(--wparc-secondary), #000);
	color: #fff;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	z-index: 2;
}
#wparc-chatbot-root .wparc-call-overlay.active { display: flex; }
#wparc-chatbot-root .wparc-call-avatar {
	width: 92px; height: 92px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wparc-primary), var(--wparc-accent));
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wparc-font-heading);
	font-size: 30px;
	font-weight: 700;
	box-shadow: 0 0 0 8px rgba(255,255,255,.06);
	position: relative;
}
#wparc-chatbot-root .wparc-call-avatar::after {
	content: '';
	position: absolute; inset: -14px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.25);
	animation: wparc-pulse 1.8s infinite ease-out;
}
#wparc-chatbot-root .wparc-call-status { font-size: 13px; opacity: .8; }
#wparc-chatbot-root .wparc-call-hangup {
	margin-top: 10px;
	width: 54px; height: 54px;
	padding: 0;
	border-radius: 50%;
	background: #ef4444;
	border: none;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px -2px rgba(239,68,68,.5);
	transition: transform .15s ease;
}
#wparc-chatbot-root .wparc-call-hangup:hover { transform: scale(1.06); }
#wparc-chatbot-root .wparc-call-hangup svg { width: 22px; height: 22px; flex-shrink: 0; fill: #fff; }

/* ---------- Animations ---------- */
@keyframes wparc-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wparc-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes wparc-pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes wparc-spin { to { transform: rotate(360deg); } }
@keyframes wparc-wave-ripple {
	0% { transform: scale(.85); opacity: .75; }
	75% { opacity: 0; }
	100% { transform: scale(1.95); opacity: 0; }
}
@keyframes wparc-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes wparc-status-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); } 50% { box-shadow: 0 0 0 4px rgba(74,222,128,0); } }

@media (max-width: 480px) {
	#wparc-chatbot-root .wparc-panel { width: calc(100vw - 20px); height: calc(100vh - 108px); right: 10px; bottom: 82px; border-radius: 22px; }
	#wparc-chatbot-root.wparc-pos-left .wparc-panel { left: 10px; }
	#wparc-chatbot-root .wparc-launcher { right: 16px; bottom: 16px; width: 50px; height: 50px; }
}

/* ---------- Pre-chat lead capture ---------- */
#wparc-chatbot-root .wparc-gate {
	display: none;
	flex-direction: column;
	gap: 9px;
	padding: 24px 22px;
	overflow-y: auto;
	flex: 1;
	background: var(--wparc-bg);
}
#wparc-chatbot-root .wparc-panel.wparc-gated .wparc-gate { display: flex; }
#wparc-chatbot-root .wparc-panel.wparc-gated .wparc-body,
#wparc-chatbot-root .wparc-panel.wparc-gated .wparc-input-row { display: none; }
#wparc-chatbot-root .wparc-gate-title { font-family: var(--wparc-font-heading); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--wparc-text); }
#wparc-chatbot-root .wparc-gate-sub { font-size: 12.5px; color: #6b7280; margin-bottom: 6px; }
#wparc-chatbot-root .wparc-gate-label { font-size: 12px; font-weight: 600; color: var(--wparc-text); margin-top: 4px; }
#wparc-chatbot-root .wparc-gate-input {
	border: 1.5px solid #e5e7eb;
	border-radius: 14px;
	padding: 11px 14px;
	font-size: 14px;
	outline: none;
	color: var(--wparc-text);
	background: #fafafa;
	width: 100%;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#wparc-chatbot-root .wparc-gate-input:focus { border-color: var(--wparc-primary); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--wparc-primary) 14%, transparent); }
#wparc-chatbot-root .wparc-gate-error { color: #ef4444; font-size: 12px; min-height: 16px; }
#wparc-chatbot-root .wparc-gate-btn {
	margin-top: 10px;
	border: none;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--wparc-primary), color-mix(in srgb, var(--wparc-primary) 55%, var(--wparc-accent)));
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	padding: 12px 16px;
	cursor: pointer;
	box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--wparc-primary) 50%, transparent);
	transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, opacity .12s ease;
}
#wparc-chatbot-root .wparc-gate-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -4px color-mix(in srgb, var(--wparc-primary) 60%, transparent); }
#wparc-chatbot-root .wparc-gate-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }