/* Silvalyn Style Concierge — frontend assistant
 * v1.0.9 visual system. Matches the Silvalyn theme (navy / pearl / Georgia serif).
 * Lazy-loaded: the drawer markup is only created after the first interaction.
 */

:root {
	--ssc-navy: var(--sv-navy, #0D1826);
	--ssc-navy-soft: var(--sv-navy-soft, #101B2A);
	--ssc-blue-deep: var(--sv-blue-deep, #244659);
	--ssc-pearl: var(--sv-pearl, #F7F7F4);
	--ssc-white: var(--sv-white, #FFFFFF);
	--ssc-gray: var(--sv-gray, #D9DDE1);
	--ssc-silver: var(--sv-silver, #AEB6BD);
	--ssc-silver-mist: var(--sv-silver-mist, #F1F4F4);
	--ssc-charcoal: var(--sv-charcoal, #1F2428);
	--ssc-muted: var(--sv-muted, #6D747A);
	--ssc-border: var(--sv-border, #E5E7E8);
	--ssc-serif: Georgia, "Times New Roman", serif;
	--ssc-radius: 14px;
	--ssc-radius-sm: 10px;
	--ssc-shadow: 0 24px 64px rgba(13, 24, 38, 0.22);
	--ssc-shadow-card: 0 8px 24px rgba(13, 24, 38, 0.06);
}

/* ---------------------------------------------------------------- Entry button */
.ssc-assistant-entry {
	display: inline-flex;
}

.ssc-assistant-entry--center { justify-content: center; width: 100%; }
.ssc-assistant-entry--right { justify-content: flex-end; width: 100%; }

.ssc-assistant-button {
	align-items: center !important;
	background: var(--ssc-navy) !important;
	border: 1px solid rgba(247, 247, 244, 0.20) !important;
	border-radius: 999px !important;
	box-shadow: 0 14px 34px rgba(13, 24, 38, 0.20) !important;
	box-sizing: border-box !important;
	color: var(--ssc-white) !important;
	cursor: pointer;
	display: inline-flex !important;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	gap: 10px !important;
	height: 52px !important;
	justify-content: center !important;
	letter-spacing: 0.14em !important;
	line-height: 1 !important;
	min-height: 52px !important;
	padding: 0 20px !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	-webkit-tap-highlight-color: transparent !important;
	transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important;
	white-space: nowrap !important;
}

.ssc-assistant-button:hover,
.ssc-assistant-button:focus {
	background: var(--ssc-navy-soft) !important;
	box-shadow: 0 18px 42px rgba(13, 24, 38, 0.26) !important;
	color: var(--ssc-white) !important;
	transform: translateY(-2px) !important;
	outline: none !important;
}

.ssc-assistant-button__spark {
	align-items: center !important;
	background: rgba(247, 247, 244, 0.12) !important;
	border: 1px solid rgba(247, 247, 244, 0.22) !important;
	border-radius: 50% !important;
	color: var(--ssc-pearl) !important;
	display: inline-flex !important;
	flex: 0 0 26px !important;
	font-size: 12px !important;
	height: 26px !important;
	justify-content: center !important;
	line-height: 1 !important;
	width: 26px !important;
}

.ssc-assistant-button:focus-visible,
.ssc-drawer button:focus-visible,
.ssc-drawer a:focus-visible,
.ssc-drawer textarea:focus-visible {
	outline: 2px solid var(--ssc-blue-deep) !important;
	outline-offset: 3px !important;
}

/* Attention-grabbing polish — floating launcher only, so it gently invites a tap. */
@keyframes ssc-pop-nudge {
	0%   { transform: translateY(0) scale(1); }
	30%  { transform: translateY(-5px) scale(1.05); }
	55%  { transform: translateY(0) scale(0.99); }
	75%  { transform: translateY(-2px) scale(1.02); }
	100% { transform: translateY(0) scale(1); }
}

@keyframes ssc-attn-ring {
	0%   { box-shadow: 0 14px 34px rgba(13, 24, 38, 0.22), 0 0 0 0 rgba(36, 70, 89, 0.55); }
	70%  { box-shadow: 0 14px 34px rgba(13, 24, 38, 0.22), 0 0 0 14px rgba(36, 70, 89, 0); }
	100% { box-shadow: 0 14px 34px rgba(13, 24, 38, 0.22), 0 0 0 0 rgba(36, 70, 89, 0); }
}

@keyframes ssc-spark-twinkle {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.65; transform: scale(1.18) rotate(8deg); }
}

.ssc-assistant-entry--floating .ssc-assistant-button {
	background: linear-gradient(135deg, var(--ssc-navy) 0%, var(--ssc-blue-deep) 140%) !important;
	animation: ssc-attn-ring 3.4s ease-out 2s infinite !important;
}

.ssc-assistant-entry--floating .ssc-assistant-button:hover {
	animation-play-state: paused !important;
}

.ssc-assistant-entry--floating .ssc-assistant-button__spark {
	animation: ssc-spark-twinkle 2.6s ease-in-out infinite !important;
}

/* One-shot bounce fired periodically from JS to catch the eye. */
.ssc-assistant-button.ssc-pop {
	animation: ssc-pop-nudge 720ms cubic-bezier(0.22, 1, 0.36, 1) 1 !important;
}

/* Smooth crossfade as the rotating microcopy swaps. */
.ssc-assistant-button span:not(.ssc-assistant-button__spark) {
	transition: opacity 240ms ease !important;
}
.ssc-assistant-button span.ssc-label-fade { opacity: 0 !important; }

/* Floating placement — stacked ABOVE the theme WhatsApp pill so it never hides it. */
.ssc-assistant-entry--floating {
	bottom: calc(82px + env(safe-area-inset-bottom)) !important;
	left: auto !important;
	position: fixed !important;
	right: max(18px, env(safe-area-inset-right)) !important;
	top: auto !important;
	width: auto !important;
	z-index: 99985 !important;
}

/* ---------------------------------------------------------------- Drawer shell */
.ssc-drawer-is-open { overflow: hidden; }
.ssc-drawer-root[hidden] { display: none; }

.ssc-drawer-root {
	inset: 0;
	position: fixed;
	z-index: 999999;
}

.ssc-drawer-backdrop {
	background: rgba(13, 24, 38, 0.52);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 200ms ease;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.ssc-drawer-root.is-open .ssc-drawer-backdrop { opacity: 1; }

.ssc-drawer {
	background: var(--ssc-pearl) !important;
	border-left: 1px solid var(--ssc-border);
	box-shadow: var(--ssc-shadow);
	color: var(--ssc-charcoal);
	display: flex;
	flex-direction: column;
	font-family: inherit;
	height: 100%;
	max-width: min(680px, 100vw);
	position: absolute;
	right: 0;
	top: 0;
	transform: translateX(102%);
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
	width: 100%;
}

.ssc-drawer-root.is-open .ssc-drawer { transform: translateX(0); }

/* ---------------------------------------------------------------- Header */
.ssc-drawer__header {
	align-items: center;
	background: linear-gradient(135deg, var(--ssc-navy) 0%, var(--ssc-blue-deep) 140%);
	border-bottom: 1px solid rgba(247, 247, 244, 0.10);
	box-shadow: 0 1px 0 rgba(174, 182, 189, 0.18);
	color: var(--ssc-pearl);
	display: flex;
	gap: 0.9rem;
	justify-content: space-between;
	padding: 20px 22px 18px;
}

.ssc-drawer__brand {
	align-items: center;
	display: flex;
	gap: 12px;
	min-width: 0;
}

.ssc-drawer__avatar {
	align-items: center;
	background: rgba(247, 247, 244, 0.10);
	border: 1px solid rgba(247, 247, 244, 0.22);
	border-radius: 50%;
	color: var(--ssc-pearl);
	display: inline-flex;
	flex: 0 0 42px;
	font-size: 18px;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.ssc-drawer__eyebrow {
	color: rgba(247, 247, 244, 0.66);
	font-size: 10px;
	letter-spacing: 0.22em;
	line-height: 1;
	margin: 0 0 5px;
	text-transform: uppercase;
}

.ssc-drawer__title {
	color: var(--ssc-pearl);
	font-family: var(--ssc-serif);
	font-size: 23px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.05;
	margin: 0;
}

.ssc-drawer__close {
	align-items: center;
	background: rgba(247, 247, 244, 0.06);
	border: 1px solid rgba(247, 247, 244, 0.24);
	border-radius: 50%;
	color: var(--ssc-pearl);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 40px;
	font-size: 1.4rem;
	height: 40px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color 150ms ease, transform 150ms ease;
	width: 40px;
}

.ssc-drawer__close:hover { background: rgba(247, 247, 244, 0.16); transform: rotate(90deg); }

.ssc-drawer__role {
	color: rgba(247, 247, 244, 0.62);
	font-size: 11px;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 4px 0 0;
}

.ssc-drawer__actions {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.ssc-drawer__new {
	align-items: center;
	background: rgba(247, 247, 244, 0.06);
	border: 1px solid rgba(247, 247, 244, 0.24);
	border-radius: 50%;
	color: var(--ssc-pearl);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 40px;
	height: 40px;
	justify-content: center;
	padding: 0;
	transition: background-color 150ms ease, transform 150ms ease;
	width: 40px;
}

.ssc-drawer__new:hover { background: rgba(247, 247, 244, 0.16); transform: translateY(-1px); }

.ssc-assistant-button__spark svg { display: block; }

/* ---------------------------------------------------------------- Body */
.ssc-drawer__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1rem;
	overflow-y: auto;
	padding: 20px 22px 12px;
	scroll-behavior: smooth;
}

.ssc-drawer__messages {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ssc-message {
	border-radius: 16px;
	font-size: 0.95rem;
	line-height: 1.55;
	max-width: 88%;
	padding: 12px 15px;
	word-wrap: break-word;
}

.ssc-message strong { font-weight: 700; }

.ssc-message--assistant {
	align-self: flex-start;
	background: var(--ssc-white);
	border: 1px solid var(--ssc-border);
	border-bottom-left-radius: 5px;
	box-shadow: var(--ssc-shadow-card);
	color: var(--ssc-charcoal);
}

.ssc-message--user {
	align-self: flex-end;
	background: var(--ssc-navy);
	border: 1px solid var(--ssc-navy);
	border-bottom-right-radius: 5px;
	color: var(--ssc-white);
}

/* Typing indicator */
.ssc-typing {
	align-items: center;
	display: inline-flex;
	gap: 5px;
	padding: 14px 16px;
}

.ssc-typing span {
	animation: ssc-bounce 1.2s infinite ease-in-out;
	background: var(--ssc-silver);
	border-radius: 50%;
	display: inline-block;
	height: 7px;
	width: 7px;
}

.ssc-typing span:nth-child(2) { animation-delay: 0.15s; }
.ssc-typing span:nth-child(3) { animation-delay: 0.3s; }

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

/* ---------------------------------------------------------------- Quick chips */
.ssc-drawer__quick-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ssc-drawer__quick {
	background: var(--ssc-white) !important;
	border: 1px solid var(--ssc-gray) !important;
	border-radius: 999px !important;
	color: var(--ssc-navy) !important;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em;
	line-height: 1.2;
	min-height: 36px;
	padding: 8px 15px !important;
	text-align: left;
	transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.ssc-drawer__quick:hover {
	background: var(--ssc-navy) !important;
	border-color: var(--ssc-navy) !important;
	color: var(--ssc-white) !important;
	transform: translateY(-1px);
}

/* "View more suggestions" — primary, full width so it reads as the next step under the cards. */
.ssc-drawer__quick--more {
	background: var(--ssc-navy) !important;
	border-color: var(--ssc-navy) !important;
	color: var(--ssc-pearl) !important;
	flex: 1 0 100%;
	font-weight: 600 !important;
	justify-content: center;
	text-align: center;
}

.ssc-drawer__quick--more:hover {
	background: var(--ssc-blue-deep) !important;
	border-color: var(--ssc-blue-deep) !important;
}

.ssc-drawer__quick--more[disabled] {
	cursor: default;
	opacity: 0.7;
}

/* New chat / Clear chat — quieter, set apart from discovery chips. */
.ssc-drawer__quick--reset {
	background: transparent !important;
	border-color: var(--ssc-border) !important;
	color: var(--ssc-muted) !important;
	font-size: 12px !important;
}

.ssc-drawer__quick--reset:hover {
	background: var(--ssc-silver-mist) !important;
	border-color: var(--ssc-silver) !important;
	color: var(--ssc-navy) !important;
}

/* ---------------------------------------------------------------- Product cards */
.ssc-drawer__products {
	display: grid;
	gap: 12px;
}

.ssc-product-card {
	background: var(--ssc-white) !important;
	border: 1px solid var(--ssc-border) !important;
	border-radius: var(--ssc-radius) !important;
	box-shadow: var(--ssc-shadow-card);
	display: grid;
	gap: 14px;
	grid-template-columns: 104px 1fr;
	overflow: hidden;
	padding: 12px;
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.ssc-product-card:hover {
	box-shadow: 0 16px 38px rgba(13, 24, 38, 0.12);
	transform: translateY(-2px);
}

.ssc-product-card__image {
	align-items: center;
	background: var(--ssc-silver-mist);
	border-radius: var(--ssc-radius-sm);
	display: flex;
	justify-content: center;
	min-height: 104px;
	overflow: hidden;
}

.ssc-product-card__image img {
	aspect-ratio: 1;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.ssc-product-card__content { display: flex; flex-direction: column; min-width: 0; }

.ssc-product-card__title {
	font-family: var(--ssc-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.28;
	margin: 0 0 6px;
}

.ssc-product-card__title a { color: var(--ssc-navy) !important; text-decoration: none !important; }

.ssc-product-card__price {
	color: var(--ssc-charcoal);
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 7px;
}

.ssc-product-card__reason {
	color: var(--ssc-muted);
	font-size: 0.82rem;
	line-height: 1.45;
	margin: 0 0 12px;
}

.ssc-product-card__button {
	align-self: flex-start;
	border: 1px solid var(--ssc-navy) !important;
	border-radius: 999px;
	color: var(--ssc-navy) !important;
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-top: auto;
	padding: 8px 16px;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background-color 150ms ease, color 150ms ease;
}

.ssc-product-card__button:hover { background: var(--ssc-navy) !important; color: var(--ssc-white) !important; }

/* ---------------------------------------------------------------- Composer */
.ssc-drawer__form {
	align-items: flex-end;
	background: var(--ssc-white);
	border-top: 1px solid var(--ssc-border);
	display: flex;
	gap: 10px;
	padding: 14px 16px;
}

.ssc-drawer__input {
	background: var(--ssc-pearl) !important;
	border: 1px solid var(--ssc-gray) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	color: var(--ssc-charcoal) !important;
	font-family: inherit !important;
	font-size: 0.95rem !important;
	line-height: 1.4;
	min-height: 48px;
	padding: 13px 14px !important;
	resize: none;
	width: 100%;
}

.ssc-drawer__input:focus { border-color: var(--ssc-blue-deep) !important; outline: none; }

.ssc-drawer__send {
	background: var(--ssc-navy) !important;
	border: 1px solid var(--ssc-navy) !important;
	border-radius: 999px !important;
	color: var(--ssc-white) !important;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	min-height: 48px;
	padding: 12px 20px !important;
	transition: background-color 150ms ease, transform 150ms ease;
	white-space: nowrap;
}

.ssc-drawer__send:hover:not(:disabled) { background: var(--ssc-navy-soft) !important; transform: translateY(-1px); }
.ssc-drawer__send:disabled { cursor: wait; opacity: 0.6; }

.ssc-drawer__support {
	background: var(--ssc-white);
	border-top: 1px solid var(--ssc-border);
	padding: 0 16px 16px;
}

.ssc-drawer__whatsapp {
	align-items: center;
	background: var(--ssc-white) !important;
	border: 1px solid var(--ssc-gray) !important;
	border-radius: 999px !important;
	color: var(--ssc-navy) !important;
	cursor: pointer;
	display: flex;
	font-family: inherit !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	gap: 9px;
	justify-content: center;
	min-height: 46px;
	padding: 11px 16px !important;
	transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
	width: 100%;
}

.ssc-drawer__whatsapp:hover { background: #25D366 !important; border-color: #25D366 !important; color: var(--ssc-white) !important; }
.ssc-drawer__whatsapp svg { flex: 0 0 18px; height: 18px; width: 18px; }

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ---------------------------------------------------------------- Inline helper */
.ssc-integration-helper {
	align-items: center;
	background: var(--ssc-pearl) !important;
	border: 1px solid var(--ssc-border) !important;
	border-radius: var(--ssc-radius);
	box-shadow: none !important;
	color: var(--ssc-charcoal) !important;
	display: flex;
	gap: 0.9rem;
	justify-content: space-between;
	margin: 18px 0 !important;
	padding: 18px !important;
}

.ssc-integration-helper__text { font-size: 0.95rem; line-height: 1.45; margin: 0; }
.ssc-integration-helper .ssc-assistant-entry { flex: 0 0 auto; }

/* ---------------------------------------------------------------- Tablet / mobile */
@media (max-width: 920px) {
	.ssc-assistant-entry--floating {
		bottom: calc(80px + env(safe-area-inset-bottom)) !important;
		right: max(16px, env(safe-area-inset-right)) !important;
	}

	.ssc-assistant-entry--floating .ssc-assistant-button {
		border-radius: 999px !important;
		font-size: 11px !important;
		gap: 8px !important;
		height: 50px !important;
		letter-spacing: 0.08em !important;
		max-width: calc(100vw - 36px) !important;
		min-height: 50px !important;
		padding: 0 18px 0 14px !important;
	}

	.ssc-assistant-entry--floating .ssc-assistant-button span:not(.ssc-assistant-button__spark) {
		display: inline-block !important;
		max-width: 46vw !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}

	/* On pages with the theme's mobile sticky bars, lift a little higher. */
	body.single-product .ssc-assistant-entry--floating,
	body.woocommerce-shop .ssc-assistant-entry--floating,
	body.post-type-archive-product .ssc-assistant-entry--floating,
	body.tax-product_cat .ssc-assistant-entry--floating,
	body.tax-product_tag .ssc-assistant-entry--floating {
		bottom: calc(146px + env(safe-area-inset-bottom)) !important;
	}
}

@media (max-width: 640px) {
	.ssc-drawer {
		border-left: 0;
		border-radius: 22px 22px 0 0 !important;
		bottom: 0;
		height: 92vh;
		max-width: none;
		right: 0;
		top: auto;
		transform: translateY(104%);
	}

	.ssc-drawer-root.is-open .ssc-drawer { transform: translateY(0); }

	.ssc-drawer::before {
		background: rgba(174, 182, 189, 0.5);
		border-radius: 999px;
		content: "";
		height: 4px;
		left: 50%;
		position: absolute;
		top: 8px;
		transform: translateX(-50%);
		width: 42px;
		z-index: 2;
	}

	.ssc-drawer__header { border-radius: 22px 22px 0 0; padding-top: 22px; }
	.ssc-drawer__body { padding: 16px 16px 10px; }
	.ssc-message { max-width: 92%; }
	.ssc-product-card { grid-template-columns: 92px 1fr; }
	.ssc-drawer__form { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
	.ssc-drawer__title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
	.ssc-assistant-button,
	.ssc-assistant-button__spark,
	.ssc-assistant-entry--floating .ssc-assistant-button,
	.ssc-assistant-entry--floating .ssc-assistant-button__spark,
	.ssc-drawer,
	.ssc-drawer-backdrop,
	.ssc-product-card,
	.ssc-drawer__close,
	.ssc-drawer__new,
	.ssc-typing span {
		transition: none !important;
		animation: none !important;
	}

	.ssc-assistant-button:hover,
	.ssc-product-card:hover { transform: none !important; }
}