:root {
	--aa-chatbot-primary:          #2563EB;
	--aa-chatbot-bg:               #FFFFFF;
	--aa-chatbot-text:             #1F2937;
	--aa-chatbot-bot-bubble:       #f3f4f6;
	--aa-chatbot-user-icon-color:  #2563EB;
	--aa-chatbot-input-text:       #1F2937;
	/* Text drawn on top of --aa-chatbot-primary: header, close button, floating icon,
	   visitor bubbles, and the Send / Start Chat / Submit buttons. */
	--aa-chatbot-primary-text:     #FFFFFF;
}

/* ===== Chat Icon =====
   The floating icon is a <button> that lives outside .aa-chatbot-window, directly on the host
   page, so it is exposed to every theme's global button styling. Class selectors aren't enough:
   themes load their CSS after ours and use selectors like `.elementor-kit-8 button { padding:
   17px 32px; border-radius: 10px; background-color: ... }` (0,1,1) or Hello Elementor's reset
   `button:hover { background-color: #c36 }`, which turned the circle into a coloured rounded
   rectangle. Same treatment as the footer: wipe everything with `all: initial`, then restate
   every property under the ID with `!important`. Any media query that changes the icon must
   also use `#aa-chatbot-icon` + `!important`, or it will lose to these rules.
   Unlike the footer, the wipe is applied to the button only, never to its SVG descendants:
   `d` is a CSS property in SVG2 browsers, so `all: initial` on the <path> resets its geometry
   to `none` and the chat-bubble glyph vanishes. The SVG and path are guarded individually below. */
#aa-chatbot-icon {
	all: initial !important;
}
/* Non-!important theme :hover/:focus rules can't beat these either, so the states need no
   restating (and restating them would out-rank the breakpoint offsets below). */
#aa-chatbot-icon {
	position: fixed !important;
	bottom: 20px !important;
	right: 20px !important;
	z-index: 9999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	max-width: 56px !important;
	max-height: 56px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--aa-chatbot-primary, #2563EB) !important;
	color: var(--aa-chatbot-primary-text, #FFFFFF) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
	cursor: pointer !important;
	overflow: hidden !important;
	transition: transform 0.2s ease !important;
	-webkit-tap-highlight-color: transparent !important;
}
#aa-chatbot-icon:hover {
	transform: scale(1.05) !important;
}
#aa-chatbot-icon:focus-visible {
	/* all: initial removes the browser focus ring — restore one for keyboard users. */
	outline: 2px solid var(--aa-chatbot-primary, #2563EB) !important;
	outline-offset: 3px !important;
}
#aa-chatbot-icon svg {
	display: block !important;
	flex-shrink: 0 !important;
	width: 24px !important;
	height: 24px !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	pointer-events: none !important;
}
/* Restate paint on the path itself so theme rules like `svg path { fill: ... }` can't hide it.
   `d` is deliberately left alone — the path's attribute supplies the geometry. */
#aa-chatbot-icon svg path {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ===== Chat Window ===== */
.aa-chatbot-window {
	position: fixed;
	bottom: 88px;
	right: 20px;
	width: 360px;
	height: 520px;
	/* Shrink with the viewport instead of running off the top of the screen: 88px
	   bottom offset + 20px breathing room above. dvh (where supported) tracks mobile
	   browser chrome; the vh line stays as the fallback. min-height keeps the chat
	   usable — below it the short-viewport block at the bottom of this file takes over. */
	max-height: calc(100vh - 108px);
	max-height: calc(100dvh - 108px);
	min-height: 320px;
	background-color: var(--aa-chatbot-bg);
	color: var(--aa-chatbot-text);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	display: none;
	flex-direction: column;
	z-index: 9998;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	/* Without this the widget inherits the host body's line-height (1.4 on theairankers.com,
	   but anything at all elsewhere) and bubble spacing drifts per site. Any declared value
	   beats an inherited one regardless of specificity, so no `!important` is needed. */
	line-height: 1.5;
}
.aa-chatbot-window.aa-open {
	display: flex;
}

/* ===== Left-corner placement =====
   Stamped on both the icon and the window by chatbot-widget.php when the
   `aa_chatbot_position` option is `left`. `right: auto` is required — setting `left`
   alone would leave both offsets in play and the element would stay pinned right.
   These are (0,2,0), so they also out-rank the (0,1,0) breakpoint rules further down;
   each media query that moves the elements horizontally restates its own variant.
   The icon's variant is ID + !important to match the theme-proof icon rules above. */
.aa-chatbot-window.aa-pos-left {
	right: auto;
	left: 20px;
}
#aa-chatbot-icon.aa-pos-left {
	right: auto !important;
	left: 20px !important;
}
/* ===== Host-theme guard =====
   Form controls don't inherit typography from ancestors (UA stylesheets style them
   independently), and WordPress themes pile on top of that with rules like
   `[type="button"], [type="submit"], button { display: inline-block; white-space:
   nowrap; padding: 8px 16px; border: 1px solid; border-radius: 3px; ... }`. Those
   match at specificity (0,1,0), so a bare `.aa-chatbot-send` only ties with them and
   loses on source order — which we don't control on a host site. Observed in the
   wild: submit buttons rendering transparent with the theme's link colour, and star
   buttons blowing up into 62x46 bordered boxes.

   This block strips the host's styling back to nothing at (0,1,1), which outranks
   (0,1,0) selectors. Every widget control rule below is then scoped under
   `.aa-chatbot-window` — (0,2,x) — so the plugin's own styling outranks this reset in
   turn. Both halves are required: the reset alone would erase the widget's look, and
   the scoping alone wouldn't stop the theme.

   Specificity alone turned out not to be enough, in two directions:

   1. A tie loses. `.elementor-kit-N button` is also (0,1,1), and the kit stylesheet is printed
      into the page after ours, so it took font-family, font-weight, letter-spacing,
      text-transform and border-radius off every widget button — on theairankers.com the Send
      and Start Chat buttons rendered as bold capitalised Montserrat with 1px tracking.
   2. `:not()` arguments count. `.elementor-kit-N input:not([type="button"]):not([type="submit"])`
      lands at (0,3,1) and beat even the (0,2,1) widget rules, taking the registration fields'
      colour, background, border, radius and padding.

   So this reset carries `!important`, and every widget control rule below carries `!important`
   too. Order of battle: the theme loses to the reset (equal specificity, but `!important`),
   and the reset loses to the widget's own rules (also `!important`, higher specificity). Only
   declarations that a theme was already winning change behaviour.

   **Every declaration on a `.aa-chatbot-window button/input/textarea/select` rule must carry
   `!important`** — one that doesn't is silently flattened by this reset, not by the theme. */
.aa-chatbot-window button,
.aa-chatbot-window input,
.aa-chatbot-window textarea,
.aa-chatbot-window select {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	font-weight: inherit !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: normal !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
/* Restore the UA defaults the block above flattens, so labels centre and typed text
   stays left-aligned even when the theme sets text-align on controls. */
.aa-chatbot-window button {
	text-align: center !important;
}
.aa-chatbot-window input,
.aa-chatbot-window textarea {
	text-align: left !important;
}

/* ===== Header ===== */
.aa-chatbot-header {
	background-color: var(--aa-chatbot-primary);
	color: var(--aa-chatbot-primary-text);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	/* Paints above the feedback overlay scrim so the close button stays reachable. */
	position: relative;
	z-index: 11;
}
.aa-chatbot-title {
	font-weight: 600;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.aa-chatbot-online-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: #22c55e;
	box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
	flex-shrink: 0;
}
.aa-chatbot-window .aa-chatbot-close {
	background: none !important;
	border: none !important;
	color: var(--aa-chatbot-primary-text) !important;
	font-size: 22px !important;
	cursor: pointer !important;
	min-width: 44px !important;
	min-height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	line-height: 1 !important;
}

/* ===== Messages ===== */
.aa-chatbot-messages {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.aa-chatbot-message-wrap {
	display: flex;
	align-items: flex-end;
	gap: 6px;
}
.aa-chatbot-message-wrap.aa-wrap-user {
	justify-content: flex-end;
}
.aa-chatbot-bubble {
	max-width: 78%;
	padding: 10px 14px;
	border-radius: 16px;
	line-height: 1.5;
	word-break: break-word;
}
.aa-chatbot-bubble.aa-user {
	background-color: var(--aa-chatbot-primary);
	color: var(--aa-chatbot-primary-text);
	border-bottom-right-radius: 4px;
}
.aa-chatbot-bubble.aa-assistant {
	background-color: var(--aa-chatbot-bot-bubble);
	color: var(--aa-chatbot-text);
	border-bottom-left-radius: 4px;
}

/* ===== FAQ buttons ===== */
/* These rules are scoped under .aa-chatbot-window on purpose. Theme/normalize
   stylesheets commonly ship `[type="button"], [type="submit"], button { display:
   inline-block; white-space: nowrap; padding: ...; font-size: ... }`, which matches
   at specificity (0,1,0) — a tie with a bare `.aa-chatbot-faq-btn`, decided by
   source order, which we don't control on a host site. The extra class makes these
   (0,2,0) so they win regardless of load order. `white-space` has to be stated
   explicitly for the same reason: the plugin never declared it, so the theme's
   `nowrap` was inherited and long questions refused to wrap. */
.aa-chatbot-window .aa-chatbot-faq-group {
	align-self: stretch;
	flex-shrink: 0;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
}
.aa-chatbot-window .aa-chatbot-faq-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	width: 100% !important;
	min-height: 44px !important;
	padding: 10px 16px !important;
	border: none !important;
	border-bottom: 1px solid #e5e7eb !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--aa-chatbot-text) !important;
	white-space: normal !important;
	text-align: left !important;
	text-transform: none !important;
	cursor: pointer !important;
}
/* The question also lives in its own span so it can shrink below its intrinsic width
   and wrap — a bare text node is an anonymous flex item and can't take min-width: 0. */
.aa-chatbot-window .aa-chatbot-faq-text {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	font-family: Roboto, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
	letter-spacing: normal;
}
.aa-chatbot-window .aa-chatbot-faq-btn:last-child {
	border-bottom: none !important;
}
.aa-chatbot-window .aa-chatbot-faq-btn:hover {
	background-color: #f3f4f6 !important;
	color: var(--aa-chatbot-text) !important;
}
.aa-chatbot-window .aa-chatbot-faq-btn::after {
	content: '\203A';
	color: #9ca3af;
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

/* ===== User icon ===== */
.aa-user-icon {
	font-size: 20px;
	color: var(--aa-chatbot-user-icon-color);
	flex-shrink: 0;
	user-select: none;
}

/* ===== Source buttons ===== */
.aa-chatbot-sources-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: -4px;
}
.aa-chatbot-window .aa-chatbot-source-btn {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 6px 10px !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 999px !important;
	background-color: #fff !important;
	color: var(--aa-chatbot-text) !important;
	font-size: 12px !important;
	cursor: pointer !important;
}
.aa-chatbot-window .aa-chatbot-source-btn:hover {
	background-color: #f3f4f6 !important;
}
.aa-source-icon {
	font-size: 14px;
	color: #9ca3af;
	flex-shrink: 0;
	user-select: none;
}

/* ===== Typing Indicator ===== */
.aa-chatbot-typing {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 14px;
	background-color: var(--aa-chatbot-bot-bubble);
	border-radius: 16px;
	border-bottom-left-radius: 4px;
}
.aa-chatbot-typing span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #9ca3af;
	animation: aa-bounce 1.2s ease-in-out infinite;
}
.aa-chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.aa-chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aa-bounce {
	0%, 80%, 100% { transform: translateY(0);    }
	40%           { transform: translateY(-6px); }
}

/* ===== Registration Form =====
   The form is an in-flow sibling of the messages area, the input area and the footer, all inside
   a fixed-height column flex window. Left at the default `flex: 0 1 auto` it shrinks when the
   window is short, but its fields carry `min-height: 44px` and refuse to shrink with it — the
   surplus content then spills out of a `overflow: visible` box and is painted over by the input
   area and the footer, which come later in the DOM. Owning the leftover body height and scrolling
   inside itself keeps every field reachable at any window size. */
.aa-chatbot-registration-form {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
/* Squeezing the children is what turns a shrunken form into overflow; let the form scroll
   instead. */
.aa-chatbot-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
}
/* Registration typography is pinned to Roboto rather than inheriting the widget's
   system stack, so the form reads identically on every host theme.

   `<label>` is not a form control, so the guard block above doesn't cover it, and a label
   with no colour of its own simply inherits — which is why Elementor's `.elementor-kit-N
   label { color: var(--e-global-color-text) }` (0,1,1, printed after us) painted these
   labels white on a white form and made them invisible. The colour is therefore declared
   here, from the same "Text Color" setting the rest of the widget's text uses, and the
   whole rule is scoped under `.aa-chatbot-window` + `!important` to stay out-of-reach. */
.aa-chatbot-window .aa-chatbot-field label {
	color: var(--aa-chatbot-text) !important;
	font-family: Roboto, sans-serif !important;
	font-style: normal !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	line-height: 18px !important;
	/* Themes routinely uppercase and letter-space form labels, and Elementor's reset makes
	   them inline-block with vertical-align: middle. */
	display: block !important;
	vertical-align: baseline !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
/* `!important` here is not decoration: Elementor kits ship
   `.elementor-kit-N input:not([type="button"]):not([type="submit"])`, which is (0,3,1) and
   out-ranks this (0,2,1) selector, so the theme's own colour, background, border, radius and
   padding took the field over — on theairankers.com that meant near-white typed text on a
   transparent box. See the note on the host-theme guard block above. */
.aa-chatbot-window .aa-chatbot-field input {
	border: 1px solid #d1d5db !important;
	background-color: #fff !important;
	color: var(--aa-chatbot-input-text) !important;
	/* Themes (and Chrome autofill) paint through -webkit-text-fill-color, which wins over
	   `color` outright, so the admin's colour has to be restated here too. */
	-webkit-text-fill-color: var(--aa-chatbot-input-text) !important;
	border-radius: 6px !important;
	padding: 8px 10px !important;
	font-family: Roboto, sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	line-height: normal !important;
	min-height: 44px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.aa-chatbot-field-hint {
	font-family: Roboto, sans-serif;
	color: #6b7280;
	font-size: 12px;
	line-height: 16px;
}
.aa-chatbot-field-error {
	color: #dc2626;
	font-size: 12px;
	min-height: 16px;
}
/* Three empty error slots reserve 48px, which is the difference between the form fitting the
   default 520px window and having to scroll. Collapse them until they have something to say.
   The element stays in the layout (unlike the feedback card's `display: none`) so its
   `aria-live` region keeps being observed. */
.aa-chatbot-registration-form .aa-chatbot-field-error:empty {
	min-height: 0;
}
.aa-chatbot-window .aa-chatbot-reg-submit {
	background-color: var(--aa-chatbot-primary) !important;
	color: var(--aa-chatbot-primary-text) !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 10px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	min-height: 44px !important;
	flex-shrink: 0 !important;
}
.aa-chatbot-window .aa-chatbot-reg-submit:hover {
	opacity: 0.9 !important;
}

/* ===== Registering state =====
   `aa-registering` is stamped on the window by chatbot-frontend.js for as long as the registration
   form is showing. The composer is useless before a visitor registers, so hiding it hands its
   ~90px back to the form — enough for all three fields plus Start Chat at the default window size.
   The messages area needs the second rule: at its base `flex: 1` the flex basis is 0, so it
   absorbs none of the shrinking and would sit at zero height (welcome message invisible) while the
   form kept losing space. Natural height capped at 40% keeps the welcome message readable and
   gives the rest to the form. Both selectors are (0,3,0), so they also outrank the mobile
   breakpoint and the `.aa-chatbot-unavailable` rule. */
.aa-chatbot-window.aa-registering .aa-chatbot-input-area {
	display: none;
}
.aa-chatbot-window.aa-registering .aa-chatbot-messages {
	flex: 0 1 auto;
	max-height: 40%;
}

/* ===== Feedback Form ===== */
.aa-chatbot-feedback-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	display: none;
	align-items: center;
	justify-content: center;
	/* Top padding clears the header, which paints above this scrim — without it a tall
	   card centres against the whole window and its top slides under the header. 68px is
	   the header's real height (44px close button + 2×12px padding); the old 56px let the
	   card ride ~12px under it once the window got short enough to run out of slack. */
	padding: 68px 16px 16px;
	background-color: rgba(0, 0, 0, 0.45);
}
.aa-chatbot-feedback-overlay.aa-open {
	display: flex;
}
.aa-chatbot-feedback-card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 320px;
	max-height: 100%;
	overflow-y: auto;
	padding: 16px 16px 14px;
	border-radius: 12px;
	background-color: var(--aa-chatbot-bg);
	color: var(--aa-chatbot-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Collapse the error slot until it actually has a message, so it costs no vertical space. */
.aa-chatbot-feedback-card .aa-chatbot-field-error:empty {
	display: none;
}
.aa-chatbot-window .aa-chatbot-feedback-close {
	position: absolute !important;
	top: 4px !important;
	right: 8px !important;
	background: none !important;
	border: none !important;
	color: #6b7280 !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 4px !important;
}
.aa-chatbot-feedback-heading {
	padding-right: 20px;
	font-size: 14px;
	font-weight: 600;
}
.aa-chatbot-feedback-heading p {
	margin: 0 0 8px;
	line-height: 1.4;
	font-weight: 600;
}
.aa-chatbot-feedback-heading p:last-child {
	margin-bottom: 0;
}
.aa-chatbot-feedback-sub {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: #6b7280;
}
.aa-chatbot-feedback-note {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: #6b7280;
	text-align: center;
}

/* Copy variants: 'ending' = user_ending_chat trigger, 'idle' = inactivity trigger */
.aa-chatbot-feedback-card .aa-variant-ending,
.aa-chatbot-feedback-card .aa-variant-idle {
	display: none;
}
.aa-chatbot-feedback-card.aa-mode-ending .aa-variant-ending {
	display: block;
}
.aa-chatbot-feedback-card.aa-mode-idle .aa-variant-idle {
	display: block;
}
.aa-chatbot-stars {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.aa-chatbot-window .aa-chatbot-star {
	background: none !important;
	border: none !important;
	padding: 2px !important;
	line-height: 0 !important;
	cursor: pointer !important;
}
.aa-chatbot-window .aa-chatbot-star .material-icons {
	font-size: 28px;
	color: #d1d5db;
}
.aa-chatbot-window .aa-chatbot-star .material-icons.aa-filled {
	color: #FBBF24;
}
/* Same theme-proofing as the registration inputs: `.elementor-kit-N textarea` only ties here
   today, but any theme rule carrying one more class wins outright. */
.aa-chatbot-window .aa-chatbot-feedback-text {
	box-sizing: border-box !important;
	width: 100% !important;
	/* rows="3" lands at 69px; the design's box is 92px. Set it here rather than bumping
	   the rows attribute so the height doesn't drift with the inherited font size. */
	min-height: 92px !important;
	border: 1px solid #d1d5db !important;
	background-color: #fff !important;
	color: var(--aa-chatbot-input-text) !important;
	-webkit-text-fill-color: var(--aa-chatbot-input-text) !important;
	border-radius: 8px !important;
	padding: 8px 10px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	resize: vertical !important;
}
.aa-chatbot-window .aa-chatbot-feedback-submit {
	background-color: var(--aa-chatbot-primary) !important;
	color: var(--aa-chatbot-primary-text) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 10px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	min-height: 44px !important;
	width: 100% !important;
}
.aa-chatbot-window .aa-chatbot-feedback-submit:hover {
	opacity: 0.9 !important;
}

/* ===== Input Area ===== */
.aa-chatbot-input-area {
	padding: 10px 12px;
	border-top: 1px solid #e5e7eb;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
}
.aa-chatbot-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}
/* Theme-proofed for the same reason as the registration inputs above. */
.aa-chatbot-window .aa-chatbot-textarea {
	flex: 1 !important;
	box-sizing: border-box !important;
	border: 1px solid #d1d5db !important;
	background-color: #fff !important;
	color: var(--aa-chatbot-input-text) !important;
	-webkit-text-fill-color: var(--aa-chatbot-input-text) !important;
	border-radius: 6px !important;
	padding: 8px 10px !important;
	font-size: 14px !important;
	resize: none !important;
	font-family: inherit !important;
}
.aa-chatbot-char-counter {
	font-size: 11px;
	color: #9ca3af;
	text-align: right;
}
.aa-chatbot-char-counter.aa-near-limit {
	color: #dc2626;
}
.aa-chatbot-window .aa-chatbot-send {
	background-color: var(--aa-chatbot-primary) !important;
	color: var(--aa-chatbot-primary-text) !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 8px 14px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	min-height: 44px !important;
	flex-shrink: 0 !important;
	white-space: nowrap !important;
}
.aa-chatbot-window .aa-chatbot-send:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

/* ===== Notice ===== */
.aa-chatbot-notice {
	padding: 8px 12px;
	background-color: #fef3c7;
	color: #92400e;
	border-radius: 6px;
	font-size: 13px;
	text-align: center;
}
.aa-chatbot-notice.aa-error {
	background-color: #fef2f2;
	color: #991b1b;
}

/* ===== Footer =====
   The "Powered by" branding strip is deliberately theme-proof: it ignores the host theme and the
   admin color pickers. Its colors come only from the admin "Footer Color" preset, which
   templates/chatbot-widget.php sets inline as --aa-footer-bg / --aa-footer-text / --aa-footer-border
   (custom properties survive `all: initial`); the var() fallbacks are the White preset. Every property is first wiped with `all: initial` (so nothing
   theme-inherited leaks in — font, weight, case, shadow, underline...) and then restated. The ID
   selector plus `!important` is what beats theme rules such as `#page a { color: #fff !important }`.
   Every link state is pinned so :visited/:hover can't pick up theme colors either. */
#aa-chatbot-footer,
#aa-chatbot-footer * {
	all: initial !important;
}
#aa-chatbot-footer {
	display: block !important;
	position: relative !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 6px 8px !important;
	background: var(--aa-footer-bg, #FFFFFF) !important;
	border-top: 1px solid var(--aa-footer-border, #e5e7eb) !important;
	text-align: center !important;
}
#aa-chatbot-footer a,
#aa-chatbot-footer a:link,
#aa-chatbot-footer a:visited,
#aa-chatbot-footer a:hover,
#aa-chatbot-footer a:focus,
#aa-chatbot-footer a:active,
#aa-chatbot-footer .aa-chatbot-footer-version {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 16px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	color: var(--aa-footer-text, #750675) !important;
	background: transparent !important;
}
#aa-chatbot-footer a {
	cursor: pointer !important;
}
#aa-chatbot-footer a:focus-visible {
	/* all: initial removes the browser focus ring — restore one for keyboard users. */
	outline: 2px solid var(--aa-footer-text, #750675) !important;
	outline-offset: 2px !important;
}
#aa-chatbot-footer .aa-chatbot-footer-version {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	cursor: default !important;
}

/* ===== Unavailable state ===== */
.aa-chatbot-unavailable .aa-chatbot-input-area {
	opacity: 0.5;
	pointer-events: none;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
	#aa-chatbot-icon {
		bottom: 16px !important;
		right: 16px !important;
	}
	.aa-chatbot-window {
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* Clear the desktop clamps — a max-height beats height, so without this the
		   full-screen window would still stop 108px short of the top. */
		max-height: none;
		min-height: 0;
		border-radius: 0;
	}
	#aa-chatbot-icon[aria-expanded="true"] {
		display: none !important;
	}
	/* The base .aa-pos-left rules would otherwise beat this block: the icon would keep
	   its 20px desktop offset, and the window would sit 20px in instead of going
	   edge-to-edge. Restate both at matching specificity. */
	#aa-chatbot-icon.aa-pos-left {
		right: auto !important;
		left: 16px !important;
	}
	.aa-chatbot-window.aa-pos-left {
		left: 0;
		right: 0;
	}
	.aa-chatbot-feedback-card {
		max-width: 420px;
	}
}

/* ===== Short viewports =====
   Below 428px (the 320px minimum window height + its 108px of offsets) the window can
   no longer sit above the floating icon, so it becomes a near-full-height panel. It
   keeps its width and rounded corners; only the vertical anchoring changes. Narrow
   screens are excluded — the mobile block above already gives them the better answer
   (edge-to-edge full screen), and this block would only carve 8px gaps out of it. */
@media (max-height: 428px) and (min-width: 769px) {
	.aa-chatbot-window {
		bottom: 8px;
		height: calc(100vh - 16px);
		height: calc(100dvh - 16px);
		max-height: none;
		min-height: 0;
	}
	/* The window now covers the icon's slot, so hide it while open — same treatment
	   the mobile breakpoint gives it. */
	#aa-chatbot-icon[aria-expanded="true"] {
		display: none !important;
	}
}