/* ==========================================================================
   Widget de chat — estilos
   ==========================================================================
   Corre dentro de un iframe, asi que no compite con el CSS del sitio que lo
   embebe: acá se puede usar `button`, `input` o `b` sin miedo a que un tema
   de WordPress los pise. Cada cliente cambia solo las variables de :root, que
   api/c/[cliente].js inyecta desde `tema` en su JSON. Los valores de acá son
   el tema por defecto (neutro, claro) para un cliente sin tema propio.
   ========================================================================== */

:root {
  --fondo: #FFFFFF;          /* zona de mensajes */
  --superficie: #F6F5F2;     /* cabecera y barra de entrada */
  --cabecera: var(--superficie);
  --cabecera-texto: var(--texto);
  --texto: #23272F;
  --texto-2: #6A6A66;
  --acento: #5169D7;         /* botón flotante, botones rápidos, enviar */
  --acento-texto: #FFFFFF;
  --bot: #F1EEE8;            /* burbuja del bot */
  --bot-texto: #23272F;
  --usuario: #5169D7;        /* burbuja de la persona */
  --usuario-texto: #FFFFFF;
  --borde: rgba(35, 39, 47, 0.14);
  --radio: 16px;
  --fuente: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-titulo: var(--fuente);
  --sombra: 0 20px 60px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  /* Transparente a propósito: el iframe deja ver la página de atrás alrededor
     del botón y de las esquinas redondeadas del chat. */
  background: transparent;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---- botón flotante ---- */
#fab {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-texto);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 150ms ease;
}
#fab:hover { transform: scale(1.06); }
body.abierto #fab { display: none; }

/* ---- caja del chat: ocupa todo el iframe ---- */
#chat {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
#chat[hidden] { display: none; }
/* En celular el iframe ocupa la pantalla entera: sin bordes ni radio. */
body.movil #chat { border-radius: 0; border: 0; box-shadow: none; }

.cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  background: var(--cabecera);
  color: var(--cabecera-texto);
  border-bottom: 1px solid var(--borde);
  flex: none;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex: none;
}
.info { flex: 1; min-width: 0; }
.info b { display: block; font-family: var(--fuente-titulo); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info small { display: block; font-size: 12px; opacity: 0.75; }
.online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; margin-right: 5px; vertical-align: 0; }
#cerrar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  opacity: 0.7;
  flex: none;
}
#cerrar:hover { opacity: 1; background: rgba(127, 127, 127, 0.18); }

/* ---- mensajes ---- */
#msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
  overscroll-behavior: contain;
}
.msg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 14px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  animation: pop 180ms ease;
}
.msg.bot { align-self: flex-start; background: var(--bot); color: var(--bot-texto); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.msg.user { align-self: flex-end; background: var(--usuario); color: var(--usuario-texto); border-bottom-right-radius: 4px; font-weight: 500; }
.msg.error { align-self: flex-start; background: transparent; color: var(--texto-2); border: 1px dashed var(--borde); font-size: 13px; }

.typing { display: inline-flex; gap: 4px; padding: 12px 16px; background: var(--bot); border: 1px solid var(--borde); border-radius: 14px; border-bottom-left-radius: 4px; align-self: flex-start; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-2); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; }
.typing i:nth-child(3) { animation-delay: 0.4s; }

/* Ticket: resumen de un pedido con total, lo dibuja el cierre de un flujo. */
.ticket { align-self: flex-start; max-width: 92%; background: var(--fondo); border: 2px dashed var(--acento); border-radius: 14px; padding: 12px 16px; font-size: 14px; animation: pop 180ms ease; }
.ticket h4 { font-family: var(--fuente-titulo); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.ticket .fila { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; color: var(--texto-2); }
.ticket .fila span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ticket .total { border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 8px; font-weight: 700; color: var(--texto); font-size: 15px; }

/* ---- botones rápidos ---- */
.quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; background: var(--fondo); flex: none; }
/* Muchas opciones (las 19 líneas de una categoría, 12 talles): scroll en vez
   de comerle el alto a la conversación. */
.quick { max-height: 148px; overflow-y: auto; overscroll-behavior: contain; }
.quick:empty { display: none; }
.quick button {
  border: 1px solid var(--acento);
  color: var(--acento);
  background: transparent;
  border-radius: 18px;
  padding: 6px 13px;
  font-size: 13px;
  transition: background 120ms ease, color 120ms ease;
}
.quick button:hover { background: var(--acento); color: var(--acento-texto); }

/* ---- entrada ---- */
.entrada { display: flex; border-top: 1px solid var(--borde); background: var(--superficie); flex: none; }
.entrada input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 16px; outline: none; }
.entrada input::placeholder { color: var(--texto-2); }
.entrada input:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--acento); }
.entrada button { color: var(--acento); font-size: 20px; padding: 0 18px; }
.entrada button:hover { opacity: 0.8; }

@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .msg, .ticket { animation: none; }
  #fab { transition: none; }
}