/* ── Retail Commerce Engine — Widget de chat con IA ───────────────────────────
   Autocontenido a propósito (ver RCE_Chatbot::render_widget()): el sitio
   piloto (lym-licores-home) no encola CSS por wp_enqueue_*, así que esta
   hoja no puede depender de que otro archivo defina las variables. Paleta
   ajustada a mano para calzar con la identidad real del piloto (L&M Licores:
   negro + dorado, ver lym-home.css `--lym-*`) -- si el chatbot se activa
   algún día en un sitio con otra identidad, esta paleta pasa a ser el
   default y conviene resolverla vía RCE_Vertical_Bridge::branding() en vez
   de hardcodearla de nuevo acá. */

.rce-chat-fab, .rce-chat-drawer, .rce-chat-drawer * {
  /* Mismos tokens que lym-home.css `--lym-*` (2026-09-12: se oscurecían casi
     igual que el fondo, "muy oscuro" -- ahora un marrón-dorado de verdad en
     vez de gris-negro, mismo criterio en todo el sitio + el chat). */
  --rcec-bg: #100b06;
  --rcec-bg-elev: #24170a;
  --rcec-bg-elev2: #33220e;
  --rcec-border: rgba(240, 181, 72, .32);
  --rcec-border-soft: rgba(240, 181, 72, .16);
  --rcec-gold-1: #f3c463;
  --rcec-gold-2: #d98d2b;
  --rcec-gold: #e3a94a;
  --rcec-text: #f6f0e4;
  --rcec-text-dim: #cdb99e;
  --rcec-text-mute: #a08c6f;
  --rcec-on-gold: #241705;
  box-sizing: border-box;
}

.rce-chat-fab {
  position: fixed !important;
  right: clamp(16px, 4vw, 28px) !important;
  bottom: clamp(90px, 18vw, 110px) !important;
  z-index: 800;
  width: 58px; height: 58px;
  background: var(--rcec-bg-elev2);
  color: var(--rcec-gold);
  border: 1px solid var(--rcec-gold);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.rce-chat-fab:hover { transform: scale(1.08); }
.rce-chat-fab svg { width: 25px; height: 25px; position: relative; z-index: 1; }
@media (min-width: 900px) { .rce-chat-fab { bottom: 28px !important; } }

/* Anillo dorado giratorio (antihorario) alrededor del FAB -- pseudo-elemento
   detrás del botón (z-index -1 dentro del propio contexto de apilamiento
   del FAB, que ya es position:fixed) con un conic-gradient que rota; solo
   se ve el aro que sobresale del círculo sólido de encima. */
.rce-chat-fab::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent 0%, var(--rcec-gold-1) 18%, transparent 40%);
  animation: rcec-fab-ring 3.4s linear infinite;
  z-index: -1;
}
@keyframes rcec-fab-ring {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

.rce-chat-drawer { position: fixed; inset: 0; z-index: 950; pointer-events: none; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.rce-chat-drawer.is-open { pointer-events: auto; }

.rce-chat-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0; transition: opacity .25s ease;
}
.rce-chat-drawer.is-open .rce-chat-drawer__backdrop { opacity: 1; }

.rce-chat-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(380px, 100vw);
  background:
    radial-gradient(70% 40% at 100% 0%, rgba(243,196,99,.14), transparent 60%),
    var(--rcec-bg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s ease;
  box-shadow: -10px 0 40px rgba(0,0,0,.5);
}
.rce-chat-drawer.is-open .rce-chat-drawer__panel { transform: none; }

.rce-chat-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--rcec-bg-elev2);
  border-bottom: 1px solid var(--rcec-border-soft);
  color: var(--rcec-text);
  flex-shrink: 0;
}
.rce-chat-drawer__title { margin: 0; font-size: 1.05rem; font-weight: 800; flex: 1; }
.rce-chat-drawer__close {
  background: rgba(255,255,255,.06); border: none; color: var(--rcec-text);
  width: 30px; height: 30px; border-radius: 50%; font-size: .95rem; cursor: pointer;
}

.rce-chat-autolectura {
  display: flex; align-items: center; gap: 4px;
  color: var(--rcec-text-mute); font-size: .85rem; cursor: pointer;
  margin-right: 8px;
}
.rce-chat-autolectura input { accent-color: var(--rcec-gold); cursor: pointer; }
.rce-chat-autolectura:has(input:checked) { color: var(--rcec-gold); }

/* Botón de escuchar una respuesta puntual -- se agrega dentro de la burbuja
   del bot desde el JS (agregarBurbuja), no vive en el <template> porque solo
   tiene sentido para mensajes del bot, nunca del usuario. */
.rce-chat-msg__hablar {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--rcec-border-soft);
  color: var(--rcec-gold); font-size: .85rem; cursor: pointer; flex-shrink: 0;
}
.rce-chat-msg__hablar.is-hablando { background: var(--rcec-gold); color: var(--rcec-on-gold); }

/* Botón "compartir ubicación" -- lo pide el bot (regla 9 de
   RCE_Chatbot::system_prompt()) cuando ya tiene domicilio + dirección, mismo
   criterio de armado dinámico que .rce-chat-msg__hablar. */
.rce-chat-msg__ubicacion {
  display: block; margin-top: 8px; padding: 8px 14px; border-radius: 20px;
  border: none; background: linear-gradient(135deg, var(--rcec-gold-1), var(--rcec-gold-2));
  color: var(--rcec-on-gold); font-size: .85rem; font-weight: 600; cursor: pointer;
}
.rce-chat-msg__ubicacion:disabled { opacity: .6; cursor: default; }

.rce-chat-mensajes {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.rce-chat-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.4; }
/* white-space:pre-wrap va en el DIV DE ADENTRO (el texto real), nunca en la
   burbuja de afuera -- puesto ahí, la indentación/saltos de línea del propio
   HTML del <template> (espacios en blanco entre las dos etiquetas, no texto
   real) se renderizaban como líneas en blanco de verdad, inflando burbujas
   de una sola palabra a 3-4 líneas de alto sin ningún texto visible extra.
   `overflow-wrap` -- bug real: un link de Google Maps (una sola palabra
   larguísima, sin espacios) no tenía dónde cortar, así que la burbuja
   ignoraba el `max-width` de arriba y se salía de la pantalla, generando
   scroll horizontal en todo el chat (visto en grabación real del usuario). */
.rce-chat-msg__texto { white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.rce-chat-msg--bot { align-self: flex-start; background: var(--rcec-bg-elev); border: 1px solid var(--rcec-border-soft); color: var(--rcec-text); border-bottom-left-radius: 3px; }
.rce-chat-msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--rcec-gold-1), var(--rcec-gold-2)); color: var(--rcec-on-gold); border-bottom-right-radius: 3px; font-weight: 500; }
/* Un mensaje con tabla (ver formatearMarkdownLigero() en rce-chatbot.js)
   necesita mucho más que el 82% normal -- casi todo el ancho del drawer. */
.rce-chat-msg--ancha { max-width: 96%; }

/* Tablas Markdown del bot (ej. "mostrame todas las cervezas" -- ver regla 8
   de RCE_Chatbot::system_prompt()) -- el wrapper hace scroll horizontal en
   vez de desbordar la pantalla, la tabla en sí queda chica/compacta porque
   el drawer es angosto (350-380px) y puede haber 5-6 columnas. */
.rce-chat-tabla-wrap { overflow-x: auto; margin: 6px -4px; -webkit-overflow-scrolling: touch; }
.rce-chat-tabla { border-collapse: collapse; font-size: .78rem; white-space: nowrap; }
.rce-chat-tabla th, .rce-chat-tabla td {
  padding: 6px 9px; border: 1px solid var(--rcec-border-soft); text-align: left;
}
.rce-chat-tabla th {
  background: var(--rcec-bg-elev2); color: var(--rcec-gold); font-weight: 700;
  position: sticky; top: 0;
}
.rce-chat-tabla tr:nth-child(even) td { background: rgba(255,255,255,.02); }

.rce-chat-cargando { display: flex; gap: 4px; padding: 0 18px 8px; }
.rce-chat-cargando span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rcec-text-mute);
  animation: rcec-blink 1.2s infinite ease-in-out both;
}
.rce-chat-cargando span:nth-child(2) { animation-delay: .15s; }
.rce-chat-cargando span:nth-child(3) { animation-delay: .3s; }
@keyframes rcec-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.rce-chat-form {
  position: relative; /* ancla el globo de ayuda del mic (rce-chat-mic-hint) */
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid var(--rcec-border-soft);
  background: var(--rcec-bg-elev2); flex-shrink: 0;
}
/* Globo de ayuda -- explica el gesto de sostener-y-soltar la primera vez,
   antes de que el cliente lo intente solo. rce-chatbot.js lo oculta para
   siempre (localStorage) apenas se usa una vez con éxito. */
.rce-chat-mic-hint {
  position: absolute; right: 12px; bottom: calc(100% + 8px);
  max-width: min(220px, 70vw);
  background: var(--rcec-bg-elev2); border: 1px solid var(--rcec-border-soft);
  color: var(--rcec-text); font-size: .78rem; line-height: 1.35;
  padding: 8px 12px; border-radius: 12px; border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  animation: rcec-hint-flota 2.2s infinite ease-in-out;
}
@keyframes rcec-hint-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.rce-chat-input {
  flex: 1; border: 1.5px solid var(--rcec-border-soft); border-radius: 20px;
  padding: 10px 14px; font-size: 16px; /* 16px evita auto-zoom de Safari iOS */
  font-family: inherit; color: var(--rcec-text); background: rgba(255,255,255,.04);
}
.rce-chat-input::placeholder { color: var(--rcec-text-mute); }
.rce-chat-input:focus { outline: none; border-color: var(--rcec-gold); }
/* Botón único (mic ↔ enviar), mismo patrón que WhatsApp -- rce-chatbot.js
   alterna la clase `.is-texto` según si el input tiene contenido. Por
   defecto (sin texto) es el micrófono; con texto se ve como el botón
   dorado de enviar. `touch-action: none` es necesario para que el gesto de
   sostener-y-soltar (Pointer Events) no dispare el scroll/zoom nativo del
   navegador mientras se graba. */
/* Relieve 3D -- sombra hacia abajo-derecha + brillo superior sugieren un
   botón "levantado" en reposo; `.is-presionado` (rce-chatbot.js, en
   pointerdown/up -- INDEPENDIENTE de is-grabando, que tarda un poco más en
   llegar por el permiso de micrófono async) lo invierte a hundido al toque,
   para que el cliente vea/sienta de inmediato que el toque se registró. */
.rce-chat-send-mic {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--rcec-border-soft); background: rgba(255,255,255,.04);
  color: var(--rcec-gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .1s ease;
  touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 5px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
}
.rce-chat-send-mic svg { width: 19px; height: 19px; }
.rce-chat-send-mic.is-texto {
  border: none;
  background: linear-gradient(135deg, var(--rcec-gold-1), var(--rcec-gold-2));
  color: var(--rcec-on-gold);
  box-shadow: 0 3px 0 rgba(150,100,10,.5), 0 5px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.rce-chat-send-mic.is-presionado {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3), inset 0 2px 4px rgba(0,0,0,.4);
}
/* Estado "grabando" -- pulso rojo claro para que sea obvio que el micrófono
   está activo, distinto del dorado normal del resto del widget a propósito
   (una grabación en curso es una acción que conviene destacar). El leve
   `scale` es feedback táctil de que el sostener SÍ se registró. */
.rce-chat-send-mic.is-grabando {
  background: rgba(220, 60, 60, .18); border-color: rgba(220, 60, 60, .6); color: #ff8080;
  animation: rcec-mic-pulso 1.1s infinite ease-in-out;
  transform: scale(1.12);
}
@keyframes rcec-mic-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,60,60,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(220,60,60,0); }
}

html.rce-chat-no-scroll, html.rce-chat-no-scroll body { overflow: hidden; }

@media (max-width: 480px) {
  .rce-chat-drawer__panel { width: 100vw; }
}