#oasa-widget-root {
	--oasa-primary: #4F46E5;
	--oasa-bg: #fff;
	--oasa-surface: #f7f7fb;
	--oasa-text: #1f2937;
	--oasa-border: #e5e7eb;
	--oasa-assistant-bg: #fff;
	/* Distinct from --oasa-border/--oasa-text on purpose: several rules
	   below (input/mic/attach/lead-form borders, the lead-form title and
	   cancel button) were, before this feature, a slightly different
	   literal shade than what --oasa-border/--oasa-text resolve to
	   (#d1d5db / #374151, vs. #e5e7eb / #1f2937). Pointing those rules at
	   --oasa-border/--oasa-text directly would have made their var()
	   fallback dead code — the fallback only applies when the property is
	   unset, and these are always set — silently shifting their color
	   the moment the properties below start existing at all, in every
	   existing light-mode install, not just ones that opt into dark mode. */
	--oasa-input-border: #d1d5db;
	--oasa-text-muted: #374151;
	--oasa-lead-bg: #fafafa;
	--oasa-bubble-radius: 14px;
	--oasa-bubble-tail-radius: 4px;
	position: fixed;
	bottom: 20px;
	z-index: 999999;
	font-family: var(--oasa-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	line-height: 1.45;
}

/* Widget theming v2 — dark mode. Three-layer pattern: the light values
   above are the unguarded default; this media-query block applies dark
   values only when the visitor's OS prefers dark AND the admin hasn't
   explicitly forced light (data-oasa-theme="light"); the block below it
   applies the same dark values whenever the admin explicitly forced dark,
   regardless of OS preference. widget.js sets data-oasa-theme to "light"/
   "dark" for those two explicit admin choices, and omits the attribute
   entirely for "auto" so this media query is the sole decider. */
@media (prefers-color-scheme: dark) {
	#oasa-widget-root:not([data-oasa-theme="light"]) {
		color-scheme: dark;
		--oasa-bg: #1f2937;
		--oasa-surface: #111827;
		--oasa-text: #f3f4f6;
		--oasa-border: #374151;
		--oasa-assistant-bg: #374151;
		--oasa-input-border: #374151;
		--oasa-text-muted: #d1d5db;
		--oasa-lead-bg: #111827;
	}
}

#oasa-widget-root[data-oasa-theme="dark"] {
	color-scheme: dark;
	--oasa-bg: #1f2937;
	--oasa-surface: #111827;
	--oasa-text: #f3f4f6;
	--oasa-border: #374151;
	--oasa-assistant-bg: #374151;
	--oasa-input-border: #374151;
	--oasa-text-muted: #d1d5db;
	--oasa-lead-bg: #111827;
}

#oasa-widget-root.oasa-position-bottom-right { right: 20px; }
#oasa-widget-root.oasa-position-bottom-left { left: 20px; }

/* Seasonal themes (0.22.5) — Winter/Spring/Summer/Autumn/Holiday. Purely
   decorative: only applied at all when widget.js sets the data-oasa-season
   attribute (config.seasonalTheme !== 'none'), so an unconfigured site's
   markup carries no such attribute and every rule below simply never
   matches — byte-identical to before this feature existed. --oasa-season-
   accent/--oasa-season-accent-soft are set by widget.js per season (see
   Widget::build_theme_config()); brand identity stays anchored because the
   header/launcher gradients blend FROM --oasa-primary rather than
   replacing it outright. */
#oasa-widget-root[data-oasa-season] .oasa-chat-header {
	background: linear-gradient(135deg, var(--oasa-primary), var(--oasa-season-accent, var(--oasa-primary)));
}

#oasa-widget-root[data-oasa-season] .oasa-launcher {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 0 0 3px var(--oasa-season-accent-soft, transparent);
}

#oasa-widget-root[data-oasa-season] .oasa-chat-window::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--oasa-season-accent, transparent), var(--oasa-season-accent-soft, transparent));
}

.oasa-season-badge {
	font-size: 14px;
	line-height: 1;
	margin-left: 2px;
}

.oasa-season-badge:empty { display: none; }

.oasa-launcher-season-badge {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.oasa-launcher-season-badge:empty { display: none; }

/* Animated header + message background, layered on top of the static
   seasonal accent above. Each gated by its own data attribute (set by
   widget.js only when that toggle is on AND the visitor hasn't asked for
   reduced motion), so turning a toggle off — or off system-wide via
   prefers-reduced-motion below — renders exactly like the plain static
   0.22.5 accent, byte-for-byte. */
#oasa-widget-root[data-oasa-season][data-oasa-season-anim-header] .oasa-chat-header {
	background-size: 220% 220%;
	animation: oasa-season-shift 6s ease-in-out infinite;
}

#oasa-widget-root[data-oasa-season-anim-bg] .oasa-messages {
	position: relative;
	/* Same fix as .oasa-chat-header above — contains the particle layer's
	   z-index:-1 locally instead of it escaping to #oasa-widget-root's
	   stacking context and rendering behind .oasa-chat-window's background. */
	isolation: isolate;
	background: linear-gradient(160deg, var(--oasa-season-accent-soft, #fff), var(--oasa-season-accent, #fff));
	background-size: 200% 200%;
	animation: oasa-season-shift 8s ease-in-out infinite;
}

@keyframes oasa-season-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Particle layer. position:relative on .oasa-messages above establishes
   the containing block for inset:0 here. z-index:-1 guarantees this
   paints below every normal-flow child (message bubbles included)
   regardless of DOM order, so bubbles' existing opaque backgrounds
   (.oasa-msg-user/-assistant/-agent/-error) are never at risk of being
   covered — text legibility is inherited, not newly designed here. */
.oasa-season-particles {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.oasa-season-particle {
	position: absolute;
	top: -12px;
	animation-name: oasa-season-drift;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes oasa-season-drift {
	0%   { transform: translateY(-12px) rotate(0deg); opacity: 0; }
	10%  { opacity: 1; }
	100% { transform: translateY(420px) rotate(200deg); opacity: 0.15; }
}

/* Header particles reuse .oasa-season-particles/.oasa-season-particle above
   (hence sharing z-index:-1 — .oasa-chat-header's own overflow:hidden set
   above is what actually clips them, not stacking) but swap in a shorter
   drift distance sized to the header's own height (~62px) instead of the
   420px tuned for the much taller .oasa-messages panel — reusing the tall
   keyframe here would clip every particle after ~15% of its animation,
   i.e. it would barely be visible before disappearing off the bottom edge. */
.oasa-header-season-particles .oasa-season-particle {
	animation-name: oasa-season-drift-header;
}

@keyframes oasa-season-drift-header {
	0%   { transform: translateY(-8px) rotate(0deg); opacity: 0; }
	15%  { opacity: 1; }
	100% { transform: translateY(70px) rotate(200deg); opacity: 0; }
}

.oasa-season-particle-winter  { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.oasa-season-particle-spring  { width: 7px; height: 7px; border-radius: 50% 0 50% 50%; background: #ff9ec4; }
.oasa-season-particle-summer  { width: 5px; height: 5px; background: #ffb703; transform: rotate(45deg); }
.oasa-season-particle-autumn  { width: 8px; height: 8px; border-radius: 0 50% 50% 50%; background: #c1662f; }
.oasa-season-particle-holiday { width: 7px; height: 7px; background: #e0397a; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

@media (prefers-reduced-motion: reduce) {
	#oasa-widget-root[data-oasa-season-anim-header] .oasa-chat-header,
	#oasa-widget-root[data-oasa-season-anim-bg] .oasa-messages {
		animation: none;
	}
}

/* Several elements below (.oasa-chat-window, .oasa-lead-form, ...) declare
   their own `display` value for JS-toggled visibility. An author-stylesheet
   rule always wins over the browser's built-in `[hidden] { display: none }`
   default regardless of selector specificity, so without this rule those
   elements stay visible even while carrying the `hidden` attribute. */
[hidden] {
	display: none !important;
}

#oasa-widget-root button { font-family: inherit; }

.oasa-proactive-bubble {
	position: absolute;
	bottom: 76px;
	max-width: 240px;
	background: var(--oasa-bg, #fff);
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
	padding: 12px 30px 12px 14px;
	font-size: 13px;
	color: var(--oasa-text, #1f2937);
	animation: oasa-fade-in 0.25s ease;
}

.oasa-position-bottom-right .oasa-proactive-bubble { right: 0; }
.oasa-position-bottom-left .oasa-proactive-bubble { left: 0; }

.oasa-proactive-bubble p { margin: 0; }

.oasa-proactive-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: transparent;
	border: 0;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: #9ca3af;
}

@keyframes oasa-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.oasa-launcher {
	width: var(--oasa-launcher-size, 60px);
	height: var(--oasa-launcher-size, 60px);
	border-radius: 50%;
	border: 0;
	background: var(--oasa-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s ease;
	position: relative;
	overflow: visible;
}

/* Custom (image/Lottie) launcher icons fill the whole button rather than
   the ~26px glyph size the default chat/close SVGs use. */
.oasa-launcher-custom .oasa-icon-chat,
.oasa-launcher-custom .oasa-icon-chat img,
.oasa-launcher-custom .oasa-lottie-box {
	width: 100%;
	height: 100%;
}

.oasa-icon-chat { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.oasa-icon-chat img { object-fit: contain; border-radius: 50%; }

/* Default hover — kept as the pre-0.19.0 behaviour when no effect (or the
   "scale" effect, its equivalent) is selected. */
.oasa-hover-scale:hover,
.oasa-launcher:not([class*="oasa-hover-"]):hover { transform: scale(1.05); }

.oasa-hover-bounce:hover { animation: oasa-effect-bounce 0.7s ease infinite; }
.oasa-hover-pulse:hover { animation: oasa-effect-pulse 0.9s ease-in-out infinite; }
.oasa-hover-glow:hover { animation: oasa-effect-glow 1.1s ease-in-out infinite; }

.oasa-click-scale { animation: oasa-effect-click-scale 0.35s ease; }
.oasa-click-bounce { animation: oasa-effect-bounce 0.5s ease; }
.oasa-click-pulse { animation: oasa-effect-pulse 0.5s ease; }
.oasa-click-glow { animation: oasa-effect-glow 0.6s ease; }

.oasa-idle-pulse { animation: oasa-effect-pulse 1.1s ease-in-out; }

@keyframes oasa-effect-bounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-8px); }
	55% { transform: translateY(0); }
	75% { transform: translateY(-4px); }
}

@keyframes oasa-effect-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}

@keyframes oasa-effect-click-scale {
	0% { transform: scale(1); }
	40% { transform: scale(0.88); }
	100% { transform: scale(1); }
}

@keyframes oasa-effect-glow {
	0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
	50% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 0 22px 6px var(--oasa-primary); }
}

.oasa-chat-window {
	position: absolute;
	bottom: 76px;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 520px;
	max-height: calc(100vh - 140px);
	background: var(--oasa-bg, #fff);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.oasa-position-bottom-right .oasa-chat-window { right: 0; }
.oasa-position-bottom-left .oasa-chat-window { left: 0; }

.oasa-chat-header {
	background: var(--oasa-primary);
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	/* Without this, .oasa-season-particles' z-index:-1 (below) has no local
	   stacking context to be scoped to (position:relative alone doesn't
	   create one) and escapes up to #oasa-widget-root's — where it renders
	   behind .oasa-chat-window's own opaque background instead of just
	   behind this header's text, making every particle invisible. */
	isolation: isolate;
}

.oasa-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.oasa-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.25);
	font-weight: 600;
}

.oasa-header-text { flex: 1; display: flex; flex-direction: column; }

.oasa-lang-select {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 5px;
	font-size: 12px;
	padding: 3px 6px;
	max-width: 90px;
}
.oasa-lang-select option { color: #111; }

.oasa-status { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 4px; }
.oasa-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; }
.oasa-status-dot.oasa-status-offline { background: #9ca3af; }

.oasa-header-close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 6px;
}

.oasa-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--oasa-surface, #f7f7fb);
}

.oasa-msg {
	max-width: 80%;
	padding: 9px 13px;
	border-radius: var(--oasa-bubble-radius, 14px);
	font-size: 14px;
	white-space: pre-wrap;
	word-break: break-word;
}

.oasa-msg-user { align-self: flex-end; background: var(--oasa-primary); color: #fff; border-bottom-right-radius: var(--oasa-bubble-tail-radius, 4px); }
.oasa-msg-assistant { align-self: flex-start; background: var(--oasa-assistant-bg, #fff); color: var(--oasa-text, #1f2937); border: 1px solid var(--oasa-border, #e5e7eb); border-bottom-left-radius: var(--oasa-bubble-tail-radius, 4px); }
.oasa-msg-error { align-self: flex-start; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.oasa-msg-agent { align-self: flex-start; background: var(--oasa-assistant-bg, #fff); color: var(--oasa-text, #1f2937); border: 1px solid var(--oasa-primary); border-bottom-left-radius: var(--oasa-bubble-tail-radius, 4px); }
.oasa-msg-author { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--oasa-primary); }
.oasa-msg-offline-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--oasa-text-muted); }

.oasa-sources { font-size: 11px; margin-top: 6px; opacity: 0.7; }
.oasa-sources a { color: inherit; }

.oasa-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 13px; }
.oasa-typing span {
	width: 6px; height: 6px; border-radius: 50%; background: #9ca3af;
	animation: oasa-bounce 1.2s infinite ease-in-out;
}
.oasa-typing span:nth-child(2) { animation-delay: 0.15s; }
.oasa-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes oasa-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

.oasa-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid var(--oasa-border, #e5e7eb);
	flex-shrink: 0;
}

#oasa-input {
	flex: 1;
	resize: none;
	border: 1px solid var(--oasa-input-border, #d1d5db);
	border-radius: 10px;
	padding: 8px 10px;
	font-size: 14px;
	max-height: 90px;
	font-family: inherit;
	background: var(--oasa-bg, #fff);
	color: var(--oasa-text, #1f2937);
}

.oasa-send-btn {
	background: var(--oasa-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.oasa-send-btn:disabled { opacity: 0.5; cursor: default; }

.oasa-mic-btn {
	background: transparent;
	color: var(--oasa-primary);
	border: 1px solid var(--oasa-input-border, #d1d5db);
	border-radius: 10px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.oasa-mic-btn:disabled { opacity: 0.5; cursor: default; }

.oasa-mic-btn.oasa-mic-recording {
	background: #ef4444;
	border-color: #ef4444;
	color: #fff;
	animation: oasa-mic-pulse 1.2s ease-in-out infinite;
}

@keyframes oasa-mic-pulse {
	0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
	70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.oasa-attach-btn {
	background: transparent;
	color: var(--oasa-primary);
	border: 1px solid var(--oasa-input-border, #d1d5db);
	border-radius: 10px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.oasa-attach-btn:disabled { opacity: 0.5; cursor: default; }

.oasa-footer-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 10px;
	flex-shrink: 0;
}

.oasa-footer-link {
	background: transparent;
	border: 0;
	color: var(--oasa-primary);
	font-size: 12px;
	cursor: pointer;
	padding: 2px;
}

.oasa-powered-by { font-size: 10px; color: #9ca3af; margin-left: auto; }

.oasa-lead-form {
	padding: 12px 14px;
	border-top: 1px solid var(--oasa-border, #e5e7eb);
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-shrink: 0;
	background: var(--oasa-lead-bg, #fafafa);
}

.oasa-lead-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--oasa-text-muted, #374151); }

.oasa-lead-form input {
	border: 1px solid var(--oasa-input-border, #d1d5db);
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 13px;
	font-family: inherit;
	background: var(--oasa-bg, #fff);
	color: var(--oasa-text, #1f2937);
}

.oasa-lead-actions { display: flex; justify-content: flex-end; gap: 8px; }

.oasa-lead-cancel {
	background: transparent;
	color: var(--oasa-text-muted, #374151);
	border: 1px solid var(--oasa-input-border, #d1d5db);
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}

.oasa-lead-submit-btn { width: auto; padding: 6px 14px; border-radius: 8px; font-size: 13px; }

@media (max-width: 420px) {
	.oasa-chat-window { width: calc(100vw - 24px); height: calc(100vh - 110px); }
}