/* SoftwaresPlanet AI chatbot movable character icon
   Add this file AFTER /assets/sp-chatbot.css so it overrides the old ? / circle button. */

.sp-chatbot-toggle{
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  min-height:62px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  right:18px !important;
  bottom:88px !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Hide old ? / chat bubble text/icon inside the button */
.sp-chatbot-toggle > *,
.sp-chatbot-toggle .sp-toggle-icon,
.sp-chatbot-toggle .sp-toggle-text,
.sp-chatbot-toggle i,
.sp-chatbot-toggle span{
  display:none !important;
}

/* Character image */
.sp-chatbot-toggle::before{
  content:"";
  width:68px;
  height:68px;
  display:block;
  background:url('/assets/sp-chatbot-character.png') center center / contain no-repeat;
  filter:drop-shadow(0 14px 20px rgba(15,23,42,.20));
  transform-origin:50% 88%;
  animation:spCharacterMove 5.8s ease-in-out infinite;
  will-change:transform,filter;
}

.sp-chatbot-toggle:hover::before{
  animation-duration:2.8s;
  filter:drop-shadow(0 18px 26px rgba(37,99,235,.24));
}

.sp-chatbot-toggle:active::before{
  transform:scale(.94) !important;
}

/* Soft 5-6 second loop: floating + little wave/attention movement */
@keyframes spCharacterMove{
  0%{transform:translateY(0) rotate(0deg) scale(1);}
  10%{transform:translateY(-5px) rotate(-3deg) scale(1.02);}
  20%{transform:translateY(0) rotate(3deg) scale(1);}
  30%{transform:translateY(-4px) rotate(-2deg) scale(1.02);}
  40%{transform:translateY(0) rotate(2deg) scale(1);}
  55%{transform:translateY(-6px) rotate(0deg) scale(1.03);}
  70%{transform:translateY(0) rotate(1deg) scale(1);}
  85%{transform:translateY(-3px) rotate(-1deg) scale(1.01);}
  100%{transform:translateY(0) rotate(0deg) scale(1);}
}

/* Keep chatbot panel above the character area */
.sp-chatbot-panel{
  bottom:92px !important;
}

@media(max-width:640px){
  .sp-chatbot-toggle{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    right:13px !important;
    bottom:82px !important;
  }
  .sp-chatbot-toggle::before{
    width:60px;
    height:60px;
  }
  .sp-chatbot-panel{
    bottom:78px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .sp-chatbot-toggle::before{
    animation:none !important;
  }
}