/* WP AI Chatbot v1.0.0 — Style A (Clean Minimal)
   Full CSS isolation — immune to Elementor, Divi, Avada, Bootstrap, etc.
   ZERO hardcoded theme colors — all themeable colors use CSS variables. */

/* ═══════════════════════════════════════════
   CSS RESET — Full isolation inside widget
   ═══════════════════════════════════════════ */

#wpac-root *,
#wpac-root *::before,
#wpac-root *::after {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	outline: none !important;
	background: none !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: normal !important;
	font-family: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-indent: 0 !important;
	text-shadow: none !important;
	text-decoration: none !important;
	vertical-align: baseline !important;
	float: none !important;
	clear: none !important;
	position: static !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

#wpac-root .wpac-body * {
	font-size: 13.5px !important;
	line-height: 1.6 !important;
}

/* WordPress emoji images — force to text size */
#wpac-root .wpac-body img.emoji,
#wpac-root .wpac-body img[src*="emoji"],
#wpac-root .wpac-body img[src*="twemoji"] {
	width: 13.5px !important;
	height: 13.5px !important;
	max-width: 13.5px !important;
	max-height: 13.5px !important;
	vertical-align: -0.1em !important;
	display: inline !important;
}

#wpac-root p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.5 !important;
	font-size: 13.5px !important;
	color: inherit !important;
	border: none !important;
	background: none !important;
}

#wpac-root a {
	text-decoration: none !important;
	color: inherit !important;
	background: none !important;
	border: none !important;
	outline: none !important;
}

#wpac-root a:visited {
	color: inherit !important;
}

#wpac-root button {
	all: unset !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: inherit !important;
	font-size: inherit !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

#wpac-root input {
	all: unset !important;
	box-sizing: border-box !important;
	font-family: inherit !important;
	font-size: 14px !important;
	color: #111827 !important;
	width: 100% !important;
	background: transparent !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

#wpac-root input::placeholder {
	color: #9CA3AF !important;
	opacity: 1 !important;
}

#wpac-root svg {
	display: block !important;
	flex-shrink: 0 !important;
	overflow: visible !important;
}

/* All direct children inside the chat body must be static and flex-shrink:0 */
#wpac-root .wpac-body > * {
	position: static !important;
	float: none !important;
	clear: both !important;
	flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════
   TOGGLE BUTTON — outside #wpac-root
   ═══════════════════════════════════════════ */

#wpac-toggle {
	all: unset !important;
	position: fixed !important;
	bottom: 24px !important;
	z-index: 2147483647 !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	max-width: 56px !important;
	max-height: 56px !important;
	border-radius: 50% !important;
	background-color: var(--wpac-theme, #7C3AED) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
	border: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	transition: transform 0.2s ease !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	overflow: hidden !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-decoration: none !important;
	float: none !important;
	animation: wpac-pulse 2s ease-in-out 1 !important;
}

#wpac-toggle:hover {
	transform: scale(1.08) !important;
}

#wpac-toggle:focus {
	outline: none !important;
}

#wpac-toggle[data-position="bottom-right"] {
	right: 24px !important;
	left: auto !important;
}

#wpac-toggle[data-position="bottom-left"] {
	left: 24px !important;
	right: auto !important;
}

#wpac-toggle svg {
	width: 26px !important;
	height: 26px !important;
	display: block !important;
	flex-shrink: 0 !important;
	pointer-events: none !important;
	position: static !important;
}

#wpac-toggle path,
#wpac-toggle circle {
	pointer-events: none !important;
}

@keyframes wpac-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important; }
	50% { box-shadow: 0 4px 28px rgba(0, 0, 0, 0.35) !important; }
}

/* ═══════════════════════════════════════════
   WIDGET CONTAINER
   ═══════════════════════════════════════════ */

#wpac-root {
	all: initial !important;
	position: fixed !important;
	bottom: 90px !important;
	z-index: 2147483646 !important;
	width: 360px !important;
	max-height: 520px !important;
	background: #ffffff !important;
	border-radius: 20px !important;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12) !important;
	border: 1px solid #E5E7EB !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #111827 !important;
	box-sizing: border-box !important;
	visibility: visible !important;
	opacity: 1 !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	direction: ltr !important;
	text-align: left !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	pointer-events: auto !important;
}

#wpac-root[data-position="bottom-right"] {
	right: 24px !important;
	left: auto !important;
}

#wpac-root[data-position="bottom-left"] {
	left: 24px !important;
	right: auto !important;
}

#wpac-root.wpac-hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

html body #wpac-root.wpac-hidden {
	display: none !important;
	visibility: hidden !important;
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */

#wpac-root .wpac-header {
	background: #ffffff !important;
	padding: 14px 16px !important;
	border: none !important;
	border-bottom: 1px solid #F3F4F6 !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	border-radius: 20px 20px 0 0 !important;
	position: static !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	float: none !important;
	box-sizing: border-box !important;
}

/* Avatar primary styling is via inline styles in template HTML.
   The background color uses a CSS variable so it must be here. */
#wpac-root .wpac-avatar {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: var(--wpac-theme-light, #EDE9FE) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	padding: 10px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	border: 2px solid rgba(124,58,237,0.12) !important;
}

#wpac-root .wpac-avatar img {
	width: 44px !important;
	height: 44px !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	margin: -10px !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
}

#wpac-root .wpac-avatar svg {
	width: 24px !important;
	height: 24px !important;
	display: block !important;
	flex-shrink: 0 !important;
}

#wpac-root .wpac-header-info {
	flex: 1 !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: none !important;
	display: block !important;
	position: static !important;
}

#wpac-root .wpac-bot-name {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #111827 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.3 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: none !important;
	display: block !important;
}

#wpac-root .wpac-bot-subtext {
	font-size: 12px !important;
	color: #6B7280 !important;
	line-height: 1.3 !important;
	margin-top: 1px !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	display: block !important;
}

#wpac-root .wpac-close {
	all: unset !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	color: #9CA3AF !important;
	flex-shrink: 0 !important;
	transition: background 0.15s, color 0.15s !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: none !important;
	position: static !important;
	box-sizing: border-box !important;
}

#wpac-root .wpac-close:hover {
	background: #F3F4F6 !important;
	color: #374151 !important;
}

#wpac-root .wpac-close svg {
	width: 16px !important;
	height: 16px !important;
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	pointer-events: none !important;
}

/* ═══════════════════════════════════════════
   CHAT BODY
   ═══════════════════════════════════════════ */

#wpac-root .wpac-body {
	flex: 1 1 auto !important;
	background: #F9FAFB !important;
	padding: 16px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	min-height: 200px !important;
	max-height: 340px !important;
	scrollbar-width: thin !important;
	scrollbar-color: #E5E7EB transparent !important;
	border: none !important;
	border-top: none !important;
	border-bottom: none !important;
	margin: 0 !important;
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	float: none !important;
	box-sizing: border-box !important;
}

#wpac-root .wpac-body::-webkit-scrollbar {
	width: 4px !important;
}

#wpac-root .wpac-body::-webkit-scrollbar-track {
	background: transparent !important;
}

#wpac-root .wpac-body::-webkit-scrollbar-thumb {
	background: #E5E7EB !important;
	border-radius: 4px !important;
}

/* ═══════════════════════════════════════════
   MESSAGE BUBBLES
   ═══════════════════════════════════════════ */

#wpac-root .wpac-msg-bot {
	background: #ffffff !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 4px 16px 16px 16px !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #111827 !important;
	max-width: 82% !important;
	align-self: flex-start !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	margin: 0 !important;
	position: static !important;
	display: block !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
}

#wpac-root .wpac-msg-user {
	background: var(--wpac-theme, #7C3AED) !important;
	border: none !important;
	border-radius: 16px 4px 16px 16px !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #ffffff !important;
	max-width: 82% !important;
	align-self: flex-end !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	margin: 0 !important;
	position: static !important;
	display: block !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
}

/* ═══════════════════════════════════════════
   TYPING INDICATOR (dynamically created by JS)
   ═══════════════════════════════════════════ */

#wpac-root .wpac-dot {
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background-color: #9CA3AF !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
	animation: wpacDotAnim 1.4s infinite ease-in-out !important;
}

#wpac-root .wpac-dot:nth-child(1) {
	animation-delay: 0s !important;
}
#wpac-root .wpac-dot:nth-child(2) {
	animation-delay: 0.2s !important;
}
#wpac-root .wpac-dot:nth-child(3) {
	animation-delay: 0.4s !important;
}

@keyframes wpacDotAnim {
	0%, 60%, 100% {
		transform: translateY(0) !important;
		background-color: #9CA3AF !important;
	}
	30% {
		transform: translateY(-6px) !important;
		background-color: #6B7280 !important;
	}
}

/* ═══════════════════════════════════════════
   INPUT BAR
   ═══════════════════════════════════════════ */

#wpac-root .wpac-input-bar {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
	background: #ffffff !important;
	border: none !important;
	border-top: 1px solid #F3F4F6 !important;
	border-radius: 0 0 20px 20px !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	margin: 0 !important;
	position: static !important;
	width: 100% !important;
	height: auto !important;
	float: none !important;
	box-sizing: border-box !important;
}

#wpac-root .wpac-input {
	all: unset !important;
	flex: 1 !important;
	font-size: 14px !important;
	color: #111827 !important;
	background: transparent !important;
	min-width: 0 !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	box-sizing: border-box !important;
}

#wpac-root .wpac-input::placeholder {
	color: #9CA3AF !important;
	opacity: 1 !important;
}

#wpac-root .wpac-send {
	all: unset !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	border-radius: 10px !important;
	background: var(--wpac-theme, #7C3AED) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: opacity 0.2s !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	position: static !important;
}

#wpac-root .wpac-send:hover {
	opacity: 0.88 !important;
}

#wpac-root .wpac-send:disabled,
#wpac-root .wpac-send[disabled] {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

#wpac-root .wpac-send svg {
	width: 15px !important;
	height: 15px !important;
	fill: none !important;
	stroke: #ffffff !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	pointer-events: none !important;
}

/* ═══════════════════════════════════════════
   HANDOFF CARD
   ═══════════════════════════════════════════ */

/* Handoff card — rendered entirely via inline styles in JS for
   maximum isolation.  Only the outer wrapper inherits .wpac-msg-bot. */

/* Clickable links in bot messages — purple underlined */
#wpac-root .wpac-body a[target="_blank"] {
	color: var(--wpac-theme, #7C3AED) !important;
	text-decoration: underline !important;
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	word-break: break-all !important;
	cursor: pointer !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline !important;
	font-family: inherit !important;
}

#wpac-root .wpac-body a[target="_blank"]:hover {
	opacity: 0.75 !important;
}

/* ═══════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════ */

@media (max-width: 480px) {
	#wpac-root {
		width: 100% !important;
		right: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		border-radius: 20px 20px 0 0 !important;
		max-height: 85vh !important;
	}

	#wpac-root .wpac-body {
		max-height: 55vh !important;
	}

	#wpac-root .wpac-input-bar {
		border-radius: 0 !important;
	}

	#wpac-toggle {
		bottom: 16px !important;
	}

	#wpac-toggle[data-position="bottom-right"] {
		right: 16px !important;
	}

	#wpac-toggle[data-position="bottom-left"] {
		left: 16px !important;
	}
}

body.wpac-body-locked {
	overflow: hidden !important;
	position: fixed !important;
	width: 100% !important;
}

/* ═══════════════════════════════════════════
   PAGE BUILDER NEUTRALIZERS
   ═══════════════════════════════════════════ */

/* Elementor */
.elementor-page #wpac-root *,
.elementor #wpac-root * {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	line-height: inherit !important;
	text-transform: none !important;
}

.elementor-page #wpac-toggle,
.elementor #wpac-toggle {
	border-radius: 50% !important;
	line-height: 0 !important;
}

.elementor-page #wpac-root p,
.elementor #wpac-root p {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

.elementor-page #wpac-root input,
.elementor #wpac-root input {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	height: auto !important;
	min-height: 0 !important;
}

.elementor-page #wpac-root button,
.elementor #wpac-root button {
	border-radius: inherit !important;
	letter-spacing: normal !important;
}

/* Divi */
#et-main-area #wpac-root *,
.et_pb_section #wpac-root * {
	line-height: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

#et-main-area #wpac-root input,
.et_pb_section #wpac-root input {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Avada */
.avada-page-wrapper #wpac-root *,
.fusion-body #wpac-root * {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	line-height: inherit !important;
}

/* Astra */
.ast-separate-container #wpac-root * {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* WooCommerce */
.woocommerce #wpac-root input {
	border: none !important;
	box-shadow: none !important;
}

.woocommerce #wpac-root button {
	border-radius: inherit !important;
}