/**
 * Chat flotante de Rey.
 *
 * Los colores se toman de las variables del tema cuando existen, con un
 * respaldo propio: así el plugin se ve integrado en Reyes del Cerdo pero
 * sigue siendo presentable si se activa con otro tema.
 */

.rey {
	position: fixed;
	right: 20px;
	/* En la esquina: cuando Rey está activo, el plugin oculta el botón
	   flotante de WhatsApp del tema, así que este lugar queda libre. */
	bottom: 20px;
	z-index: 9998;
	font-family: var(--rdc-cuerpo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* --- Burbuja --- */

.rey__burbuja {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background: var(--rdc-rojo, #c9302a);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	/* Halo rojo, en el mismo espíritu que el verde del botón de WhatsApp del
	   tema: dos sombras de color sobre la sombra de profundidad. */
	box-shadow:
		0 8px 26px rgba(0, 0, 0, 0.4),
		0 0 18px rgba(201, 48, 42, 0.55),
		0 0 42px rgba(201, 48, 42, 0.35);
	transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.rey__burbuja:hover {
	background: var(--rdc-rojo-hover, #a82520);
	transform: translateY(-2px);
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.45),
		0 0 26px rgba(201, 48, 42, 0.75),
		0 0 58px rgba(201, 48, 42, 0.45);
}

.rey--abierto .rey__burbuja { display: none; }

/* --- Panel --- */

.rey__panel {
	display: flex;
	flex-direction: column;
	width: min(380px, calc(100vw - 40px));
	height: min(560px, calc(100vh - 160px));
	background: var(--rdc-superficie, #17171c);
	border: 1px solid var(--rdc-linea, rgba(255, 255, 255, 0.09));
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.rey__panel[hidden] { display: none; }

.rey__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: var(--rdc-superficie-2, #1e1e25);
	border-bottom: 1px solid var(--rdc-linea, rgba(255, 255, 255, 0.09));
	flex: none;
}

.rey__identidad { display: flex; align-items: center; gap: 10px; }

.rey__avatar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: var(--rdc-rojo, #c9302a);
	border-radius: 50%;
	font-size: 1.1rem;
}

.rey__nombre {
	display: block;
	color: var(--rdc-texto, #f2efea);
	font-size: 0.95rem;
	line-height: 1.2;
}

.rey__rol {
	display: block;
	color: var(--rdc-texto-tenue, #74747f);
	font-size: 0.74rem;
}

.rey__cerrar {
	background: none;
	border: 0;
	color: var(--rdc-texto-suave, #a6a6b2);
	cursor: pointer;
	padding: 6px;
	line-height: 0;
}

.rey__cerrar:hover { color: var(--rdc-texto, #f2efea); }

/* --- Mensajes --- */

.rey__mensajes {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rey__msg {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 0.88rem;
	line-height: 1.5;
}

/* pre-wrap para respetar los saltos de línea del modelo: sin esto, una
   respuesta con lista ("- Chorizo…") sale toda corrida en un solo párrafo. */
.rey__msg p { margin: 0; white-space: pre-wrap; }

.rey__msg--rey {
	align-self: flex-start;
	background: var(--rdc-superficie-2, #1e1e25);
	border: 1px solid var(--rdc-linea, rgba(255, 255, 255, 0.09));
	border-bottom-left-radius: 4px;
	color: var(--rdc-texto, #f2efea);
}

.rey__msg--cliente {
	align-self: flex-end;
	background: var(--rdc-rojo, #c9302a);
	border-bottom-right-radius: 4px;
	color: #fff;
}

.rey__msg--cargando { opacity: 0.6; font-style: italic; }

/* --- Tildes de estado (enviado / entregado / leído) --- */

.rey__msg--cliente {
	/* Sitio para los tildes en la esquina inferior derecha de la burbuja. */
	padding-bottom: 18px;
	position: relative;
}

.rey__estado {
	position: absolute;
	right: 10px;
	bottom: 5px;
	line-height: 0;
	color: rgba(255, 255, 255, 0.65);
}

/* Enviado: un solo tilde, el segundo todavía no se dibuja. */
.rey__estado--enviado .rey__tilde2 { display: none; }

/* Entregado: los dos tildes, en el gris tenue del mensaje. */
.rey__estado--entregado { color: rgba(255, 255, 255, 0.65); }

/* Leído: los dos tildes en celeste, como en WhatsApp. */
.rey__estado--leido { color: #53bdeb; }

.rey__msg a {
	color: var(--rdc-rojo-claro, #f0655a);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
}

.rey__msg--cliente a { color: #fff; }

/* Enlaces a producto o página: se muestran como pastilla y no como URL cruda,
   que en una burbuja angosta ocupa cuatro renglones y es ilegible. */
.rey__enlace {
	display: inline-block;
	margin: 4px 0 2px;
	padding: 5px 12px;
	background: rgba(201, 48, 42, 0.16);
	border: 1px solid rgba(201, 48, 42, 0.45);
	border-radius: 999px;
	color: var(--rdc-rojo-claro, #f0655a);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.rey__enlace:hover {
	background: var(--rdc-rojo, #c9302a);
	border-color: var(--rdc-rojo, #c9302a);
	color: #fff;
	text-decoration: none;
}

/* Botón de derivación a WhatsApp dentro de la conversación. */
.rey__wsp {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #25d366;
	border-radius: 999px;
	color: #06301a;
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
}

.rey__wsp:hover { background: #1fb257; color: #06301a; }

/* --- Formulario --- */

.rey__form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--rdc-linea, rgba(255, 255, 255, 0.09));
	flex: none;
}

.rey__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 14px;
	background: var(--rdc-superficie-2, #1e1e25);
	border: 1px solid var(--rdc-linea, rgba(255, 255, 255, 0.09));
	border-radius: 999px;
	color: var(--rdc-texto, #f2efea);
	font-size: 0.88rem;
	font-family: inherit;
}

.rey__input:focus {
	outline: none;
	border-color: var(--rdc-rojo-claro, #f0655a);
}

.rey__enviar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	background: var(--rdc-rojo, #c9302a);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

.rey__enviar:hover { background: var(--rdc-rojo-hover, #a82520); }
.rey__enviar:disabled { opacity: 0.5; cursor: not-allowed; }

.rey__aviso {
	margin: 0;
	padding: 0 16px 12px;
	font-size: 0.68rem;
	line-height: 1.4;
	color: var(--rdc-texto-tenue, #74747f);
	flex: none;
}

.rey__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media (max-width: 560px) {
	.rey { right: 14px; bottom: 14px; }
	.rey__burbuja-texto { display: none; }
	.rey__burbuja { padding: 14px; }
	.rey__panel { height: min(70vh, 520px); }
}

@media (prefers-reduced-motion: reduce) {
	.rey__burbuja { transition: none; }
}