/*!
 * Liquor Assistant — public styles
 * Dossier-style: warm dark surfaces, gold accents, serif headings.
 * Scoped under [data-la] / .la- to avoid theme bleed.
 */

:root {
	--la-bg-deep: #1a1612;
	--la-bg-card: #211d18;
	--la-bg-input: #2a251f;
	--la-border: rgba(201,169,97,0.25);
	--la-border-strong: rgba(201,169,97,0.55);
	--la-text: #f5ede0;
	--la-text-soft: rgba(245,237,224,0.72);
	--la-text-muted: rgba(245,237,224,0.45);
	--la-gold-1: #E8C988;
	--la-gold-2: #C9A961;
	--la-gold-3: #9C7E3F;
	--la-shadow: 0 18px 50px -12px rgba(0,0,0,0.55);
	--la-mobile-offset: 80px;
	--la-radius: 4px;
	--la-radius-lg: 8px;
}

/* Only takes effect when the site's Appearance setting is "Auto (match visitor's
   device)" — in that mode the inline per-site <style> block (see class-la-public.php
   theme_css()) skips overriding these background/text variables entirely, leaving
   this media query in charge. In "Fixed" mode (the default) that inline block always
   sets them explicitly afterward, so it wins regardless of device preference and
   this block has no effect. */
@media (prefers-color-scheme: light) {
	:root {
		--la-bg-deep: #ffffff;
		--la-bg-card: #f7f5f0;
		--la-bg-input: #efebe3;
		--la-text: #1a1612;
		--la-text-soft: rgba(26,22,18,0.72);
		--la-text-muted: rgba(26,22,18,0.45);
		--la-shadow: 0 18px 50px -12px rgba(0,0,0,0.18);
	}
}

.liquor-assistant-root *,
#liquor-assistant-root *,
#liquor-assistant-root *::before,
#liquor-assistant-root *::after {
	box-sizing: border-box;
}

/* =====================================================================
   SEARCH BAR — sits inline wherever it is placed (sticky header on roots)
   ===================================================================== */

.la-searchbar {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 720px;
	margin: 0 auto;
	background: var(--la-bg-input);
	border: 1px solid var(--la-border);
	border-radius: 999px;
	padding: 4px 6px 4px 18px;
	transition: border-color 180ms ease, box-shadow 180ms ease;
	font-family: inherit;
}

.la-searchbar:focus-within {
	border-color: var(--la-border-strong);
	box-shadow: 0 0 0 4px rgba(201,169,97,0.08);
}

.la-searchbar__icon {
	width: 18px;
	height: 18px;
	opacity: 0.6;
	margin-right: 10px;
	flex-shrink: 0;
}

.la-searchbar__input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--la-text);
	font-size: 15px;
	padding: 12px 4px;
	min-width: 0;
	font-family: inherit;
}

.la-searchbar__input::placeholder {
	color: var(--la-text-muted);
	font-style: italic;
}

.la-searchbar__submit {
	background: linear-gradient(135deg, var(--la-gold-1) 0%, var(--la-gold-2) 50%, var(--la-gold-3) 100%) !important;
	color: var(--la-bg-deep) !important;
	border: 0 !important;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: opacity 150ms ease, transform 100ms ease;
}

.la-searchbar__submit:hover { opacity: 0.92; }
.la-searchbar__submit:active { transform: translateY(1px); }
.la-searchbar__submit:disabled { opacity: 0.5; cursor: wait; }

/* Result panel that drops below the bar */
.la-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--la-bg-card);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius-lg);
	box-shadow: var(--la-shadow);
	max-height: 540px;
	overflow-y: auto;
	z-index: 99999;
	padding: 0;
	display: none;
}

.la-panel.is-open {
	display: block;
	animation: la-fade-in 180ms ease-out;
}

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

/* =====================================================================
   FLOATING BUBBLE
   ===================================================================== */

.la-bubble-launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 72px;
	height: 72px;
	/* No card/fill behind it — just the icon itself, floating on the page.
	   A drop shadow keeps it legible over busy photo backgrounds without
	   needing a solid background colour. */
	background: transparent !important;
	border: 0 !important;
	filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99998;
	transition: transform 180ms ease, filter 180ms ease;
	padding: 0;
}

.la-bubble-launcher:hover {
	transform: translateY(-2px);
	filter: drop-shadow(0 14px 32px rgba(0,0,0,0.45));
}

.la-bubble-launcher img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Labelled variant — a pill with an "online" dot + text next to the icon,
   instead of the plain icon-only circle. Only applied when the site sets
   a Bubble launcher label; the base rules above still cover the default. */
.la-bubble-launcher.la-bubble-launcher--labeled {
	width: auto;
	height: 56px;
	background: var(--la-bg-card) !important;
	border: 1px solid var(--la-border-strong) !important;
	border-radius: 999px;
	padding: 6px 18px 6px 6px;
	justify-content: flex-start;
	gap: 10px;
}
.la-bubble-launcher--labeled img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
}
.la-bubble-launcher__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.la-bubble-launcher__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 2px var(--la-bg-card);
	flex-shrink: 0;
}
.la-bubble-launcher__label-text {
	color: var(--la-text);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.la-bubble-panel {
	position: fixed;
	right: 20px;
	bottom: 104px;
	width: 360px;
	max-width: calc(100vw - 24px);
	height: 540px;
	max-height: calc(100vh - 120px);
	background: var(--la-bg-card);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius-lg);
	box-shadow: var(--la-shadow);
	z-index: 99999;
	display: none;
	flex-direction: column;
	overflow: hidden;
}

.la-bubble-panel.is-open {
	display: flex;
	animation: la-rise-in 220ms ease-out;
}

@keyframes la-rise-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.la-bubble-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--la-border);
	background: var(--la-bg-deep);
}

.la-bubble-header img { width: 28px; height: 28px; border-radius: 50%; }
.la-bubble-header__text { flex: 1; min-width: 0; }
.la-bubble-header__title {
	font-family: 'Playfair Display','Cormorant Garamond',Georgia,serif;
	font-size: 16px;
	color: var(--la-text);
	letter-spacing: 1px;
}
.la-bubble-header__subtitle {
	font-size: 11.5px;
	color: var(--la-text-soft);
	margin-top: 2px;
}
.la-bubble-header__close {
	background: transparent !important;
	border: 0 !important;
	color: var(--la-text-soft) !important;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}

.la-bubble-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}

.la-bubble-foot {
	border-top: 1px solid var(--la-border);
	padding: 12px;
	background: var(--la-bg-deep);
}

.la-bubble-foot form {
	display: flex;
	gap: 8px;
	align-items: center;
}

.la-bubble-foot input {
	flex: 1;
	background: var(--la-bg-input);
	border: 1px solid var(--la-border);
	border-radius: 999px;
	padding: 10px 14px;
	color: var(--la-text);
	font-size: 14px;
	font-family: inherit;
	outline: 0;
}

.la-bubble-foot input::placeholder { color: var(--la-text-muted); }

.la-bubble-foot button {
	background: linear-gradient(135deg, var(--la-gold-1), var(--la-gold-2), var(--la-gold-3)) !important;
	color: var(--la-bg-deep) !important;
	border: 0 !important;
	border-radius: 999px;
	width: 38px;
	height: 38px;
	cursor: pointer;
	font-size: 16px;
}

/* =====================================================================
   MESSAGES (shared by search-bar panel and bubble panel)
   ===================================================================== */

.la-msg {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--la-text);
	font-family: inherit;
}

.la-msg-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px;
}
.la-msg-row .la-msg { margin: 0; }
.la-msg-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 2px;
	object-fit: cover;
}

.la-msg-user {
	color: var(--la-text-soft);
	font-style: italic;
	padding-left: 14px;
	border-left: 2px solid var(--la-border);
}

.la-msg-assistant {
	white-space: pre-wrap;
}

.la-msg-system {
	color: var(--la-text-muted);
	font-size: 12px;
	text-align: center;
	padding: 8px;
}

.la-msg-thinking {
	color: var(--la-text-muted);
	font-style: italic;
}

.la-msg a {
	color: var(--la-gold-1);
	text-decoration: underline;
	text-decoration-color: rgba(232,201,136,0.4);
	text-underline-offset: 3px;
}
.la-msg a:hover { text-decoration-color: var(--la-gold-1); }

/* =====================================================================
   PRIVACY DISCLOSURE BANNER (first interaction)
   ===================================================================== */

.la-privacy {
	background: rgba(201,169,97,0.08);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	padding: 12px 14px;
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--la-text-soft);
	line-height: 1.5;
}

.la-privacy button {
	display: inline-block;
	margin-top: 8px;
	background: transparent !important;
	border: 1px solid var(--la-border-strong) !important;
	color: var(--la-gold-1) !important;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 12px;
	cursor: pointer;
	font-family: inherit;
}

.la-privacy button:hover { background: rgba(201,169,97,0.1) !important; }

/* =====================================================================
   AGE GATE (first message, before privacy banner)
   ===================================================================== */

.la-age-gate {
	background: rgba(201,169,97,0.08);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	padding: 12px 14px;
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--la-text);
	line-height: 1.5;
}

.la-age-gate__actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

/* =====================================================================
   TEST-MODE BADGE
   ===================================================================== */

.la-test-badge {
	display: inline-block;
	background: #4a3818;
	color: var(--la-gold-1);
	font-size: 10px;
	letter-spacing: 1px;
	padding: 3px 8px;
	border-radius: 3px;
	margin-left: 8px;
	text-transform: uppercase;
	font-weight: 600;
}

/* =====================================================================
   PANEL HEADER (for search-bar dropdown)
   ===================================================================== */

.la-panel-header {
	padding: 14px 18px 10px;
	border-bottom: 1px solid var(--la-border);
	display: flex;
	align-items: center;
	gap: 10px;
}

.la-panel-header img { width: 24px; height: 24px; border-radius: 50%; }

.la-panel-header__text { flex: 1; min-width: 0; }

.la-panel-header__title {
	font-family: 'Playfair Display','Cormorant Garamond',Georgia,serif;
	font-size: 14px;
	color: var(--la-text);
	letter-spacing: 1px;
}

.la-panel-header__subtitle {
	font-size: 11px;
	color: var(--la-text-soft);
	margin-top: 2px;
}

.la-panel-header__close {
	background: transparent !important;
	border: 0 !important;
	color: var(--la-text-soft) !important;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 8px;
}

.la-panel-body { padding: 14px 18px 18px; }

/* =====================================================================
   FEEDBACK (thumbs up/down)
   ===================================================================== */

.la-feedback {
	margin-top: 6px;
	font-size: 11px;
	color: var(--la-text-muted);
}
.la-feedback button {
	background: transparent !important;
	border: 0 !important;
	color: var(--la-text-muted) !important;
	font-size: 13px;
	cursor: pointer;
	padding: 2px 4px;
}
.la-feedback button:hover { color: var(--la-gold-1) !important; }
.la-feedback button.is-active { color: var(--la-gold-1) !important; }

/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width: 600px) {
	/* Closer to the edge than desktop's 20px inset — wasted space on a narrow
	   screen — but kept large enough that the Digby image (which now fills the
	   whole button) actually reads clearly. */
	.la-bubble-launcher {
		right: 10px;
		width: 64px;
		height: 64px;
		/* --la-mobile-offset (px, set per-site in Appearance settings) plus a flat
		   10% of viewport height, so it clears whatever fixed bottom bar the site
		   itself has — its own nav, an "Add to cart" bar, etc — and scales
		   sensibly across different phone screen sizes rather than a fixed guess. */
		bottom: calc(16px + 10vh + var(--la-mobile-offset, 80px) + env(safe-area-inset-bottom, 0px));
	}
	.la-bubble-launcher.la-bubble-launcher--labeled {
		width: auto;
		height: 48px;
		padding: 4px 14px 4px 4px;
	}
	.la-bubble-launcher--labeled img {
		width: 40px;
		height: 40px;
	}
	.la-bubble-launcher__label-text {
		font-size: 13px;
	}
	/* Chat open on mobile = full-screen takeover (below): the launcher and the
	   proactive preview have nothing left to float over, so hide both rather
	   than risk them showing through or overlapping the open panel. */
	body.la-chat-open .la-bubble-launcher,
	body.la-chat-open .la-preview {
		display: none !important;
	}
	/* A proper full-screen app-style panel, not a floating card — the previous
	   inset "card" (top:15vh, 10px margins) read as cramped and, combined with
	   the launcher/preview still visible underneath, could visually overlap
	   them.
	   !important: sites with Appearance > Bubble position set to "left" get an
	   unconditional inline `left:20px` (class-la-public.php theme_css()),
	   injected in <head> after this stylesheet — equal specificity + later in
	   the cascade meant it silently won on every screen size, leaving the
	   "full-screen" panel actually offset 20px off the right edge on mobile.
	   No explicit width/height: per spec, a fixed element with left+width+right
	   all set uses 'width' and recomputes 'right' to fit — so an explicit
	   width:100% actually SILENTLY WINS OVER right:0 the moment it resolves to
	   anything other than the true viewport width (confirmed live: on a page
	   with its own horizontal-overflow quirk — e.g. a hero carousel — 100% was
	   resolving to 401px instead of 375px, clipping the whole right edge of the
	   panel). Pinning all four edges to 0 and leaving width/height unset lets
	   the browser derive the box size purely from those offsets, which is
	   correct regardless of any page-level horizontal-scroll bug elsewhere. */
	.la-bubble-panel {
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		max-height: none !important;
		border: 0 !important;
		border-radius: 0 !important;
	}
	.la-bubble-panel.is-open { animation: none; }
	.la-bubble-header { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
	.la-bubble-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
	/* Well clear of the launcher regardless of label length — was tuned for the
	   plain icon launcher and became a near-overlap once the labeled pill (with
	   its own text) shipped; kept generous rather than re-tuned to the exact
	   labeled height so a future launcher style change can't reopen this.
	   !important: the older unconditional .la-preview rule further down this
	   file (v0.0.10 section) has equal specificity and comes later in source
	   order, so it was silently winning over this media-query override on
	   every mobile device — the widening from 76px to 96px never actually took
	   effect on the live site despite being deployed. */
	.la-preview {
		right: 10px !important;
		bottom: calc(96px + 10vh + var(--la-mobile-offset, 80px) + env(safe-area-inset-bottom, 0px)) !important;
		max-width: calc(100vw - 40px) !important;
	}
	.la-searchbar {
		max-width: 100%;
		padding: 4px 4px 4px 14px;
	}
	.la-searchbar__submit {
		padding: 8px 14px;
		font-size: 12px;
	}
}

/* Prevent the page behind from scrolling while the full-screen mobile panel is open. */
@media (max-width: 600px) {
	body.la-chat-open { overflow: hidden !important; }
}

/* =====================================================================
   v0.0.2 — product cards, quick-reply chips, hand-off button
   ===================================================================== */

.la-cards {
	display: grid;
	gap: 8px;
	margin: 0 0 14px;
}

.la-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: var(--la-bg-input);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	text-decoration: none;
	color: var(--la-text);
}
.la-card:hover { border-color: var(--la-border-strong); }

.la-card img,
.la-card__noimg {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: rgba(245,237,224,0.06);
	border-radius: 2px;
}

.la-card__meta { display: flex; flex-direction: column; min-width: 0; }
.la-card__name { font-size: 13px; line-height: 1.35; }
.la-card__price { font-size: 13px; color: var(--la-gold-1); }
.la-card__oos { font-size: 11.5px; color: var(--la-text-muted); }

.la-card-row { display: flex; flex-direction: column; gap: 4px; }
.la-card__add {
	align-self: flex-start;
	background: transparent !important;
	border: 1px solid var(--la-border-strong) !important;
	color: var(--la-gold-1) !important;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	cursor: pointer;
	font-family: inherit;
}
.la-card__add:hover { background: rgba(201,169,97,0.1) !important; }
.la-card__add:disabled { opacity: .55; cursor: default; }

/* Vertical quick-action list — a clean menu of rows (icon, label, chevron)
   rather than wrapped pill chips, closer to how most commercial chat widgets
   present the opening options when there are more than two or three. */
.la-chips {
	display: flex;
	flex-direction: column;
	margin: 4px 0 14px;
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius-lg);
	overflow: hidden;
	background: var(--la-bg-input);
}
.la-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--la-border) !important;
	color: var(--la-text) !important;
	padding: 11px 12px;
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.la-chips .la-chip:last-child { border-bottom: 0 !important; }
.la-chip:hover { background: rgba(201,169,97,0.08) !important; }
.la-chip__icon { flex-shrink: 0; color: var(--la-gold-1); display: flex; }
.la-chip__text { flex: 1; min-width: 0; }
.la-chip__arrow { flex-shrink: 0; color: var(--la-text-muted); font-size: 16px; }

/* Second+ greeting bubble aligns under the first instead of repeating the avatar. */
.la-msg-avatar--spacer { width: 22px; flex-shrink: 0; }

.la-handoff {
	display: block;
	width: 100%;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--la-border);
	color: var(--la-text-soft);
	padding: 8px 12px;
	font-size: 12px;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
}
.la-handoff[hidden] { display: none; }
.la-handoff:hover { color: var(--la-gold-1); }

/* =====================================================================
   v0.0.4 — live chat with the team
   ===================================================================== */

.la-live-div {
	text-align: center;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--la-gold-2);
	margin: 6px 0 12px;
	padding-top: 10px;
	border-top: 1px solid var(--la-border);
}

.la-msg-agent {
	background: rgba(201,169,97,0.12);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	padding: 8px 10px;
	white-space: pre-wrap;
}
.la-agent-name {
	display: block;
	font-size: 11px;
	color: var(--la-gold-1);
	margin-bottom: 2px;
}

.la-handoff-form {
	background: var(--la-bg-input);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	padding: 12px;
	margin: 0 0 14px;
}
.la-handoff-form input,
.la-handoff-form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 8px;
	background: var(--la-bg-deep);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	color: var(--la-text);
	padding: 8px 10px;
	font: inherit;
	font-size: 13.5px;
}
.la-form-title { font-size: 13px; color: var(--la-text-soft); margin: 0 0 10px; }
.la-form-err { color: #eb8f8f; font-size: 12.5px; min-height: 16px; }
.la-form-actions { display: flex; gap: 8px; margin-top: 4px; }
.la-btn {
	background: linear-gradient(135deg, var(--la-gold-1), var(--la-gold-2), var(--la-gold-3)) !important;
	color: var(--la-bg-deep) !important;
	border: 0 !important;
	border-radius: var(--la-radius);
	padding: 7px 14px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.la-btn:disabled { opacity: .5; }
.la-btn-ghost { background: transparent !important; color: var(--la-gold-1) !important; border: 1px solid var(--la-border-strong) !important; }

/* Keep the hand-off button in our style whatever the theme does to buttons on focus/hover. */
.la-panel .la-handoff,
.la-bubble-panel .la-handoff,
.la-panel .la-handoff:hover, .la-panel .la-handoff:focus, .la-panel .la-handoff:active,
.la-bubble-panel .la-handoff:hover, .la-bubble-panel .la-handoff:focus, .la-bubble-panel .la-handoff:active {
	background: transparent;
	color: var(--la-text-soft);
	border: 0;
	border-top: 1px solid var(--la-border);
	box-shadow: none;
	border-radius: 0;
	outline: none;
}
.la-panel .la-handoff:hover, .la-bubble-panel .la-handoff:hover { color: var(--la-gold-1); }

/* =====================================================================
   v0.0.5 — CSAT rating after a live chat ends
   ===================================================================== */

.la-csat {
	text-align: center;
	margin: 4px 0 14px;
	padding: 10px;
	background: var(--la-bg-input);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
}
.la-csat-q { font-size: 13px; color: var(--la-text-soft); margin-bottom: 8px; }
.la-csat-btns { display: flex; align-items: center; justify-content: center; gap: 10px; }
.la-csat-btn {
	background: transparent !important;
	border: 1px solid var(--la-border-strong) !important;
	border-radius: 999px;
	width: 34px;
	height: 34px;
	font-size: 16px;
	cursor: pointer;
}
.la-csat-btn:hover { background: rgba(201,169,97,0.1) !important; }
.la-csat-skip {
	background: transparent !important;
	border: 0 !important;
	color: var(--la-text-muted) !important;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}
.la-csat-thanks { font-size: 12.5px; color: var(--la-text-soft); }

/* =====================================================================
   v0.0.10 — proactive greeting preview above the bubble
   ===================================================================== */

.la-preview {
	position: fixed;
	right: 20px;
	bottom: 104px;
	max-width: 260px;
	background: var(--la-bg-card);
	border: 1px solid var(--la-border-strong);
	border-radius: var(--la-radius-lg);
	box-shadow: var(--la-shadow);
	padding: 14px 32px 14px 16px;
	cursor: pointer;
	z-index: 99997;
	animation: la-fade-in 220ms ease-out;
}

.la-preview-text {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--la-text);
}

.la-preview-close {
	position: absolute !important;
	top: 6px;
	right: 8px;
	background: transparent !important;
	border: 0 !important;
	color: var(--la-text-muted) !important;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}
.la-preview-close:hover { color: var(--la-gold-1) !important; }