/**
 * AI Chatbot widget styles.
 *
 * Everything is scoped under .ai-chatbot-widget and declared !important
 * on layout-critical properties. Themes with aggressive global resets
 * (e.g. `button { all: unset }`, `div { position: static }`) are common
 * enough that a floating widget needs to defend against them rather
 * than assume a clean slate.
 *
 * Two kinds of colour live here: --ai-chatbot-color/--ai-chatbot-text-color
 * come from the admin's widget colour settings (per-client, applied inline
 * via style="" in class-ai-chatbot-widget.php) and drive the accent
 * surfaces — launcher, avatar mark, send button. Everything else (panel
 * background, bubble surfaces, ink) is a fixed light palette; the widget
 * doesn't attempt to track the host page's theme.
 */

.ai-chatbot-widget,
.ai-chatbot-widget *,
.ai-chatbot-widget *::before,
.ai-chatbot-widget *::after {
	box-sizing: border-box !important;
}

.ai-chatbot-widget {
	--ai-chatbot-color: #2563eb;
	--ai-chatbot-text-color: #ffffff;

	--ai-chatbot-panel-bg: #f4f2ee;
	--ai-chatbot-surface: #ffffff;
	--ai-chatbot-ink: #1a1a1a;
	--ai-chatbot-ink-soft: #161513;
	--ai-chatbot-muted: rgba(20, 20, 20, 0.45);
	--ai-chatbot-online: #4caf6d;

	position: fixed !important;
	right: 20px !important;
	bottom: 20px !important;
	z-index: 999999 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: var(--ai-chatbot-ink-soft) !important;
	text-align: left !important;
}

.ai-chatbot-widget__toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 50% !important;
	border: none !important;
	background: var(--ai-chatbot-color) !important;
	color: var(--ai-chatbot-text-color) !important;
	cursor: pointer !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
	padding: 0 !important;
	margin: 0 !important;
	appearance: none !important;
	transition: transform 0.15s ease !important;
}

.ai-chatbot-widget__toggle:hover {
	transform: translateY(-1px) !important;
}

/* Icon library: one data-URI mask per selectable icon (AI_Chatbot_Settings::ICON_CHOICES).
   Each is a fixed CSS custom property so the SVGs live only here, never
   duplicated into PHP/JS. The launcher (__toggle-icon) and the chat-window
   mark (__avatar-icon) each pick one via their own indirection variable —
   --ai-chatbot-toggle-icon-source / --ai-chatbot-avatar-icon-source — which
   class-ai-chatbot-widget.php sets inline to var(--ai-chatbot-icon-<key>)
   for whichever icon that setting resolved to. Indirection means the actual
   shape data never has to pass through PHP escaping. */
.ai-chatbot-widget {
	--ai-chatbot-icon-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L4 13h6l-1 9 9-13h-6z'/%3E%3C/svg%3E");
	--ai-chatbot-icon-bubble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894z'/%3E%3C/svg%3E");
	--ai-chatbot-icon-message-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2v3.5a.5.5 0 0 0 .854.354L9.207 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3C/svg%3E");
	--ai-chatbot-icon-bubble-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.3-1.845.98-4.115 1.55a.48.48 0 0 1-.532-.263.48.48 0 0 1 .098-.542c.51-.5 1.185-1.31 1.442-2.05C1.09 12.19 0 10.219 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
	--ai-chatbot-icon-bubbles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.913 2.658c2.075-.27 4.19-.408 6.337-.408 2.147 0 4.262.139 6.337.408 1.922.25 3.291 1.861 3.405 3.727a4.403 4.403 0 0 0-1.032-.211 50.89 50.89 0 0 0-8.42 0c-2.358.196-4.04 2.19-4.04 4.434v4.286a4.47 4.47 0 0 0 2.433 3.984L7.28 21.53A.75.75 0 0 1 6 21v-4.03a48.527 48.527 0 0 1-1.087-.128C2.905 16.58 1.5 14.833 1.5 12.862V6.638c0-1.97 1.405-3.718 3.413-3.979Z'/%3E%3Cpath d='M15.75 7.5c-1.376 0-2.74.057-4.09.169C10.043 7.788 9 9.053 9 10.512v4.226c0 1.459 1.043 2.723 2.66 2.843.446.033.894.06 1.34.08l3.05 3.05a.75.75 0 0 0 1.28-.531v-2.652c.05 0 .1-.002.15-.005 1.457-.087 2.5-1.32 2.5-2.767v-4.226c0-1.459-1.043-2.723-2.66-2.843a41.79 41.79 0 0 0-2.34-.144V7.5Z'/%3E%3C/svg%3E");
	--ai-chatbot-icon-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v5a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 11h-1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5z'/%3E%3C/svg%3E");
	--ai-chatbot-icon-question-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z'/%3E%3C/svg%3E");

	/* Defaults match the previous fixed bolt icon on both surfaces;
	   class-ai-chatbot-widget.php overrides either inline when the admin
	   picks something else. */
	--ai-chatbot-toggle-icon-source: var(--ai-chatbot-icon-bolt);
	--ai-chatbot-avatar-icon-source: var(--ai-chatbot-icon-bolt);
}

.ai-chatbot-widget__toggle-icon {
	display: inline-block !important;
	background-color: currentColor !important;
	-webkit-mask: var(--ai-chatbot-toggle-icon-source) center / contain no-repeat !important;
	mask: var(--ai-chatbot-toggle-icon-source) center / contain no-repeat !important;
	width: 24px !important;
	height: 24px !important;
}

.ai-chatbot-widget__avatar-icon {
	display: inline-block !important;
	background-color: currentColor !important;
	-webkit-mask: var(--ai-chatbot-avatar-icon-source) center / contain no-repeat !important;
	mask: var(--ai-chatbot-avatar-icon-source) center / contain no-repeat !important;
}

/* When an admin uploads a custom image for the chat-window mark, it
   replaces the masked icon entirely — a photo/logo can't be recolored via
   currentColor the way the icon set can, so it's rendered as a real <img>
   filling the avatar circle instead. Selector is the compound
   .avatar-icon.avatar-icon--image (not just --image alone) so it outranks
   the later fixed 18px sizing rule below, which otherwise wins on source
   order against an equal-specificity single-class selector. */
.ai-chatbot-widget__avatar-icon.ai-chatbot-widget__avatar-icon--image {
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	background-color: transparent !important;
	-webkit-mask: none !important;
	mask: none !important;
}

/* Position: bottom-right is the default handled by the base rules above/
   below; --left is an opt-in modifier applied via class-ai-chatbot-widget.php
   when the "Widget position" setting is set to bottom-left. */
.ai-chatbot-widget--left {
	right: auto !important;
	left: 20px !important;
}

.ai-chatbot-widget__panel {
	position: absolute !important;
	right: 0 !important;
	bottom: 74px !important;
	width: 360px !important;
	max-width: calc(100vw - 40px) !important;
	height: 540px !important;
	max-height: calc(100vh - 120px) !important;
	background: var(--ai-chatbot-panel-bg) !important;
	border-radius: 22px !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ai-chatbot-widget--left .ai-chatbot-widget__panel {
	right: auto !important;
	left: 0 !important;
}

.ai-chatbot-widget__panel[hidden] {
	display: none !important;
}

.ai-chatbot-widget__header {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 20px 20px 16px !important;
	background: transparent !important;
	color: var(--ai-chatbot-ink-soft) !important;
	flex: 0 0 auto !important;
}

.ai-chatbot-widget__avatar {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: var(--ai-chatbot-avatar-bg) !important;
	/* --ai-chatbot-avatar-bg is its own setting (avatar_icon_color),
	   independent of --ai-chatbot-color — pairing them would go invisible
	   whenever a client's brand colour is dark (confirmed against this
	   site's own near-black widget colour). Defaults to the same near-black
	   tint this circle always used. */
	color: rgba(255, 255, 255, 0.92) !important;
	flex: none !important;
}

.ai-chatbot-widget__avatar-icon {
	width: 18px !important;
	height: 18px !important;
}

.ai-chatbot-widget__heading {
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

.ai-chatbot-widget__title {
	font-weight: 700 !important;
	font-size: 15px !important;
	margin: 0 !important;
	color: var(--ai-chatbot-ink-soft) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.ai-chatbot-widget__status {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	margin: 1px 0 0 !important;
	font-size: 12px !important;
	color: var(--ai-chatbot-muted) !important;
}

.ai-chatbot-widget__status-dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: var(--ai-chatbot-online) !important;
	flex: none !important;
}

.ai-chatbot-widget__close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	background: var(--ai-chatbot-surface) !important;
	border: none !important;
	color: var(--ai-chatbot-muted) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: none !important;
	appearance: none !important;
}

.ai-chatbot-widget__messages {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	/* Without this, scrolling the list past its top/bottom edge chains
	   into the host page underneath — a visitor innocently scrolling to
	   the end of the conversation ends up scrolling the page behind the
	   widget instead. */
	overscroll-behavior: contain !important;
	padding: 0 20px 14px !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	list-style: none !important;
}

.ai-chatbot-widget__message {
	max-width: 82% !important;
	padding: 12px 16px !important;
	border-radius: 16px !important;
	word-wrap: break-word !important;
	margin: 0 !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

.ai-chatbot-widget__message--assistant {
	align-self: flex-start !important;
	background: var(--ai-chatbot-assistant-msg-bg) !important;
	color: var(--ai-chatbot-ink-soft) !important;
	border-bottom-left-radius: 4px !important;
}

.ai-chatbot-widget__message--user {
	align-self: flex-end !important;
	background: var(--ai-chatbot-user-msg-bg) !important;
	color: #ffffff !important;
	border-bottom-right-radius: 4px !important;
	box-shadow: none !important;
	/* Plain textContent, not the markdown renderer — line breaks here
	   are whatever whitespace the visitor actually typed, so preserve it. */
	white-space: pre-wrap !important;
}

/* Assistant bubbles are built from real <p>/<ul>/<br> elements by
   widget.js's markdown renderer, not raw text — no white-space: pre-wrap
   needed, breaks are already structural. */
.ai-chatbot-widget__message--assistant p {
	margin: 0 0 8px !important;
}

.ai-chatbot-widget__message--assistant p:last-child {
	margin-bottom: 0 !important;
}

.ai-chatbot-widget__message--assistant ul {
	margin: 0 0 8px !important;
	padding-left: 20px !important;
}

.ai-chatbot-widget__message--assistant ul:last-child {
	margin-bottom: 0 !important;
}

.ai-chatbot-widget__message--assistant li {
	margin: 0 !important;
}

.ai-chatbot-widget__message--assistant strong {
	font-weight: 700 !important;
}

.ai-chatbot-widget__message--assistant em {
	font-style: italic !important;
}

.ai-chatbot-widget__message--assistant code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	background: rgba(0, 0, 0, 0.06) !important;
	padding: 1px 4px !important;
	border-radius: 4px !important;
	font-size: 0.9em !important;
}

.ai-chatbot-widget__typing {
	align-self: flex-start !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	background: var(--ai-chatbot-surface) !important;
	border-radius: 16px !important;
	border-bottom-left-radius: 4px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
	padding: 14px 16px !important;
	margin: 0 !important;
}

.ai-chatbot-widget__typing span {
	display: inline-block !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: var(--ai-chatbot-ink) !important;
	opacity: 0.35 !important;
	animation: ai-chatbot-typing 1s infinite ease-in-out !important;
}

.ai-chatbot-widget__typing span:nth-child(2) {
	animation-delay: 0.15s !important;
}

.ai-chatbot-widget__typing span:nth-child(3) {
	animation-delay: 0.3s !important;
}

@keyframes ai-chatbot-typing {
	0%,
	60%,
	100% {
		opacity: 0.35;
		transform: translateY(0);
	}
	30% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

.ai-chatbot-widget__form {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: var(--ai-chatbot-surface) !important;
	border-radius: 24px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
	padding: 8px 8px 8px 18px !important;
	margin: 12px 20px 20px !important;
	border-top: none !important;
	flex: 0 0 auto !important;
}

.ai-chatbot-widget__input {
	flex: 1 1 auto !important;
	resize: none !important;
	max-height: 120px !important;
	min-height: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: inherit !important;
	font-size: 14px !important;
	color: var(--ai-chatbot-ink-soft) !important;
	background: transparent !important;
}

.ai-chatbot-widget__input::placeholder {
	color: var(--ai-chatbot-muted) !important;
	opacity: 1 !important;
}

.ai-chatbot-widget__input:focus {
	outline: none !important;
}

.ai-chatbot-widget__send {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: none !important;
	width: 34px !important;
	height: 34px !important;
	background: var(--ai-chatbot-send-color) !important;
	color: var(--ai-chatbot-text-color) !important;
	border: none !important;
	border-radius: 50% !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
	appearance: none !important;
}

.ai-chatbot-widget__send-icon {
	width: 15px !important;
	height: 15px !important;
	display: inline-block !important;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l16-7-6 16-2-7-8-2z'/%3E%3C/svg%3E") center / contain no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l16-7-6 16-2-7-8-2z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.ai-chatbot-widget__send:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

@media (max-width: 480px) {
	.ai-chatbot-widget {
		right: 12px !important;
		bottom: 12px !important;
	}

	.ai-chatbot-widget--left {
		right: auto !important;
		left: 12px !important;
	}

	.ai-chatbot-widget__panel {
		width: calc(100vw - 24px) !important;
	}
}