/* z-index muy alto: banners de cookies y headers sticky usan 999999+ y tapaban la burbuja. */
#wpcb-root { position: fixed; bottom: 20px; z-index: 2147483000; font: 14px/1.45 system-ui, sans-serif; }
#wpcb-root.wpcb-right { right: 20px; }
#wpcb-root.wpcb-left { left: 20px; }
/* BLINDAJE contra el tema del sitio: muchos temas estilizan TODOS los <button> (padding,
   width:100%, text-transform, min-width…). Como la bolita y el teaser SON botones, eso los
   rompía (icono aplastado a 0px, saludo de una palabra por línea). Neutralizamos acá; cada
   botón define su tamaño/padding en su propia regla más abajo. */
#wpcb-root button { box-sizing: border-box; margin: 0; min-width: 0; min-height: 0;
  letter-spacing: normal; text-transform: none; text-shadow: none; line-height: normal;
  font-family: inherit; }
#wpcb-bubble { width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--wpcb-color); color: var(--wpcb-text, #fff); box-shadow: 0 4px 14px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center; flex: none; }
#wpcb-bubble svg { width: 28px; height: 28px; flex: none; }
#wpcb-panel { width: 340px; max-width: calc(100vw - 40px); height: 480px; max-height: 70vh;
  background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
  display: flex; flex-direction: column; overflow: hidden; }
/* El atributo hidden debe ganarle al display de arriba (si no, el panel queda siempre abierto). */
#wpcb-panel[hidden], #wpcb-bubble[hidden] { display: none !important; }
/* Teaser: globito con el saludo junto al boton flotante (no abre el chat solo; click = abrir). */
/* width:max-content: el teaser se dimensiona por su CONTENIDO (hasta max-width), ignorando que
   el #wpcb-root mide solo 56px. Con width:auto/fit-content quedaba limitado a 56px → una palabra
   por línea cuando el tema del sitio le mete estilos de botón. */
#wpcb-teaser { position: absolute; bottom: 66px; right: 0; width: max-content; max-width: 250px; text-align: left;
  white-space: normal; word-break: normal;
  background: #fff; color: #1f2937; border: 0; border-radius: 14px; border-bottom-right-radius: 4px;
  padding: 11px 14px; font: 13.5px/1.45 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .3s, transform .3s; }
#wpcb-root.wpcb-left #wpcb-teaser { right: auto; left: 0; border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; }
#wpcb-teaser.wpcb-teaser-in { opacity: 1; transform: none; }
#wpcb-teaser[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { #wpcb-teaser { transition: none; } }
#wpcb-header { background: var(--wpcb-color); color: var(--wpcb-text, #fff); padding: 12px 44px 12px 14px; font-weight: 600;
  display: flex; align-items: center; gap: 10px; position: relative; }
#wpcb-header button { background: none; border: 0; color: var(--wpcb-text, #fff); font-size: 20px; cursor: pointer; }
/* X SIEMPRE visible: fija al margen derecho, círculo blanco + X negra (independiente del color elegido).
   Doble id: "#wpcb-header button" (1-0-1) le ganaba background/color a "#wpcb-close" solo (1-0-0). */
#wpcb-header #wpcb-close { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); margin: 0;
  /* Medidas CLAVADAS: es un círculo y tiene que seguir siéndolo en cualquier tema. Con solo
     width/height, un tema que le ponga min-height (típico, por área táctil) lo estira a lo
     alto y queda ovalado. min/max fijan las dos dimensiones y aspect-ratio es el refuerzo. */
  width: 26px; height: 26px; min-width: 26px; min-height: 26px; max-width: 26px; max-height: 26px;
  aspect-ratio: 1 / 1; flex: none;
  border-radius: 50%; background: #fff; color: #111; font-size: 16px;
  /* flex, no line-height: el glifo × asienta sobre la baseline y quedaba descentrado en el círculo */
  display: flex; align-items: center; justify-content: center; line-height: 1;
  padding: 0 0 2px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.wpcb-avatar { display: block; object-fit: cover; border-radius: 50%; }
.wpcb-header-avatar { width: 30px; height: 30px; flex: 0 0 auto; background: rgba(255,255,255,.2); }
.wpcb-bubble-avatar { width: 100%; height: 100%; }
#wpcb-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.wpcb-msg strong { font-weight: 700; }
.wpcb-msg h-md { display: block; font-weight: 700; margin: 4px 0 2px; }
.wpcb-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
.wpcb-user { align-self: flex-end; background: var(--wpcb-color); color: var(--wpcb-text, #fff); border-bottom-right-radius: 4px; }
.wpcb-bot, .wpcb-bot-typing { align-self: flex-start; background: #f1f3f6; color: #1a1a1a; border-bottom-left-radius: 4px; }
/* Links del bot BLINDADOS contra el tema del cliente: el widget se inyecta en la página
   del cliente y muchos temas ponen los <a> blancos/transparentes → links invisibles.
   Especificidad de id (#wpcb-root) + !important + subrayado + peso para que SIEMPRE se vean. */
#wpcb-root .wpcb-bot a {
  color: var(--wpcb-color) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  background: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#wpcb-root .wpcb-user a { color: var(--wpcb-text, #fff) !important; text-decoration: underline !important; }
.wpcb-fb { margin-top: 6px; }
.wpcb-fb button { background: none; border: 0; cursor: pointer; opacity: .55; font-size: 13px; }
.wpcb-fb button:hover { opacity: 1; }
.wpcb-fb-ok { color: #22a06b; font-size: 12px; }
#wpcb-actions { padding: 0 12px; }
/* BLINDADO con !important como los links del bot: un tema con `a{color:#000!important}` o
   estilos de a:visited dejaba el CTA de WhatsApp negro/subrayado sobre el verde. */
#wpcb-root #wpcb-wa { display: block; text-align: center; margin: 4px 0; padding: 7px; border-radius: 8px;
  background: #25d366 !important; color: #fff !important; text-decoration: none !important;
  font-weight: 600; font-size: 13px; opacity: 1 !important; box-shadow: none !important; }
#wpcb-form { display: flex; border-top: 1px solid #e5e7eb; }
/* BLINDAJE contra el tema del sitio: un tema dark que estilice `input { color:#fff }` o
   `input { background:#222 }` dejaba el texto invisible sobre el panel blanco (el visitante
   escribía y no veía nada). Fijamos color/fondo/caret con la especificidad del id. */
#wpcb-root #wpcb-input { flex: 1; border: 0; padding: 12px; font: inherit; outline: none;
  background: #fff; color: #1a1a1a; caret-color: #1a1a1a; -webkit-text-fill-color: #1a1a1a; }
/* Foco de teclado visible (muchos temas hacen `:focus{outline:none}` global). */
#wpcb-root :focus-visible { outline: 2px solid var(--wpcb-color); outline-offset: 2px; }
#wpcb-form button { border: 0; background: var(--wpcb-color); color: var(--wpcb-text, #fff); padding: 0 16px; cursor: pointer; font: inherit; }
.wpcb-dots i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%;
  background: #9ca3af; animation: wpcb-b 1.2s infinite; }
.wpcb-dots i:nth-child(2) { animation-delay: .2s; }
.wpcb-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes wpcb-b { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .wpcb-dots i { animation: none; } }