/* CREMELLE — Chat de asistencia (widget propio del tema).
   Estilos aislados bajo #cr-chat; usa los tokens de theme.css con fallbacks. */

#cr-chat {
	--crc-ink:      var(--color-ink, #211E18);
	--crc-ink-deep: var(--color-ink-900, #17150F);
	--crc-gold:     var(--color-gold, #C9A063);
	--crc-gold-hov: var(--color-gold-400, #D0AE73);
	--crc-gold-dim: var(--color-gold-600, #B08945);
	--crc-cream:    var(--color-cream-50, #FCFAF4);
	--crc-cream-2:  var(--color-cream-200, #EFE8D8);
	--crc-line:     var(--color-line, #E2DAC7);
	--crc-muted:    var(--color-muted, #6E6656);
	--crc-body:     var(--color-body, #2A261E);
	--crc-sans:     var(--font-sans, "Jost", ui-sans-serif, system-ui, sans-serif);
	--crc-serif:    var(--font-display, "Playfair Display", Georgia, serif);

	position: fixed;
	right: max(1.1rem, env(safe-area-inset-right, 0px));
	bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	font-family: var(--crc-sans);
}

#cr-chat *,
#cr-chat *::before,
#cr-chat *::after { box-sizing: border-box; }

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

/* Botón flotante ------------------------------------------------------- */
.cr-chat__launcher {
	display: flex; align-items: center; justify-content: center;
	width: 3.4rem; height: 3.4rem;
	border: 0; border-radius: 50%;
	background: var(--crc-gold); color: #1B1812;
	box-shadow: 0 10px 28px rgba(23, 21, 15, .28);
	cursor: pointer;
	transition: transform .2s ease, background .2s ease;
}
.cr-chat__launcher:hover { background: var(--crc-gold-hov); transform: translateY(-2px); }
.cr-chat__launcher:focus-visible { outline: 2px solid var(--crc-ink); outline-offset: 3px; }
.cr-chat__launcher svg { width: 1.5rem; height: 1.5rem; }
.cr-chat__icon-close { display: none; }
#cr-chat.is-open .cr-chat__icon-close { display: block; }
#cr-chat.is-open .cr-chat__icon-open { display: none; }

/* Burbuja de invitación ------------------------------------------------ */
.cr-chat__teaser {
	position: absolute; right: 0; bottom: calc(100% + .8rem);
	display: flex; align-items: center; gap: .1rem;
	background: var(--crc-ink); color: var(--crc-cream);
	border-radius: 14px 14px 3px 14px;
	box-shadow: 0 12px 30px rgba(23, 21, 15, .25);
	padding: .3rem .4rem .3rem .45rem;
	white-space: nowrap;
	animation: crc-pop .3s ease both;
}
.cr-chat__teaser-open {
	border: 0; background: none; color: inherit; font-family: inherit;
	font-size: .84rem; padding: .35rem .3rem .35rem .45rem; cursor: pointer;
}
.cr-chat__teaser-close {
	border: 0; background: none; color: rgba(247, 243, 233, .6);
	display: flex; align-items: center; justify-content: center;
	width: 1.7rem; height: 1.7rem; cursor: pointer; border-radius: 50%;
}
.cr-chat__teaser-close:hover { color: #fff; }
.cr-chat__teaser-close svg { width: .75rem; height: .75rem; }

/* Panel ---------------------------------------------------------------- */
.cr-chat__panel {
	position: absolute; right: 0; bottom: calc(100% + .9rem);
	display: flex; flex-direction: column;
	width: min(378px, calc(100vw - 2.2rem));
	height: min(33.5rem, calc(100vh - 7.5rem));
	height: min(33.5rem, calc(100dvh - 7.5rem));
	background: var(--crc-cream);
	border: 1px solid var(--crc-line);
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(23, 21, 15, .3);
	overflow: hidden;
	animation: crc-pop .28s ease both;
}
.cr-chat__panel[hidden] { display: none; }

@keyframes crc-pop {
	from { opacity: 0; transform: translateY(10px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* Cabecera ------------------------------------------------------------- */
.cr-chat__head {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	background: var(--crc-ink-deep);
	padding: .95rem 1.15rem;
}
.cr-chat__brand {
	margin: 0;
	font-family: var(--crc-serif);
	color: var(--crc-cream);
	font-size: 1.02rem; letter-spacing: .22em;
}
.cr-chat__status {
	margin: .15rem 0 0;
	display: flex; align-items: center; gap: .4rem;
	font-size: .72rem; color: rgba(247, 243, 233, .62);
}
.cr-chat__dot {
	width: .5rem; height: .5rem; border-radius: 50%;
	background: #8FBF8F;
	animation: crc-pulse 2.4s ease-out infinite;
}
@keyframes crc-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(143, 191, 143, .45); }
	70%  { box-shadow: 0 0 0 .45rem rgba(143, 191, 143, 0); }
	100% { box-shadow: 0 0 0 0 rgba(143, 191, 143, 0); }
}
.cr-chat__close {
	border: 0; background: none; cursor: pointer;
	color: rgba(247, 243, 233, .65);
	display: flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; border-radius: 50%;
	transition: color .2s ease, background .2s ease;
}
.cr-chat__close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.cr-chat__close svg { width: 1rem; height: 1rem; }

/* Mensajes ------------------------------------------------------------- */
.cr-chat__body {
	flex: 1; overflow-y: auto;
	padding: 1.1rem 1rem .9rem;
	display: flex; flex-direction: column; gap: .55rem;
	scrollbar-width: thin;
	scrollbar-color: var(--crc-line) transparent;
}
.cr-chat__msg {
	max-width: 86%;
	padding: .62rem .85rem;
	font-size: .88rem; line-height: 1.55;
	border-radius: 14px;
	animation: crc-pop .22s ease both;
}
.cr-chat__msg--bot {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--crc-line);
	border-bottom-left-radius: 4px;
	color: var(--crc-body);
}
.cr-chat__msg--bot p { margin: 0; }
.cr-chat__msg--bot p + p { margin-top: .5rem; }
.cr-chat__msg--user {
	align-self: flex-end;
	background: var(--crc-ink);
	color: var(--crc-cream);
	border-bottom-right-radius: 4px;
}

/* Enlaces dentro de una respuesta -------------------------------------- */
.cr-chat__pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.cr-chat__pill {
	display: inline-flex; align-items: center;
	padding: .34rem .75rem;
	border: 1px solid var(--crc-gold-dim);
	border-radius: 999px;
	font-size: .78rem; font-weight: 500;
	color: var(--crc-ink); text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.cr-chat__pill:hover { background: var(--crc-gold); color: #1B1812; }

/* Indicador de escritura ----------------------------------------------- */
.cr-chat__typing { display: flex; gap: .3rem; padding: .8rem .9rem; }
.cr-chat__typing span {
	width: .42rem; height: .42rem; border-radius: 50%;
	background: var(--crc-gold-dim);
	animation: crc-blink 1.1s infinite ease-in-out;
}
.cr-chat__typing span:nth-child(2) { animation-delay: .15s; }
.cr-chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes crc-blink {
	0%, 80%, 100% { opacity: .25; transform: translateY(0); }
	40%           { opacity: 1; transform: translateY(-2px); }
}

/* Accesos rápidos ------------------------------------------------------ */
.cr-chat__chips {
	display: flex; gap: .4rem;
	padding: .55rem .8rem;
	overflow-x: auto;
	border-top: 1px solid var(--crc-line);
	background: var(--crc-cream);
	scrollbar-width: none;
}
.cr-chat__chips::-webkit-scrollbar { display: none; }
.cr-chat__chip {
	flex: 0 0 auto;
	border: 1px solid var(--crc-line);
	background: #fff; color: var(--crc-muted);
	font-family: inherit; font-size: .76rem; font-weight: 500;
	padding: .34rem .7rem; border-radius: 999px;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
.cr-chat__chip:hover { border-color: var(--crc-gold); color: var(--crc-ink); }

/* Entrada -------------------------------------------------------------- */
.cr-chat__form {
	display: flex; align-items: center; gap: .5rem;
	padding: .65rem .8rem;
	background: #fff;
	border-top: 1px solid var(--crc-line);
}
.cr-chat__input {
	flex: 1; min-width: 0;
	border: 1px solid var(--crc-line);
	border-radius: 999px;
	background: var(--crc-cream);
	padding: .55rem .95rem;
	font-family: inherit; font-size: .86rem; color: var(--crc-body);
}
.cr-chat__input:focus { outline: none; border-color: var(--crc-gold); }
.cr-chat__input::placeholder { color: var(--crc-muted); opacity: .8; }
.cr-chat__send {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	width: 2.45rem; height: 2.45rem;
	border: 0; border-radius: 50%;
	background: var(--crc-gold); color: #1B1812;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.cr-chat__send:hover { background: var(--crc-gold-hov); transform: translateY(-1px); }
.cr-chat__send svg { width: 1.05rem; height: 1.05rem; }

/* Móvil ---------------------------------------------------------------- */
@media (max-width: 560px) {
	.cr-chat__panel {
		position: fixed;
		right: .75rem; left: .75rem;
		bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px));
		width: auto;
		height: min(72vh, 33.5rem);
		height: min(72dvh, 33.5rem);
	}
	.cr-chat__teaser-open { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
	#cr-chat, #cr-chat * { animation: none !important; transition: none !important; }
}

@media print { #cr-chat { display: none !important; } }