:root{
  --chat-panel-fondo:rgba(9,18,34,.94);
  --chat-panel-borde:var(--line, rgba(143,173,221,.18));
  --chat-cabecera-fondo:rgba(19,38,70,.92);
  --chat-cabecera-texto:#eef6ff;
  --chat-cuerpo-fondo:rgba(7,17,31,.86);
  --chat-cuerpo-dialogo:rgba(19,38,70,.9);
  --chat-cuerpo-dialogo-nombre:var(--primary, #17cbff);
  --chat-cuerpo-texto:#e7eefb;
  --chat-cuerpo-hora:var(--text-muted, #9fb1ca);
}

.floating-contact{
  position:fixed;
  right:1.1rem;
  bottom:1.1rem;
  z-index:32;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.6rem;
}

.floating-contact__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.75rem;
  padding:.72rem .95rem;
  border-radius:999px;
  border:1px solid rgba(143,173,221,.12);
  background:rgba(7,17,31,.78);
  color:#eef6ff;
  box-shadow:0 10px 22px rgba(2,10,20,.14);
  font-size:.86rem;
  letter-spacing:.02em;
  backdrop-filter:blur(10px);
}

.floating-contact__link--primary{
  background:rgba(12,22,40,.88);
  border-color:rgba(143,173,221,.16);
}

.has-contact-form .floating-contact{
  display:none;
}

/* ── Burbuja lanzadora ───────────────────────────────────────────────── */
/* Circulo negro de 64px con solo el icono de WhatsApp: sin texto, para que
   no compita con el contenido de la pagina. Las medidas se fijan aqui
   porque .floating-contact__link define un boton alargado con padding. */
.burbuja{
  position:relative;
  width:64px;
  height:64px;
  min-height:0;
  padding:0;
  gap:0;
  flex:none;
  border-radius:50%;
  background:#0b0f14;
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  font-family:inherit;
  box-shadow:0 12px 30px rgba(2,10,20,.38);
  transition:transform .18s ease, box-shadow .18s ease;
}

.burbuja:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(2,10,20,.46);
}

.burbuja:active{
  transform:translateY(0);
}

.burbuja-icono{
  width:32px;
  height:32px;
  flex:none;
}

/* Punto de notificacion. El borde del color del fondo lo recorta contra el
   circulo negro, que es lo que le da el aspecto de badge y no de mancha. */
.burbuja-punto{
  position:absolute;
  top:5px;
  right:5px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ff3b30;
  border:2px solid #0b0f14;
  box-shadow:0 0 0 0 rgba(255,59,48,.5);
  animation:burbujaPuntoPulso 2.4s ease-out infinite;
}

@keyframes burbujaPuntoPulso{
  0%{ box-shadow:0 0 0 0 rgba(255,59,48,.5); }
  70%{ box-shadow:0 0 0 7px rgba(255,59,48,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,59,48,0); }
}

/* ── Panel de chat ───────────────────────────────────────────────────── */
.chat{
  display:none;
  width:min(21rem, calc(100vw - 2.2rem));
  border-radius:var(--radius-sm, 14px);
  border:1px solid var(--chat-panel-borde);
  background:var(--chat-panel-fondo);
  box-shadow:var(--shadow, 0 24px 60px rgba(3,10,24,.18));
  backdrop-filter:blur(14px);
  overflow:hidden;
}

.chat.open{
  display:block;
}

.chat-cabecera{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.85rem .95rem;
  background:var(--chat-cabecera-fondo);
  border-bottom:1px solid var(--chat-panel-borde);
}

.chat-cabecera-avatar{
  width:2.5rem;
  height:2.5rem;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  background:#0b0f14;
  border:1px solid rgba(143,173,221,.18);
}

.chat-cabecera-texto{
  color:var(--chat-cabecera-texto);
  min-width:0;
}

.chat-cabecera-texto-nombre{
  font-size:.95rem;
  font-weight:600;
  line-height:1.25rem;
}

.chat-cabecera-texto-estado{
  font-size:.78rem;
  line-height:1rem;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--chat-cuerpo-hora);
}

.chat-online-dot{
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);
  animation:chatOnlinePulse 2.2s ease-out infinite;
}

@keyframes chatOnlinePulse{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55); }
  70%{ box-shadow:0 0 0 6px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}

/* Fuera de horario: punto ámbar, sin pulso (seguimos leyendo mensajes). */
.chat-online-dot--away{
  background:#fbbf24;
  animation:none;
  box-shadow:none;
}

.chat-cuerpo{
  background:var(--chat-cuerpo-fondo);
}

/* ── Conversación animada (mensajes que van llegando + escribiendo…) ── */
.chat-cuerpo-dentro{
  padding:1rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-height:118px;
  max-height:250px;
  overflow-y:auto;
  /* La rueda no arrastra la pagina al llegar al final del hilo. */
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(143,173,221,.28) transparent;
}

/* WebKit: barra de 6px sin pista ni flechas, con margen para que no roce
   el borde redondeado del panel. */
.chat-cuerpo-dentro::-webkit-scrollbar{
  width:6px;
}

.chat-cuerpo-dentro::-webkit-scrollbar-track{
  background:transparent;
  margin:.5rem 0;
}

.chat-cuerpo-dentro::-webkit-scrollbar-thumb{
  background:rgba(143,173,221,.26);
  border-radius:999px;
}

.chat-cuerpo-dentro::-webkit-scrollbar-thumb:hover{
  background:rgba(143,173,221,.46);
}

.chat-msg{
  background-color:var(--chat-cuerpo-dialogo);
  border:1px solid var(--chat-panel-borde);
  border-radius:.625rem;
  padding:.55rem .8rem;
  max-width:88%;
  position:relative;
  color:var(--chat-cuerpo-texto);
  box-shadow:0 1px 1px rgba(0,0,0,.18);
  animation:chatMsgIn .28s cubic-bezier(.2,.9,.3,1.2);
  transform-origin:bottom left;
}

@keyframes chatMsgIn{
  from{ opacity:0; transform:translateY(8px) scale(.94); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* Colita de globo solo en el primer mensaje del grupo, como WhatsApp. */
.chat-msg--first::before{
  border-left:12px solid transparent;
  border-right:14px solid transparent;
  border-top:14px solid var(--chat-cuerpo-dialogo);
  border-top-left-radius:4px;
  content:'';
  height:0;
  left:-8px;
  top:0;
  position:absolute;
  width:0;
}

.chat-msg-sender{
  color:var(--chat-cuerpo-dialogo-nombre);
  font-weight:600;
  font-size:.8rem;
  margin-bottom:2px;
}

.chat-msg-text{
  margin:0;
  font-size:.875rem;
  line-height:1.3rem;
}

.chat-msg-time{
  color:var(--chat-cuerpo-hora);
  font-size:.72rem;
  text-align:right;
  margin-top:3px;
}

/* Indicador "escribiendo…": tres puntos que laten en cascada. */
.chat-typing{
  display:flex;
  align-items:center;
  gap:4px;
  padding:.75rem .9rem;
}

.chat-typing span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--chat-cuerpo-hora);
  animation:chatTypingDot 1.1s ease-in-out infinite;
}

.chat-typing span:nth-child(2){ animation-delay:.18s; }
.chat-typing span:nth-child(3){ animation-delay:.36s; }

@keyframes chatTypingDot{
  0%,60%,100%{ transform:translateY(0); opacity:.45; }
  30%{ transform:translateY(-4px); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .chat-msg{ animation:none; }
  .chat-typing span{ animation:none; }
  .chat-online-dot{ animation:none; }
  .burbuja-punto{ animation:none; }
  .burbuja{ transition:none; }
}

.chat-pie{
  padding:.75rem .95rem .95rem;
  border-top:1px solid var(--chat-panel-borde);
}

.chat-pie-boton{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:2.6rem;
  border-radius:999px;
  background:#25d366;
  color:#07111f;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.02em;
}

@media (min-width: 1024px){
  .floating-contact{
    right:1.6rem;
    bottom:1.6rem;
  }
}

@media (max-width: 720px){
  .floating-contact{
    right:1rem;
    bottom:1rem;
  }
}