/**
 * Self-contained default styling for the chat widget, written entirely
 * against CSS custom properties (see class-ca-ai-chat-public.php) so
 * re-theming per site is a settings change, never a CSS edit. Every
 * property has a literal fallback too, so the widget still looks
 * reasonable even before the inline :root override loads.
 *
 * Uses the .ca-chat/.ca-msg/.ca-chat-row/.ca-chat-send class names the
 * cawt-2026 theme's own hero demo already established, so on that site
 * this widget drops into the existing .panel-ai container without any
 * theme-side CSS changes — but every rule here is self-sufficient, since
 * this plugin also needs to work standalone on any other WordPress site.
 */

.ca-ai-chat-widget {
	position: relative;
	font-family: var( --ca-ai-chat-font-body, inherit );
}

.ca-ai-chat-widget .ca-ai-chat-disclosure {
	/* Explicit, not inherited: on cawt-2026 the widget sits inside
	   .wp-block-cover.is-dark (the hero), which sets a sitewide
	   color:white for light text on its own dark background — every
	   other element inside the light .ca-audit card overrides that back
	   to a dark color (see .ca-msg-them below), and this needs to as
	   well or it renders as invisible white-on-white. */
	color: var( --color-dark-text, #232936 );
	font-size: 11px;
	line-height: 1.4;
	opacity: 0.65;
	margin-bottom: 8px;
}

.ca-ai-chat-widget .ca-chat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 320px;
	overflow-y: auto;
	margin-bottom: 12px;
}

.ca-ai-chat-widget .ca-msg {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
	word-break: break-word;
}

.ca-ai-chat-widget .ca-msg-them {
	align-self: flex-start;
	background: rgba( 0, 0, 0, 0.06 );
	color: var( --color-dark-text, #232936 ) !important;
}

/* Root cause, found while chasing this same readability problem across
   several rounds: cawt-2026's parent theme ("Improvise") has a global
   `p, li, pre { color; font-family; font-size; line-height; }` rule
   (improvise/style.css) that targets those bare elements directly. CSS
   only falls back to inheriting a property from an ancestor when nothing
   targets the element itself — so that rule always wins over whatever
   .ca-msg-them's own color/font-size resolves to, regardless of
   selector specificity or !important on the ancestor rule, for any
   property it sets. Assistant replies are real markup (see
   renderMarkdown() in chat-widget.js) — p/ul/ol/li/strong tags — so they
   get caught by it; the visitor's own message (.ca-msg-me below) is
   plain text with no such tags, so it was never affected. This one rule
   explains every readability report so far (color, and now font-size)
   — fixed once, here, for every property that rule sets, rather than
   chasing them one at a time. Margins are trimmed from browser defaults
   to read as one continuous chat bubble, not a spaced-out document, and
   the first/last child's margin is zeroed so the bubble's own padding is
   the only space above/below the text. */
.ca-ai-chat-widget .ca-msg-them p,
.ca-ai-chat-widget .ca-msg-them ul,
.ca-ai-chat-widget .ca-msg-them ol,
.ca-ai-chat-widget .ca-msg-them li,
.ca-ai-chat-widget .ca-msg-them strong {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

.ca-ai-chat-widget .ca-msg-them p,
.ca-ai-chat-widget .ca-msg-them ul,
.ca-ai-chat-widget .ca-msg-them ol {
	margin: 0 0 8px;
}

.ca-ai-chat-widget .ca-msg-them p:last-child,
.ca-ai-chat-widget .ca-msg-them ul:last-child,
.ca-ai-chat-widget .ca-msg-them ol:last-child {
	margin-bottom: 0;
}

.ca-ai-chat-widget .ca-msg-them ul,
.ca-ai-chat-widget .ca-msg-them ol {
	padding-left: 20px;
}

.ca-ai-chat-widget .ca-msg-them li {
	margin-bottom: 2px;
}

/* !important is required here for the same reason .ca-msg-them's own
   color declaration above needs it: a host theme can carry an ambient
   `a:link`/`a:visited` rule scoped to a large surrounding container
   (e.g. cawt-2026's `.ca-hero a:link, a:visited { color: white; }`,
   meant for other hero content sitting directly on the dark cover
   background) that happens to also reach this widget's own dynamically
   inserted links when the widget is embedded inside that container. A
   plain `a:link`/`a:visited` pseudo-class counts the same as a class in
   CSS specificity, so a two-class selector like this one doesn't
   reliably out-rank it — the browser falls back to source order, which
   this plugin can't control on every host site. This plugin needs to
   look correct regardless of the surrounding theme's own link styling,
   so it wins outright rather than depending on load order. */
.ca-ai-chat-widget .ca-msg-them a {
	color: var( --ca-ai-chat-color-primary, #2c6e8a ) !important;
	text-decoration: underline;
}

/* "AI is thinking" indicator — a real bubble in the thread (not just the
   send button dimming) so waiting reads as active, not stalled. Shown
   between the visitor's message and the real reply, then removed. */
.ca-ai-chat-widget .ca-ai-chat-typing {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 14px 16px;
}

.ca-ai-chat-widget .ca-ai-chat-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.4;
	animation: ca-ai-chat-typing-bounce 1.2s infinite ease-in-out;
}

.ca-ai-chat-widget .ca-ai-chat-typing span:nth-child( 2 ) {
	animation-delay: 0.15s;
}

.ca-ai-chat-widget .ca-ai-chat-typing span:nth-child( 3 ) {
	animation-delay: 0.3s;
}

@keyframes ca-ai-chat-typing-bounce {
	0%, 60%, 100% {
		opacity: 0.4;
		transform: translateY( 0 );
	}
	30% {
		opacity: 1;
		transform: translateY( -3px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ca-ai-chat-widget .ca-ai-chat-typing span {
		animation: none;
		opacity: 0.8;
	}
}

.ca-ai-chat-widget .ca-msg-me {
	align-self: flex-end;
	background: var( --ca-ai-chat-color-primary, #2c6e8a );
	color: var( --ca-ai-chat-color-accent, #ffffff );
	white-space: pre-wrap;
}

.ca-ai-chat-widget .ca-chat-row {
	display: flex;
	gap: 2%;
	align-items: center;
}

.ca-ai-chat-widget .ca-ai-chat-input {
	flex: 1;
	padding: 11px 13px;
	border: 1.5px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 9px;
	font-size: 14px;
	font-family: inherit;
}

.ca-ai-chat-widget .ca-ai-chat-input:focus {
	outline: none;
	border-color: var( --ca-ai-chat-color-primary, #2c6e8a );
}

.ca-ai-chat-widget .ca-chat-send {
	flex: none;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var( --ca-ai-chat-color-primary, #2c6e8a );
	color: var( --ca-ai-chat-color-accent, #ffffff );
	font-size: 15px;
	cursor: pointer;
	transition: opacity 0.15s;
}

.ca-ai-chat-widget .ca-chat-send:hover {
	opacity: 0.88;
}

.ca-ai-chat-widget .ca-chat-send:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Blocking lead-capture modal — scoped to the widget's own box (position:
   absolute; inset:0 within .ca-ai-chat-widget's own position:relative,
   not a viewport-covering position:fixed overlay), so it fully covers the
   chat panel (thread + input row) while the rest of the page stays
   visible/interactive: obvious, but not a full-screen takeover. This also
   means it's automatically correctly bounded inside
   .ca-ai-chat-floating-panel in floating mode, with no z-index fight
   against the launcher's own z-index:999999. */
.ca-ai-chat-widget .ca-ai-chat-lead[hidden] {
	display: none;
}

/* The booking-confirmation modal (see showBookingPrompt() in chat-widget.js)
   is a separate container from .ca-ai-chat-lead, but deliberately reuses
   every other class name above (backdrop/modal/hint/form/error/honeypot/
   captcha/close) rather than duplicating their rules — only the container
   itself needs its own [hidden] rule. */
.ca-ai-chat-widget .ca-ai-chat-booking[hidden] {
	display: none;
}

/* The widget's own height otherwise tracks however much chat history exists
   (.ca-chat below has a max-height but no min-height) — found live: with
   just a couple of short messages, the widget (and so the backdrop, which
   is position:absolute; inset:0 *within* it) could end up shorter than a
   lead/booking modal actually needs once a CAPTCHA widget is configured,
   leaving the modal's own max-height/overflow-y:auto (see
   .ca-ai-chat-lead-modal) to quietly clip it into an easy-to-miss internal
   scroll instead of showing the whole form. Toggled by showLeadPrompt()/
   showBookingPrompt()/closeLeadModal()/closeBookingModal() — only applies
   while a modal is actually open, so the widget's normal (no modal) height
   is completely unaffected. Sized generously for the tallest real case
   (the booking modal, which has one more line of text than the lead modal)
   with a real CAPTCHA rendered — the modal's own overflow-y:auto stays in
   place regardless, as a safety net for anything this estimate doesn't
   cover (a long translation string, an unusually small viewport, browser
   text-zoom). */
.ca-ai-chat-widget.ca-ai-chat-modal-open {
	min-height: 480px;
}

.ca-ai-chat-widget .ca-ai-chat-lead-backdrop {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba( 255, 255, 255, 0.94 );
	border-radius: inherit;
	z-index: 5;
}

.ca-ai-chat-widget .ca-ai-chat-lead-modal {
	position: relative; /* positioning context for .ca-ai-chat-lead-close */
	background: #ffffff;
	border-radius: 14px;
	padding: 20px;
	/* 360px (320px content area after padding) rather than the old 320px
	   (280px content area) — Cloudflare Turnstile's "flexible" size (see
	   captchaSize in chat-widget.js) wants ~300px+ of width to render as a
	   single compact row (icon/Success + divider + logo/links); anything
	   narrower forces it to wrap onto two stacked rows, which read as
	   oversized/awkward inside the card. reCAPTCHA's "compact" size fits
	   easily either way, so this only changes the Turnstile case in
	   practice. */
	max-width: 360px;
	width: 100%;
	/* The CAPTCHA widget (when configured) can make this modal's natural
	   content height exceed the space available inside its backdrop —
	   scroll internally rather than visually spilling outside the card.
	   100% resolves against the backdrop's own height, since that's
	   position:absolute; inset:0 (a definite height), not an intrinsic one. */
	max-height: 100%;
	overflow-y: auto;
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.22 );
	/* Explicit, not inherited — same root cause as .ca-msg-them/
	   .ca-ai-chat-disclosure above: on cawt-2026 this modal sits inside
	   .wp-block-cover.is-dark, which sets a sitewide color:white for the
	   hero's own dark background. Without this, the hint text and typed
	   input text would render white-on-white inside this white card. */
	color: var( --color-dark-text, #232936 );
}

/* The title/prompt text needs clearance from the close button in the
   opposite corner — :first-of-type since the booking modal has a second
   .ca-ai-chat-hint (the slot summary) right after it that doesn't need this;
   the post-submit "thanks" replacement also uses this class but by then the
   whole modal (including the close button) has been replaced, so no
   clearance is needed there either. */
.ca-ai-chat-widget .ca-ai-chat-lead-modal > p.ca-ai-chat-hint:first-of-type {
	padding-right: 22px;
}

.ca-ai-chat-widget .ca-ai-chat-lead-error {
	color: #b32d2e;
	font-size: 12px;
	margin: 8px 0 0;
}

.ca-ai-chat-widget .ca-ai-chat-lead-error[hidden] {
	display: none;
}

.ca-ai-chat-widget .ca-ai-chat-hint {
	font-size: 13px;
	margin: 0 0 8px;
}

.ca-ai-chat-widget .ca-ai-chat-lead-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ca-ai-chat-widget .ca-ai-chat-lead-form input[type="text"],
.ca-ai-chat-widget .ca-ai-chat-lead-form input[type="email"],
.ca-ai-chat-widget .ca-ai-chat-lead-form textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1.5px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	color: inherit;
	box-sizing: border-box;
	resize: vertical;
}

.ca-ai-chat-widget .ca-ai-chat-lead-form input:disabled {
	opacity: 0.6;
}

.ca-ai-chat-widget .ca-ai-chat-lead-preference {
	border: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
}

.ca-ai-chat-widget .ca-ai-chat-lead-preference legend {
	font-size: 12px;
	font-weight: 600;
	padding: 0 0 4px;
}

.ca-ai-chat-widget .ca-ai-chat-lead-preference label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 16px;
	font-weight: normal;
	cursor: pointer;
}

/* Marketing opt-in checkbox (only rendered when Mailchimp is configured —
   see mailchimpEnabled). Same inline label/checkbox treatment as the
   preference radios above, but its own block-level row since the label text
   is admin-authored and can run long. align-items:center (not flex-start) —
   the label text here is short/single-line in practice, so top-aligning it
   against the checkbox just reads as off-center. */
.ca-ai-chat-widget .ca-ai-chat-lead-optin {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: normal;
	cursor: pointer;
	margin: 4px 0;
}

/* Lead form only (this adjacency never occurs in the booking form, which has
   no preference fieldset) — the flex `gap: 12px` on .ca-ai-chat-lead-form
   plus this row's own margin-top left the "Preferred contact method"
   radios and the opt-in checkbox looking too far apart relative to how
   closely related they are. Pull it in a bit without touching the gap
   between any other rows in the form. */
.ca-ai-chat-widget .ca-ai-chat-lead-preference + .ca-ai-chat-lead-optin {
	margin-top: -8px;
}

/* Booking form only — no preference fieldset above it here, so the opt-in
   checkbox is the form's only "extra" row and reads as cramped against the
   name/email/phone/notes stack above and the honeypot/CAPTCHA below with
   just the shared 4px margin. A little more room on this one, without
   affecting the lead form's own (intentionally tighter) spacing above. */
.ca-ai-chat-widget .ca-ai-chat-booking .ca-ai-chat-lead-optin {
	margin: 10px 0;
}

/* Honeypot — positioned off-screen, not display:none/hidden, since some
   crude bots specifically skip fields hidden that way. Real visitors never
   see or reach it (also excluded from the modal's own Tab-trap in
   chat-widget.js); a filled value is checked server-side in handle_lead(). */
.ca-ai-chat-widget .ca-ai-chat-lead-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ca-ai-chat-widget .ca-ai-chat-captcha {
	margin: 4px 0;
	/* Turnstile's "flexible" size can still render narrower than the modal's
	   own content width (it doesn't necessarily grow to fill it) — center it
	   rather than letting it sit flush against one edge. */
	display: flex;
	justify-content: center;
}

.ca-ai-chat-widget .ca-ai-chat-lead-form button[type="submit"] {
	width: 100%;
	padding: 10px 16px;
	border: none;
	border-radius: 99px;
	background: var( --ca-ai-chat-color-lead-button, #8e1e48 );
	color: var( --ca-ai-chat-color-accent, #ffffff );
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ca-ai-chat-widget .ca-ai-chat-lead-form button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Corner dismiss button — a small "×" instead of the old full-width "Not
   right now" button, so dismissing the modal doesn't cost a whole row of
   vertical space now that the CAPTCHA widget (when configured) already
   makes this modal tall. A sibling of the <form>, not inside it — see
   showLeadPrompt()/showBookingPrompt() — so it's unaffected by the
   disable-everything-while-sending loop that only walks the form's own
   inputs/buttons. */
.ca-ai-chat-widget .ca-ai-chat-lead-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	padding: 0;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.15s, background-color 0.15s;
}

.ca-ai-chat-widget .ca-ai-chat-lead-close:hover,
.ca-ai-chat-widget .ca-ai-chat-lead-close:focus {
	opacity: 1;
	background: rgba( 0, 0, 0, 0.06 );
}

/**
 * Floating launcher bubble (display_mode "floating" — see
 * render_floating_widget() in class-ca-ai-chat-public.php), the
 * alternative to placing the .ca-ai-chat-widget block inline. The panel
 * wraps that same widget markup unchanged, so everything above this
 * point already styles its contents correctly.
 */
.ca-ai-chat-floating {
	position: fixed;
	bottom: 20px;
	z-index: 999999;
	font-family: var( --ca-ai-chat-font-body, inherit );
}

.ca-ai-chat-floating--right {
	right: 20px;
}

.ca-ai-chat-floating--left {
	left: 20px;
}

.ca-ai-chat-floating-launcher {
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	background: var( --ca-ai-chat-color-primary, #2c6e8a );
	color: var( --ca-ai-chat-color-accent, #ffffff );
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.15s;
}

.ca-ai-chat-floating-launcher:hover {
	transform: scale( 1.06 );
}

.ca-ai-chat-floating-icon-close {
	display: none;
}

.ca-ai-chat-floating-open .ca-ai-chat-floating-icon-chat {
	display: none;
}

.ca-ai-chat-floating-open .ca-ai-chat-floating-icon-close {
	display: block;
}

.ca-ai-chat-floating-panel {
	position: absolute;
	bottom: 76px;
	width: min( 360px, calc( 100vw - 40px ) );
	max-height: min( 70vh, 560px );
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.22 );
	padding: 16px;
	overflow-y: auto;
}

.ca-ai-chat-floating--right .ca-ai-chat-floating-panel {
	right: 0;
}

.ca-ai-chat-floating--left .ca-ai-chat-floating-panel {
	left: 0;
}

@media ( max-width: 480px ) {
	.ca-ai-chat-floating-panel {
		width: calc( 100vw - 24px );
	}
}