/**
 * AI Assistant Pro — Widget de chat.
 * Colores vía variable --aap-accent (personalizable por el cliente).
 */

#aap-chat-root {
	--aap-accent: #111111;
	--aap-radius: 20px;
	/* Fuente propia del chat (configurable). Default: sans moderna del sistema. */
	--aap-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999999;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	letter-spacing: normal;
	text-transform: none;
}

/* ─── BLINDAJE: aísla el widget de los estilos del tema del sitio ─────────────
   El chat vive dentro del WordPress de terceros con temas agresivos (WoodMart,
   etc.). Fuerza la fuente propia en TODO el widget para que ningún tema la pise. */
#aap-chat-root, #aap-chat-root * {
	box-sizing: border-box;
	font-family: var( --aap-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif ) !important;
}
/* Los temas suelen poner svg{max-width:100%;height:auto} y deforman los iconos.
   No dejamos que toquen los <svg> del widget (cada uno trae su width/height). */
#aap-chat-root svg {
	max-width: none !important;
	box-shadow: none !important;
}
#aap-chat-root a {
	text-decoration: none;
	box-shadow: none;
}
#aap-chat-root button {
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
}
/* Precio del producto: quita el subrayado que el tema pone al <ins> (precio de
   oferta) pero conserva la tachadura del <del> (precio anterior). */
#aap-chat-root .aap-product-price ins {
	text-decoration: none !important;
	background: none !important;
	color: inherit;
}
#aap-chat-root .aap-product-price del {
	text-decoration: line-through !important;
}
#aap-chat-root .aap-product-price .amount,
#aap-chat-root .aap-product-price bdi {
	text-decoration: none !important;
}

/* --- Posición de la burbuja (self-service, estilo Doofinder) --- */
#aap-chat-root[data-aap-pos="bottom-left"] {
	left: 20px;
	right: auto;
}
/* Centrado por margen (NO transform): un ancestro con transform rompería el
   position:fixed del drawer de altura completa. */
#aap-chat-root[data-aap-pos="bottom-center"] {
	left: 50%;
	right: auto;
	margin-left: -31px;
}
#aap-chat-root[data-aap-pos="right-center"] {
	top: 50%;
	bottom: auto;
	margin-top: -31px;
}
/* El teaser se ancla al lado correcto según la posición de la burbuja. */
#aap-chat-root[data-aap-pos="bottom-left"] .aap-teaser {
	left: 0;
	right: auto;
}
/* ...y su "pico" apunta hacia la burbuja (izquierda), no a la derecha. */
#aap-chat-root[data-aap-pos="bottom-left"] .aap-teaser::after {
	left: 24px;
	right: auto;
}
/* Burbuja oculta a petición del cliente. */
#aap-chat-root.aap-nobubble .aap-bubble {
	display: none;
}

/* --- Burbuja flotante --- */
#aap-chat-root .aap-bubble {
	position: relative;
	width: 62px;
	height: 62px;
	border: 0;
	border-radius: 50%;
	background: var(--aap-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.28 );
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#aap-chat-root .aap-bubble::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: aap-ring 2.6s ease-out infinite;
}
@keyframes aap-ring {
	0% { box-shadow: 0 0 0 0 rgba( var( --aap-aura-rgb, 0, 0, 0 ), 0.40 ); }
	70% { box-shadow: 0 0 0 14px rgba( var( --aap-aura-rgb, 0, 0, 0 ), 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( var( --aap-aura-rgb, 0, 0, 0 ), 0 ); }
}
#aap-chat-root .aap-bubble:hover {
	transform: scale( 1.07 );
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.34 );
}
#aap-chat-root .aap-bubble-icon {
	position: relative;
	z-index: 1;
	width: 28px;
	height: 28px;
}
/* Avatar personalizado en la burbuja: el logo va dentro de un badge blanco con
   forma de burbuja de chat (la "colita" en la esquina inferior izquierda), sobre
   la burbuja de color. Estilo premium, igual que la referencia. */
/* Círculo blanco limpio con el logo dentro, sobre la burbuja de color.
   Dimensiones BLINDADAS con !important y flex fijo: algunos temas (WoodMart, etc.)
   fuerzan "img { height:auto }" y deformaban el logo (lo hacían ovalado). */
#aap-chat-root .aap-bubble-avatar {
	position: relative;
	width: 42px !important;
	height: 42px !important;
	flex: 0 0 42px;
	background: #fff;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.2 );
}
/* El logo/favicon va redondo, centrado dentro de la burbuja blanca. */
#aap-chat-root .aap-bubble-avatar img {
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	max-width: 30px !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	display: block !important;
	flex-shrink: 0;
	padding: 0 !important;
	margin: 0 !important;
}
#aap-chat-root.aap-open .aap-bubble {
	display: none;
}
/* Badge de notificación */
#aap-chat-root .aap-badge {
	display: none;
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: #ef4444;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #fff;
	z-index: 2;
}
#aap-chat-root.aap-unread .aap-badge {
	display: flex;
	animation: aap-badge-pop 0.45s cubic-bezier( 0.18, 0.89, 0.32, 1.28 );
}
@keyframes aap-badge-pop {
	0% { transform: scale( 0 ); }
	60% { transform: scale( 1.3 ); }
	100% { transform: scale( 1 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	#aap-chat-root.aap-unread .aap-badge { animation: none; }
}
@media ( prefers-reduced-motion: reduce ) {
	#aap-chat-root .aap-bubble::before { animation: none; }
}

/* --- Notificación proactiva (teaser) --- */
#aap-chat-root .aap-teaser {
	position: absolute;
	right: 0;
	bottom: 80px;
	width: 210px;
	max-width: calc( 100vw - 40px );
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.18 );
	padding: 12px 14px;
	display: none;
	gap: 10px;
	align-items: flex-start;
	cursor: pointer;
}
#aap-chat-root .aap-teaser.aap-show {
	display: flex;
	animation: aap-teaser-in 0.35s ease;
}
@keyframes aap-teaser-in {
	from { opacity: 0; transform: translateY( 8px ); }
	to { opacity: 1; transform: translateY( 0 ); }
}
#aap-chat-root .aap-teaser::after {
	content: '';
	position: absolute;
	right: 24px;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: #fff;
	transform: rotate( 45deg );
	box-shadow: 3px 3px 6px rgba( 0, 0, 0, 0.05 );
}
#aap-chat-root .aap-teaser-avatar {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--aap-accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#aap-chat-root .aap-teaser-body {
	flex: 1;
	min-width: 0;
}
#aap-chat-root .aap-teaser-name {
	font-weight: 700;
	font-size: 13px;
	color: #111;
	margin-bottom: 2px;
}
#aap-chat-root .aap-teaser-text {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	color: #333;
	line-height: 1.4;
}
#aap-chat-root .aap-teaser-close {
	flex-shrink: 0;
	background: transparent;
	border: 0;
	color: #b0b0b0;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 0 0 4px;
}
#aap-chat-root .aap-teaser-close:hover {
	color: #666;
}
#aap-chat-root.aap-open .aap-teaser {
	display: none;
}

/* --- Panel --- */
/* Respetar el atributo "hidden": si no, el display:flex de abajo lo ignora
   y el panel abriría siempre tapando la burbuja. */
#aap-chat-root .aap-panel[hidden] {
	display: none;
}

/* Tarjeta flotante con espacio alrededor (minimal, estilo PayJoy): no pegada al
   borde, esquinas redondeadas, alta pero con aire abajo y al lado. */
#aap-chat-root .aap-panel {
	position: fixed;
	top: auto;
	right: 20px;
	bottom: 24px;
	width: 400px;
	max-width: calc( 100vw - 40px );
	height: 760px;
	max-height: calc( 100dvh - 32px );
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba( 0, 0, 0, 0.22 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
/* Flota a la izquierda si la burbuja está a la izquierda. */
#aap-chat-root[data-aap-pos="bottom-left"] .aap-panel {
	left: 20px;
	right: auto;
}
/* Efecto de apertura: la tarjeta aparece con un pop suave desde la esquina. */
#aap-chat-root.aap-open .aap-panel {
	animation: aap-panel-in 0.3s cubic-bezier( 0.16, 1, 0.3, 1 );
	transform-origin: bottom right;
}
#aap-chat-root[data-aap-pos="bottom-left"].aap-open .aap-panel {
	transform-origin: bottom left;
}
@keyframes aap-panel-in {
	from { opacity: 0; transform: translateY( 16px ) scale( 0.96 ); }
	to { opacity: 1; transform: translateY( 0 ) scale( 1 ); }
}
/* Efecto de cierre: la tarjeta se retrae hacia la esquina antes de ocultarse.
   La clase 'aap-closing' la pone el JS y la quita al terminar (~220ms). */
#aap-chat-root.aap-closing .aap-panel {
	animation: aap-panel-out 0.2s ease forwards;
	transform-origin: bottom right;
}
#aap-chat-root[data-aap-pos="bottom-left"].aap-closing .aap-panel {
	transform-origin: bottom left;
}
@keyframes aap-panel-out {
	from { opacity: 1; transform: translateY( 0 ) scale( 1 ); }
	to { opacity: 0; transform: translateY( 10px ) scale( 0.97 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	#aap-chat-root.aap-open .aap-panel { animation: none; }
	#aap-chat-root.aap-closing .aap-panel { animation: none; }
}

#aap-chat-root .aap-header {
	background: var(--aap-accent);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#aap-chat-root .aap-head-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
#aap-chat-root .aap-head-avatar {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid #fff;
	box-sizing: border-box;
	background: rgba( 255, 255, 255, 0.22 );
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
#aap-chat-root .aap-title {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Indicador "en línea": punto verde en el avatar + subtítulo. */
#aap-chat-root .aap-avatar-wrap {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}
#aap-chat-root .aap-online {
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #22c55e;
	border: 2px solid var(--aap-accent);
	box-sizing: border-box;
	animation: aap-online-pulse 2s infinite;
}
#aap-chat-root .aap-head-txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.15;
}
#aap-chat-root .aap-online-txt {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 400;
	opacity: 0.9;
	margin-top: 2px;
}
@keyframes aap-online-pulse {
	0% { box-shadow: 0 0 0 0 rgba( 74, 222, 128, 0.6 ); }
	70% { box-shadow: 0 0 0 6px rgba( 74, 222, 128, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 74, 222, 128, 0 ); }
}
/* Preguntas rápidas (píldoras) — modo leads, opcionales. */
#aap-chat-root .aap-quick {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 9px;
	padding: 4px 14px 14px;
}
#aap-chat-root .aap-quick-chip {
	background: #fff;
	border: 1px solid #e6e8ec;
	color: #374151;
	border-radius: 999px;
	padding: 10px 17px;
	font-size: 13px;
	line-height: 1.3;
	text-align: right;
	max-width: 90%;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.05 );
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
	font-family: inherit;
}
#aap-chat-root .aap-quick-chip:hover {
	border-color: var(--aap-accent);
	background: #fafbfc;
	box-shadow: 0 2px 6px rgba( 16, 24, 40, 0.08 );
}
#aap-chat-root .aap-quick-chip:active {
	transform: scale( 0.98 );
}
/* Imagen del avatar (PRO): llena el círculo tanto en header como en mensajes.
   Blindada con !important para que el tema no la deforme (img{height:auto}). */
#aap-chat-root .aap-avatar-img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
}
#aap-chat-root .aap-close {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: #fff;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
#aap-chat-root .aap-close svg {
	display: block;
}
#aap-chat-root .aap-close:hover {
	transform: translateY(1px);
	opacity: 1;
}

/* --- Tarjeta de producto (arriba del chat) --- */
#aap-chat-root .aap-product {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid #ececec;
	background: #fff;
}
#aap-chat-root .aap-product-img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}
#aap-chat-root .aap-product-info {
	flex: 1;
	min-width: 0;
}
#aap-chat-root .aap-product-name {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#aap-chat-root .aap-product-price {
	font-size: 13px;
	color: #444;
}
#aap-chat-root .aap-product-price del {
	color: #999;
	margin-right: 4px;
}
#aap-chat-root .aap-product-cta {
	flex-shrink: 0;
	background: var(--aap-accent);
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 20px;
	border-radius: 20px;
	white-space: nowrap;
	animation: aap-shake 4s ease-in-out infinite;
}
#aap-chat-root .aap-product-cta:hover {
	color: #fff;
	opacity: 0.9;
	animation: none;
}

/* Variante WhatsApp del CTA: verde oficial + logo (WhatsApp es universal). */
#aap-chat-root .aap-product-cta-wa {
	background: #25d366;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
#aap-chat-root .aap-product-cta-wa:hover {
	background: #1ebe5b;
	opacity: 1;
}
#aap-chat-root .aap-cta-wa-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Vibración breve cada 4s para llamar la atención al botón de compra:
   tiembla en los primeros ~0.5s y descansa el resto del ciclo. */
@keyframes aap-shake {
	0%, 13%, 100% { transform: translateX( 0 ) rotate( 0 ); }
	2%  { transform: translateX( -2px ) rotate( -2deg ); }
	4%  { transform: translateX( 2px )  rotate( 2deg ); }
	6%  { transform: translateX( -2px ) rotate( -1.5deg ); }
	8%  { transform: translateX( 2px )  rotate( 1.5deg ); }
	10% { transform: translateX( -1px ) rotate( 0 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	#aap-chat-root .aap-product-cta { animation: none; }
}

/* --- Mensajes --- */
#aap-chat-root .aap-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px 12px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #f6f7f9;
	/* Scrollbar fino y sutil (no el gris grueso por defecto del navegador). */
	scrollbar-width: thin;
	scrollbar-color: #c7ccd2 transparent;
}
#aap-chat-root .aap-messages::-webkit-scrollbar {
	width: 6px;
}
#aap-chat-root .aap-messages::-webkit-scrollbar-track {
	background: transparent;
}
#aap-chat-root .aap-messages::-webkit-scrollbar-thumb {
	background: #c7ccd2;
	border-radius: 8px;
}
#aap-chat-root .aap-messages::-webkit-scrollbar-thumb:hover {
	background: #aeb4bc;
}

/* Separador de fecha (centrado, sutil) */
#aap-chat-root .aap-date {
	align-self: center;
	font-size: 11px;
	color: #9aa0a6;
	background: #eceef1;
	padding: 3px 12px;
	border-radius: 10px;
	margin: 2px auto;
}

/* Fila: avatar + burbuja */
#aap-chat-root .aap-row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	max-width: 100%;
}
#aap-chat-root .aap-row-user {
	flex-direction: row-reverse;
}
#aap-chat-root .aap-avatar {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--aap-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 16px;
}

/* Con logo personalizado (PNG transparente), el avatar del header y el de los
   mensajes llevan fondo BLANCO fijo (aparte de su borde), para que el logo se vea
   nítido sobre blanco y no "flotando" sobre el color de marca. El borde blanco se
   conserva. La burbuja cerrada NO se toca (mantiene su círculo interno de badge).
   Doble selector: por la clase del root y, como respaldo, por :has() de la imagen. */
#aap-chat-root.aap-has-logo .aap-head-avatar,
#aap-chat-root.aap-has-logo .aap-avatar,
#aap-chat-root .aap-head-avatar:has( img ),
#aap-chat-root .aap-avatar:has( img ) {
	background: #fff !important;
}
/* El logo va MÁS PEQUEÑO que el círculo y centrado (contain), para que SIEMPRE se
   vea el fondo blanco alrededor — igual que la burbuja cerrada. Sin esto, el logo
   llena todo el círculo (cover) y tapa el blanco. */
#aap-chat-root.aap-has-logo .aap-head-avatar .aap-avatar-img,
#aap-chat-root.aap-has-logo .aap-avatar .aap-avatar-img,
#aap-chat-root .aap-head-avatar:has( img ) .aap-avatar-img,
#aap-chat-root .aap-avatar:has( img ) .aap-avatar-img {
	width: 74% !important;
	height: 74% !important;
	object-fit: contain !important;
	border-radius: 0 !important;
}
#aap-chat-root .aap-bubble-wrap {
	display: flex;
	flex-direction: column;
	max-width: 82%;
	min-width: 0;
}
#aap-chat-root .aap-row-user .aap-bubble-wrap {
	align-items: flex-end;
}
#aap-chat-root .aap-sender {
	font-size: 11px;
	font-weight: 600;
	color: #8a8f98;
	margin: 0 0 4px 4px;
}
#aap-chat-root .aap-time {
	font-size: 10px;
	color: #adb2ba;
	margin: 4px 6px 0;
}
/* Estado del mensaje del visitante (enviando/entregado/leído), tipo WhatsApp. */
#aap-chat-root .aap-status {
	font-size: 10.5px;
	color: #9aa0a6;
	text-align: right;
	margin: 2px 6px 0;
	transition: color 0.2s ease;
}
#aap-chat-root .aap-status-read {
	color: #34b7f1;
	font-weight: 600;
}

#aap-chat-root .aap-msg {
	padding: 9px 13px;
	border-radius: 16px;
	white-space: pre-wrap;
	word-wrap: break-word;
	font-size: 13.5px;
	line-height: 1.5;
}
#aap-chat-root .aap-msg-user {
	background: var(--aap-accent);
	color: #fff;
	border-bottom-right-radius: 5px;
}
#aap-chat-root .aap-msg-assistant {
	background: #fff;
	color: #1f2937;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.07 );
	border-bottom-left-radius: 5px;
}

/* Indicador "escribiendo…" */
#aap-chat-root .aap-typing {
	display: flex;
	gap: 4px;
	align-items: center;
}
#aap-chat-root .aap-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #bbb;
	animation: aap-bounce 1.2s infinite ease-in-out;
}
#aap-chat-root .aap-typing span:nth-child( 2 ) { animation-delay: 0.15s; }
#aap-chat-root .aap-typing span:nth-child( 3 ) { animation-delay: 0.3s; }
@keyframes aap-bounce {
	0%, 60%, 100% { transform: translateY( 0 ); opacity: 0.5; }
	30% { transform: translateY( -5px ); opacity: 1; }
}

/* --- Formulario --- */
#aap-chat-root .aap-form {
	display: flex;
	gap: 8px;
	padding: 10px 12px 6px;
	border-top: 1px solid #f2f2f2;
	background: #fff;
}
#aap-chat-root .aap-input {
	flex: 1;
	border: 1px solid #ddd;
	border-radius: 22px;
	padding: 10px 14px;
	/* 16px: mínimo para que iOS/Safari NO haga zoom automático al enfocar el campo. */
	font-size: 16px;
	outline: none;
}
#aap-chat-root .aap-input:focus {
	border-color: var(--aap-accent);
}
#aap-chat-root .aap-send {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	flex-shrink: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--aap-accent) !important;
	color: #fff !important;
	cursor: pointer;
	/* Solo aparece cuando el visitante está escribiendo (como los chats modernos). */
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	transition: opacity 0.15s ease, transform 0.12s ease;
}
#aap-chat-root.aap-has-text .aap-send {
	display: flex !important;
}
/* Blindaje del icono: algunos temas encogen o deforman los <svg> (svg{height:auto}
   o max-width) y el avión de papel desaparecía. Lo fijamos. */
#aap-chat-root .aap-send svg {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	max-width: none !important;
	fill: currentColor !important;
	display: block !important;
	vertical-align: middle !important;
}
#aap-chat-root .aap-send:hover {
	opacity: 0.9;
}

/* --- Barra de acciones (la usan los add-ons; oculta si está vacía) --- */
#aap-chat-root .aap-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 12px 10px;
	background: #fff;
}
#aap-chat-root .aap-actions[hidden] {
	display: none;
}
#aap-chat-root .aap-action {
	background: var(--aap-accent);
	color: #fff;
	border: 0;
	border-radius: 20px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
	/* Aura latiendo SIEMPRE (color de marca) para reforzar la acción. */
	animation: aap-cta-pulse 2.2s ease-out infinite;
}
#aap-chat-root .aap-action:hover {
	opacity: 0.9;
}
#aap-chat-root.aap-sending .aap-input,
#aap-chat-root.aap-sending .aap-send {
	opacity: 0.6;
	cursor: not-allowed;
}

/* --- Botón de WhatsApp (handoff) --- */
#aap-chat-root .aap-whatsapp {
	display: block;
	margin: 0 12px 4px;
	padding: 10px 14px;
	background: #25d366;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	border-radius: 22px;
	/* Aura verde latiendo SIEMPRE para reforzar el paso a WhatsApp. */
	animation: aap-wa-pulse 2.2s ease-out infinite;
}
#aap-chat-root .aap-whatsapp:hover {
	background: #1ebe5b;
	color: #fff;
}
@keyframes aap-wa-pulse {
	0% { box-shadow: 0 0 0 0 rgba( 37, 211, 102, 0.45 ); }
	60% { box-shadow: 0 0 0 12px rgba( 37, 211, 102, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 37, 211, 102, 0 ); }
}

/* --- Botón de acción de cierre (aparece con intención de compra) --- */
#aap-chat-root .aap-cta-action {
	align-self: flex-start;
	max-width: 80%;
	animation: aap-cta-in 0.3s ease;
}
@keyframes aap-cta-in {
	from { opacity: 0; transform: translateY( 6px ); }
	to { opacity: 1; transform: translateY( 0 ); }
}
#aap-chat-root .aap-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 22px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	/* Aparece con un "pop" y late de forma CONSTANTE (aura con el color de marca)
	   para reforzar SIEMPRE la acción: el ojo siempre lo encuentra. Pulso suave. */
	animation: aap-cta-pop 0.32s cubic-bezier(.2,1.3,.4,1), aap-cta-pulse 2.2s ease-out 0.32s infinite;
}
@keyframes aap-cta-pop {
	0% { transform: scale( 0.82 ); opacity: 0; }
	100% { transform: scale( 1 ); opacity: 1; }
}
@keyframes aap-cta-pulse {
	0% { box-shadow: 0 0 0 0 rgba( var( --aap-aura-rgb, 0, 0, 0 ), 0.45 ); }
	60% { box-shadow: 0 0 0 12px rgba( var( --aap-aura-rgb, 0, 0, 0 ), 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( var( --aap-aura-rgb, 0, 0, 0 ), 0 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	#aap-chat-root .aap-cta-btn,
	#aap-chat-root .aap-action,
	#aap-chat-root .aap-whatsapp { animation: none; }
}
#aap-chat-root .aap-cta-btn-buy,
#aap-chat-root .aap-cta-btn-view {
	background: var(--aap-accent);
}
#aap-chat-root .aap-cta-btn-buy:hover,
#aap-chat-root .aap-cta-btn-view:hover {
	color: #fff;
	opacity: 0.9;
}
#aap-chat-root .aap-cta-btn-wa {
	background: #25d366;
}
#aap-chat-root .aap-cta-btn-wa:hover {
	background: #1ebe5b;
	color: #fff;
}
#aap-chat-root .aap-cta-btn-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
/* Botón de cierre "Dejar mis datos" (modo landing/leads). */
#aap-chat-root .aap-cta-btn-lead {
	background: var(--aap-accent);
}
#aap-chat-root .aap-cta-btn-lead:hover {
	color: #fff;
	opacity: 0.92;
}

/* --- Formulario de captura de leads (dentro del chat) --- */
#aap-chat-root .aap-lead-form {
	align-self: stretch;
	background: #fff;
	border: 1px solid #e6e8ec;
	border-radius: 14px;
	padding: 16px;
	margin: 4px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.06 );
}
#aap-chat-root .aap-lead-title {
	font-weight: 600;
	font-size: 14px;
	color: #1f2937;
}
#aap-chat-root .aap-lead-in {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d7dae0;
	border-radius: 10px;
	padding: 11px 13px;
	font-size: 14px;
	font-family: inherit;
	color: #1f2937;
	background: #fff;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#aap-chat-root .aap-lead-in:focus {
	border-color: var(--aap-accent);
	box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.06 );
}
#aap-chat-root .aap-lead-err {
	font-size: 12.5px;
	color: #c62828;
	margin: -2px 0 0;
}
#aap-chat-root .aap-lead-send {
	border: 0;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--aap-accent);
	cursor: pointer;
	transition: opacity 0.15s ease;
}
#aap-chat-root .aap-lead-send:hover {
	opacity: 0.92;
}
#aap-chat-root .aap-lead-send:disabled {
	opacity: 0.6;
	cursor: default;
}
@media ( prefers-reduced-motion: reduce ) {
	#aap-chat-root .aap-cta-action { animation: none; }
}

#aap-chat-root .aap-disclaimer {
	font-size: 11px;
	color: #999;
	text-align: center;
	padding: 3px 12px 8px;
	background: #fff;
}
#aap-chat-root .aap-brand-link {
	color: var(--aap-accent);
	font-weight: 600;
	text-decoration: none;
}
#aap-chat-root .aap-brand-link:hover {
	text-decoration: underline;
}

/* --- Móvil: flota con márgenes pequeños (mantiene el look minimal) --- */
@media ( max-width: 480px ) {
	#aap-chat-root .aap-panel {
		right: 10px;
		left: 10px;
		bottom: 10px;
		width: auto;
		max-width: none;
		height: auto;
		top: 68px;
		max-height: none;
	}
	#aap-chat-root[data-aap-pos="bottom-left"] .aap-panel {
		left: 10px;
		right: 10px;
	}
}

/* --- Preguntas sugeridas en la ficha de producto (fuera del widget) --- */
.aap-questions {
	margin: 20px 0;
}
/* Blindaje de fuente: las píldoras viven en la página del producto (fuera del
   #aap-chat-root), así que aquí también forzamos la fuente propia del chat para
   que el tema del sitio no las toque. */
.aap-questions, .aap-questions * {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.aap-questions-title {
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 12px;
}
.aap-questions-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}
/* Píldoras: usan el color de marca configurado (--aap-accent, inyectado en la
   caja). !important para ganarle a los estilos de botón del tema (WoodMart, etc.). */
.aap-questions .aap-chip {
	background: #fff !important;
	border: 1px solid var(--aap-accent, #111) !important;
	border-radius: 20px !important;
	padding: 8px 14px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--aap-accent, #111) !important;
	cursor: pointer;
	width: auto !important;
	/* Red de seguridad: por larga que sea, la píldora nunca desborda ni genera
	   scroll lateral. Se limita al ancho de la caja y recorta con "…". */
	max-width: 100% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}
.aap-questions .aap-chip:hover {
	background: var(--aap-accent, #111) !important;
	color: #fff !important;
}
.aap-questions .aap-questions-open {
	background: var(--aap-accent, #111) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 20px !important;
	padding: 9px 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer;
	width: auto !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	transition: opacity 0.15s ease;
}
.aap-questions .aap-questions-open:hover {
	opacity: 0.9;
	color: #fff !important;
}

/* --- Botón "Ordenar por WhatsApp" en la ficha de producto --- */
.aap-wa-product {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 10px 0;
	padding: 13px 18px;
	background: #25d366;
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	border-radius: 8px;
	box-sizing: border-box;
	transition: background 0.15s ease;
}
.aap-wa-product:hover {
	background: #1ebe5b;
	color: #fff !important;
}
.aap-wa-product-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Reservar ahora (relleno) + Dejar mis datos (contorno): motor/lib/chat.mjs */
#aap-chat-root .aap-cta-action.aap-book { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
#aap-chat-root .aap-cta-btn-ghost { background: transparent; color: var(--aap-accent); border: 1.5px solid var(--aap-accent); font: inherit; font-size: 14px; font-weight: 700; animation: aap-cta-pop 0.32s cubic-bezier(.2,1.3,.4,1); }
#aap-chat-root .aap-cta-btn-ghost:hover { background: var(--aap-accent); color: #fff; }