/* ==========================================================
   Sicü WhatsApp Widget — front-end
   Paleta real de WhatsApp, light mode. Íconos SVG inline, sin
   dependencias externas. Reutilizado también por la vista previa
   del panel de administración.
   ========================================================== */

#sicuwa-widget,
#sicuwa-widget *,
.sicuwa-preview-widget,
.sicuwa-preview-widget * {
	box-sizing: border-box;
}

.sicuwa-widget {
	--sicuwa-green: #25D366;
	--sicuwa-green-dark: #075E54;
	--sicuwa-bubble-out: #DCF8C6;
	--sicuwa-chat-bg: #ECE5DD;
	--sicuwa-ink: #111B21;
	--sicuwa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sicuwa-transition: 220ms cubic-bezier(.2, .6, .2, 1);
	--sicuwa-radius: 10px;
	--sicuwa-radius-sm: 4px;

	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	font-family: var(--sicuwa-font);
}

/* ---------- Posición izquierda ---------- */

.sicuwa-widget.sicuwa-widget--left {
	right: auto;
	left: 20px;
}

.sicuwa-widget.sicuwa-widget--left .sicuwa-window {
	right: auto;
	left: 0;
	transform-origin: bottom left;
}

/* ---------- Botón flotante (cerrado) ---------- */

.sicuwa-toggle {
	position: relative;
	width: 58px;
	height: 58px;
	border: none;
	border-radius: 50%;
	background: var(--sicuwa-green);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	transition: transform var(--sicuwa-transition), background var(--sicuwa-transition), box-shadow var(--sicuwa-transition);
}

.sicuwa-toggle:hover {
	transform: scale(1.06);
	background: var(--sicuwa-green-dark);
}

.sicuwa-toggle-icon {
	position: absolute;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--sicuwa-transition), transform var(--sicuwa-transition);
}

.sicuwa-toggle-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sicuwa-toggle-icon--close {
	opacity: 0;
	transform: rotate(-45deg) scale(0.6);
}

.sicuwa-widget.is-open .sicuwa-toggle-icon--open {
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
}

.sicuwa-widget.is-open .sicuwa-toggle-icon--close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

.sicuwa-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #FF5252;
	border: 2px solid #ffffff;
	animation: sicuwa-pulse 2.4s ease-in-out infinite;
}

.sicuwa-widget.sicuwa-seen .sicuwa-badge {
	display: none;
}

@keyframes sicuwa-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.25); }
}

/* ---------- Ventana de chat (abierta) ---------- */

.sicuwa-window {
	position: absolute;
	right: 0;
	bottom: 74px;
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 460px;
	max-height: calc(100vh - 120px);
	background: #ffffff;
	border-radius: var(--sicuwa-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transform-origin: bottom right;
	transition: opacity var(--sicuwa-transition), transform var(--sicuwa-transition);
	pointer-events: none;
}

.sicuwa-widget.is-open .sicuwa-window {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.sicuwa-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--sicuwa-green-dark);
	color: #ffffff;
	flex-shrink: 0;
}

/* Círculo limpio: sin fondo ni padding propios. Sin foto, el ícono
   blanco queda directo sobre el verde oscuro del header, sin aro
   de color de por medio. Con foto, la imagen llena el círculo
   completo, sin marco. */
.sicuwa-header-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	flex-shrink: 0;
	overflow: hidden;
}

.sicuwa-header-avatar svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sicuwa-header-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.sicuwa-header-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	flex-grow: 1;
	min-width: 0;
}

.sicuwa-header-name {
	font-weight: 500;
	font-size: 15px;
}

.sicuwa-header-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	opacity: 0.9;
}

.sicuwa-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

.sicuwa-status-dot.is-online {
	background: #4ADE80;
}

.sicuwa-status-dot.is-offline {
	background: #9CA3AF;
}

.sicuwa-close {
	background: none;
	border: none;
	color: #ffffff;
	cursor: pointer;
	padding: 4px;
	width: 24px;
	height: 24px;
	opacity: 0.85;
	transition: opacity var(--sicuwa-transition);
}

.sicuwa-close svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sicuwa-close:hover {
	opacity: 1;
}

.sicuwa-body {
	flex-grow: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--sicuwa-chat-bg);
}

.sicuwa-bubble {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: var(--sicuwa-radius);
	font-size: 14px;
	line-height: 1.45;
	color: var(--sicuwa-ink);
}

.sicuwa-bubble--in {
	align-self: flex-start;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	border-bottom-left-radius: var(--sicuwa-radius-sm);
}

.sicuwa-bubble--out {
	align-self: flex-end;
	background: var(--sicuwa-bubble-out);
	border-bottom-right-radius: var(--sicuwa-radius-sm);
}

.sicuwa-quick-replies {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

.sicuwa-quick-btn {
	text-align: left;
	background: #ffffff;
	border: 1px solid var(--sicuwa-green);
	color: var(--sicuwa-green-dark);
	border-radius: var(--sicuwa-radius);
	padding: 9px 12px;
	font-family: var(--sicuwa-font);
	font-size: 13px;
	cursor: pointer;
	transition: background var(--sicuwa-transition), color var(--sicuwa-transition);
}

.sicuwa-quick-btn:hover {
	background: var(--sicuwa-green);
	color: #ffffff;
}

.sicuwa-input-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

.sicuwa-input {
	flex-grow: 1;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	padding: 9px 14px;
	font-family: var(--sicuwa-font);
	font-size: 13px;
	color: var(--sicuwa-ink);
	outline: none;
	transition: border-color var(--sicuwa-transition);
}

.sicuwa-input:focus {
	border-color: var(--sicuwa-green);
}

.sicuwa-send {
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: var(--sicuwa-green);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	padding: 8px;
	transition: background var(--sicuwa-transition), transform var(--sicuwa-transition);
}

.sicuwa-send svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sicuwa-send:hover {
	background: var(--sicuwa-green-dark);
	transform: scale(1.05);
}

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
	.sicuwa-widget {
		right: 12px;
		bottom: 12px;
	}

	.sicuwa-window {
		width: calc(100vw - 24px);
		height: calc(100vh - 140px);
		bottom: 70px;
		right: -6px;
	}

	.sicuwa-widget.sicuwa-widget--left {
		left: 12px;
	}

	.sicuwa-widget.sicuwa-widget--left .sicuwa-window {
		left: -6px;
		right: auto;
	}
}