/* Buba · widget conversacional · vanilla CSS scoped (.buba-*)
 *
 * Lenguaje visual:
 *   - Light mode cálido (nude #F7E7CE) con acentos dorado #C9A76C y
 *     rosa empolvado #E8B4B8.
 *   - Tipografía: Cormorant Garamond (display, italic) para "voz" del
 *     bot, Inter para UI cromada e input usuario.
 *   - Microinteracciones suaves (Apple/Linear curve).
 *
 * Adaptado del widget Kari (Enekui dark) — mantenida estructura,
 * cambiada paleta + fuentes para el contexto salón de belleza.
 */

.buba-launcher,
.buba-launcher *,
.buba-panel,
.buba-panel * { box-sizing: border-box; }

/* ─── Launcher button ─────────────────────────────────────────────────── */

.buba-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #F7E7CE;
  border: 1.5px solid rgba(201, 167, 108, 0.45);
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(201, 167, 108, 0.28), 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 0;
  overflow: hidden;
}

.buba-launcher:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 44px rgba(201, 167, 108, 0.4), 0 4px 12px rgba(0, 0, 0, 0.12);
}

.buba-launcher:focus-visible {
  outline: 2px solid #C9A76C;
  outline-offset: 4px;
}

.buba-launcher[aria-expanded="true"] { display: none; }

.buba-launcher-glyph {
  display: block;
  width: 30px;
  height: 30px;
  pointer-events: none;
}

@keyframes buba-pulse-once {
  0%   { box-shadow: 0 0 0 0 rgba(232, 180, 184, 0.55), 0 8px 32px rgba(201, 167, 108, 0.28), 0 2px 6px rgba(0, 0, 0, 0.08); }
  70%  { box-shadow: 0 0 0 16px rgba(232, 180, 184, 0), 0 8px 32px rgba(201, 167, 108, 0.28), 0 2px 6px rgba(0, 0, 0, 0.08); }
  100% { box-shadow: 0 0 0 0 rgba(232, 180, 184, 0), 0 8px 32px rgba(201, 167, 108, 0.28), 0 2px 6px rgba(0, 0, 0, 0.08); }
}

.buba-launcher[data-attention="true"] {
  animation: buba-pulse-once 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) 2;
}

/* Presentación al entrar: 3 saltos + halo, para que se lea como "chat" y no
   como un botón decorativo. Es finita a propósito (3 repeticiones), nunca un
   bucle: un elemento que rebota sin parar cansa a los dos segundos. */
@keyframes buba-bounce {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-14px) scale(1.06); }
  45%  { transform: translateY(0) scale(0.98); }
  60%  { transform: translateY(-7px) scale(1.03); }
  78%  { transform: translateY(0) scale(0.99); }
  90%  { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

.buba-launcher[data-bounce="true"] {
  animation: buba-bounce 560ms cubic-bezier(0.28, 0.84, 0.42, 1) 3,
             buba-pulse-once 1.68s cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}

/* ─── Panel ───────────────────────────────────────────────────────────── */

.buba-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 48px);
  /* En iOS, 100vh mide la ventana SIN el teclado, así que al abrirse empuja la
     caja de escribir por debajo de él: escribes a ciegas. 100dvh sí sigue al
     teclado. Se dejan las dos líneas a propósito — quien no entienda dvh usa la
     de arriba y quien la entienda la pisa con esta. */
  max-height: calc(100dvh - 48px);
  background: #FBF6EC;
  border: 1px solid rgba(201, 167, 108, 0.20);
  border-radius: 16px;
  box-shadow: 0 28px 72px rgba(74, 45, 30, 0.20), 0 6px 18px rgba(74, 45, 30, 0.08);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.buba-panel[data-open="true"] {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─── Header ─────────────────────────────────────────────────────────── */

.buba-header {
  padding: 16px 18px;
  background: linear-gradient(180deg, #F7E7CE 0%, #FBF6EC 100%);
  border-bottom: 1px solid rgba(201, 167, 108, 0.18);
  display: flex;
  align-items: center;
  gap: 12px;
}

.buba-header-glyph {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FBF6EC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(201, 167, 108, 0.45);
  overflow: hidden;
}

.buba-header-glyph svg {
  width: 32px;
  height: 32px;
  display: block;
}

.buba-header-title {
  flex: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: #4A2D1E;
  letter-spacing: 0.005em;
  line-height: 1.1;
  font-style: italic;
}

.buba-header-sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(74, 45, 30, 0.55);
  letter-spacing: 0.08em;
  margin-top: 4px;
  text-transform: uppercase;
}

.buba-booksy-cta {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FBF6EC;
  background: #C9A76C;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 180ms, transform 120ms;
}

.buba-booksy-cta:hover {
  background: #B79155;
  transform: translateY(-1px);
}

.buba-booksy-cta:focus-visible {
  outline: 2px solid #4A2D1E;
  outline-offset: 2px;
}

.buba-close {
  background: transparent;
  border: none;
  color: rgba(74, 45, 30, 0.55);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: color 180ms, background 180ms;
}

.buba-close:hover {
  color: #4A2D1E;
  background: rgba(201, 167, 108, 0.15);
}

.buba-close:focus-visible {
  outline: 2px solid #C9A76C;
  outline-offset: 2px;
}

/* ─── Messages ───────────────────────────────────────────────────────── */

.buba-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 167, 108, 0.30) transparent;
  background: #FBF6EC;
}

.buba-messages::-webkit-scrollbar { width: 6px; }
.buba-messages::-webkit-scrollbar-thumb {
  background: rgba(201, 167, 108, 0.30);
  border-radius: 3px;
}

@keyframes buba-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.buba-msg {
  max-width: 88%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: buba-msg-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.buba-msg-bot {
  align-self: flex-start;
  background: #F7E7CE;
  color: #4A2D1E;
  border: 1px solid rgba(201, 167, 108, 0.25);
  border-bottom-left-radius: 4px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.buba-msg-bot strong {
  font-weight: 600;
  color: #2E1810;
}

.buba-msg-bot a {
  color: #B79155;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.buba-msg-bot ul {
  margin: 6px 0 4px 0;
  padding-left: 18px;
}

.buba-msg-bot li { margin-bottom: 3px; }

.buba-msg-user {
  align-self: flex-end;
  background: #E8B4B8;
  color: #2E1810;
  border: 1px solid rgba(232, 180, 184, 0.6);
  border-bottom-right-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

/* ─── Quick-start chips ──────────────────────────────────────────────── */

.buba-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  align-self: flex-start;
  max-width: 100%;
  animation: buba-msg-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms both;
}

.buba-chip {
  background: #FBF6EC;
  border: 1px solid rgba(201, 167, 108, 0.45);
  color: #4A2D1E;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background 180ms, border-color 180ms, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
}

.buba-chip:hover {
  background: #F7E7CE;
  border-color: #C9A76C;
  transform: translateY(-1px);
}

.buba-chip:focus-visible {
  outline: 2px solid #C9A76C;
  outline-offset: 2px;
}

/* ─── Typing indicator ────────────────────────────────────────────────── */

.buba-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 14px 16px;
  background: #F7E7CE;
  border: 1px solid rgba(201, 167, 108, 0.25);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  animation: buba-msg-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes buba-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.buba-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C9A76C;
  display: block;
  animation: buba-typing-bounce 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.buba-typing span:nth-child(2) { animation-delay: 0.15s; }
.buba-typing span:nth-child(3) { animation-delay: 0.3s; }

/* ─── Input row ──────────────────────────────────────────────────────── */

.buba-input-row {
  border-top: 1px solid rgba(201, 167, 108, 0.18);
  padding: 12px 14px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: #FBF6EC;
  position: relative;
}

.buba-input-row::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C9A76C 50%, transparent);
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.buba-input-row:focus-within::before { opacity: 0.7; }

.buba-input {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid rgba(201, 167, 108, 0.30);
  color: #2E1810;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  transition: border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}

.buba-input::placeholder {
  color: rgba(74, 45, 30, 0.40);
}

.buba-input:hover {
  border-color: rgba(201, 167, 108, 0.55);
}

.buba-input:focus {
  border-color: #C9A76C;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(201, 167, 108, 0.12);
}

.buba-send {
  background: #C9A76C;
  color: #FBF6EC;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  height: 40px;
  flex-shrink: 0;
  transition: background 180ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.buba-send:hover { background: #B79155; }
.buba-send:active { transform: scale(0.97); }

.buba-send:focus-visible {
  outline: 2px solid #4A2D1E;
  outline-offset: 2px;
}

.buba-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */

.buba-footer {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  text-align: center;
  color: rgba(74, 45, 30, 0.45);
  padding: 6px 14px 10px 14px;
  letter-spacing: 0.03em;
  background: #FBF6EC;
}

/* ─── Responsive (mobile) ────────────────────────────────────────────── */

@media (max-width: 480px) {
  .buba-panel {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    border-radius: 12px;
  }
  .buba-launcher {
    right: 16px;
    bottom: 16px;
  }
  /* El panel ocupa casi toda la pantalla: si cerrarlo cuesta, la sensación es
     de estar atrapada. Objetivo táctil de 44 px (mínimo de Apple) y con fondo
     visible, para que se lea como botón y no como un aspa decorativa. */
  .buba-close {
    width: 44px;
    height: 44px;
    font-size: 26px;
    color: #4A2D1E;
    background: rgba(201, 167, 108, 0.16);
    border: 1px solid rgba(201, 167, 108, 0.38);
  }
  .buba-header {
    padding: 12px 12px 12px 14px;
    gap: 8px;
  }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .buba-launcher,
  .buba-panel,
  .buba-msg,
  .buba-typing,
  .buba-typing span,
  .buba-chip,
  .buba-send {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── Globo de saludo sobre el launcher ───────────────────────────────────
   El círculo con la B no dice para qué sirve. El globo lo cuenta en una
   frase, apunta al icono con su pico y se abre al tocarlo. Va por debajo del
   panel (9999) y del banner de cookies (10000): si algo coincide, no manda él. */

.buba-saludo {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 9998;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  max-width: 236px;
  padding: 10px 8px 10px 14px;
  background: #FBF6EC;
  border: 1px solid rgba(201, 167, 108, 0.45);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(74, 45, 30, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.buba-saludo[data-visible="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* el pico, apuntando al centro del launcher */
.buba-saludo::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: #FBF6EC;
  border-right: 1px solid rgba(201, 167, 108, 0.45);
  border-bottom: 1px solid rgba(201, 167, 108, 0.45);
  transform: rotate(45deg);
}

.buba-saludo-texto {
  flex: 1 1 auto;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #4A2D1E;
}

.buba-saludo-cerrar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: rgba(74, 45, 30, 0.45);
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: color 160ms, background 160ms;
}

.buba-saludo-cerrar:hover { color: #4A2D1E; background: rgba(201, 167, 108, 0.16); }
.buba-saludo-texto:focus-visible,
.buba-saludo-cerrar:focus-visible { outline: 2px solid #C9A76C; outline-offset: 3px; }

@media (max-width: 600px) {
  .buba-saludo {
    right: 16px;
    bottom: 88px;
    max-width: calc(100vw - 96px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buba-saludo { transition: none !important; transform: none !important; }
}

/* ─── El zoom de iOS al ponerse a escribir ───────────────────────────────
   Safari en iOS amplía TODA la página al enfocar un campo cuya letra mide
   menos de 16px. Con el chat abierto en un móvil eso lo deja inservible: se
   agranda todo, la X de cerrar se va fuera de la pantalla y hay que pellizcar
   para volver — justo cuando la visitante acaba de decidir escribir.

   No se arregla desde el meta viewport: iOS ignora maximum-scale desde iOS 10,
   y bloquear el zoom sería peor que el problema (hay quien lo necesita para
   leer). Se arregla por donde de verdad manda, que es el tamaño de la letra.

   Solo en punteros gruesos —dedos—, que es donde ocurre: en un ordenador el
   campo se queda con su tamaño de siempre. */
@media (pointer: coarse) {
  .buba-input { font-size: 16px; }
}