/* ==========================================================================
   EdgeSphere Assistant - PROTOTYPE STYLES (Phase A3)

   ISOLATED PROTOTYPE ONLY. These tokens are local to the prototype and must
   NOT be written into production. Production consumes the real token layer in
   the child theme; the values below merely mirror the established palette so
   the prototype reads correctly in isolation.

   RTL: positioning and spacing use logical properties throughout, so
   dir="rtl" mirrors the whole component with no additional rules.
   ========================================================================== */

.es-asst {
	/* --- local palette mirror (prototype only) --- */
	--es-navy: #0A2540;
	--es-navy-deep: #061829;
	--es-navy-raised: #0E2C4A;
	--es-silver: #A8B3C2;
	--es-white: #FFFFFF;
	--es-focus: #1473E6;
	--es-border-on-dark: rgba(255, 255, 255, 0.08);
	--es-border-on-dark-strong: rgba(255, 255, 255, 0.28);

	/* --- fixed-UI contract (integration planning values) --- */
	--es-fixed-gutter: clamp(1.25rem, 0.5rem + 3.2vw, 2.5rem);
	--es-fixed-gap: 12px;
	--es-banner-h: 0px;
	--es-launcher-size: 54px;
	--z-backtotop: 900;
	--z-chat-launcher: 920;
	--z-chat-panel: 940;

	/* --- component --- */
	--es-radius-pill: 999px;
	--es-radius-panel: 16px;
	--es-radius-bubble: 12px;
	--es-transition: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--es-shadow-panel: 0 24px 64px rgba(0, 0, 0, 0.42);
	--es-shadow-launcher: 0 12px 32px rgba(0, 0, 0, 0.35);

	font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Screen-reader-only utility, self-contained. */
.es-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   LAUNCHER
   ========================================================================== */

.es-asst__launcher {
	position: fixed;
	inset-block-end: calc(var(--es-fixed-gutter) + var(--es-banner-h));
	inset-inline-end: var(--es-fixed-gutter);
	z-index: var(--z-chat-launcher);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--es-launcher-size);
	height: var(--es-launcher-size);
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	margin: 0;

	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	line-height: 0;
	cursor: pointer;

	color: var(--es-silver);
	background-color: var(--es-navy);
	border: 1px solid var(--es-border-on-dark);
	border-radius: var(--es-radius-pill);
	box-shadow: var(--es-shadow-launcher);

	transition: background-color var(--es-transition), color var(--es-transition),
		border-color var(--es-transition), transform var(--es-transition);
}

.es-asst__launcher:hover {
	color: var(--es-white);
	background-color: var(--es-navy-raised);
	border-color: var(--es-border-on-dark-strong);
	transform: translateY(-1px);
}

.es-asst__launcher:focus-visible {
	outline: 2px solid var(--es-focus);
	outline-offset: 3px;
	border-radius: var(--es-radius-pill);
}

.es-asst__launcher:focus:not(:focus-visible) { outline: none; }

/* Open state is indicated by shape and colour, not colour alone: the icon is
   replaced by the panel being visible and the launcher recedes. */
.es-asst__launcher[aria-expanded="true"] {
	color: var(--es-white);
	background-color: var(--es-navy-raised);
	border-color: var(--es-border-on-dark-strong);
}

.es-asst__icon { display: inline-flex; }

/* ==========================================================================
   PANEL
   ========================================================================== */

.es-asst__panel {
	position: fixed;
	inset-block-end: calc(var(--es-fixed-gutter) + var(--es-banner-h) + var(--es-launcher-size) + var(--es-fixed-gap));
	inset-inline-end: var(--es-fixed-gutter);
	z-index: var(--z-chat-panel);

	display: flex;
	flex-direction: column;
	width: 420px;
	max-width: calc(100vw - (var(--es-fixed-gutter) * 2));
	max-height: min(620px, calc(100vh - (var(--es-fixed-gutter) * 2) - var(--es-launcher-size) - var(--es-fixed-gap) - var(--es-banner-h)));

	color: var(--es-white);
	background-color: var(--es-navy);
	border: 1px solid var(--es-border-on-dark);
	border-radius: var(--es-radius-panel);
	box-shadow: var(--es-shadow-panel);
	overflow: hidden;
}

.es-asst__panel[hidden] { display: none; }

/* --- header --- */
.es-asst__header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 16px 12px;
	border-block-end: 1px solid var(--es-border-on-dark);
	background-color: var(--es-navy-deep);
}

.es-asst__identity { flex: 1 1 auto; min-width: 0; }

.es-asst__title {
	margin: 0;
	font-family: "Manrope", "Inter", "Segoe UI", sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--es-white);
}

.es-asst__subtitle {
	margin: 2px 0 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--es-silver);
}

.es-asst__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-block-start: -6px;
	margin-inline-end: -6px;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	line-height: 0;
	cursor: pointer;
	color: var(--es-silver);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--es-radius-pill);
	transition: color var(--es-transition), background-color var(--es-transition);
}

.es-asst__close:hover {
	color: var(--es-white);
	background-color: rgba(255, 255, 255, 0.06);
}

.es-asst__close:focus-visible {
	outline: 2px solid var(--es-focus);
	outline-offset: 2px;
}

.es-asst__close:focus:not(:focus-visible) { outline: none; }

/* --- privacy reminder --- */
.es-asst__privacy {
	margin: 0;
	padding: 10px 16px;
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var(--es-silver);
	background-color: rgba(255, 255, 255, 0.03);
	border-block-end: 1px solid var(--es-border-on-dark);
}

/* --- log --- */
.es-asst__log {
	flex: 1 1 auto;
	min-height: 120px;
	padding: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;   /* contains scroll without locking the page */
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.es-asst__log:focus-visible {
	outline: 2px solid var(--es-focus);
	outline-offset: -2px;
}

.es-asst__row { display: flex; }
.es-asst__row--visitor { justify-content: flex-end; }
.es-asst__row--assistant { justify-content: flex-start; }

.es-asst__bubble {
	max-width: 86%;
	padding: 10px 13px;
	font-size: 0.875rem;
	line-height: 1.6;
	border-radius: var(--es-radius-bubble);
	border: 1px solid var(--es-border-on-dark);
	overflow-wrap: anywhere;   /* very long input cannot overflow the panel */
	text-align: start;
}

.es-asst__bubble--assistant {
	color: var(--es-white);
	background-color: var(--es-navy-raised);
	border-start-start-radius: 4px;
}

.es-asst__bubble--visitor {
	color: var(--es-navy);
	background-color: #E8EDF4;
	border-color: transparent;
	border-start-end-radius: 4px;
}

/* Restricted / error replies carry a text badge as well as a border change,
   so state is never signalled by colour alone. */
.es-asst__bubble--restricted {
	border-color: var(--es-border-on-dark-strong);
	border-inline-start: 3px solid var(--es-silver);
}

.es-asst__badge {
	display: inline-block;
	margin-block-end: 6px;
	padding: 2px 7px;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--es-navy);
	background-color: var(--es-silver);
	border-radius: 4px;
}

.es-asst__text { display: block; white-space: pre-wrap; }

/* --- thinking indicator --- */
.es-asst__dots { display: inline-flex; gap: 4px; align-items: center; height: 1.6em; }

.es-asst__dots i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--es-silver);
	animation: es-asst-pulse 1s ease-in-out infinite;
}

.es-asst__dots i:nth-child(2) { animation-delay: 0.15s; }
.es-asst__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes es-asst-pulse {
	0%, 100% { opacity: 0.3; }
	50%      { opacity: 1; }
}

/* --- sources --- */
.es-asst__sources {
	margin-block-start: 8px;
	padding-block-start: 8px;
	font-size: 0.75rem;
	color: var(--es-silver);
	border-block-start: 1px solid var(--es-border-on-dark);
}

.es-asst__sources-label { color: var(--es-silver); }

.es-asst__source-link {
	color: var(--es-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.es-asst__source-link:focus-visible {
	outline: 2px solid var(--es-focus);
	outline-offset: 2px;
}

/* --- chips --- */
.es-asst__chipzone { padding: 0 16px; }
.es-asst__chipzone:empty { display: none; }

.es-asst__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-block-end: 12px;
}

.es-asst__chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 7px 13px;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.3;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	color: var(--es-white);
	background-color: transparent;
	border: 1px solid var(--es-border-on-dark-strong);
	border-radius: var(--es-radius-pill);
	transition: background-color var(--es-transition), border-color var(--es-transition);
}

.es-asst__chip:hover {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: var(--es-silver);
}

.es-asst__chip:focus-visible {
	outline: 2px solid var(--es-focus);
	outline-offset: 2px;
}

.es-asst__chip:focus:not(:focus-visible) { outline: none; }

.es-asst__chip--action {
	background-color: rgba(20, 115, 230, 0.12);
	border-color: rgba(20, 115, 230, 0.55);
}

.es-asst__chip--action::after {
	content: "";
	display: inline-block;
	inline-size: 0;
	block-size: 0;
	margin-inline-start: 7px;
	border-block: 3px solid transparent;
	border-inline-start: 4px solid currentColor;
	border-inline-end: 0;
}

/* --- composer --- */
.es-asst__composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 16px;
	border-block-start: 1px solid var(--es-border-on-dark);
	background-color: var(--es-navy-deep);
}

.es-asst__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	max-height: 120px;
	padding: 11px 12px;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: start;
	resize: none;
	color: var(--es-white);
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--es-border-on-dark-strong);
	border-radius: 8px;
}

.es-asst__input::placeholder { color: #7B8CA3; }

.es-asst__input:focus-visible {
	outline: 2px solid var(--es-focus);
	outline-offset: 1px;
	border-color: var(--es-focus);
}

.es-asst__input[aria-invalid="true"] { border-color: var(--es-silver); }

.es-asst__send {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	line-height: 0;
	cursor: pointer;
	color: var(--es-white);
	background-color: var(--es-focus);
	border: 1px solid var(--es-focus);
	border-radius: 8px;
	transition: background-color var(--es-transition), opacity var(--es-transition);
}

.es-asst__send:hover:not(:disabled) { background-color: #2C86F0; }

.es-asst__send:disabled { opacity: 0.45; cursor: default; }

.es-asst__send:focus-visible {
	outline: 2px solid var(--es-focus);
	outline-offset: 2px;
}

.es-asst__send:focus:not(:focus-visible) { outline: none; }

/* --- meta row --- */
.es-asst__meta {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	padding: 0 16px 12px;
	background-color: var(--es-navy-deep);
}

.es-asst__meta:not(:has(> *:not([hidden]):not(:empty))) { padding-block-end: 0; }

.es-asst__error {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #F2C9A0;   /* warm, legible on navy; paired with text, not colour alone */
}

.es-asst__error:empty { display: none; }

.es-asst__counter {
	margin: 0;
	margin-inline-start: auto;
	font-size: 0.6875rem;
	color: var(--es-silver);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   MOBILE - near-full-screen sheet
   No body scroll locking: the log contains its own scroll with
   overscroll-behavior, which is compatible with the production
   scroll-integrity watchdog.
   ========================================================================== */

@media (max-width: 767px) {

	/* Near-full-screen sheet, but deliberately inset BELOW the site header.
	   The agreed stacking contract puts the header at 999 and this panel at
	   940, so a panel pinned to the top of the viewport would have its own
	   header - and therefore its close button - covered by the site header.
	   That was observed in mobile QA. Reserving the header height keeps the
	   close control reachable without breaking the contract or hiding the
	   site navigation.
	   --es-header-height is supplied by the production token layer (60px at
	   this breakpoint); the fallback matches it for the isolated prototype. */
	.es-asst__panel {
		inset-block-start: calc(var(--es-header-height, 60px) + 8px);
		inset-block-end: 8px;
		inset-inline: 8px;
		width: auto;
		max-width: none;
		block-size: auto;
		max-height: none;
		border-radius: 14px;
	}

	.es-asst__bubble { max-width: 90%; font-size: 0.9375rem; }

	.es-asst__chip { min-height: 44px; font-size: 0.875rem; }

	/* Launcher stays bottom inline-end; Back-to-Top takes inline-start
	   on mobile per the agreed fixed-UI contract. */
	.es-asst__launcher { --es-launcher-size: 52px; }
}

/* Short landscape: the sheet must not become unusable. */
@media (max-height: 420px) {

	.es-asst__panel {
		inset-block-start: calc(var(--es-header-height, 60px) + 6px);
		inset-block-end: 6px;
		block-size: auto;
		max-height: none;
	}

	.es-asst__privacy { padding-block: 6px; }
	.es-asst__header { padding-block: 10px 8px; }
	.es-asst__log { min-height: 60px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.es-asst__launcher,
	.es-asst__close,
	.es-asst__chip,
	.es-asst__send {
		transition: none;
	}

	.es-asst__launcher:hover { transform: none; }

	.es-asst__dots i { animation: none; opacity: 0.7; }
}

/* ==========================================================================
   HIGH-CONTRAST / FORCED COLOURS
   ========================================================================== */

@media (forced-colors: active) {

	.es-asst__launcher,
	.es-asst__panel,
	.es-asst__bubble,
	.es-asst__chip,
	.es-asst__input,
	.es-asst__send {
		border: 1px solid CanvasText;
	}
}

/* =========================================================================
   ES-ASST ISOLATION HARDENING — v1.0.1 (visual only)
   -------------------------------------------------------------------------
   WHY: the plugin stylesheet is enqueued 7th of 33; oceanwp/style.min.css,
   oceanwp/a11y.min.css, the child theme tokens.css and the child style.css
   all load AFTER it. Global `button` / `textarea` rules therefore win at
   equal specificity against every chatbot control, which is what produced
   bright-blue blank rectangles, oversized starter chips, 14px composer text
   and stacked focus outlines on the live site.
   HOW: component-scoped `html body .es-asst <tag>.<class>` selectors
   (0,2,2+) plus selective !important ONLY on the properties hostile global
   rules actually set. Scope never leaves `.es-asst`; no site-wide rule is
   introduced; no behaviour, markup, engine or privacy surface is touched.
   ========================================================================= */

/* --- containment --------------------------------------------------------- */
html body .es-asst,
html body .es-asst *,
html body .es-asst *::before,
html body .es-asst *::after {
	box-sizing: border-box;
}

html body .es-asst button,
html body .es-asst textarea {
	margin: 0;
	font-family: inherit;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	text-indent: 0;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	width: auto;
}

html body .es-asst button:hover,
html body .es-asst button:active {
	background-image: none;
	text-decoration: none;
	transform: none;
}

/* --- icon protection ----------------------------------------------------- */
html body .es-asst .es-asst__icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
	color: inherit;
	pointer-events: none;
}

html body .es-asst .es-asst__icon svg {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 1 !important;
	visibility: visible !important;
	vertical-align: middle;
}

/* --- launcher ------------------------------------------------------------ */
html body .es-asst button.es-asst__launcher {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: #FFFFFF !important;
	background-color: #0A2540 !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 999px !important;
	box-shadow: 0 10px 28px rgba(10, 37, 64, 0.34) !important;
	overflow: visible;
	cursor: pointer;
}

html body .es-asst button.es-asst__launcher[hidden] {
	display: none !important;
}

html body .es-asst button.es-asst__launcher .es-asst__icon {
	width: 26px;
	height: 26px;
}

html body .es-asst button.es-asst__launcher:hover {
	color: #FFFFFF !important;
	background-color: #0E3257 !important;
	border-color: rgba(255, 255, 255, 0.34) !important;
}

/* --- close --------------------------------------------------------------- */
html body .es-asst button.es-asst__close {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: #FFFFFF !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	cursor: pointer;
}

html body .es-asst button.es-asst__close .es-asst__icon {
	width: 20px;
	height: 20px;
}

html body .es-asst button.es-asst__close:hover {
	background-color: rgba(255, 255, 255, 0.10) !important;
	border-color: rgba(255, 255, 255, 0.24) !important;
}

/* --- send ---------------------------------------------------------------- */
html body .es-asst button.es-asst__send {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: #FFFFFF !important;
	background-color: #1473E6 !important;
	background-image: none !important;
	border: 1px solid #1473E6 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	cursor: pointer;
}

html body .es-asst button.es-asst__send .es-asst__icon {
	width: 22px;
	height: 22px;
}

html body .es-asst button.es-asst__send:hover:not(:disabled) {
	background-color: #0F63CC !important;
	border-color: #0F63CC !important;
}

html body .es-asst button.es-asst__send:disabled {
	opacity: 0.45 !important;
	cursor: not-allowed;
}

/* --- starter / action chips ---------------------------------------------- */
html body .es-asst button.es-asst__chip {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	max-width: 100%;
	min-height: 44px !important;
	padding: 9px 14px !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	text-align: left;
	white-space: normal;
	color: #E8EDF4 !important;
	background-color: rgba(255, 255, 255, 0.045) !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.20) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	cursor: pointer;
}

html body .es-asst button.es-asst__chip:hover {
	color: #FFFFFF !important;
	background-color: rgba(255, 255, 255, 0.09) !important;
	border-color: rgba(255, 255, 255, 0.34) !important;
}

html body .es-asst button.es-asst__chip--action {
	color: #FFFFFF !important;
	background-color: rgba(20, 115, 230, 0.22) !important;
	border-color: rgba(92, 165, 245, 0.78) !important;
}

html body .es-asst button.es-asst__chip--action:hover {
	background-color: rgba(20, 115, 230, 0.34) !important;
	border-color: #7FBAF8 !important;
}

/* --- composer ------------------------------------------------------------ */
html body .es-asst textarea.es-asst__input {
	width: 100%;
	min-height: 52px !important;
	max-height: 140px;
	padding: 14px !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: #FFFFFF !important;
	background-color: rgba(255, 255, 255, 0.06) !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	resize: none;
	-webkit-text-size-adjust: 100%;
}

html body .es-asst textarea.es-asst__input::placeholder {
	color: #93A3B8 !important;
	opacity: 1;
}

/* --- message typography -------------------------------------------------- */
html body .es-asst .es-asst__bubble {
	font-size: 1rem !important;
	line-height: 1.55 !important;
}

html body .es-asst .es-asst__subtitle {
	font-size: 0.78125rem !important;
	line-height: 1.45 !important;
	color: #A8B3C2 !important;
}

/* --- single focus ring ---------------------------------------------------
   The child theme applies `outline: 3px solid var(--es-focus)` with
   `outline-offset: 3px` to every a/button/input/textarea/[tabindex] on
   :focus-visible, and OceanWP's a11y stylesheet adds its own. Inside the
   assistant that stacked into two and three visible rings. One ring is
   defined here; keyboard focus remains clearly visible.
   ------------------------------------------------------------------------- */
html body .es-asst button:focus,
html body .es-asst textarea:focus,
html body .es-asst [tabindex]:focus {
	outline: none !important;
	box-shadow: none !important;
}

html body .es-asst button:focus-visible,
html body .es-asst textarea:focus-visible,
html body .es-asst [tabindex]:focus-visible {
	outline: 2px solid #5AA9FF !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

html body .es-asst button.es-asst__launcher:focus-visible,
html body .es-asst button.es-asst__close:focus-visible,
html body .es-asst button.es-asst__chip:focus-visible {
	border-radius: 999px !important;
}

html body .es-asst button.es-asst__send:focus-visible,
html body .es-asst textarea.es-asst__input:focus-visible {
	border-radius: 10px !important;
}

/* --- small screens ------------------------------------------------------- */
@media (max-width: 600px) {

	html body .es-asst button.es-asst__launcher {
		width: 54px !important;
		height: 54px !important;
		min-width: 54px !important;
		min-height: 54px !important;
	}

	html body .es-asst button.es-asst__chip {
		font-size: 1rem !important;
	}

	html body .es-asst textarea.es-asst__input {
		font-size: 16px !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	html body .es-asst button,
	html body .es-asst textarea {
		transition: none !important;
	}
}

/* =========================================================================
   ES-ASST ANCHOR HARDENING - v1.0.1 (visual only)
   -------------------------------------------------------------------------
   The contextual actions ("Explore Services", "Contact EdgeSphere") and the
   source links are rendered as <a> elements, not <button> - see
   assets/js/chatbot.js, which builds them with
   node('a', 'es-asst__chip es-asst__chip--action', ...). The button-scoped
   block above therefore does not reach them, and the Elementor kit's global
   link colour plus the theme's global a:focus-visible outline were winning
   against the component's own (0,1,0) rules. Same remedy, anchor scope.
   ========================================================================= */

html body .es-asst a.es-asst__chip {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	max-width: 100%;
	min-height: 44px !important;
	padding: 9px 14px !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	text-align: left;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: normal;
	color: #E8EDF4 !important;
	background-color: rgba(255, 255, 255, 0.045) !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.20) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	cursor: pointer;
}

html body .es-asst a.es-asst__chip--action {
	color: #FFFFFF !important;
	background-color: rgba(20, 115, 230, 0.22) !important;
	border-color: rgba(92, 165, 245, 0.78) !important;
}

html body .es-asst a.es-asst__chip:hover,
html body .es-asst a.es-asst__chip:active {
	color: #FFFFFF !important;
	background-color: rgba(255, 255, 255, 0.09) !important;
	border-color: rgba(255, 255, 255, 0.34) !important;
	text-decoration: none !important;
}

html body .es-asst a.es-asst__chip--action:hover,
html body .es-asst a.es-asst__chip--action:active {
	background-color: rgba(20, 115, 230, 0.34) !important;
	border-color: #7FBAF8 !important;
}

html body .es-asst a.es-asst__source-link {
	color: #D7E4F5 !important;
	background-color: transparent !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	font-size: inherit !important;
}

html body .es-asst a.es-asst__source-link:hover {
	color: #FFFFFF !important;
}

html body .es-asst a:focus {
	outline: none !important;
	box-shadow: none !important;
}

html body .es-asst a:focus-visible {
	outline: 2px solid #5AA9FF !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

html body .es-asst a.es-asst__chip:focus-visible {
	border-radius: 999px !important;
}

@media (max-width: 600px) {

	html body .es-asst a.es-asst__chip {
		font-size: 1rem !important;
	}
}

/* =========================================================================
   FIXEDUI-V102-LAUNCHER - stack position and Cyber Teal treatment
   -------------------------------------------------------------------------
   The launcher is the upper member of the shared floating stack defined in
   the child theme's tokens.css: Back to Top keeps the corner, the launcher
   sits one gap above it, the panel one gap above that. Fallback values match
   the token defaults so the plugin still renders correctly on a site that
   does not ship that token layer.

   Teal rather than navy so the assistance control reads as a distinct
   affordance next to the navy utility. The icon is navy on teal (8.4:1) and
   white on the darker hover teal (3.6:1), both clear of the 3:1 required for
   a graphical control.

   !important appears only on the properties the Elementor global kit rule
   `.elementor-kit-6 button` (0,1,1) also sets - background-color, colour,
   box-shadow, size. The positioning properties are uncontested and carry
   none.
   ========================================================================= */

html body .es-asst button.es-asst__launcher {
	inset-block-end: calc(
		var(--es-fixedui-base, 24px) +
		var(--es-fixedui-backtotop, 44px) +
		var(--es-fixedui-gap, 16px)
	);
	inset-inline-end: var(--es-fixedui-right, 24px);

	width: var(--es-fixedui-launcher, 56px) !important;
	height: var(--es-fixedui-launcher, 56px) !important;
	min-width: var(--es-fixedui-launcher, 56px) !important;
	min-height: var(--es-fixedui-launcher, 56px) !important;

	color: #0A2540 !important;
	background-color: var(--es-teal, #19D3C5) !important;
	border: 1px solid rgba(10, 37, 64, 0.12) !important;
	box-shadow: 0 10px 26px rgba(10, 37, 64, 0.26) !important;
}

html body .es-asst button.es-asst__launcher .es-asst__icon {
	width: 26px;
	height: 26px;
}

html body .es-asst button.es-asst__launcher:hover {
	color: #FFFFFF !important;
	background-color: var(--es-teal-ink, #0E8C82) !important;
	border-color: rgba(10, 37, 64, 0.18) !important;
	box-shadow: 0 12px 30px rgba(10, 37, 64, 0.32) !important;
}

/* Two-tone ring: navy reads against the light page sections, the white halo
   reads against the navy ones. One ring, visible everywhere. */
html body .es-asst button.es-asst__launcher:focus-visible {
	outline: 2px solid #0A2540 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.72),
		0 10px 26px rgba(10, 37, 64, 0.26) !important;
}

/* The panel clears the whole stack on tablet and up. Below 768px it is a
   near-full-screen sheet anchored under the site header, so that rule is left
   exactly as it is. */
@media (min-width: 768px) {

	html body .es-asst .es-asst__panel {
		inset-block-end: calc(
			var(--es-fixedui-base, 24px) +
			var(--es-fixedui-backtotop, 44px) +
			var(--es-fixedui-gap, 16px) +
			var(--es-fixedui-launcher, 56px) +
			var(--es-fixedui-gap, 16px)
		);
		inset-inline-end: var(--es-fixedui-right, 24px);
		max-width: calc(100vw - (var(--es-fixedui-inline, 24px) * 2));
		max-height: min(620px, calc(
			100vh -
			var(--es-fixedui-base, 24px) -
			var(--es-fixedui-backtotop, 44px) -
			var(--es-fixedui-gap, 16px) -
			var(--es-fixedui-launcher, 56px) -
			var(--es-fixedui-gap, 16px) -
			var(--es-fixedui-bottom, 24px)
		));
	}
}

/* =========================================================================
   V103-TYPOGRAPHY - real pixel sizes for the panel
   -------------------------------------------------------------------------
   ROOT CAUSE: OceanWP's style.min.css sets `html { font-size: 62.5% }`, so
   1rem on this site is 10px, not 16px. This stylesheet was authored and
   verified as an isolated prototype where 1rem was 16px, so every rem-based
   size in the panel has been rendering at 62.5% of its intended value:
   message bubbles at 10px, quick replies at 9.4px, the privacy strip at
   6.9px. That is why the panel read as unusably small, and why the v1.0.1
   "bump to 1rem" did not help - it bumped them to 10px.

   Every text size in the component is restated here in px so the root
   scaling cannot reach it again. Sizes follow the agreed scale: messages
   15px desktop / 16px mobile, quick replies 14px, heading 17px, composer
   16px (also prevents iOS input zoom), line height 1.5-1.55.
   ========================================================================= */

html body .es-asst .es-asst__title {
	font-size: 17px !important;
	line-height: 1.3 !important;
}

html body .es-asst .es-asst__subtitle {
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: #A8B3C2 !important;
}

html body .es-asst .es-asst__privacy {
	font-size: 12px !important;
	line-height: 1.5 !important;
	padding: 10px 16px !important;
}

html body .es-asst .es-asst__bubble {
	font-size: 15px !important;
	line-height: 1.55 !important;
	padding: 11px 14px !important;
}

html body .es-asst .es-asst__badge {
	font-size: 11px !important;
}

html body .es-asst .es-asst__sources {
	font-size: 13px !important;
	line-height: 1.5 !important;
}

html body .es-asst .es-asst__error {
	font-size: 13px !important;
	line-height: 1.5 !important;
}

html body .es-asst .es-asst__counter {
	font-size: 12px !important;
}

html body .es-asst button.es-asst__chip,
html body .es-asst a.es-asst__chip {
	font-size: 14px !important;
	line-height: 1.35 !important;
	min-height: 40px !important;
	padding: 8px 14px !important;
}

html body .es-asst textarea.es-asst__input {
	font-size: 16px !important;
	line-height: 1.5 !important;
}

@media (max-width: 767px) {

	html body .es-asst .es-asst__bubble {
		font-size: 16px !important;
	}

	html body .es-asst button.es-asst__chip,
	html body .es-asst a.es-asst__chip {
		font-size: 14px !important;
		min-height: 44px !important;
	}

	html body .es-asst textarea.es-asst__input {
		font-size: 16px !important;
	}
}

/* =========================================================================
   V103-LAYOUT - three-part panel, viewport fit, accent and affordances
   -------------------------------------------------------------------------
   The panel is a flex column, but only the log declared a flex value. The
   header, privacy strip, quick replies and composer all inherited
   flex-shrink: 1, so whenever the content was taller than the panel the
   browser took the difference out of them - squeezing the header (and its
   close control) and the composer - while the log sat at its 120px floor.
   Pinning the chrome at flex: 0 0 auto and letting the log absorb the
   difference is the fix; the log also loses its 120px floor, which was what
   forced the squeeze in the first place.

   The panel also had no definite height, so it only ever grew to its
   content - 517px of an available 588-680px - which is why the message area
   stayed small no matter how much room there was.
   ========================================================================= */

/* --- three-part layout --------------------------------------------------- */
html body .es-asst .es-asst__header,
html body .es-asst .es-asst__privacy,
html body .es-asst .es-asst__composer,
html body .es-asst .es-asst__meta {
	flex: 0 0 auto;
}

html body .es-asst .es-asst__log {
	flex: 1 1 0;
	min-height: 96px;
	padding: 16px !important;
	gap: 12px;
}

/* Quick replies keep their natural height and only scroll on a short
   viewport, so the composer is never pushed out of view. */
html body .es-asst .es-asst__chipzone {
	flex: 0 1 auto;
	min-height: 0;
	max-block-size: 40%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: 4px !important;
}

/* --- assistant mark in the header ---------------------------------------- */
html body .es-asst .es-asst__header::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background-color: var(--es-teal, #19D3C5);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 17px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7A8.5 8.5 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3 8.5 8.5 0 0 1 21 11.5z'/%3E%3C/svg%3E");
}

/* --- close control: read it as a control, not a stray glyph -------------- */
html body .es-asst button.es-asst__close {
	background-color: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
}

html body .es-asst button.es-asst__close:hover {
	background-color: rgba(255, 255, 255, 0.14) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
}

/* --- send: the accent, matched to the launcher --------------------------- */
html body .es-asst button.es-asst__send {
	color: #0A2540 !important;
	background-color: var(--es-teal, #19D3C5) !important;
	border-color: var(--es-teal, #19D3C5) !important;
	border-radius: 10px !important;
}

html body .es-asst button.es-asst__send:hover:not(:disabled) {
	color: #FFFFFF !important;
	background-color: var(--es-teal-ink, #0E8C82) !important;
	border-color: var(--es-teal-ink, #0E8C82) !important;
}

/* =========================================================================
   V103-VIEWPORT - panel height, vertical anchoring, safe areas
   -------------------------------------------------------------------------
   Back to Top is suppressed while the chat is open, so its slot is free:
   the launcher drops into it and the panel anchors one gap above the
   launcher instead of above the whole stack. That returns 60px of height
   and removes the dead band the panel was floating on. The launcher glides
   rather than jumps, and holds still under reduced motion.

   dvh first with a vh fallback, so mobile browsers that shrink the visual
   viewport for their own chrome do not clip the composer.
   ========================================================================= */

@media (min-width: 768px) {

	html body .es-asst .es-asst__panel {
		--es-panel-offset: calc(
			var(--es-fixedui-base, 24px) +
			var(--es-fixedui-launcher, 56px) +
			var(--es-fixedui-gap, 16px)
		);
		inset-block-end: var(--es-panel-offset);
		width: 400px;
		block-size: min(680px, calc(100vh - var(--es-panel-offset) - var(--es-header-height, 72px) - 16px));
		block-size: min(680px, calc(100dvh - var(--es-panel-offset) - var(--es-header-height, 72px) - 16px));
		max-block-size: min(680px, calc(100vh - var(--es-panel-offset) - var(--es-header-height, 72px) - 16px));
		max-block-size: min(680px, calc(100dvh - var(--es-panel-offset) - var(--es-header-height, 72px) - 16px));
	}

	html body.es-chat-open .es-asst button.es-asst__launcher {
		inset-block-end: var(--es-fixedui-base, 24px);
	}

	html body .es-asst button.es-asst__launcher {
		transition: background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
			color 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
			border-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
			box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
			inset-block-end 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}
}

@media (max-width: 767px) {

	html body .es-asst .es-asst__panel {
		inset-block-start: max(8px, env(safe-area-inset-top, 0px));
		inset-block-end: max(8px, env(safe-area-inset-bottom, 0px));
		inset-inline-start: max(8px, env(safe-area-inset-left, 0px));
		inset-inline-end: max(8px, env(safe-area-inset-right, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {

	html body .es-asst button.es-asst__launcher {
		transition: none !important;
	}
}

/* =========================================================================
   V104-STACKING - free the assistant from the body-level stacking trap
   -------------------------------------------------------------------------
   ROOT CAUSE of the unreachable close control. The child theme carries

       .ehf-header > * { position: relative; z-index: 1; }

   and `ehf-header` is a class on <body>, not on the header element, so that
   rule matches EVERY direct child of body - including this plugin's root,
   which is appended to body. The root therefore became a stacking context
   at z-index 1, and every z-index inside it (launcher 920, panel 940) was
   resolved INSIDE that context. Against the site header's z-index 99 the
   whole assistant lost, so on mobile - where the panel and the 127px site
   header overlap - the header painted over the panel's own header and
   swallowed the clicks: document.elementFromPoint over the close button
   returned the GTranslate selector, not the button.

   z-index: auto removes the stacking context while leaving position:
   relative in place, so absolutely positioned descendants keep their
   containing block and the component's own z-index contract (backtotop 900,
   launcher 920, panel 940, consent banner 1300) finally applies against the
   rest of the page as designed.

   The theme rule itself is left alone: it is site-wide and outside this
   brief, but it is worth narrowing to the real header in its own pass.
   ========================================================================= */

html body .es-asst {
	z-index: auto;
}

/* =========================================================================
   V105-MOBILE-VIEWPORT - lay the mobile sheet out against the VISUAL viewport
   -------------------------------------------------------------------------
   position: fixed boxes are laid out against the LAYOUT viewport. On Android
   Chrome the keyboard shrinks only the VISUAL viewport, and the browser's
   own bottom chrome overlays the layout viewport the same way - so the
   bottom of this sheet, which is the composer, was being covered in both
   cases. dvh tracks browser chrome but not the keyboard, so it cannot fix
   this on its own.

   chatbot.js publishes --es-asst-vv-height and --es-asst-vv-top from
   window.visualViewport while the panel is open, and the sheet is laid out
   from those: top from the visual viewport's offset, height from its
   height. The fallbacks (100dvh, then 100vh) keep the sheet correct on any
   engine without visualViewport, and the properties are removed on close.
   ========================================================================= */

@media (max-width: 767px) {

	html body .es-asst .es-asst__panel {
		--es-asst-edge: 8px;
		--es-asst-inset-top: max(var(--es-asst-edge), env(safe-area-inset-top, 0px));
		--es-asst-inset-bottom: max(var(--es-asst-edge), env(safe-area-inset-bottom, 0px));

		inset-block-start: calc(var(--es-asst-vv-top, 0px) + var(--es-asst-inset-top));
		inset-block-end: auto;
		inset-inline-start: max(var(--es-asst-edge), env(safe-area-inset-left, 0px));
		inset-inline-end: max(var(--es-asst-edge), env(safe-area-inset-right, 0px));

		block-size: calc(var(--es-asst-vv-height, 100vh) - var(--es-asst-inset-top) - var(--es-asst-inset-bottom));
		block-size: calc(var(--es-asst-vv-height, 100dvh) - var(--es-asst-inset-top) - var(--es-asst-inset-bottom));
		max-block-size: none;
	}

	/* Keyboard open: the browsing affordances stand down so the conversation
	   and the composer keep the height that is left. Both return on blur. */
	html body.es-chat-kb .es-asst .es-asst__privacy,
	html body.es-chat-kb .es-asst .es-asst__chipzone {
		display: none;
	}

	html body.es-chat-kb .es-asst .es-asst__header {
		padding-block: 10px 8px;
	}
}

/* =========================================================================
   V105-COMPOSER - mobile composer and suggestion density
   -------------------------------------------------------------------------
   The sheet already insets itself by max(8px, safe-area-inset-bottom), so
   the composer needs no safe-area padding of its own - adding it there
   would double-count and leave dead space on devices with no inset.
   Send matches the input's height exactly so the pair reads as one
   control rather than a button parked against the edge.
   ========================================================================= */

@media (max-width: 767px) {

	html body .es-asst .es-asst__composer {
		align-items: flex-end;
		gap: 10px;
		padding: 10px 12px;
	}

	html body .es-asst textarea.es-asst__input {
		min-height: 52px !important;
		max-height: 120px;
		padding: 14px !important;
	}

	html body .es-asst button.es-asst__send {
		width: 52px !important;
		height: 52px !important;
		min-width: 52px !important;
		min-height: 52px !important;
	}

	html body .es-asst .es-asst__log {
		padding: 14px 12px !important;
	}

	html body .es-asst .es-asst__chipzone {
		max-block-size: 46%;
		padding: 2px 12px !important;
	}

	html body .es-asst button.es-asst__chip,
	html body .es-asst a.es-asst__chip {
		min-height: 44px !important;
		padding: 8px 13px !important;
	}
}

/* =========================================================================
   V105-TABLET-KEYBOARD - the same correction above the mobile breakpoint
   -------------------------------------------------------------------------
   A tablet in portrait is 768px or wider, so it takes the desktop rules -
   including the fixed bottom anchor - while still having an on-screen
   keyboard. --es-asst-kb-inset is however much of the layout viewport the
   visual viewport no longer covers at the bottom: 0 on a desktop with no
   keyboard, the keyboard's height on a tablet with one. The panel lifts by
   that amount and gives back the same amount of height.
   ========================================================================= */

@media (min-width: 768px) {

	html body .es-asst .es-asst__panel {
		--es-asst-kb-inset: max(0px, calc(
			100vh - var(--es-asst-vv-height, 100vh) - var(--es-asst-vv-top, 0px)
		));
		--es-asst-kb-inset: max(0px, calc(
			100dvh - var(--es-asst-vv-height, 100dvh) - var(--es-asst-vv-top, 0px)
		));

		inset-block-end: calc(var(--es-panel-offset) + var(--es-asst-kb-inset));

		block-size: min(680px, calc(100vh - var(--es-panel-offset) - var(--es-asst-kb-inset) - var(--es-header-height, 72px) - 16px));
		block-size: min(680px, calc(100dvh - var(--es-panel-offset) - var(--es-asst-kb-inset) - var(--es-header-height, 72px) - 16px));
		max-block-size: min(680px, calc(100vh - var(--es-panel-offset) - var(--es-asst-kb-inset) - var(--es-header-height, 72px) - 16px));
		max-block-size: min(680px, calc(100dvh - var(--es-panel-offset) - var(--es-asst-kb-inset) - var(--es-header-height, 72px) - 16px));
	}
}