/* SincraChat — la burbuja de chat del visitante. Todo prefijado con .sch- para no pisar el tema. */

#sincrachat[hidden] { display: none; }

/* IMPORTANTE: el atributo hidden pierde contra un display: flex explícito.
   Sin esta regla el panel queda abierto siempre y tapa la tienda. */
.sch-raiz [hidden] { display: none !important; }

.sch-raiz {
	--sch-acento: #d32f2f;
	--sch-acento-claro: #e8514a;
	--sch-acento-oscuro: #b5241f;
	--sch-sombra: rgba(181, 36, 31, .55);
	--sch-texto: #1b2430;
	--sch-suave: #6b7683;
	--sch-linea: #e6e9ed;
	--sch-fondo: #ffffff;
	--sch-burbuja-otro: #f1f3f6;
	--sch-abajo: 18px;
	--sch-costado: 18px;

	position: fixed;
	bottom: var(--sch-abajo);
	z-index: 99998;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: var(--sch-texto);
}

.sch-raiz.sch-derecha { right: var(--sch-costado); align-items: flex-end; }
.sch-raiz.sch-izquierda { left: var(--sch-costado); align-items: flex-start; }

/* ---------- botón ---------- */
.sch-boton {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 18px 6px 6px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(145deg, var(--sch-acento-claro), var(--sch-acento-oscuro));
	color: #fff;
	font: 600 14px/1 inherit;
	letter-spacing: .2px;
	cursor: pointer;
	/* Dos sombras: una de color, que lo despega del fondo, y una neutra para el apoyo. */
	box-shadow:
		0 8px 22px -6px var(--sch-sombra),
		0 3px 8px rgba(0, 0, 0, .16);
	-webkit-tap-highlight-color: transparent;
}

/* El ícono va dentro de un disco claro: le da volumen y lo hace leer como avatar. */
.sch-avatar {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.sch-avatar svg { width: 20px; height: 20px; display: block; }
.sch-etiqueta { padding-right: 2px; white-space: nowrap; }

/* Puntito verde: "hay alguien del otro lado". */
.sch-vivo {
	position: absolute;
	top: 5px;
	left: 33px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 2.5px var(--sch-acento-oscuro);
}

/* Modo compacto: sólo el disco, para no pelear con otros botones flotantes. */
.sch-raiz.sch-compacto .sch-boton {
	width: 56px;
	height: 56px;
	padding: 0;
	justify-content: center;
}
.sch-raiz.sch-compacto .sch-etiqueta { display: none; }
.sch-raiz.sch-compacto .sch-avatar {
	width: 100%;
	height: 100%;
	background: transparent;
	box-shadow: none;
}
.sch-raiz.sch-compacto .sch-avatar svg { width: 25px; height: 25px; }
.sch-raiz.sch-compacto .sch-vivo { top: 6px; left: auto; right: 6px; }

/* Con mensajes sin leer manda el globito: dos puntos verdes juntos ensucian. */
.sch-boton.sch-con-punto .sch-vivo { display: none; }

/* Globito de mensajes sin leer. */
.sch-punto {
	position: absolute;
	top: -5px;
	right: -3px;
	min-width: 21px;
	height: 21px;
	padding: 0 6px;
	border-radius: 999px;
	background: #16a34a;
	color: #fff;
	font: 700 12px/21px inherit;
	text-align: center;
	box-shadow: 0 0 0 2.5px var(--sch-fondo), 0 2px 6px rgba(0, 0, 0, .2);
}

/* Anillo que late. Se enciende solo cuando hay algo sin leer. */
.sch-boton::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var(--sch-acento-claro);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.sch-boton {
		transition: transform .18s cubic-bezier(.34, 1.4, .64, 1), box-shadow .18s ease;
	}
	.sch-boton:hover {
		transform: translateY(-2px);
		box-shadow:
			0 14px 28px -8px var(--sch-sombra),
			0 4px 10px rgba(0, 0, 0, .18);
	}
	.sch-boton:active { transform: scale(.96); }

	.sch-boton.sch-late::after { animation: sch-anillo 1.9s ease-out infinite; }
	@keyframes sch-anillo {
		0%   { opacity: .6; transform: scale(1); }
		70%  { opacity: 0;   transform: scale(1.32); }
		100% { opacity: 0;   transform: scale(1.32); }
	}
}

.sch-boton:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--sch-sombra);
}

/* ---------- panel ---------- */
.sch-panel {
	display: flex;
	flex-direction: column;
	width: 316px;
	max-width: calc(100vw - 2 * var(--sch-costado));
	height: 400px;
	max-height: calc(100vh - var(--sch-abajo) - 90px);
	border-radius: 14px;
	background: var(--sch-fondo);
	box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
	overflow: hidden;
}

@media (max-width: 480px) {
	.sch-panel {
		width: calc(100vw - 2 * var(--sch-costado));
		height: min(62vh, 430px);
	}
}

.sch-cab {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 11px;
	background: var(--sch-acento);
	color: #fff;
}
.sch-cab h3 { margin: 0; font-size: 14px; font-weight: 650; color: #fff; }
.sch-cab p { margin: 0; font-size: 11px; opacity: .85; }
.sch-acciones { margin-left: auto; display: flex; gap: 4px; }
.sch-icono {
	width: 27px; height: 27px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 15px; line-height: 1;
	cursor: pointer;
}

.sch-hilo {
	flex: 1;
	padding: 11px;
	overflow-y: auto;
	background: #fafbfc;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sch-msg {
	max-width: 84%;
	padding: 7px 11px;
	border-radius: 13px;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.sch-msg.sch-de-tienda {
	align-self: flex-start;
	background: var(--sch-burbuja-otro);
	border-bottom-left-radius: 4px;
}
.sch-msg.sch-de-yo {
	align-self: flex-end;
	background: var(--sch-acento);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.sch-nota {
	align-self: center;
	max-width: 95%;
	color: var(--sch-suave);
	font-size: 12px;
	text-align: center;
}

/* ---------- caja de escritura ---------- */
.sch-pie {
	display: flex;
	align-items: flex-end;
	gap: 7px;
	padding: 8px;
	border-top: 1px solid var(--sch-linea);
	background: var(--sch-fondo);
}
.sch-pie textarea {
	flex: 1;
	min-height: 34px;
	max-height: 76px;
	padding: 7px 11px;
	border: 1px solid var(--sch-linea);
	border-radius: 9px;
	background: #fff;
	color: var(--sch-texto);
	font: 14px/1.35 inherit;
	resize: none;
	outline: none;
	overflow-y: auto;
}
.sch-pie textarea:focus { border-color: var(--sch-acento); }
.sch-enviar {
	width: 34px; height: 34px;
	flex: 0 0 auto;
	border: 0; border-radius: 50%;
	background: var(--sch-acento);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.sch-enviar:disabled { opacity: .4; cursor: default; }
.sch-enviar svg { width: 16px; height: 16px; }

.sch-firma {
	margin: 0;
	padding: 0 10px 7px;
	font-size: 10.5px;
	line-height: 1.3;
	color: var(--sch-suave);
	text-align: center;
	background: var(--sch-fondo);
}

@media (prefers-reduced-motion: no-preference) {
	.sch-boton { transition: transform .15s ease; }
	.sch-boton:hover { transform: translateY(-1px); }
}