/* WooCommerce Voice Assistant – Widget Styles (estilo Hostinger, acento azul) */
:root {
  --wva-primary: #2563eb;
  --wva-primary-dark: #1d4ed8;
  --wva-primary-soft: #eef4ff;   /* burbuja del cliente / fondos suaves (se recalcula por JS) */
  --wva-primary-rgb: 37,99,235;  /* mismo color en "r,g,b" para usar en rgba() (se recalcula por JS) */
  --wva-user-bubble: #e8f0fe;    /* burbuja del cliente (se recalcula por JS) */
  --wva-ink: #1f2430;
  --wva-ink-soft: #6b7280;
  --wva-line: #ececf2;
  --wva-radius: 18px;
  --wva-shadow: 0 12px 40px rgba(20,20,60,.16);
  --wva-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wva-vh: 100vh;
  --wva-offset-top: 0px;
  --wva-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Aislar el widget del CSS del tema (modelo de caja consistente) */
#wva-root, #wva-root * , #wva-panel, #wva-panel * {
  box-sizing: border-box !important;
}

/* ── Launcher ─────────────────────────────────────────────── */
#wva-launcher {
  position: fixed;
  z-index: 99998;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wva-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wva-shadow);
  transition: transform .2s, background .2s;
  font-size: 22px;
}
#wva-launcher:hover { background: var(--wva-primary-dark); transform: scale(1.06); }
#wva-launcher.bottom-right { bottom: 90px; right: 24px; }
#wva-launcher.bottom-left  { bottom: 120px; left:  24px; }

#wva-launcher-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
#wva-launcher-icon svg { display: block; width: 28px !important; height: 28px !important; max-width: none !important; max-height: none !important; }

/* ── Brillo "vivo": en vez de mostrar mensajes, el botón llama la
   atención de a ratos con un resplandor suave en el borde. No es
   constante (sería molesto): hace una pausa larga y un pulso corto. ── */
@keyframes wva-alive-glow {
  0%, 78%, 100% { box-shadow: var(--wva-shadow); }
  87% { box-shadow: 0 0 0 5px rgba(var(--wva-primary-rgb), .35), var(--wva-shadow); }
  93% { box-shadow: 0 0 0 11px rgba(var(--wva-primary-rgb), 0), var(--wva-shadow); }
}
#wva-launcher { animation: wva-alive-glow 6s ease-in-out infinite; }

@keyframes wva-alive-glow-topbar {
  0%, 78%, 100% { box-shadow: none; border-color: #e9edf3; }
  87% { box-shadow: 0 0 0 4px rgba(var(--wva-primary-rgb), .28); border-color: var(--wva-primary); }
  93% { box-shadow: 0 0 0 8px rgba(var(--wva-primary-rgb), 0); border-color: #e9edf3; }
}
#wva-launcher-topbar.wva-topbar-btn { animation: wva-alive-glow-topbar 6s ease-in-out infinite; }

/* Se detiene mientras el chat está abierto o el mouse está encima:
   ahí ya tiene la atención del cliente, no hace falta seguir brillando. */
#wva-launcher:hover,
#wva-launcher-topbar.wva-topbar-btn:hover,
#wva-launcher-topbar.wva-topbar-btn.wva-active,
body.wva-chat-open #wva-launcher,
body.wva-chat-open #wva-launcher-topbar {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  #wva-launcher,
  #wva-launcher-topbar.wva-topbar-btn { animation: none; }
}

/* ── Botón en la barra superior del sitio (estilo Hostinger) ─────
   Si el tema expone una barra de utilidades en la cabecera (ej.
   comcr.cl: ".crm-utils", junto al botón "Finalizar Compra"), el
   JS agrega ahí este botón con ícono + texto "Agente". En ese caso,
   en escritorio se oculta el flotante redondo (ver media query
   más abajo); si el tema no tiene esa barra, no pasa nada y sigue
   el flotante de siempre. */
#wva-launcher-topbar.wva-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1f2a37;
  border: 1px solid #e9edf3;
  border-radius: 8px;
  padding: 10px 16px;
  /* Separado del resto de los botones (cuenta/carrito/tienda), pegado
     más hacia el extremo derecho de la barra. */
  margin: 0 4px 0 48px;
  font-family: var(--wva-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
#wva-launcher-topbar.wva-topbar-btn:hover,
#wva-launcher-topbar.wva-topbar-btn.wva-active {
  background: var(--wva-primary-soft);
  border-color: var(--wva-primary);
  color: var(--wva-primary-dark);
}
#wva-launcher-topbar .wva-topbar-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  color: var(--wva-primary);
}
#wva-launcher-topbar .wva-topbar-icon svg {
  display: block;
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  max-height: none !important;
}

/* En escritorio (mismo punto de quiebre que la barra del tema),
   si el botón de arriba está activo, se oculta el flotante redondo. */
@media (min-width: 901px) {
  body.wva-topbar-mode #wva-launcher { display: none !important; }
}

/* Cabecera de Custom Header Builder (ej. cuatica.cl): junto al carrito. */
header.head .utils #wva-launcher-topbar.wva-topbar-btn { margin: 0 0 0 10px; padding: 9px 14px; }
@media (max-width: 900px) {
  header.head .utils #wva-launcher-topbar { display: none !important; }
}

/* ── Aviso: el vendedor escribió (chat cerrado) ──────────────────
   El botón se pone verde y pulsa hasta que el cliente abre el chat. */
@keyframes wva-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.55), var(--wva-shadow); }
  50%      { box-shadow: 0 0 0 14px rgba(22,163,74,0), var(--wva-shadow); }
}
#wva-launcher.wva-alert,
#wva-launcher.wva-alert:hover {
  background: #16a34a !important;
  animation: wva-alert-pulse 1.3s ease-in-out infinite !important;
}
#wva-launcher-topbar.wva-topbar-btn.wva-alert,
#wva-launcher-topbar.wva-topbar-btn.wva-alert:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  animation: wva-alert-pulse 1.3s ease-in-out infinite !important;
}
#wva-launcher-topbar.wva-alert .wva-topbar-icon { color: #fff; }

#wva-launcher-toast {
  position: fixed; z-index: 99999;
  display: flex; flex-direction: column; gap: 3px;
  max-width: min(320px, calc(100vw - 32px));
  background: #fff; color: var(--wva-ink);
  border: 1px solid #bbf7d0; border-left: 4px solid #16a34a;
  border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  font-family: var(--wva-font); font-size: 13px; line-height: 1.35;
  cursor: pointer;
}
#wva-launcher-toast .wva-lt-who { font-size: 11px; font-weight: 700; color: #15803d; text-transform: uppercase; letter-spacing: .3px; }
#wva-launcher-toast .wva-lt-text { color: var(--wva-ink); }
#wva-launcher-toast .wva-lt-cta { font-size: 12px; font-weight: 700; color: #16a34a; }
#wva-launcher-toast:hover { background: #f0fdf4; }

#wva-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}

/* ── Menú del launcher: "Agente" (texto) / "Hablar por voz" ──────
   Aparece al hacer clic en cualquiera de los dos botones (el redondo
   flotante o el de la barra superior) cuando el chat está cerrado. */
#wva-launcher-menu {
  position: fixed;
  z-index: 2147483000;
  background: #fff;
  border: 1px solid var(--wva-line);
  border-radius: 14px;
  box-shadow: var(--wva-shadow);
  padding: 6px;
  font-family: var(--wva-font);
}
#wva-launcher-menu.wva-hidden { display: none; }
.wva-lm-item.wva-off { opacity: .55; }
.wva-contact-form .wva-cf-row { margin-top: 8px; }
.wva-contact-form input { width: 100%; border: 1px solid var(--wva-line); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: var(--wva-font); outline: none; background: #fff; }
.wva-contact-form input:focus { border-color: var(--wva-primary); }
.wva-contact-form .wva-screen-req-actions { margin-top: 8px; }
.wva-lm-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  transition: background .15s;
  font-family: var(--wva-font);
}
.wva-lm-item:hover { background: #f5f6f8; }
.wva-lm-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wva-primary);
}
.wva-lm-icon svg { display: block; width: 20px !important; height: 20px !important; max-width: none !important; max-height: none !important; }
.wva-lm-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wva-lm-text strong { font-size: 13.5px; font-weight: 700; color: var(--wva-ink); }
.wva-lm-text small { font-size: 12px; color: var(--wva-ink-soft); line-height: 1.35; }

/* Mientras el chat está abierto, tapa el carrito flotante (Xootix Side Cart
   u otros botones de carrito fijos que quedarían por encima del chat). */
body.wva-chat-open .xoo-wsc-basket,
body.wva-chat-open .xoo-wsc-container,
body.wva-chat-open .xoo-wsc-slider {
  display: none !important;
}

/* Al revés: si el carrito lateral se abre, el globo (teaser) no debe
   quedar flotando encima. El JS detecta el carrito abierto y agrega
   esta clase al body. */
body.wva-cart-open #wva-teaser {
  display: none !important;
}

/* ── Panel ────────────────────────────────────────────────── */
#wva-panel {
  position: fixed;
  z-index: 10000000;
  width: 384px;
  height: min(640px, calc(var(--wva-vh) - 174px));
  max-height: calc(var(--wva-vh) - 24px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--wva-line);
  border-radius: var(--wva-radius);
  box-shadow: var(--wva-shadow);
  font-family: var(--wva-font);
  font-size: 14px;
  color: var(--wva-ink);
  transition: opacity .25s, transform .25s;
  overflow: hidden;
}
#wva-panel.bottom-right { bottom: 162px; right: 24px; }
#wva-panel.bottom-left  { bottom: 192px; left:  24px; }
#wva-panel.wva-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
}

/* Cuando el usuario lo arrastra (modo flotante), usamos left/top fijos */
#wva-panel.wva-dragged {
  bottom: auto !important;
  right:  auto !important;
}

/* ── Modo: Barra lateral ──────────────────────────────────── */
/* @CR_PATCH 3.47.0: el cuadro queda "por fuera" de la página pero incrustado
   en ella, como el Agente de Hostinger: un recuadro redondeado con un margen
   (--wva-sidebar-gap) alrededor, y la página reserva ese espacio completo
   (--wva-sidebar-w = ancho del cuadro + margen a ambos lados; lo fija el JS
   al abrir o al estirar el borde). Si hay barra de administración de WP, el
   cuadro arranca debajo de ella. */
html { --wva-sidebar-gap: 12px; }
html.wva-sidebar-on { --wva-sidebar-w: calc(384px + var(--wva-sidebar-gap) * 2); }
#wva-panel.wva-mode-sidebar {
  top: calc(var(--wva-top, var(--wp-admin--admin-bar--height, 0px)) + var(--wva-sidebar-gap)) !important;
  bottom: var(--wva-sidebar-gap) !important;
  right: var(--wva-sidebar-gap) !important;
  left: auto !important;
  width: 384px;
  height: auto;
  max-height: none;
  border-radius: 16px;
  border: 1px solid var(--wva-line);
  box-shadow: 0 8px 32px rgba(20,20,60,.12);
}
html.wva-sidebar-on body {
  margin-right: var(--wva-sidebar-w, 408px) !important;
  transition: margin-right .25s ease, margin-left .25s ease;
}
/* Barra lateral al lado izquierdo: el cuadro se pega a la izquierda y la página se corre a la derecha */
#wva-panel.wva-mode-sidebar.wva-side-left {
  left: var(--wva-sidebar-gap) !important;
  right: auto !important;
}
html.wva-sidebar-on.wva-side-left body {
  margin-right: 0 !important;
  margin-left: var(--wva-sidebar-w, 408px) !important;
}
/* @CR_PATCH 3.47.3: la cabecera del sitio (clase wva-above, la pone el JS)
   sigue a todo el ancho por encima del cuadro, como en Hostinger */
html.wva-sidebar-on .wva-above {
  margin-right: calc(-1 * var(--wva-sidebar-w, 408px)) !important;
  transition: margin-right .25s ease, margin-left .25s ease;
}
html.wva-sidebar-on.wva-side-left .wva-above {
  margin-right: 0 !important;
  margin-left: calc(-1 * var(--wva-sidebar-w, 408px)) !important;
}
#wva-panel.wva-mode-sidebar.wva-side-left #wva-resize-w { left: auto; right: -3px; }
#wva-panel.wva-mode-sidebar.wva-side-left #wva-view-menu { right: auto; left: 12px; }
/* Manijas para cambiar el tamaño (escritorio) */
#wva-resize-se, #wva-resize-w { display: none; position: absolute; z-index: 40; }
#wva-resize-se {
  right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize;
  border-bottom-right-radius: var(--wva-radius);
  background: linear-gradient(135deg, transparent 0 50%, rgba(107,114,128,.45) 50% 60%, transparent 60% 70%, rgba(107,114,128,.45) 70% 80%, transparent 80% 90%, rgba(107,114,128,.45) 90%);
}
#wva-resize-se:hover { background: linear-gradient(135deg, transparent 0 50%, var(--wva-primary) 50% 60%, transparent 60% 70%, var(--wva-primary) 70% 80%, transparent 80% 90%, var(--wva-primary) 90%); }
#wva-resize-w { left: -3px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
#wva-resize-w:hover { background: rgba(var(--wva-primary-rgb), .18); }
#wva-panel.wva-mode-floating #wva-resize-se,
#wva-panel.wva-mode-floating #wva-resize-w,
#wva-panel.wva-mode-sidebar #wva-resize-w { display: block; }
#wva-panel.wva-resizing { transition: none !important; }
#wva-panel.wva-resizing * { pointer-events: none; }
@media (max-width: 640px) { #wva-resize-se, #wva-resize-w { display: none !important; } }

/* ── Modo: Página completa ────────────────────────────────── */
#wva-panel.wva-mode-full {
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border: none;
}
#wva-panel.wva-mode-full #wva-header {
  max-width: 900px; margin: 0 auto; width: 100%;
}
#wva-panel.wva-mode-full #wva-messages,
#wva-panel.wva-mode-full #wva-input-wrap {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
#wva-panel.wva-mode-full #wva-messages { padding-top: 22px; }

/* ── Cabecera (blanca, estilo Hostinger) ──────────────────── */
#wva-header {
  background: #fff;
  color: var(--wva-ink);
  padding: 12px 12px 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--wva-line);
  position: relative;
  flex-shrink: 0;
}
/* @CR_PATCH 3.47.2: la cabecera se arrastra para llevar el cuadro al otro lado */
#wva-panel.wva-mode-sidebar #wva-header { cursor: grab; }
#wva-panel.wva-mode-full #wva-header { cursor: default; }
#wva-panel.wva-dragging { transition: none !important; opacity: .92; }
#wva-panel.wva-dragging.wva-drop-left  { box-shadow: -6px 0 0 rgba(var(--wva-primary-rgb), .35), 0 8px 32px rgba(20,20,60,.12); }
#wva-panel.wva-dragging.wva-drop-right { box-shadow:  6px 0 0 rgba(var(--wva-primary-rgb), .35), 0 8px 32px rgba(20,20,60,.12); }
#wva-panel.wva-dragging #wva-header { cursor: grabbing; }
#wva-panel.wva-dragging { transition: none !important; }
#wva-panel.wva-mode-floating.wva-dragging #wva-header { cursor: grabbing; }
#wva-header-icon { display: inline-flex; align-items: center; line-height: 0; color: var(--wva-primary); flex-shrink: 0; }
#wva-header-icon svg { display: block; width: 22px !important; height: 22px !important; max-width: none !important; max-height: none !important; }
#wva-header-titles { flex: 1; min-width: 0; }
#wva-header-title { font-weight: 700; font-size: 15px; color: var(--wva-ink); line-height: 1.2; }
#wva-header-subtitle { font-size: 11.5px; color: var(--wva-ink-soft); line-height: 1.2; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#wva-header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
#wva-header-actions button {
  background: none; border: none; color: #6b7280; cursor: pointer;
  width: 34px !important; height: 34px !important; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; transition: background .15s, color .15s;
  flex-shrink: 0;
}
#wva-header-actions button:hover { background: #f3f4f6; color: var(--wva-ink); }
#wva-header-actions button svg { display: block; width: 19px !important; height: 19px !important; max-width:none!important; max-height:none!important; }

/* Menú de vistas */
#wva-view-menu {
  position: absolute;
  top: 50px; right: 12px;
  background: #fff;
  border: 1px solid var(--wva-line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20,20,60,.16);
  padding: 6px;
  min-width: 180px;
  z-index: 20;
}
#wva-view-menu.wva-hidden { display: none; }
#wva-view-menu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--wva-ink);
  font-family: var(--wva-font);
}
#wva-view-menu button:hover { background: #f5f6f8; }
#wva-view-menu button .wva-check { width: 16px; color: var(--wva-primary); visibility: hidden; font-weight: 700; }
#wva-view-menu button .wva-side-ico { display: inline-block; width: 18px; height: 13px; border: 1.5px solid #9ca3af; border-radius: 3px; position: relative; flex-shrink: 0; }
#wva-view-menu button .wva-side-ico::after { content: ''; position: absolute; top: 0; bottom: 0; width: 6px; background: #9ca3af; }
#wva-view-menu button .wva-side-ico.r::after { right: 0; border-radius: 0 1px 1px 0; }
#wva-view-menu button .wva-side-ico.l::after { left: 0; border-radius: 1px 0 0 1px; }
#wva-view-menu button.active .wva-side-ico { border-color: var(--wva-primary); }
#wva-view-menu button.active .wva-side-ico::after { background: var(--wva-primary); }
#wva-view-menu button.active .wva-check { visibility: visible; }
#wva-view-menu button.active { background: #f5f6f8; }

/* ── Mensajes ─────────────────────────────────────────────── */
#wva-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
}
.wva-bubble {
  max-width: 88%;
  line-height: 1.55;
  word-break: break-word;
  animation: wva-pop .2s ease;
}
/* Asistente: texto plano (sin burbuja), como Hostinger */
.wva-bubble.assistant {
  background: transparent;
  color: var(--wva-ink);
  align-self: stretch;
  max-width: 100%;
  padding: 2px 2px;
}
.wva-bubble.assistant strong { font-weight: 700; }
/* Cliente: burbuja azul claro a la derecha */
.wva-bubble.user {
  background: var(--wva-user-bubble);
  color: #14213d;
  align-self: flex-end;
  padding: 10px 14px;
  border-radius: 16px;
  border-bottom-right-radius: 5px;
}
.wva-bubble.typing { display: inline-flex; align-items: center; gap: 5px; padding: 8px 2px; align-self: flex-start; }
.wva-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wva-primary);
  animation: wva-dot-bounce 1.2s infinite;
}
.wva-dot:nth-child(2) { animation-delay: .15s; }
.wva-dot:nth-child(3) { animation-delay: .3s; }
@keyframes wva-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Estado de bienvenida centrado (estilo Hostinger) */
.wva-welcome-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 26px 10px 10px;
}
.wva-welcome-hero .wva-hero-icon {
  width: 46px; height: 46px; color: var(--wva-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.wva-welcome-hero .wva-hero-icon svg { width: 42px !important; height: 42px !important; }
.wva-welcome-hero .wva-hero-title { font-size: 19px; font-weight: 700; color: var(--wva-ink); }
.wva-welcome-hero .wva-hero-sub { font-size: 13.5px; color: var(--wva-ink-soft); }

/* Sugerencias rapidas */
.wva-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0; }
.wva-chip {
  background: #fff;
  border: 1px solid #d9dbe4;
  color: var(--wva-ink);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.wva-chip:hover { background: var(--wva-primary-soft); border-color: var(--wva-primary); color: var(--wva-primary-dark); }

/* Botón "Ver mi carrito" (cierra el bot para mostrar el carrito) */
.wva-cart-cta{
  display:block; margin:8px auto 4px; padding:11px 20px;
  background:var(--wva-primary); color:#fff;
  border:none; border-radius:24px;
  font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 14px rgba(37,99,235,.28);
  transition:background .15s, transform .1s;
}
.wva-cart-cta:hover{ background:var(--wva-primary-dark); }
.wva-cart-cta:active{ transform:scale(.98); }

/* Botón "Mostrar más productos" */
#wva-showmore{
  display:block; margin:4px auto 8px; padding:9px 18px;
  background:#fff; color:var(--wva-primary);
  border:1.5px solid var(--wva-primary); border-radius:22px;
  font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .15s, color .15s;
}
#wva-showmore:hover{ background:var(--wva-primary); color:#fff; }
#wva-showmore:disabled{ opacity:.6; cursor:default; }

/* Teaser fugaz sobre el launcher */
#wva-teaser{
  position:fixed; z-index:2147483000; max-width:240px;
  background:#fff; color:#1f2340; border:1px solid #eee;
  border-radius:16px; padding:12px 34px 12px 14px; font-size:13.5px; line-height:1.4;
  box-shadow:0 10px 30px rgba(0,0,0,.18); cursor:pointer;
  opacity:0; transform:translateY(10px); transition:opacity .35s, transform .35s;
}
#wva-teaser.show{opacity:1; transform:translateY(0)}
#wva-teaser.left{left:24px; bottom:190px}
#wva-teaser.right{right:24px; bottom:160px}
#wva-teaser::after{content:''; position:absolute; bottom:-7px; width:14px; height:14px;
  background:#fff; border-right:1px solid #eee; border-bottom:1px solid #eee; transform:rotate(45deg)}
#wva-teaser.left::after{left:26px}
#wva-teaser.right::after{right:26px}
#wva-teaser .wva-teaser-x{position:absolute; top:6px; right:9px; font-size:12px; color:#9aa0b4; padding:2px}
#wva-teaser .wva-teaser-x:hover{color:#556}

/* Imagenes explicativas */
.wva-image-bubble { padding: 0 !important; max-width: 88%; align-self: flex-start; }
.wva-image-bubble img { display: block; width: 100%; max-width: 300px; border-radius: 12px; cursor: zoom-in; }
.wva-image-caption { font-size: 11.5px; color: var(--wva-ink-soft); padding: 6px 2px 2px; }

/* Feedback por respuesta */
.wva-feedback { display: flex; gap: 6px; margin: -6px 0 2px 2px; }
.wva-fb {
  background: none !important; border: none !important; cursor: pointer;
  font-size: 16px !important; padding: 3px 5px; border-radius: 7px;
  opacity: .7; transition: opacity .15s, transform .1s, background .15s;
  width: auto !important; min-width: 0 !important; height: auto !important;
}
.wva-fb:hover { opacity: 1; transform: scale(1.12); background: #f3f4f6; }
.wva-fb.sel { opacity: 1; filter: none; }
.wva-fb:disabled { cursor: default; }
.wva-fb:disabled:not(.sel) { opacity: .25; }

/* Product cards */
.wva-products { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.wva-card {
  background: #fff;
  border: 1px solid var(--wva-line);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.wva-card:hover { box-shadow: 0 4px 16px rgba(37,99,235,.12); border-color: #cdd7ee; }
.wva-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.wva-card-info { flex: 1; min-width: 0; }
.wva-card-name {
  font-weight: 600; font-size: 13px;
  /* Nombre completo, en varias líneas si hace falta (nunca cortado con "…") */
  white-space: normal; overflow: visible; text-overflow: initial;
  line-height: 1.3; word-break: break-word;
  color: var(--wva-ink);
}
#wva-messages .wva-bubble a { color: var(--wva-primary); word-break: break-all; }
.wva-card-price { font-size: 13px; font-weight: 700; color: var(--wva-primary); margin-top: 1px; }
.wva-card-stock { font-size: 11px; color: var(--wva-ink-soft); margin-top: 1px; }
.wva-card-stock.out { color: #ef4444; }
.wva-sale-badge {
  background: #ef4444; color: #fff; font-size: 10px;
  font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-left: 4px;
}
.wva-card-actions { display: flex; flex-direction: column; gap: 4px; }
.wva-btn-cart {
  background: var(--wva-primary); color: #fff;
  border: none; border-radius: 9px; padding: 6px 10px;
  font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.wva-btn-cart:hover { background: var(--wva-primary-dark); }
.wva-btn-view, a.wva-btn-view {
  background: var(--wva-primary-soft); color: var(--wva-primary);
  border: none; border-radius: 9px; padding: 6px 10px;
  font-size: 12px; cursor: pointer;
  transition: background .15s;
  text-decoration: none; text-align: center;
  display: inline-block;
}
.wva-btn-view:hover, a.wva-btn-view:hover { filter: brightness(.97); }

/* ── Zona de entrada (píldora, estilo Hostinger) ──────────── */
#wva-input-wrap { background: #fff; padding: 8px 12px 10px; flex-shrink: 0; }

/* Selector "Agente ▾" pegado arriba de la caja de texto (como en Claude):
   despliega el menú para elegir entre chat de texto o modo voz. */
#wva-mode-bar { display: flex; align-items: center; gap: 6px; padding: 0 4px 6px; flex-wrap: wrap; }
#wva-mode-select { margin-left: auto; }
#wva-mode-select {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--wva-line);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wva-ink-soft);
  cursor: pointer;
  font-family: var(--wva-font);
  transition: background .15s, color .15s, border-color .15s;
}
#wva-mode-select:hover { background: #f5f6f8; color: var(--wva-ink); }
#wva-mode-select-icon { display: inline-flex; align-items: center; line-height: 0; }
#wva-mode-select-icon svg { display: block; width: 15px !important; height: 15px !important; max-width: none !important; max-height: none !important; }
.wva-mode-chevron { font-size: 10px; opacity: .7; }

#wva-input-bar {
  background: #fff;
  border: 1px solid #d7dae2;
  border-radius: 24px;
  padding: 5px 5px 5px 16px;
  display: flex;
  gap: 6px;
  align-items: center;
  transition: border-color .15s, box-shadow .15s;
}
#wva-input-bar:focus-within { border-color: var(--wva-primary); box-shadow: 0 0 0 3px var(--wva-primary-soft); }
#wva-text-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 8px 0;
  font-size: 14px;
  outline: none;
  color: var(--wva-ink);
  font-family: var(--wva-font);
}
#wva-text-input::placeholder { color: #9aa0b4; }
/* Botones de la barra: !important para que ningun tema los pise ni encoja */
#wva-btn-mic, #wva-btn-send {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: background .15s, transform .1s;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
#wva-btn-send { background: var(--wva-primary) !important; color: #fff !important; }
#wva-btn-send:hover { background: var(--wva-primary-dark) !important; }
#wva-btn-send svg { display:block; width: 20px !important; height: 20px !important; stroke: #fff !important; }
#wva-btn-mic  { background: var(--wva-primary) !important; color: #fff !important; }
#wva-btn-mic:hover { background: var(--wva-primary-dark) !important; }
#wva-btn-mic svg { display:block; width: 22px !important; height: 22px !important; stroke: #fff !important; fill: none !important; }
#wva-btn-mic.recording {
  background: #ef4444 !important; color: #fff !important;
  animation: wva-pulse 1s infinite;
}
#wva-status {
  font-size: 11px; color: #9ca3af; text-align: center;
  padding: 2px 12px 0; background: #fff;
}
#wva-disclaimer {
  font-size: 10.5px; color: #a2a7b4; text-align: center;
  padding: 6px 12px 2px;
}

/* Animations */
@keyframes wva-pop { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: translateY(0); } }
@keyframes wva-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.wva-chat-open { overflow: hidden; }
  html.wva-sidebar-on body { margin-right: 0 !important; margin-left: 0 !important; }
  html.wva-sidebar-on .wva-above { margin-right: 0 !important; margin-left: 0 !important; }

  #wva-launcher.bottom-right,
  #wva-launcher.bottom-left {
    right: 16px !important;
    left: auto !important;
    bottom: calc(72px + var(--wva-safe-bottom));
  }

  /* En móvil todos los modos se ven a pantalla casi completa */
  #wva-panel,
  #wva-panel.wva-mode-sidebar,
  #wva-panel.wva-mode-full,
  #wva-panel.wva-dragged {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(var(--wva-vh) - 8px) !important;
    max-height: calc(var(--wva-vh) - 8px) !important;
    top: calc(var(--wva-offset-top) + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    border: none !important;
  }
  #wva-panel.wva-mode-floating #wva-header { cursor: default; }

  #wva-messages { padding: 12px; gap: 10px; }
  .wva-bubble { max-width: 94%; }

  .wva-card { align-items: flex-start; flex-wrap: wrap; }
  .wva-card-info { min-width: calc(100% - 66px); }
  .wva-card-name { white-space: normal; overflow: visible; text-overflow: initial; line-height: 1.35; }
  .wva-card-actions { width: 100%; margin-left: 66px; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .wva-btn-cart, .wva-btn-view, a.wva-btn-view { width: auto; min-width: 0; padding: 6px 9px; font-size: 11px; text-align: center; }

  /* Botón de cerrar del teaser: más grande en móvil para que sea fácil
     tocarlo sin abrir el chat por error */
  #wva-teaser { padding-right: 44px; }
  #wva-teaser .wva-teaser-x {
    top: 0; right: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    padding: 0;
  }

  /* En móvil el ícono del bot siempre queda pegado abajo a la derecha
     (ver #wva-launcher más arriba), así que el mensaje debe apegarse
     ahí también, más abajo de donde aparecía en desktop */
  #wva-teaser.left,
  #wva-teaser.right {
    left: auto !important;
    right: 12px;
    bottom: calc(72px + 58px + 10px + var(--wva-safe-bottom));
  }
  #wva-teaser.left::after,
  #wva-teaser.right::after {
    left: auto;
    right: 26px;
  }

  #wva-input-wrap { position: sticky; bottom: 0; padding-bottom: calc(10px + var(--wva-safe-bottom)); z-index: 2; }
  #wva-text-input { font-size: 16px; }
}

/* ── Mensaje del vendedor (humano) ────────────────────────── */
.wva-bubble.vendor-msg {
  background: #fefce8;
  border: 1px solid #fde68a;
  color: #78350f;
  align-self: flex-start;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 88%;
}

/* 3.44.0 · Cita, imagen y archivo en mensajes del vendedor */
.wva-bubble.vendor-msg .wva-quote { margin: 6px 0 6px; padding: 5px 9px; border-left: 3px solid #d97706; background: rgba(255,255,255,.65); border-radius: 6px; font-size: 12.5px; color: #57534e; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.wva-bubble.vendor-msg .wva-quote-who { display: block; font-weight: 700; font-size: 11.5px; color: #b45309; }
.wva-bubble.vendor-msg .wva-att-img { display: block; margin: 6px 0 4px; }
.wva-bubble.vendor-msg .wva-att-img img { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; border: 1px solid #fde68a; background: #fff; }
.wva-bubble.vendor-msg .wva-att-file { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 8px 10px; background: #fff; border: 1px solid #fde68a; border-radius: 10px; text-decoration: none; color: #78350f; flex-wrap: wrap; }
.wva-bubble.vendor-msg .wva-att-ico { font-size: 22px; line-height: 1; }
.wva-bubble.vendor-msg .wva-att-name { font-weight: 600; font-size: 13px; word-break: break-all; flex: 1; min-width: 120px; }
.wva-bubble.vendor-msg .wva-att-size { font-size: 11.5px; color: #a16207; }
.wva-bubble.vendor-msg .wva-vtext { margin-top: 2px; }

/* ── Detalle de producto dentro del chat ──────────────────── */
.wva-detail-bubble { max-width: 95% !important; padding: 0 !important; overflow: hidden; align-self: flex-start; border: 1px solid var(--wva-line); border-radius: 14px; background: #fff; }
.wva-product-detail { display: flex; flex-direction: column; }
.wva-product-detail img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 13px 13px 0 0; }
.wva-detail-body { padding: 12px 14px; }
.wva-detail-name { font-weight: 600; font-size: 14px; color: var(--wva-ink); margin-bottom: 10px; }
.wva-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wva-btn-external {
  display: inline-block; font-size: 12px; padding: 7px 12px;
  background: var(--wva-primary-soft); color: var(--wva-primary);
  border-radius: 9px; text-decoration: none;
  border: 1px solid #dbe4fb; transition: filter .15s;
}
.wva-btn-external:hover { filter: brightness(.97); }

/* ── Selector de variaciones ──────────────────────────────── */
.wva-variation-selector { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.wva-var-title { font-weight: 600; font-size: 13px; color: var(--wva-ink); margin-bottom: 2px; }
.wva-var-group { display: flex; flex-direction: column; gap: 4px; }
.wva-var-label { font-size: 12px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .4px; }
.wva-var-select {
  border: 1px solid #d1d5db; border-radius: 9px;
  padding: 7px 10px; font-size: 13px;
  background: #fff; color: var(--wva-ink);
  outline: none; cursor: pointer;
  transition: border-color .15s;
}
.wva-var-select:focus { border-color: var(--wva-primary); }
.wva-btn-add-variation { margin-top: 4px; }
.wva-btn-add-variation:disabled { opacity: .45; cursor: not-allowed; }

/* ── Llamada de voz en vivo: pantalla superpuesta sobre el chat ── */
#wva-call-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 24px;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, var(--wva-primary-soft) 100%);
}
.wva-call-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--wva-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  box-shadow: 0 8px 24px rgba(var(--wva-primary-rgb), .35);
}
#wva-call-screen.calling .wva-call-avatar { animation: wva-call-pulse 1.5s ease-in-out infinite; }
@keyframes wva-call-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wva-primary-rgb), .45), 0 8px 24px rgba(var(--wva-primary-rgb), .35); }
  50%      { box-shadow: 0 0 0 16px rgba(var(--wva-primary-rgb), 0), 0 8px 24px rgba(var(--wva-primary-rgb), .35); }
}
#wva-call-screen.ended .wva-call-avatar { background: #9ca3af; box-shadow: none; }
#wva-call-text { font-size: 15px; font-weight: 600; color: var(--wva-ink); max-width: 260px; line-height: 1.4; }
#wva-call-timer { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--wva-ink-soft); }
#wva-call-actions { margin-top: 6px; }
#wva-call-hangup {
  border: none; cursor: pointer;
  background: #dc2626; color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 10px 22px; border-radius: 999px;
  transition: filter .15s;
}
#wva-call-hangup:hover { filter: brightness(.92); }
#wva-call-screen.ended #wva-call-actions { display: none; }
#wva-call-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
#wva-call-min {
  border: 1px solid var(--wva-line); cursor: pointer;
  background: #fff; color: var(--wva-ink);
  font-size: 13px; font-weight: 600; font-family: var(--wva-font);
  padding: 10px 18px; border-radius: 999px;
}
#wva-call-min:hover { background: #f5f6f8; }

/* Pastilla flotante mientras el chat está cerrado y la llamada sigue */
#wva-call-pill {
  position: fixed; z-index: 99999;
  display: flex; align-items: center; gap: 10px;
  background: #111827; color: #fff;
  border-radius: 999px; padding: 8px 10px 8px 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
  font-family: var(--wva-font); font-size: 13px;
  max-width: calc(100vw - 32px);
}
#wva-call-pill .wva-cp-ico { font-size: 18px; line-height: 1; flex: none; }
#wva-call-pill .wva-cp-body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
#wva-call-pill .wva-cp-text { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
#wva-call-pill .wva-cp-timer { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
#wva-call-pill .wva-cp-btns { display: flex; gap: 6px; flex: none; }
#wva-call-pill button { border: none; cursor: pointer; border-radius: 999px; font-family: var(--wva-font); font-weight: 700; font-size: 13px; padding: 8px 12px; }
#wva-call-pill .wva-cp-open { background: rgba(255,255,255,.14); color: #fff; }
#wva-call-pill .wva-cp-open:hover { background: rgba(255,255,255,.26); }
#wva-call-pill .wva-cp-hangup { background: #dc2626; color: #fff; }
#wva-call-pill .wva-cp-hangup:hover { filter: brightness(.92); }
#wva-call-pill.ended { background: #374151; }

#wva-call-screen.wva-call-collapsed { display: none; }
#wva-call-chat {
  border: 1px solid rgba(var(--wva-primary-rgb), .35); cursor: pointer;
  background: #fff; color: var(--wva-primary-dark);
  font-size: 13px; font-weight: 700; font-family: var(--wva-font);
  padding: 10px 16px; border-radius: 999px;
}
#wva-call-chat:hover { background: var(--wva-primary-soft); }
/* Barra de llamada minimizada arriba de los mensajes */
#wva-call-mini {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 8px 0; padding: 7px 10px;
  background: #111827; color: #fff; border-radius: 12px;
  font-family: var(--wva-font); font-size: 12.5px;
}
#wva-call-mini .wva-cm-ico { font-size: 16px; line-height: 1; }
#wva-call-mini .wva-cm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
#wva-call-mini .wva-cm-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wva-call-mini .wva-cm-timer { font-size: 11.5px; opacity: .8; font-variant-numeric: tabular-nums; }
#wva-call-mini button { border: none; cursor: pointer; border-radius: 999px; font-family: var(--wva-font); font-weight: 700; font-size: 12px; padding: 6px 10px; }
#wva-call-mini .wva-cm-open { background: rgba(255,255,255,.14); color: #fff; }
#wva-call-mini .wva-cm-hangup { background: #dc2626; color: #fff; }
#wva-call-mic { font-size: 12px; color: #15803d; font-weight: 600; }
#wva-call-mic.bad { color: #b91c1c; }
/* Volumen y altavoz durante la llamada */
#wva-call-vol { width: 100%; max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#wva-call-vol.wva-hidden { display: none; }
.wva-call-vol-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.wva-call-vol-ico { font-size: 18px; line-height: 1; flex: none; }
#wva-call-vol-range { flex: 1; min-width: 0; accent-color: var(--wva-primary); cursor: pointer; height: 28px; margin: 0; }
#wva-call-vol-val { font-size: 12px; font-weight: 700; color: var(--wva-ink-soft); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.wva-call-vol-hint { font-size: 11px; color: var(--wva-ink-soft); line-height: 1.3; }
#wva-call-speaker {
  margin-top: 4px;
  border: 1px solid rgba(var(--wva-primary-rgb), .35); cursor: pointer;
  background: #fff; color: var(--wva-primary-dark);
  font-size: 13px; font-weight: 700; font-family: var(--wva-font);
  padding: 9px 18px; border-radius: 999px;
}
#wva-call-speaker.on { background: var(--wva-primary); color: #fff; border-color: var(--wva-primary); }

/* ── Pantalla compartida (cliente) ───────────────────────────── */
#wva-screen-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 4px 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 12px; font-weight: 600;
}
.wva-screen-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981; flex: none;
  animation: wva-screen-blink 1.4s ease-in-out infinite;
}
@keyframes wva-screen-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
#wva-screen-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wva-screen-stop {
  border: none; cursor: pointer;
  background: #dc2626; color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
}
.wva-screen-req-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wva-screen-yes {
  border: none; cursor: pointer;
  background: var(--wva-primary); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 9px 14px; border-radius: 999px;
}
.wva-screen-no {
  cursor: pointer;
  background: #fff; color: var(--wva-ink-soft);
  border: 1px solid var(--wva-line);
  font-size: 13px; font-weight: 600;
  padding: 9px 14px; border-radius: 999px;
}

/* Puntero del vendedor cuando controla la página (control remoto) */
#wva-remote-cursor {
  position: fixed; z-index: 2147483001;
  pointer-events: none;
  display: flex; align-items: flex-start; gap: 2px;
  transform: translate(-3px, -2px);
  transition: left .06s linear, top .06s linear;
}
#wva-remote-cursor svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
#wva-remote-cursor span {
  margin-top: 14px;
  background: #2563eb; color: #fff;
  font: 600 11px/1 var(--wva-font);
  padding: 3px 6px; border-radius: 6px;
  white-space: nowrap;
}
#wva-remote-cursor.wva-click svg { transform: scale(.8); }
.wva-screen-req strong { font-weight: 700; }
.wva-screen-req .wva-screen-req-actions { margin-top: 8px; }

/* Botón para activar el sonido de la llamada si el navegador bloqueó el autoplay */
#wva-call-unmute {
  border: none; cursor: pointer;
  background: #f59e0b; color: #111827;
  font-size: 13px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px;
  margin-right: 8px;
  animation: wva-call-pulse 1.5s ease-in-out infinite;
}


/* ── Botón y panel "Habilidades" ───────────────────────────── */
#wva-skills-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgba(var(--wva-primary-rgb), .25);
  background: rgba(var(--wva-primary-rgb), .10);
  color: var(--wva-primary-dark);
  border-radius: 14px; padding: 4px 11px;
  font-family: var(--wva-font); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .15s, border-color .15s;
}
#wva-skills-btn:hover, #wva-skills-btn.wva-on {
  background: rgba(var(--wva-primary-rgb), .18);
  border-color: var(--wva-primary);
}
.wva-skills-bolt { font-size: 12px; line-height: 1; }

#wva-human-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--wva-line);
  background: none;
  color: var(--wva-ink-soft);
  border-radius: 14px; padding: 4px 11px;
  font-family: var(--wva-font); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
#wva-human-btn:hover { background: #f5f6f8; color: var(--wva-ink); }
#wva-human-btn:disabled { opacity: .6; cursor: default; }
#wva-human-btn.wva-done {
  border-color: rgba(var(--wva-primary-rgb), .3);
  background: rgba(var(--wva-primary-rgb), .10);
  color: var(--wva-primary-dark);
}
.wva-human-ico { font-size: 13px; line-height: 1; }

#wva-skills {
  position: absolute; left: 8px; right: 8px; bottom: 112px;
  z-index: 25;
  max-height: 62%;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--wva-line);
  border-radius: 14px;
  box-shadow: var(--wva-shadow);
  overflow: hidden;
  font-family: var(--wva-font);
}
#wva-skills.wva-hidden { display: none; }
#wva-skills-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 10px 4px;
  padding: 8px 12px;
  border: 1.5px solid var(--wva-primary);
  border-radius: 12px;
  color: var(--wva-ink-soft);
  background: #fff;
}
#wva-skills-search svg { flex: none; }
#wva-skills-q {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font: 14px var(--wva-font); color: var(--wva-ink);
}
#wva-skills-q::placeholder { color: #9aa1ad; }
#wva-skills-label {
  padding: 8px 16px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--wva-ink-soft);
}
#wva-skills-list { overflow-y: auto; padding: 0 6px 8px; }
.wva-skill {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 9px 10px; border-radius: 10px;
  font-family: var(--wva-font);
  transition: background .12s;
}
.wva-skill:hover, .wva-skill:focus { background: #f4f5f8; outline: none; }
.wva-skill-icon {
  flex: none; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(var(--wva-primary-rgb), .10);
  font-size: 17px; line-height: 1;
}
.wva-skill-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wva-skill-text strong { font-size: 13.5px; font-weight: 700; color: var(--wva-ink); }
.wva-skill-text small {
  font-size: 12px; color: var(--wva-ink-soft); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wva-skill-empty { padding: 14px 12px 10px; font-size: 13px; color: var(--wva-ink-soft); }

/* Botón de voz (leer respuestas): silenciado en gris */
#wva-btn-tts.wva-tts-off { color: #9ca3af; }


/* 3.62.0 · Lista revisada con fotos y botones */
.wva-lp { margin: 6px 0 10px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.wva-lp-h { font-size: 12px; font-weight: 700; color: #374151; margin: 4px 2px 0; }
.wva-lp-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: #f9fafb; }
.wva-lp-row img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
.wva-lp-info { flex: 1 1 auto; min-width: 0; }
.wva-lp-name { font-size: 12.5px; line-height: 1.25; color: #111827; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wva-lp-meta { font-size: 11.5px; color: #6b7280; margin-top: 2px; }
.wva-lp-btn { flex: none; border: 0; border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer; background: #1d4ed8; color: #fff; white-space: nowrap; }
.wva-lp-btn:disabled { opacity: .55; cursor: default; }
.wva-lp-btn.ok { background: #16a34a; opacity: 1; }
.wva-lp-doubt { border: 1px dashed #f59e0b; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 5px; background: #fffbeb; }
.wva-lp-ask { font-size: 12px; color: #374151; padding: 0 2px; }
.wva-lp-ask span { color: #b45309; }
.wva-lp-opt { background: #fff; }
.wva-lp-opt .wva-lp-btn { background: #f59e0b; }
.wva-lp-all { margin-top: 4px; border: 0; border-radius: 10px; padding: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; background: #16a34a; color: #fff; }
.wva-lp-all:disabled { opacity: .7; cursor: default; }
.wva-lp-btn:focus-visible, .wva-lp-all:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }