/* ============================================================
   Chatbot Masajemalaga — estilos
   Paleta heredada de la web: teal #163A36, gold #A9873F,
   crema #F8F1DF. Fuentes Jost / Cormorant Garamond.
   ============================================================ */

.mmbot-launcher{
  position:fixed;
  right:22px;
  bottom:80px;
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  background:#163A36;
  color:#F8F1DF;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.4);
  z-index:40;
  transition:transform .2s ease, opacity .25s ease;
}
.mmbot-launcher:hover{transform:scale(1.08);}
.mmbot-launcher svg{width:28px; height:28px;}
/* Sobre fondos oscuros (vídeo de cabecera, pie...) se invierte:
   círculo blanco y logo verde, para que siga destacando. */
.mmbot-launcher.is-on-dark{
  background:#FFFFFF;
  color:#163A36;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.5);
}
.mmbot-launcher.is-hidden{opacity:0; pointer-events:none; transform:scale(.8);}
/* El chatbot vive siempre en el mismo sitio: justo encima del botón de
   WhatsApp. El selector de idiomas va por encima de él y se despliega
   hacia arriba, así que aparezca o desaparezca no afecta a nadie. */
.mmbot-launcher{transition:transform .2s ease, opacity .25s ease, bottom .3s ease;}

/* burbujita de aviso "¿Te ayudo?" */
.mmbot-nudge{
  position:fixed;
  right:88px;
  bottom:92px;
  max-width:210px;
  background:#F8F1DF;
  color:#1E2420;
  font-family:'Jost', system-ui, sans-serif;
  font-size:13.5px;
  line-height:1.4;
  padding:10px 14px;
  border-radius:14px 14px 2px 14px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.35);
  z-index:39;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.mmbot-nudge.is-visible{opacity:1; transform:translateY(0);}

.mmbot-panel{
  position:fixed;
  right:22px;
  bottom:10px;
  width:370px;
  max-width:calc(100vw - 44px);
  height:min(600px, calc(100vh - 44px));
  background:#FFFDF8;
  border-radius:18px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:41;
  opacity:0;
  transform:translateY(14px) scale(.98);
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
  font-family:'Jost', system-ui, sans-serif;
}
.mmbot-panel.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}

.mmbot-head{
  background:#163A36;
  color:#F8F1DF;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.mmbot-head-avatar{
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(248,241,223,.14);
  background-image:url('/logo-chatbot.webp');
  background-size:80% auto;
  background-position:center;
  background-repeat:no-repeat;
  flex-shrink:0;
}
.mmbot-head-txt{flex:1; min-width:0;}
.mmbot-head-name{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:19px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.1;
}
.mmbot-head-status{
  font-size:11.5px;
  color:rgba(248,241,223,.7);
  display:flex; align-items:center; gap:6px;
  margin-top:2px;
}
.mmbot-dot{width:7px; height:7px; border-radius:50%; background:#5FD08A; flex-shrink:0;}
.mmbot-close{
  width:30px; height:30px;
  flex-shrink:0;
  background:#E5484D;
  border:none;
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  box-shadow:0 2px 6px -1px rgba(0,0,0,.35);
  transition:background .18s ease, transform .18s ease;
}
.mmbot-close:hover{background:#c93b40; transform:scale(1.08);}
.mmbot-close svg{width:16px; height:16px;}

.mmbot-log{
  flex:1;
  overflow-y:auto;
  padding:18px 16px 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.mmbot-msg{
  max-width:84%;
  padding:10px 14px;
  font-size:14.5px;
  line-height:1.5;
  border-radius:16px;
  white-space:pre-wrap;
  word-wrap:break-word;
  animation:mmbotIn .25s ease both;
}
@keyframes mmbotIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
.mmbot-msg.bot{
  align-self:flex-start;
  background:#EFE8D8;
  color:#1E2420;
  border-bottom-left-radius:4px;
}
.mmbot-msg.user{
  align-self:flex-end;
  background:#163A36;
  color:#F8F1DF;
  border-bottom-right-radius:4px;
}
.mmbot-msg strong{font-weight:600;}

/* indicador de "escribiendo" */
.mmbot-typing{
  align-self:flex-start;
  background:#EFE8D8;
  border-radius:16px 16px 16px 4px;
  padding:13px 16px;
  display:flex; gap:4px;
}
.mmbot-typing span{
  width:6px; height:6px; border-radius:50%;
  background:#8a8a86;
  animation:mmbotBlink 1.3s infinite ease-in-out;
}
.mmbot-typing span:nth-child(2){animation-delay:.18s;}
.mmbot-typing span:nth-child(3){animation-delay:.36s;}
@keyframes mmbotBlink{
  0%,60%,100%{opacity:.3; transform:translateY(0);}
  30%{opacity:1; transform:translateY(-3px);}
}

.mmbot-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:4px 16px 14px;
  flex-shrink:0;
}
.mmbot-chip{
  background:#FFFDF8;
  border:1px solid #A9873F;
  color:#8a6d31;
  font-family:'Jost', system-ui, sans-serif;
  font-size:13px;
  font-weight:500;
  padding:8px 14px;
  border-radius:100px;
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
  line-height:1.3;
}
.mmbot-chip:hover{background:#A9873F; color:#fff;}
.mmbot-chip.primary{background:#163A36; border-color:#163A36; color:#F8F1DF;}
.mmbot-chip.primary:hover{background:#0f2a27;}
.mmbot-chip.wa{background:#25D366; border-color:#25D366; color:#fff;}
.mmbot-chip.wa:hover{background:#1eb457;}

.mmbot-form{
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid #E4DCC9;
  background:#FFFDF8;
  flex-shrink:0;
}
.mmbot-input{
  flex:1;
  border:1px solid #E4DCC9;
  border-radius:100px;
  padding:10px 16px;
  font-family:'Jost', system-ui, sans-serif;
  font-size:14px;
  color:#1E2420;
  background:#fff;
  outline:none;
  min-width:0;
}
.mmbot-input:focus{border-color:#A9873F;}
.mmbot-send{
  width:40px; height:40px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background:#163A36;
  color:#F8F1DF;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mmbot-send:hover{background:#0f2a27;}
.mmbot-send svg{width:17px; height:17px;}

.mmbot-foot{
  font-size:10.5px;
  color:#9a9a95;
  text-align:center;
  padding:0 12px 9px;
  background:#FFFDF8;
  flex-shrink:0;
}

@media (max-width:640px){
  /* La distancia al borde la fija cada página con `--mmbot-bottom`: las
     homepages bajan la pila de botones flotantes, las landings mantienen su
     valor de siempre (74px). `--alert-h` sube todo cuando aparece el aviso. */
  .mmbot-launcher{right:22px; left:auto; bottom:calc(var(--mmbot-bottom, 82px) + var(--alert-h, 0px)); width:50px; height:50px;}
  .mmbot-launcher svg{width:25px; height:25px;}
  .mmbot-nudge{right:80px; left:auto; bottom:calc(88px + var(--alert-h, 0px)); max-width:170px; font-size:12.5px;}
  .mmbot-panel{
    left:0; right:0; bottom:0;
    width:100%;
    max-width:100%;
    height:88vh;
    height:88dvh;
    border-radius:18px 18px 0 0;
  }
  .mmbot-msg{max-width:88%;}
}

@media (prefers-reduced-motion:reduce){
  .mmbot-panel, .mmbot-msg, .mmbot-nudge, .mmbot-launcher{transition:none; animation:none;}
  .mmbot-typing span{animation:none;}
}

/* ---------- Aparición retardada de los botones flotantes ----------
   Los tres (WhatsApp, idiomas y chatbot) no se muestran nada más
   entrar: esperan a que la primera pregunta frecuente llegue a media
   pantalla. A partir de ahí cada uno sigue sus propias reglas de
   siempre. La clase la pone y la quita chatbot.js. */
html.mm-floats-hidden .whatsapp-float,
html.mm-floats-hidden .whatsapp-float-big,
html.mm-floats-hidden .lang-switcher,
html.mm-floats-hidden .mmbot-launcher,
html.mm-floats-hidden .mmbot-nudge{
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
}
.whatsapp-float, .whatsapp-float-big, .lang-switcher, .mmbot-launcher{
  transition:opacity .35s ease, visibility .35s ease, transform .2s ease, bottom .3s ease;
}

/* ---------- Menú de email (enviar / copiar) ----------
   Al pinchar en cualquier enlace mailto:hola@masajemalaga.es se abre este
   menú flotante con dos opciones, en vez de intentar abrir el cliente de
   correo directamente (que en muchos dispositivos sin cliente configurado
   no hacía nada visible). */
.mm-email-menu{
  position:fixed;
  z-index:10000;
  background:#fff;
  color:#10201c;
  border-radius:14px;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.4);
  padding:6px;
  min-width:200px;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
}
.mm-email-menu.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mm-email-menu button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:11px 12px;
  border:none;
  background:none;
  border-radius:9px;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.mm-email-menu button:hover{ background:rgba(0,0,0,.06); }
.mm-email-menu button svg{ width:16px; height:16px; flex:0 0 auto; }
.mm-email-menu button.is-done{ color:#2E7D32; }

/* iPhone: Safari hace zoom automático al tocar un campo de texto con letra
   de menos de 16px (chat, cuenta, bono regalo, formularios de propuesta).
   En pantallas táctiles pequeñas forzamos 16px para que no salte el zoom. */
@media (max-width:820px) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{ font-size:16px !important; }
}