/**
 * Avenue Z AI Summarize — visitor-facing styles.
 *
 * Two placement modes for the trigger button:
 *
 *   - Floating (the default, .--floating): a sticky bottom-right dark pill
 *     CTA matching the avenuez.com theme's hero pill (translucent white
 *     overlay on a solid dark base, frosted glass, rainbow gradient on
 *     hover via a ::before pseudo, conic-gradient ring via ::after). The
 *     theme pill rules are scoped to #content + specific page IDs and so
 *     cannot be reused outside that scope — these styles replicate the
 *     visual locally so the pill reads correctly on any page background.
 *
 *   - Inline / dropdown (.--inline, .--dropdown): legacy white pill for
 *     in-content placements via the shortcode or the_content filter.
 *     These remain on the original styling.
 *
 * The shared panel is anchored above the floating button as a narrow
 * chat-interface-style overlay (no input, no history — just the visual
 * feel: narrow column, dark surface, soft rounded corners, soft elevated
 * shadow). The .--in-hero panel variant for the special hero placement is
 * preserved via !important overrides.
 */

/* ====================================================================
   Button — shared base + inline / dropdown placements
   ==================================================================== */

.avenuez-ai-summarize-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.7em 1.4em;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 999px;
	background: #ffffff;
	color: #1a1a1a;
	font: inherit;
	cursor: pointer;
	line-height: 1;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
	transition: box-shadow 0.15s ease, transform 0.1s ease;
	position: relative;
	z-index: 1;
}

.avenuez-ai-summarize-button:hover,
.avenuez-ai-summarize-button:focus-visible {
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
	transform: translateY( -1px );
}

.avenuez-ai-summarize-button__icon {
	width: 1.8em;
	height: 1.8em;
	flex-shrink: 0;
}

.avenuez-ai-summarize-button__label {
	font-weight: 600;
}

.avenuez-ai-summarize-button--inline {
	margin: 1em 0;
}

.avenuez-ai-summarize-button--dropdown {
	margin: 6em 0 1.5em;
	justify-content: center;
}

/* ====================================================================
   Floating button — sticky bottom-right dark pill (NEW)
   --------------------------------------------------------------------
   Translucent white overlay on a solid dark base so the pill reads on
   any page background (light or dark). On hover, a ::before pseudo
   fades in the brand rainbow gradient and a ::after pseudo fades in
   a 1px conic-gradient ring. Both pseudos are clipped to the pill via
   border-radius: inherit and a parent overflow: hidden / isolation
   stacking context.
   ==================================================================== */

.avenuez-ai-summarize-button--floating {
	/* Reset shared base — !important defends against theme rules that
	   force position:relative on generic positioned elements. */
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	margin: 0 !important;
	z-index: 99000 !important;

	/* Translucent dark base + radial shine + backdrop-blur — the "frosted
	   glass" feel from the avenuez.com theme pill. 0.60 alpha lets more
	   of the page bleed through (so the pill reads as a glass surface
	   over the page, not a solid block) while staying readable on any
	   background. backdrop-filter softens the see-through so the page
	   imagery behind reads as a frosted blur rather than a literal
	   window. */
	background-color: rgba( 0, 0, 0, 0.60 );
	background-image: radial-gradient(
		circle at 0% 50%,
		rgba( 255, 255, 255, 0.20 ) 0%,
		rgba( 255, 255, 255, 0.15 ) 16%,
		rgba( 0,   0,   0,   0 )    50%
	);
	-webkit-backdrop-filter: blur( 10px );
	        backdrop-filter: blur( 10px );

	color: #ffffff;
	border: 0;
	border-radius: 44px;
	padding: 18px 40px;
	font-family: Avenir, "Avenir Next", sans-serif;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.36px;
	line-height: 22px;
	text-decoration: none;
	cursor: pointer;

	box-shadow:
		rgba( 0,   0,   0,   0.15 ) 0  8px 32px 0,
		rgba( 255, 255, 255, 0.10 ) 0  2px 10px 0 inset;
	/* Scoped transition: only the box-shadow actually changes on hover
	   (background-color is pinned by !important; transform overridden to
	   none; rainbow/ring opacity transitions live on the pseudos). An
	   all-property `transition` would auto-animate any future tweak that
	   touches an animatable property, even when that wasn't intended. */
	transition: box-shadow 0.2s linear;

	/* New stacking context so ::before at z-index -1 paints below the
	   button content (icon, label) but doesn't escape behind the button. */
	isolation: isolate;
	overflow: hidden;
}

.avenuez-ai-summarize-button--floating:hover,
.avenuez-ai-summarize-button--floating:focus-visible {
	box-shadow:
		rgba( 0,   0,   0,   0.25 ) 0 12px 40px 0,
		rgba( 255, 255, 255, 0.10 ) 0  2px 10px 0 inset;
	transform: none !important;
}

/* Defend the pill's translucent base color against theme cascades. The
   Astra / Spectra stack applies `background-color: var(--ast-global-color-2)`
   (the brand blue, #4271d5) to focused buttons via a sweeping rule we
   can't outscope by specificity alone. After close() returns focus to the
   trigger, that rule wins and the pill paints solid blue with no obvious
   visual reason. Pin our intended background-color across every
   interaction state so the theme rule can't override. */
.avenuez-ai-summarize-button--floating,
.avenuez-ai-summarize-button--floating:hover,
.avenuez-ai-summarize-button--floating:focus,
.avenuez-ai-summarize-button--floating:focus-visible,
.avenuez-ai-summarize-button--floating:focus-within,
.avenuez-ai-summarize-button--floating:active {
	background-color: rgba( 0, 0, 0, 0.60 ) !important;
}

/* Direct children of the floating pill (the icon node and the label span)
   sit ABOVE the rainbow ::before pseudo. Explicit positive z-index here
   avoids cross-browser ambiguity around negative z-index + isolation. */
.avenuez-ai-summarize-button--floating > * {
	position: relative;
	z-index: 1;
}

/* Rainbow gradient stack (yellow → cyan → blue → purple) — opacity flips
   0 → 1 on hover. Same 4-layer composition the avenuez.com theme uses.
   z-index: 0 keeps it above the button background but below the content
   (which is pinned to z-index: 1 above).

   Note: the rainbow trigger is :hover only, NOT :focus-visible. The
   button's close() routine returns focus to the trigger for screen-
   reader accessibility, which in some browsers (Chrome) keeps the
   button matching :focus-visible after the click. Tying the visual
   flourish to focus would leave the rainbow stuck after every close. */
.avenuez-ai-summarize-button--floating::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.2s linear;
	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba( 255, 252,  96, 0.81 )  -8.01%,
			rgba(  96, 253, 255, 0.81 )  39.74%,
			rgba(  57, 160, 255, 0.81 )  84.83%,
			rgba(  96,  52, 255, 0.81 ) 111.38%
		),
		radial-gradient(
			342.1% 74.97% at 2.22% 29.17%,
			rgba( 255, 255, 255, 0.28 ) 0%,
			rgba(   0,   0,   0,    0 ) 100%
		),
		linear-gradient(
			0deg,
			rgba( 255, 255, 255, 0.08 ) 0%,
			rgba( 255, 255, 255, 0.08 ) 100%
		),
		radial-gradient(
			93.39% 68.24% at 2.26% 11.81%,
			rgba( 255, 255, 255, 0 ) 0%,
			rgba( 255, 255, 255, 0 ) 100%
		);
}

/* Gate the rainbow hover-reveal behind a real-hover-capable device. On
   touch-only devices, :hover can stick after a tap until the user taps
   elsewhere — that would leave the rainbow visible indefinitely after a
   close. On trackpads / mouse devices, the rainbow reveals as intended.
   The ring (::after) stays at its baseline opacity:1 regardless — it's
   not a hover effect, it's the at-rest glass edge. */
@media ( hover: hover ) {
	.avenuez-ai-summarize-button--floating:hover::before {
		opacity: 1;
	}
}

/* Conic-gradient ring — 1px-thick brand-light border that fades in at
   opacity 0.5 on hover via the mask trick (paint a 1px ring on the
   border edge only).

   The mask declarations require browsers that support either
   `mask-composite: exclude` (modern) or `-webkit-mask-composite: xor`
   (Safari < 15.4). Without that, stacking two `linear-gradient(#fff 0 0)`
   layers without compositing produces a solid white fill that would paint
   a 50% white wash over the pill on hover. The @supports guard scopes the
   ring paint behind support detection so older browsers just get a clean
   pill with no ring rather than a broken overlay. */
.avenuez-ai-summarize-button--floating::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.2s linear;
	pointer-events: none;
}

@supports ( mask-composite: exclude ) or ( -webkit-mask-composite: xor ) {
	.avenuez-ai-summarize-button--floating::after {
		padding: 1px;

		-webkit-mask:
			linear-gradient( #fff 0 0 ) content-box,
			linear-gradient( #fff 0 0 );
		-webkit-mask-composite: xor;
		mask:
			linear-gradient( #fff 0 0 ) content-box,
			linear-gradient( #fff 0 0 );
		mask-composite: exclude;

		background: conic-gradient(
			from 45deg,
			rgba( 246, 246, 246, 0.1 )   0deg,
			rgba( 246, 246, 246, 0.1 )  30deg,
			rgba( 246, 246, 246, 0.4 )  45deg,
			rgba( 246, 246, 246, 0.1 ) 135deg,
			rgba( 246, 246, 246, 0.1 ) 216deg,
			rgb(  246, 246, 246      ) 240deg,
			rgba( 246, 246, 246, 0.1 ) 260deg,
			rgba( 246, 246, 246, 0.1 ) 360deg
		);

		/* Ring is fully visible at rest — matches the theme pill's default
		   (no explicit opacity, so 1.0). The conic gradient's per-stop
		   alpha values (0.1 / 0.4 / 1.0) carry the around-perimeter
		   variance; re-dimming via opacity here would mute the whole
		   ring and lose the lower-right edge definition.

		   On hover the ring fades to 0.5, deferring visual prominence to
		   the rainbow ::before stack that's fading in at the same time. */
		opacity: 1;
	}

	@media ( hover: hover ) {
		.avenuez-ai-summarize-button--floating:hover::after {
			opacity: 0.5;
		}
	}
}

/* The icon inherits color: white from the pill; size + alignment carry
   over from the shared __icon rule. The label's font-weight: 600 from
   the base is overridden here by font-weight: 800 on the pill itself
   (the span doesn't override). */
.avenuez-ai-summarize-button--floating .avenuez-ai-summarize-button__icon {
	width: 22px;
	height: 22px;
}

.avenuez-ai-summarize-button--floating .avenuez-ai-summarize-button__label {
	font-weight: inherit;
}

/* ====================================================================
   Panel — chat-interface-style overlay anchored above the button (NEW)
   --------------------------------------------------------------------
   Narrow dark column with soft rounded corners + elevated shadow,
   slide-up + fade-in on open. Inner pieces (header / body / status /
   footer / copy / attribution) keep their existing class hooks so JS
   selectors don't break — only their colors flip for the dark surface.
   ==================================================================== */

/* Panel is a transparent positioning frame; the dark surface, scrolling,
   and overscroll containment all live on `.avenuez-ai-panel__inner` below.
   Splitting it this way lets the ::before outer glow extend past the
   panel edges (it can't with the old `overflow: hidden auto` clipping
   everything to the panel's own box). */
.avenuez-ai-panel {
	display: block;
	position: fixed;
	right: 24px;
	bottom: 96px;
	width: 380px;
	max-width: calc( 100vw - 32px );
	overflow: visible;
	background: transparent;
	color: #ffffff;
	border: 0;
	border-radius: 16px;
	font-family: inherit;
	z-index: 99001;
	animation: avenuez-ai-panel-slide-up 250ms ease-out;
	scroll-margin-top: 6em;
}

.avenuez-ai-panel[hidden] {
	display: none;
}

/* The panel is JS-focused on open for screen readers. The 2px gradient
   border below IS the persistent visual indicator that the panel is
   present and focused. A separate focus outline at the panel level
   would draw an additional grey ring just outside the gradient. Drop
   both so the gradient ring is the only outermost visual. */
.avenuez-ai-panel:focus,
.avenuez-ai-panel:focus-visible {
	outline: none;
}

/* Outer glow — diagonally-rotated theme rainbow extending past the panel
   edges, blurred so it fades naturally to transparency at its outer reach.
   The 45deg rotation makes all four panel edges show a color progression
   instead of the previous 90deg layout (which left vertical edges as a
   single color). Sits below the panel content (z-index: -1) and behind
   __inner's opaque dark surface — so the gradient is only visible OUTSIDE
   the panel's footprint. */
.avenuez-ai-panel::before {
	content: "";
	position: absolute;
	inset: -25px;
	border-radius: 41px; /* panel 16px + 25px extension */
	background: linear-gradient(
		45deg,
		rgb( 255, 252,  96 ) -12%,
		rgb(  96, 253, 255 )  40%,
		rgb(  57, 160, 255 )  80%,
		rgb(  96,  52, 255 ) 112%
	);
	filter: blur( 25px );
	opacity: 0.2;
	z-index: -1;
	pointer-events: none;
}

/* Crisp 2px rainbow gradient border, mask-composite ring trick. Same 45deg
   rotation as the outer glow so the gradient direction reads continuously
   from border to halo.

   The mask declarations require browsers that support either
   `mask-composite: exclude` (modern) or `-webkit-mask-composite: xor`
   (Safari < 15.4). Without that, stacking two `linear-gradient(#fff 0 0)`
   layers without compositing produces a solid panel-shaped rainbow
   rectangle obscuring all panel content. The @supports guard scopes the
   ring paint behind support detection so older browsers see a clean
   panel with no ring rather than a broken overlay. The outer glow
   ::before above uses filter: blur() with no mask, so it works
   unconditionally — older browsers still get the halo, just no crisp
   border at the panel edge. */
@supports ( mask-composite: exclude ) or ( -webkit-mask-composite: xor ) {
	.avenuez-ai-panel::after {
		content: "";
		position: absolute;
		inset: 0;
		padding: 2px;
		border-radius: inherit;
		background: linear-gradient(
			45deg,
			rgb( 255, 252,  96 ) -12%,
			rgb(  96, 253, 255 )  40%,
			rgb(  57, 160, 255 )  80%,
			rgb(  96,  52, 255 ) 112%
		);
		-webkit-mask:
			linear-gradient( #fff 0 0 ) content-box,
			linear-gradient( #fff 0 0 );
		-webkit-mask-composite: xor;
		mask:
			linear-gradient( #fff 0 0 ) content-box,
			linear-gradient( #fff 0 0 );
		mask-composite: exclude;
		pointer-events: none;
		z-index: 1;
	}
}

/* Inner div: dark surface + scrolling + rounded clip. Moved here from
   the panel itself so the panel can have `overflow: visible` (required
   for the ::before outer glow to extend past the panel edges). */
.avenuez-ai-panel__inner {
	padding: 1.25rem 1.5rem;
	background: #0d1117;
	border-radius: inherit;
	max-height: 70vh;
	overflow: hidden auto;
	overscroll-behavior: contain;
}

/* Header: title + close button */
.avenuez-ai-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.avenuez-ai-panel__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: inherit;
	letter-spacing: -0.2px;
}

.avenuez-ai-panel__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	border-radius: 50%;
	transition: background-color 0.15s ease;
}

.avenuez-ai-panel__close:hover,
.avenuez-ai-panel__close:focus-visible {
	background: rgba( 255, 255, 255, 0.08 );
}

.avenuez-ai-panel__close svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Body — where the streamed summary text lands. Chat-bubble feel via a
   subtle inset background + tighter line-height. */
.avenuez-ai-panel__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	min-height: 3rem;
	color: inherit;
}

.avenuez-ai-panel__body.is-loading {
	background: linear-gradient(
		90deg,
		rgba( 255, 255, 255, 0.04 ) 0%,
		rgba( 255, 255, 255, 0.10 ) 50%,
		rgba( 255, 255, 255, 0.04 ) 100%
	);
	background-size: 200% 100%;
	animation: avenuez-ai-shimmer 1.5s ease-in-out infinite;
	border-radius: 8px;
	height: 4em;
}

/* Status: loading text, error messages, retry. */
.avenuez-ai-panel__status {
	margin: 0.5rem 0;
	padding: 0.75rem 1rem;
	background: rgba( 255, 255, 255, 0.06 );
	border-radius: 8px;
	font-size: 0.9rem;
	color: rgba( 255, 255, 255, 0.78 );
}

.avenuez-ai-panel__status[hidden] {
	display: none;
}

/* Error variant of the status — added by handleError(). Amber accent
   communicates "transient, try again" semantics matching the most
   common failure case (rate-limit / service-busy). Subtle enough to
   not feel catastrophic on a retry-able state, distinct enough from
   the normal info-style status to read clearly as a problem. */
.avenuez-ai-panel__status.is-error {
	background: rgba( 245, 158, 11, 0.13 );
	border-left: 3px solid rgba( 245, 158, 11, 0.9 );
	color: #ffffff;
}

/* In error state, handleError hides the empty body + the irrelevant
   footer (Copy / attribution have nothing to act on when there is no
   summary). The panel's own rules give body and footer non-default
   display values, so the `hidden` attribute alone is overridden — these
   selectors restore the expected behavior. */
.avenuez-ai-panel__body[hidden],
.avenuez-ai-panel__footer[hidden] {
	display: none;
}

.avenuez-ai-panel__retry {
	margin-top: 0.5rem;
	background: transparent;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 999px;
	padding: 0.4em 1em;
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	color: inherit;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.avenuez-ai-panel__retry:hover,
.avenuez-ai-panel__retry:focus-visible {
	background: rgba( 255, 255, 255, 0.08 );
	border-color: rgba( 255, 255, 255, 0.6 );
}

/* Footer: Copy button + attribution */
.avenuez-ai-panel__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.10 );
	font-size: 0.8125rem;
	color: rgba( 255, 255, 255, 0.6 );
}

.avenuez-ai-panel__copy {
	background: transparent;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 999px;
	padding: 0.35em 0.9em;
	cursor: pointer;
	font: inherit;
	font-size: 0.8125rem;
	color: inherit;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.avenuez-ai-panel__copy:hover,
.avenuez-ai-panel__copy:focus-visible {
	background: rgba( 255, 255, 255, 0.08 );
	border-color: rgba( 255, 255, 255, 0.6 );
}

.avenuez-ai-panel__attribution {
	font-style: italic;
}

/* ====================================================================
   In-hero panel variant — legacy placement preserved
   --------------------------------------------------------------------
   The in-hero variant pins the panel inside a dark hero section,
   centered horizontally near the top. !important is required because
   Spectra/UAGB cascades sweeping rules onto container children we can't
   easily outscope. These overrides keep working over the new fixed-
   position base because position: absolute + !important wins.
   ==================================================================== */

.avenuez-ai-panel--in-hero {
	position: absolute !important;
	top: 24px !important;
	bottom: auto !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX( -50% );
	width: min( 800px, calc( 100% - 48px ) ) !important;
	max-width: 800px !important;
	max-height: none !important;
	margin: 0 !important;
	z-index: 5 !important;
	background: #ffffff !important;
	color: #1a1a1a !important;
	border: 1px solid rgba( 0, 0, 0, 0.10 ) !important;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.35 ) !important;
	animation: avenuez-ai-panel-fade-in 200ms ease-out;
}

/* In-hero variant opts out of the new chat-style treatment — it keeps its
   own white card look. Disable the rainbow ::before glow and ::after
   border, and let the panel's own white background show through __inner
   instead of __inner painting its dark surface on top. */
.avenuez-ai-panel--in-hero::before,
.avenuez-ai-panel--in-hero::after {
	display: none !important;
}

.avenuez-ai-panel--in-hero .avenuez-ai-panel__inner {
	background: transparent !important;
	max-height: none !important;
	overflow: visible !important;
	overscroll-behavior: auto !important;
}

.avenuez-ai-panel--in-hero .avenuez-ai-panel__title,
.avenuez-ai-panel--in-hero .avenuez-ai-panel__body,
.avenuez-ai-panel--in-hero .avenuez-ai-panel__close,
.avenuez-ai-panel--in-hero .avenuez-ai-panel__copy,
.avenuez-ai-panel--in-hero .avenuez-ai-panel__attribution,
.avenuez-ai-panel--in-hero .avenuez-ai-panel__status,
.avenuez-ai-panel--in-hero .avenuez-ai-panel__retry {
	color: #1a1a1a !important;
}

.avenuez-ai-panel--in-hero .avenuez-ai-panel__title {
	font-size: 1.125rem !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
}

.avenuez-ai-panel--in-hero .avenuez-ai-panel__body {
	font-size: 1rem !important;
	line-height: 1.6 !important;
}

.avenuez-ai-panel--in-hero .avenuez-ai-panel__attribution {
	color: rgba( 0, 0, 0, 0.6 ) !important;
}

.avenuez-ai-panel--in-hero .avenuez-ai-panel__close,
.avenuez-ai-panel--in-hero .avenuez-ai-panel__close svg {
	color: #1a1a1a !important;
}
.avenuez-ai-panel--in-hero .avenuez-ai-panel__close svg path {
	stroke: #1a1a1a !important;
}

.avenuez-ai-panel--in-hero .avenuez-ai-panel__copy,
.avenuez-ai-panel--in-hero .avenuez-ai-panel__retry {
	border-color: rgba( 0, 0, 0, 0.4 ) !important;
}

.avenuez-ai-panel--in-hero .avenuez-ai-panel__footer {
	border-top-color: rgba( 0, 0, 0, 0.08 ) !important;
}

/* ====================================================================
   Animations
   ==================================================================== */

@keyframes avenuez-ai-panel-slide-up {
	from {
		opacity: 0;
		transform: translateY( 16px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@keyframes avenuez-ai-panel-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes avenuez-ai-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ====================================================================
   Reduced motion — disable animations + transitions
   ==================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.avenuez-ai-panel,
	.avenuez-ai-panel--in-hero {
		animation: none;
	}
	.avenuez-ai-panel__body.is-loading {
		animation: none;
		background: rgba( 255, 255, 255, 0.06 );
	}
	.avenuez-ai-summarize-button,
	.avenuez-ai-summarize-button--floating,
	.avenuez-ai-summarize-button--floating::before,
	.avenuez-ai-summarize-button--floating::after,
	.avenuez-ai-panel__close,
	.avenuez-ai-panel__copy,
	.avenuez-ai-panel__retry {
		transition: none;
	}
	.avenuez-ai-summarize-button:hover,
	.avenuez-ai-summarize-button:focus-visible {
		transform: none;
	}
}

/* ====================================================================
   Mobile — narrower floating pill + bottom-sheet-style panel
   ==================================================================== */

@media ( max-width: 600px ) {
	.avenuez-ai-summarize-button--floating {
		bottom: 16px !important;
		right: 16px !important;
		padding: 12px 24px;
		font-size: 16px;
		letter-spacing: -0.32px;
		line-height: 20px;
	}
	.avenuez-ai-summarize-button--floating .avenuez-ai-summarize-button__icon {
		width: 20px;
		height: 20px;
	}

	.avenuez-ai-panel {
		right: 16px;
		left: 16px;
		bottom: 80px;
		width: auto;
		max-width: none;
	}
}

/* Legacy inline/dropdown variant — keep their original mobile sheet treatment.
   Targets the panel only when NOT floating (i.e. when an inline button is
   used in-content). With the new design defaulting to floating placement,
   this path is largely vestigial but kept for shortcode-driven uses. */
@media ( max-width: 768px ) {
	.avenuez-ai-panel--in-hero .avenuez-ai-panel__inner {
		padding: 1rem 1.25rem;
	}
	.avenuez-ai-panel--in-hero .avenuez-ai-panel__title {
		font-size: 1rem !important;
	}
	.avenuez-ai-panel--in-hero .avenuez-ai-panel__body {
		font-size: 0.95rem !important;
	}
	.avenuez-ai-panel--in-hero .avenuez-ai-panel__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}