.chatbot-widget{
  position:fixed;
  inset:auto 22px 22px auto;
  width:360px;
  max-width:calc(100vw - 36px);
  z-index:100;
  display:none;
}

.chatbot-widget.open{
  display:block;
}

.chatbot-panel{
  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.24);
  overflow:hidden;
  border:1px solid var(--border);
}

.chatbot-header{
  background:linear-gradient(135deg,var(--navy),var(--teal));
  color:#fff;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.chatbot-header strong{
  display:block;
  font-size:16px;
}

.chatbot-header span{
  display:block;
  font-size:12px;
  opacity:.85;
  margin-top:3px;
}

.chatbot-close{
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.chatbot-messages{
  height:300px;
  overflow:auto;
  padding:16px;
  background:#f8fafc;
}

.bot-message,
.user-message{
  max-width:84%;
  padding:11px 13px;
  border-radius:14px;
  margin-bottom:10px;
  font-size:14px;
  line-height:1.45;
}

.bot-message{
  background:#fff;
  color:var(--dark);
  border:1px solid var(--border);
}

.user-message{
  margin-left:auto;
  background:var(--teal);
  color:#fff;
}

.chatbot-form{
  display:flex;
  gap:8px;
  padding:12px;
  background:#fff;
  border-top:1px solid var(--border);
}

.chatbot-form input{
  flex:1;
  border:1px solid var(--border);
  border-radius:999px;
  padding:12px 14px;
  font-size:14px;
}

.chatbot-form button{
  border:0;
  background:var(--navy);
  color:#fff;
  border-radius:999px;
  padding:0 16px;
  font-weight:800;
  cursor:pointer;
}

/* animated chat CTA button */
.chatbot-open,
.whatsapp-btn.chatbot-open{
  position:relative;
  overflow:hidden;
  animation:chatPulse 2.4s ease-in-out infinite;
}

.chatbot-open::before,
.whatsapp-btn.chatbot-open::before{
  content:"";
  position:absolute;
  top:0;
  left:-85%;
  width:55%;
  height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-18deg);
  animation:chatShine 3.2s ease-in-out infinite;
}

.chatbot-open::after,
.whatsapp-btn.chatbot-open::after{
  content:"💬";
  margin-left:10px;
  display:inline-block;
  animation:chatBounce 1.6s ease-in-out infinite;
}

@keyframes chatPulse{
  0%,100%{
    transform:translateY(0);
    box-shadow:0 12px 26px rgba(13,169,198,.28);
  }
  50%{
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(13,169,198,.42);
  }
}

@keyframes chatShine{
  0%{left:-85%;}
  45%,100%{left:130%;}
}

@keyframes chatBounce{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-2px) scale(1.12);}
}

@media (prefers-reduced-motion: reduce){
  .chatbot-open,
  .whatsapp-btn.chatbot-open,
  .chatbot-open::before,
  .whatsapp-btn.chatbot-open::before,
  .chatbot-open::after,
  .whatsapp-btn.chatbot-open::after{
    animation:none !important;
  }
}