/* =========================================================
   MASKOT OSIS (juga berfungsi sebagai tombol pembuka chatbot)
   ========================================================= */
.maskot-wrap{
  position:fixed;bottom:12px;z-index:9990;
  width:var(--maskot-size,120px);
  pointer-events:none;
}
.maskot-kiri{left:10px;}
.maskot-kanan{right:10px;}

/* ---------- Tombol maskot ---------- */
.maskot-btn{
  position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;
  cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(130%) scale(.6);transform-origin:50% 100%;
  transition:transform .7s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
.maskot-ready .maskot-btn{opacity:1;transform:none;}
.maskot-ready .maskot-btn:hover{transform:scale(1.07);}
.maskot-btn:focus-visible{outline:3px solid #86efac;outline-offset:4px;border-radius:16px;}

/* saat chatbot terbuka: maskot "masuk" ke bot (mengecil & hilang) */
.chatbot-open .maskot-wrap .maskot-btn{
  opacity:0;transform:translateY(40px) scale(.2);pointer-events:none;
  transition:transform .35s ease, opacity .25s ease;
}
.chatbot-open .maskot-wrap .maskot-bubble{opacity:0;pointer-events:none;}

/* lompat saat ditekan */
.maskot-jump .maskot-btn{animation:maskot-jump .5s ease;}
@keyframes maskot-jump{
  0%{transform:scale(1);}
  25%{transform:scale(1.12,.86);}
  55%{transform:translateY(-22px) scale(.95,1.1);}
  80%{transform:translateY(0) scale(1.05,.95);}
  100%{transform:scale(1);}
}

/* ---------- Lapisan gerak ---------- */
/* 1) mengikuti scroll (diatur lewat JS: --fy dan --fr) */
.maskot-follow{
  transform-origin:50% 100%;
  transform:translateY(var(--fy,0px)) rotate(var(--fr,0deg));
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
/* 2) melayang pelan terus-menerus */
.maskot-body{
  transform-origin:50% 100%;
  animation:maskot-float 3.2s ease-in-out infinite;
}
@keyframes maskot-float{
  0%,100%{transform:translateY(0) rotate(-1.2deg);}
  50%{transform:translateY(-7px) rotate(1.2deg);}
}
/* 3) "bernapas" + melambai saat menyapa */
.maskot-img{
  display:block;width:100%;height:auto;
  transform-origin:50% 92%;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
  animation:maskot-breathe 3.2s ease-in-out infinite;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
}
@keyframes maskot-breathe{
  0%,100%{transform:scale(1,1);}
  50%{transform:scale(1.025,.975);}
}
.maskot-img.maskot-wave{animation:maskot-wave 1.2s ease-in-out;}
@keyframes maskot-wave{
  0%{transform:rotate(0);}
  15%{transform:rotate(-12deg) translateY(-6px);}
  30%{transform:rotate(10deg) translateY(-3px);}
  45%{transform:rotate(-8deg);}
  60%{transform:rotate(6deg);}
  80%{transform:rotate(-3deg);}
  100%{transform:rotate(0);}
}

/* ---------- Lencana chat (tanda bahwa maskot bisa ditekan) ---------- */
.maskot-badge{
  position:absolute;top:4px;right:2px;width:26px;height:26px;border-radius:50%;
  background:#22c55e;color:#fff;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);
  animation:maskot-ping 2.4s ease-out infinite;
}
@keyframes maskot-ping{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55), 0 2px 6px rgba(0,0,0,.25);}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0), 0 2px 6px rgba(0,0,0,.25);}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0), 0 2px 6px rgba(0,0,0,.25);}
}

/* ---------- Gelembung pesan ---------- */
.maskot-bubble{
  position:absolute;bottom:100%;left:0;margin-bottom:14px;
  width:max-content;max-width:min(260px,calc(100vw - 32px));
  background:linear-gradient(145deg,#ffffff 0%,#f0fdf4 100%);
  border:2px solid #86efac;border-radius:18px 18px 18px 6px;
  padding:9px 28px 11px 14px;
  font-size:.86rem;line-height:1.5;color:#1f2937;
  box-shadow:0 10px 26px rgba(22,101,52,.22), 0 2px 0 #bbf7d0;
  opacity:0;transform:translateY(12px) scale(.7);transform-origin:20px 100%;
  transition:opacity .2s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.maskot-kanan .maskot-bubble{left:auto;right:0;border-radius:18px 18px 6px 18px;transform-origin:calc(100% - 20px) 100%;}
.maskot-bubble::after{
  content:"";position:absolute;top:100%;left:22px;
  border:9px solid transparent;border-top-color:#86efac;border-bottom:0;
}
.maskot-kanan .maskot-bubble::after{left:auto;right:22px;}
.maskot-wrap.maskot-talk .maskot-bubble{opacity:1;transform:none;pointer-events:auto;}
.maskot-name{
  display:inline-block;margin-bottom:3px;padding:1px 8px;border-radius:999px;
  background:#16a34a;color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.03em;
}
.maskot-text{display:block;cursor:pointer;font-weight:500;}
.maskot-text.maskot-typing::after{
  content:"";display:inline-block;width:2px;height:1em;margin-left:2px;
  background:#16a34a;vertical-align:-2px;animation:maskot-caret .7s steps(1) infinite;
}
@keyframes maskot-caret{50%{opacity:0;}}
.maskot-x{
  position:absolute;top:5px;right:7px;border:none;background:none;
  font-size:1.05rem;line-height:1;color:#9ca3af;cursor:pointer;padding:2px 4px;
}
.maskot-x:hover{color:#444;}

/* beri ruang di footer supaya teks tidak tertutup maskot */
.maskot-aktif footer{padding-bottom:calc(var(--maskot-size,120px) + 12px);}

@media (max-width:480px){
  .maskot-wrap{width:min(var(--maskot-size,120px),96px);}
  .maskot-bubble{font-size:.8rem;}
  .maskot-aktif footer{padding-bottom:calc(min(var(--maskot-size,120px),96px) + 12px);}
}
@media (prefers-reduced-motion:reduce){
  .maskot-body,.maskot-img,.maskot-badge,.maskot-jump .maskot-btn,.maskot-img.maskot-wave{animation:none;}
  .maskot-follow{transition:none;transform:none;}
  .maskot-btn{transition:opacity .3s ease;transform:none;}
}