/* ══════════════════════════════════════════
   hatbot.css — Sombrero flotante → WhatsApp
   Widget siempre visible, bottom-right
══════════════════════════════════════════ */

/* ── Botón flotante ── */
#hatbot-btn{
  position:fixed;
  bottom:clamp(20px,4vw,32px);
  right:clamp(20px,4vw,32px);
  z-index:9000;
  width:68px;height:68px;
  /* Fondo claro — visible en secciones oscuras Y claras */
  background:linear-gradient(145deg,#fff 0%,#f8f0ff 60%,#ffe8f8 100%);
  border-radius:50%;
  border:2.5px solid rgba(var(--ac-rgb),.7);
  box-shadow:
    0 0 0 0 rgba(var(--ac-rgb),.4),
    0 4px 18px rgba(var(--ac-rgb),.25),
    0 8px 32px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  padding:0;
  animation:botHeartbeat 2.4s ease-in-out infinite;
  transition:border-color .25s,box-shadow .25s,transform .2s;
}
#hatbot-btn:hover{
  border-color:rgba(var(--ac-rgb),1);
  box-shadow:
    0 0 0 6px rgba(var(--ac-rgb),.12),
    0 6px 24px rgba(var(--ac-rgb),.45),
    0 10px 40px rgba(0,0,0,.2);
  transform:scale(1.06);
}
#hatbot-btn img{
  width:44px;height:44px;object-fit:contain;
  filter:
    drop-shadow(0 0 10px rgba(var(--ac-rgb),.8))
    drop-shadow(0 0 24px rgba(var(--ac-rgb),.4));
  transition:transform .25s var(--ease),filter .25s;
}
#hatbot-btn:hover img{
  transform:translateY(-4px) scale(1.1);
  filter:
    drop-shadow(0 0 16px rgba(var(--ac-rgb),.95))
    drop-shadow(0 0 36px rgba(var(--ac-rgb),.6));
}

/* Heartbeat — pulso doble como corazón */
@keyframes botHeartbeat{
  0%   {box-shadow:0 0 0  0   rgba(var(--ac-rgb),.4), 0 4px 18px rgba(var(--ac-rgb),.2), 0 8px 32px rgba(0,0,0,.15)}
  14%  {box-shadow:0 0 0 10px rgba(var(--ac-rgb),.18),0 4px 18px rgba(var(--ac-rgb),.25),0 8px 32px rgba(0,0,0,.15)}
  28%  {box-shadow:0 0 0  5px rgba(var(--ac-rgb),.28),0 4px 18px rgba(var(--ac-rgb),.22),0 8px 32px rgba(0,0,0,.15)}
  42%  {box-shadow:0 0 0 16px rgba(var(--ac-rgb),.1), 0 4px 18px rgba(var(--ac-rgb),.3), 0 8px 32px rgba(0,0,0,.15)}
  70%  {box-shadow:0 0 0  0   rgba(var(--ac-rgb),0),  0 4px 18px rgba(var(--ac-rgb),.2), 0 8px 32px rgba(0,0,0,.15)}
  100% {box-shadow:0 0 0  0   rgba(var(--ac-rgb),.4), 0 4px 18px rgba(var(--ac-rgb),.2), 0 8px 32px rgba(0,0,0,.15)}
}

/* Tooltip de bienvenida (aparece 3s después de cargar) */
#hatbot-tip{
  position:fixed;
  bottom:clamp(20px,4vw,32px);
  right:clamp(96px,14vw,116px);
  z-index:8999;
  background:var(--dark);
  border:1px solid rgba(var(--ac-rgb),.35);
  border-radius:12px 12px 4px 12px;
  padding:10px 14px;
  font-family:var(--body);font-size:13px;font-weight:600;
  color:#fff;
  white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 16px rgba(var(--ac-rgb),.15);
  opacity:0;transform:translateX(8px) scale(.95);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
  pointer-events:none;
}
#hatbot-tip.show{opacity:1;transform:translateX(0) scale(1)}
#hatbot-tip::after{
  content:"";position:absolute;right:-6px;bottom:14px;
  width:0;height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:6px solid rgba(var(--ac-rgb),.35);
}

/* ── Chat popup ── */
#hatbot-chat{
  position:fixed;
  bottom:clamp(96px,14vw,110px);
  right:clamp(20px,4vw,32px);
  z-index:9001;
  width:clamp(300px,88vw,360px);
  background:var(--dark);
  border:1px solid rgba(var(--ac-rgb),.3);
  border-radius:20px 20px 4px 20px;
  box-shadow:0 8px 40px rgba(0,0,0,.45),0 0 30px rgba(var(--ac-rgb),.12);
  overflow:hidden;
  transform:scale(.88) translateY(12px);
  transform-origin:bottom right;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
#hatbot-chat.open{
  opacity:1;pointer-events:auto;
  transform:scale(1) translateY(0);
}

/* Header del chat */
.hbc-header{
  background:linear-gradient(135deg,var(--dark2),#1a0a20);
  border-bottom:1px solid rgba(var(--ac-rgb),.18);
  padding:14px 16px;
  display:flex;align-items:center;gap:12px;
}
.hbc-avatar{
  width:36px;height:36px;border-radius:50%;
  background:rgba(var(--ac-rgb),.12);
  border:1.5px solid rgba(var(--ac-rgb),.45);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.hbc-avatar img{width:24px;height:24px;object-fit:contain;
  filter:drop-shadow(0 0 4px rgba(var(--ac-rgb),.8))}
.hbc-info{flex:1}
.hbc-name{font-family:var(--display);font-size:14px;color:#fff;line-height:1}
.hbc-status{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px;font-family:var(--mono)}
.hbc-close{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:none;color:rgba(255,255,255,.45);
  font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;flex:none;
}
.hbc-close:hover{background:rgba(255,255,255,.12);color:#fff}

/* Área de mensajes */
.hbc-msgs{
  padding:14px 14px 8px;
  display:flex;flex-direction:column;gap:10px;
  min-height:120px;max-height:220px;overflow-y:auto;
}
.hbc-msgs::-webkit-scrollbar{width:3px}
.hbc-msgs::-webkit-scrollbar-track{background:transparent}
.hbc-msgs::-webkit-scrollbar-thumb{background:rgba(var(--ac-rgb),.3);border-radius:2px}

/* Burbuja del bot */
.hbc-bubble{
  display:flex;align-items:flex-end;gap:8px;
  animation:bubbleIn .3s var(--ease);
}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hbc-bubble.user{flex-direction:row-reverse}
.hbc-msg{
  max-width:82%;padding:9px 13px;
  font-size:13px;line-height:1.5;
  border-radius:14px 14px 14px 4px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.9);
}
.hbc-bubble.user .hbc-msg{
  border-radius:14px 14px 4px 14px;
  background:rgba(var(--ac-rgb),.18);color:#fff;
}

/* Typing indicator */
.hbc-typing .hbc-msg{
  background:rgba(255,255,255,.05);
  padding:12px 16px;
}
.hbc-dots{display:flex;gap:4px;align-items:center;height:14px}
.hbc-dots span{
  width:5px;height:5px;border-radius:50%;
  background:rgba(var(--ac-rgb),.7);
  animation:dotBounce 1.2s ease-in-out infinite;
}
.hbc-dots span:nth-child(2){animation-delay:.2s}
.hbc-dots span:nth-child(3){animation-delay:.4s}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

/* Input area */
.hbc-input-area{
  padding:10px 12px 12px;
  display:flex;gap:8px;align-items:flex-end;
  border-top:1px solid rgba(255,255,255,.07);
}
.hbc-input{
  flex:1;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:9px 12px;
  color:#fff;font-size:13px;font-family:var(--body);
  outline:none;resize:none;
  transition:border-color .2s;
  min-height:38px;max-height:80px;
  line-height:1.4;
}
.hbc-input::placeholder{color:rgba(255,255,255,.3)}
.hbc-input:focus{border-color:rgba(var(--ac-rgb),.6)}
.hbc-send{
  width:38px;height:38px;border-radius:10px;
  background:var(--accent);
  border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex:none;transition:background .2s,transform .15s;
}
.hbc-send:hover{background:var(--accent-m);transform:scale(1.08)}
.hbc-send svg{width:16px;height:16px}

/* CTA WhatsApp final */
.hbc-wa-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:4px 12px 12px;
  padding:12px 16px;border-radius:12px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;font-size:14px;font-weight:700;font-family:var(--body);
  border:none;width:calc(100% - 24px);
  transition:opacity .2s,transform .15s;
  animation:bubbleIn .4s var(--ease);
}
.hbc-wa-btn:hover{opacity:.92;transform:translateY(-1px)}
.hbc-wa-btn svg{width:20px;height:20px;flex:none}

/* ── Mobile ajustes ── */
@media(max-width:400px){
  #hatbot-chat{
    right:12px;
    width:calc(100vw - 24px);
    border-radius:16px 16px 4px 16px;
  }
  #hatbot-btn{width:56px;height:56px;bottom:20px;right:16px}
  #hatbot-btn img{width:36px;height:36px}
  #hatbot-tip{display:none}
}