/**
 * Assistent de veu — estils.
 *
 * Paleta pensada per a una carnisseria gourmet: granat profund, crema
 * càlida i un toc d'or. Tot està namespaced sota .erdn-voice-* i el
 * contenidor fixa les seves pròpies variables, així cap tema ni Elementor
 * hi pot interferir.
 */

#erdn-voice-root {
	--erdn-red: #9b1c26;
	--erdn-red-deep: #6d121a;
	--erdn-gold: #c8a24a;
	--erdn-ink: #24160f;
	--erdn-surface: #fffaf5;
	--erdn-surface-2: #f4e9df;
	--erdn-muted: #7a6a5f;
	--erdn-radius: 18px;
	--erdn-shadow: 0 18px 48px -12px rgba(36, 22, 15, .38), 0 4px 12px -4px rgba(36, 22, 15, .18);

	position: fixed;
	right: clamp(14px, 3vw, 28px);
	bottom: clamp(14px, 3vw, 28px);
	z-index: 2147483000;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

#erdn-voice-root *,
#erdn-voice-root *::before,
#erdn-voice-root *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- *
 * Botó flotant
 * ---------------------------------------------------------------- */

/**
 * El tema i Elementor imposen les seves pròpies regles a <button> (display
 * block, padding i mida de lletra propis) i guanyen a un selector de classe
 * simple. Es puja l'especificitat amb l'id del contenidor i es marquen com a
 * !important només les propietats de disposició, que són les que trencaven
 * el botó. La resta es deixa sobreescriptible expressament.
 */
#erdn-voice-root .erdn-voice-fab {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-direction: row !important;
	gap: 10px;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	padding: 0 22px 0 18px !important;
	height: 58px !important;
	min-height: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer;
	color: #fff !important;
	background: linear-gradient(140deg, var(--erdn-red) 0%, var(--erdn-red-deep) 100%) !important;
	box-shadow: var(--erdn-shadow);
	font-family: inherit;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: .01em;
	text-transform: none !important;
	white-space: nowrap !important;
	overflow: visible;
	transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, filter .22s ease;
	-webkit-tap-highlight-color: transparent;
}

#erdn-voice-root .erdn-voice-fab__label {
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
}

.erdn-voice-fab:hover { transform: translateY(-2px); filter: brightness(1.06); }
.erdn-voice-fab:active { transform: translateY(0) scale(.98); }
.erdn-voice-fab:focus-visible { outline: 3px solid var(--erdn-gold); outline-offset: 3px; }

.erdn-voice-fab__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	flex: 0 0 auto;
}

/* Batec suau només en repòs, per convidar sense distreure. */
#erdn-voice-root[data-status="idle"] .erdn-voice-fab__icon::after {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .5);
	animation: erdn-pulse 2.8s ease-out infinite;
}

.erdn-voice-fab__icon { position: relative; }

@keyframes erdn-pulse {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(1.9); opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* In session the button shrinks: the panel takes over.
   !important is required to beat the base rule above, which needs its own
   !important to survive the theme — without it this never applied at all. */
#erdn-voice-root:not([data-status="idle"]) .erdn-voice-fab {
	height: 46px !important;
	padding: 0 18px 0 14px !important;
	background: linear-gradient(140deg, #3a2119 0%, #24160f 100%) !important;
}

/* ---------------------------------------------------------------- *
 * Panell
 * ---------------------------------------------------------------- */

.erdn-voice-panel {
	width: min(360px, calc(100vw - 28px));
	max-height: min(62vh, 560px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--erdn-radius);
	background: var(--erdn-surface);
	border: 1px solid rgba(36, 22, 15, .08);
	box-shadow: var(--erdn-shadow);
	animation: erdn-rise .28s cubic-bezier(.2, .8, .2, 1);
}

.erdn-voice-panel[hidden] { display: none; }

@keyframes erdn-rise {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

.erdn-voice-panel__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 14px 12px;
	background: linear-gradient(180deg, var(--erdn-surface-2), var(--erdn-surface));
	border-bottom: 1px solid rgba(36, 22, 15, .07);
}

.erdn-voice-panel__status {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	color: var(--erdn-ink);
	letter-spacing: .01em;
}

/**
 * Transcript toggle. Hidden on desktop, where there is room to show the
 * conversation permanently; on a phone it is what opens the collapsed
 * panel. Same theme-proofing as the close button below.
 */
#erdn-voice-root .erdn-voice-panel__toggle {
	display: none;
	place-items: center;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex: 0 0 auto;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--erdn-muted) !important;
	line-height: 1 !important;
	border-radius: 8px !important;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
#erdn-voice-root .erdn-voice-panel__toggle:hover {
	background: rgba(36, 22, 15, .07) !important;
	color: var(--erdn-ink) !important;
}
#erdn-voice-root .erdn-voice-panel__toggle svg {
	transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
/* Chevron points down when the transcript is open (tap to close it), up
   when collapsed (tap to reveal it). */
#erdn-voice-root[data-collapsed="1"] .erdn-voice-panel__toggle svg {
	transform: rotate(180deg);
}

/**
 * Same fight as the FAB: the theme styles every <button> and won a plain
 * class selector, painting this one as a bordered pink box with 16px
 * padding — on a phone it dominated the header. The id raises specificity
 * and !important covers the properties the theme sets directly.
 */
#erdn-voice-root .erdn-voice-panel__close {
	display: grid !important;
	place-items: center !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex: 0 0 auto;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--erdn-muted) !important;
	font-size: 21px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	border-radius: 8px !important;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
#erdn-voice-root .erdn-voice-panel__close:hover {
	background: rgba(36, 22, 15, .07) !important;
	color: var(--erdn-ink) !important;
}

/* Indicador d'estat ------------------------------------------------ */

.erdn-voice-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--erdn-muted);
	flex: 0 0 auto;
	box-shadow: 0 0 0 0 currentColor;
}

#erdn-voice-root[data-status="connecting"] .erdn-voice-dot { background: var(--erdn-gold); animation: erdn-blink 1s ease-in-out infinite; }
#erdn-voice-root[data-status="listening"]  .erdn-voice-dot { background: #2e9e5b; }
#erdn-voice-root[data-status="speaking"]   .erdn-voice-dot { background: var(--erdn-red); }
#erdn-voice-root[data-status="thinking"]   .erdn-voice-dot { background: var(--erdn-gold); animation: erdn-blink .8s ease-in-out infinite; }

@keyframes erdn-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------------------------------------------------------------- *
 * Orbe d'àudio
 * ---------------------------------------------------------------- */

.erdn-voice-orb {
	position: relative;
	height: 92px;
	display: grid;
	place-items: center;
	background:
		radial-gradient(120px 60px at 50% 120%, rgba(155, 28, 38, .10), transparent 70%),
		var(--erdn-surface);
	border-bottom: 1px solid rgba(36, 22, 15, .06);
}

.erdn-voice-orb__core {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--erdn-red), var(--erdn-red-deep));
	box-shadow: 0 6px 18px -6px rgba(155, 28, 38, .8);
	/* --level l'escriu el JS a cada frame d'àudio. */
	transform: scale(calc(1 + (var(--level, 0) * .38)));
	transition: transform .08s linear;
}

.erdn-voice-orb__ring {
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--erdn-red);
	opacity: calc(var(--level, 0) * .7);
	transform: scale(calc(1.15 + (var(--level, 0) * 1.1)));
	transition: transform .12s ease-out, opacity .12s ease-out;
	pointer-events: none;
}

.erdn-voice-orb__ring--outer {
	border-color: var(--erdn-gold);
	opacity: calc(var(--level, 0) * .4);
	transform: scale(calc(1.35 + (var(--level, 0) * 1.9)));
}

/* Quan parla l'assistent l'orbe respira sol. */
#erdn-voice-root[data-status="speaking"] .erdn-voice-orb__core {
	animation: erdn-breathe 1.5s ease-in-out infinite;
}

@keyframes erdn-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.14); }
}

/* ---------------------------------------------------------------- *
 * Transcripció
 * ---------------------------------------------------------------- */

.erdn-voice-log {
	flex: 1;
	overflow-y: auto;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	scrollbar-width: thin;
}

.erdn-voice-line {
	margin: 0;
	padding: 9px 12px;
	border-radius: 13px;
	font-size: 14px;
	line-height: 1.42;
	max-width: 88%;
	word-wrap: break-word;
	animation: erdn-fade .2s ease;
}

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

.erdn-voice-line--user {
	align-self: flex-end;
	background: var(--erdn-red);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.erdn-voice-line--assistant {
	align-self: flex-start;
	background: var(--erdn-surface-2);
	color: var(--erdn-ink);
	border-bottom-left-radius: 4px;
}

.erdn-voice-line--system {
	align-self: center;
	background: transparent;
	color: var(--erdn-muted);
	font-size: 12.5px;
	font-style: italic;
	text-align: center;
	max-width: 100%;
	padding: 4px 8px;
}

/* ---------------------------------------------------------------- *
 * Peu
 * ---------------------------------------------------------------- */

.erdn-voice-panel__foot {
	padding: 10px 14px 14px;
	border-top: 1px solid rgba(36, 22, 15, .07);
	background: var(--erdn-surface);
}

.erdn-voice-cart {
	display: block;
	text-align: center;
	padding: 11px 14px;
	border-radius: 11px;
	background: var(--erdn-ink);
	color: #fff !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 600;
	transition: filter .18s ease, transform .18s ease;
}
.erdn-voice-cart:hover { filter: brightness(1.18); transform: translateY(-1px); }

/* ---------------------------------------------------------------- *
 * Mobile
 *
 * On a phone the widget was taking 80% of an iPhone SE screen, and most of
 * that was chrome rather than conversation: a 92px decorative orb, a 61px
 * header and a 68px cart footer left only 239px for the transcript. Every
 * fixed block below is tightened so the talking takes the space and the
 * shop stays visible behind it.
 * ---------------------------------------------------------------- */

@media (max-width: 520px) {
	#erdn-voice-root { left: 12px; right: 12px; bottom: 12px; align-items: stretch; gap: 9px; }
	.erdn-voice-fab { align-self: flex-end; }

	/* Sized against the FAB and the gap so the whole widget, not just the
	   panel, stays inside roughly two thirds of the viewport. */
	.erdn-voice-panel {
		width: 100%;
		max-height: min(calc(72vh - 58px), 460px);
	}

	.erdn-voice-panel__head { padding: 9px 11px 8px; gap: 8px; }
	.erdn-voice-panel__status { font-size: 12.5px; }

	/* The orb is feedback, not furniture: a third of the height reads just
	   as clearly and stays a comfortable tap target for interrupting. */
	.erdn-voice-orb { height: 50px; }
	.erdn-voice-orb__core { width: 30px; height: 30px; }
	.erdn-voice-orb__ring { width: 30px; height: 30px; }

	.erdn-voice-log { padding: 9px 11px; gap: 6px; }
	.erdn-voice-line { padding: 7px 10px; font-size: 13.5px; border-radius: 11px; }

	.erdn-voice-panel__foot { padding: 8px 11px 10px; }
	.erdn-voice-cart { padding: 9px 12px; font-size: 13px; border-radius: 9px; }

	/* The toggle only exists where the panel can collapse. */
	#erdn-voice-root .erdn-voice-panel__toggle { display: grid !important; }

	/**
	 * Collapsed: status line and orb only.
	 *
	 * The shopper is talking, not reading. A live transcript took most of
	 * a phone screen away from the shop it is meant to be selling, so it
	 * now waits behind the chevron; the orb still shows the session is
	 * alive and remains the tap target for interrupting.
	 */
	#erdn-voice-root[data-collapsed="1"] .erdn-voice-log,
	#erdn-voice-root[data-collapsed="1"] .erdn-voice-panel__foot { display: none; }

	#erdn-voice-root[data-collapsed="1"] .erdn-voice-panel { max-height: none; }
	#erdn-voice-root[data-collapsed="1"] .erdn-voice-orb { border-bottom: 0; }
}

/* Landscape phones have almost no height. The orb shrinks further but is
   never hidden: it is the only tap target for interrupting, and the
   half-duplex notice tells the shopper to click it. */
@media (max-width: 900px) and (max-height: 520px) {
	.erdn-voice-orb { height: 38px; }
	.erdn-voice-orb__core { width: 22px; height: 22px; }
	.erdn-voice-orb__ring { width: 22px; height: 22px; }
	.erdn-voice-panel { max-height: calc(88vh - 54px); }
}

/* ---------------------------------------------------------------- *
 * Mode fosc i accessibilitat
 * ---------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	#erdn-voice-root {
		--erdn-surface: #1c1512;
		--erdn-surface-2: #2a201b;
		--erdn-ink: #f6ece4;
		--erdn-muted: #a9968a;
	}
	.erdn-voice-panel { border-color: rgba(255, 255, 255, .08); }
	.erdn-voice-cart { background: var(--erdn-red); }
}

/* ---------------------------------------------------------------- *
 * Product spotlight
 *
 * Applied to a WooCommerce card when the assistant points one out. It
 * lives outside #erdn-voice-root because the card belongs to the page,
 * so the selector is namespaced by class instead.
 * ---------------------------------------------------------------- */

.erdn-spotlight {
	animation: erdn-spotlight 2.6s ease-out;
	border-radius: 12px;
	position: relative;
	z-index: 2;
}

@keyframes erdn-spotlight {
	0%   { box-shadow: 0 0 0 0 rgba(155, 28, 38, .55); transform: scale(1); }
	12%  { box-shadow: 0 0 0 10px rgba(155, 28, 38, .28); transform: scale(1.025); }
	38%  { box-shadow: 0 0 0 4px rgba(200, 162, 74, .55); transform: scale(1.012); }
	100% { box-shadow: 0 0 0 0 rgba(155, 28, 38, 0); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.erdn-spotlight { animation: none; outline: 3px solid #9b1c26; outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
	#erdn-voice-root *,
	#erdn-voice-root *::before,
	#erdn-voice-root *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}