/**
 * Captain Funnel — Floating Chat Widget (front-end only)
 * Colors, size and position come in as CSS variables set inline per-site
 * by class-capf-chat-widget.php, so this file stays purely structural.
 *
 * Every rule below is scoped under .capf-chat-widget (a 2-class-deep chain
 * at minimum: ".capf-chat-widget .capf-cw-x") and key layout/visual
 * properties carry !important. Themes routinely style bare element
 * selectors (button, a, svg, ul li) or reset box-sizing globally, and a
 * single-class selector like ".capf-cw-button" alone loses that fight on
 * specificity. Scoping every rule under the root class — and resetting the
 * properties themes most commonly touch — keeps the widget looking the
 * same regardless of the active theme.
 */

/* ── Reset — stop the theme's global styles leaking in ─────────────────── */
.capf-chat-widget,
.capf-chat-widget * {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	text-align: left !important;
	list-style: none !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.4 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.capf-chat-widget {
	position: fixed !important;
	bottom: var(--capf-cw-bottom, 20px) !important;
	z-index: 2147483000 !important; /* stays above virtually anything a theme can throw at it */
}

.capf-chat-widget.capf-cw-right { right: var(--capf-cw-right, 20px) !important; left: auto !important; }
.capf-chat-widget.capf-cw-left  { left:  var(--capf-cw-left, 20px)  !important; right: auto !important; }

.capf-chat-widget .capf-cw-button {
	position: relative !important;
	width: var(--capf-cw-size, 60px) !important;
	height: var(--capf-cw-size, 60px) !important;
	border-radius: var(--capf-cw-radius, 50%) !important;
	background: var(--capf-cw-bg, #25D366) !important;
	color: var(--capf-cw-fg, #ffffff) !important;
	border: none !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
	transition: transform 0.15s ease !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

.capf-chat-widget .capf-cw-button:hover { transform: scale(1.05) !important; }

.capf-chat-widget .capf-cw-icon {
	width: 55% !important;
	height: 55% !important;
	object-fit: contain !important;
	display: block !important;
}

/* Animations */
.capf-chat-widget.capf-cw-anim-pulse .capf-cw-button::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: inherit !important;
	background: var(--capf-cw-bg, #25D366) !important;
	animation: capf-cw-pulse 2s ease-out infinite !important;
	z-index: -1 !important;
}
@keyframes capf-cw-pulse {
	0%   { opacity: 0.6; transform: scale(1); }
	100% { opacity: 0;   transform: scale(1.6); }
}

.capf-chat-widget.capf-cw-anim-bounce .capf-cw-button { animation: capf-cw-bounce 1.8s ease-in-out infinite !important; }
@keyframes capf-cw-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

/* Popup card */
.capf-chat-widget .capf-cw-popup {
	position: absolute !important;
	bottom: calc(var(--capf-cw-size, 60px) + 16px) !important;
	width: 300px !important;
	max-width: calc(100vw - 32px) !important;
	background: #fff !important;
	border-radius: 14px !important;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18) !important;
	overflow: hidden !important;
	animation: capf-cw-pop-in 0.18s ease-out !important;
}
.capf-chat-widget.capf-cw-right .capf-cw-popup { right: 0 !important; left: auto !important; }
.capf-chat-widget.capf-cw-left  .capf-cw-popup { left: 0 !important; right: auto !important; }

@keyframes capf-cw-pop-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.capf-chat-widget .capf-cw-popup-header {
	background: var(--capf-cw-bg, #25D366) !important;
	color: var(--capf-cw-fg, #ffffff) !important;
	padding: 16px 40px 16px 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	position: relative !important;
}

/* "plain" popup style — light header instead of the accent color block. */
.capf-chat-widget .capf-cw-popup-style-plain .capf-cw-popup-header {
	background: #f7f9fa !important;
	color: #111827 !important;
	border-bottom: 1px solid #eceff1 !important;
}
.capf-chat-widget .capf-cw-popup-style-plain .capf-cw-popup-close { color: #6b7280 !important; }
.capf-chat-widget .capf-cw-popup-title    { font-size: 15px !important; font-weight: 700 !important; display: block !important; }
.capf-chat-widget .capf-cw-popup-subtitle { font-size: 12.5px !important; opacity: 0.9 !important; display: block !important; }

.capf-chat-widget .capf-cw-popup-close {
	position: absolute !important;
	top: 8px !important;
	right: 10px !important;
	background: transparent !important;
	border: none !important;
	color: var(--capf-cw-fg, #ffffff) !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	opacity: 0.85 !important;
}

.capf-chat-widget .capf-cw-agents {
	max-height: 260px !important;
	overflow-y: auto !important;
	padding: 8px !important;
}

.capf-chat-widget .capf-cw-agent {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	color: #1f2937 !important;
}
.capf-chat-widget .capf-cw-agent:hover { background: #f3f4f6 !important; }

.capf-chat-widget .capf-cw-agent-photo {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
	display: flex !important;
}
.capf-chat-widget .capf-cw-agent-photo-fallback {
	align-items: center !important;
	justify-content: center !important;
	background: var(--capf-cw-bg, #25D366) !important;
	color: var(--capf-cw-fg, #ffffff) !important;
	font-weight: 600 !important;
}

.capf-chat-widget .capf-cw-agent-info { display: flex !important; flex-direction: column !important; overflow: hidden !important; }
.capf-chat-widget .capf-cw-agent-name { font-size: 13.5px !important; font-weight: 600 !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; display: block !important; }
.capf-chat-widget .capf-cw-agent-dept { font-size: 11.5px !important; color: #6b7280 !important; display: block !important; }

/* ── Widget style: Minimal Glass ─────────────────────────────────────────
   Frosted-glass popup — translucent background, blurred backdrop, no solid
   accent-color header block. Button itself is unaffected (shape/color are
   controlled separately), only the popup visual theme changes. */
.capf-chat-widget.capf-cw-style-minimal-glass .capf-cw-popup {
	background: rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: blur(18px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 20px !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important;
}
.capf-chat-widget.capf-cw-style-minimal-glass .capf-cw-popup-header {
	background: transparent !important;
	color: #111827 !important;
	padding: 18px 40px 10px 18px !important;
}
.capf-chat-widget.capf-cw-style-minimal-glass .capf-cw-popup-title    { font-size: 15.5px !important; }
.capf-chat-widget.capf-cw-style-minimal-glass .capf-cw-popup-subtitle { color: #4b5563 !important; opacity: 1 !important; }
.capf-chat-widget.capf-cw-style-minimal-glass .capf-cw-popup-close    { color: #6b7280 !important; }
.capf-chat-widget.capf-cw-style-minimal-glass .capf-cw-agent {
	background: rgba(255, 255, 255, 0.5) !important;
	border-radius: 12px !important;
	margin-bottom: 4px !important;
}
.capf-chat-widget.capf-cw-style-minimal-glass .capf-cw-agent:hover { background: rgba(255, 255, 255, 0.85) !important; }
.capf-chat-widget.capf-cw-style-minimal-glass .capf-cw-button {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 6px rgba(255, 255, 255, 0.35) !important;
}

/* ── Widget style: Team Card ──────────────────────────────────────────────
   Support-desk feel — stacked agent avatars in the header, a live "online"
   dot next to the title, and slightly roomier agent rows. */
.capf-chat-widget.capf-cw-style-team-card .capf-cw-popup {
	width: 320px !important;
	border-radius: 16px !important;
}
.capf-chat-widget.capf-cw-style-team-card .capf-cw-popup-header {
	padding: 18px 40px 18px 18px !important;
}
.capf-chat-widget.capf-cw-style-team-card .capf-cw-header-avatars {
	display: flex !important;
	margin-bottom: 10px !important;
}
.capf-chat-widget.capf-cw-style-team-card .capf-cw-header-avatar {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--capf-cw-bg, #25D366) !important;
	background: #fff !important;
	border: 2px solid var(--capf-cw-bg, #25D366) !important;
	margin-left: -8px !important;
}
.capf-chat-widget.capf-cw-style-team-card .capf-cw-header-avatar:first-child { margin-left: 0 !important; }
.capf-chat-widget.capf-cw-style-team-card .capf-cw-popup-title { display: flex !important; align-items: center !important; gap: 6px !important; }
.capf-chat-widget.capf-cw-style-team-card[data-online="1"] .capf-cw-popup-title::after {
	content: "" !important;
	display: inline-block !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: #22c55e !important;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6) !important;
}
.capf-chat-widget.capf-cw-style-team-card .capf-cw-agent {
	padding: 10px 8px !important;
	border-bottom: 1px solid #f1f2f4 !important;
	border-radius: 0 !important;
}
.capf-chat-widget.capf-cw-style-team-card .capf-cw-agent:last-child { border-bottom: none !important; }
.capf-chat-widget.capf-cw-style-team-card .capf-cw-agent-photo { width: 44px !important; height: 44px !important; }

/* ── Widget style: Message Card ───────────────────────────────────────────
   Large agent photo + online status, a chat-bubble greeting, and a
   full-width "Chat on WhatsApp" button instead of a row list. Also puts a
   small red notification dot on the launcher button. */
.capf-chat-widget.capf-cw-style-message-card .capf-cw-popup {
	padding: 0 !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	width: 320px !important;
}
.capf-cw-mc-header {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 22px 40px 16px 22px !important;
	border-bottom: 1px solid #eee !important;
}
.capf-cw-mc-avatar-wrap { position: relative !important; flex-shrink: 0 !important; }
.capf-cw-mc-avatar {
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #e5e7eb !important;
	color: #6b7280 !important;
	font-weight: 700 !important;
	font-size: 20px !important;
}
.capf-cw-mc-status-dot {
	position: absolute !important;
	right: 0 !important;
	bottom: 2px !important;
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	border: 2px solid #fff !important;
	background: #9ca3af !important;
}
.capf-cw-mc-status-dot[data-online="1"] { background: #22c55e !important; }
.capf-cw-mc-header-text { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.capf-cw-mc-name { font-size: 18px !important; color: #111827 !important; }
.capf-cw-mc-status-text { font-size: 14px !important; color: #6b7280 !important; }
.capf-cw-mc-body { padding: 16px 20px 20px !important; }
.capf-cw-mc-time {
	display: block !important;
	text-align: center !important;
	font-size: 12px !important;
	color: #9ca3af !important;
	margin-bottom: 12px !important;
}
.capf-cw-mc-bubble {
	background: #f1f2f4 !important;
	color: #1f2937 !important;
	border-radius: 16px 16px 16px 4px !important;
	padding: 12px 16px !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	margin-bottom: 16px !important;
}
.capf-cw-mc-cta {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 14px 18px !important;
	border-radius: 999px !important;
	background: var(--capf-cw-bg, #25D366) !important;
	color: var(--capf-cw-fg, #fff) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	border: none !important;
}
.capf-cw-mc-cta + .capf-cw-mc-cta { margin-top: 8px !important; }
.capf-cw-mc-cta .capf-cw-icon { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; }
.capf-chat-widget.capf-cw-style-message-card .capf-cw-button {
	position: relative !important;
}
.capf-chat-widget.capf-cw-style-message-card .capf-cw-button::after {
	content: "" !important;
	position: absolute !important;
	top: -2px !important;
	right: -2px !important;
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	background: #ef4444 !important;
	border: 2px solid #fff !important;
}

/* Device visibility fallback (belt-and-braces alongside the server-side check). */
@media (max-width: 782px) {
	.capf-chat-widget.capf-cw-device-desktop { display: none !important; }
}
@media (min-width: 783px) {
	.capf-chat-widget.capf-cw-device-mobile { display: none !important; }
}