/* PR63 — Maskot Burung Hantu (chatbot "Asisten Pedagogi") yang hidup.
   Lapisan gambar: sayap (di belakang) → badan → bola mata → kelopak.
   Posisi tiap lapisan dalam persen dari kanvas badan (1330×1610 px asli),
   jadi ukuran maskot cukup diatur lewat --owl-w. Gerak mata/lean/kedip diatur
   oleh public/js/owl-mascot.js; ayun sayap, napas, lompat memakai CSS keyframes. */
:root{ --owl-w:124px; --owl-h:calc(var(--owl-w) * 1.2105); }
@media (max-width:768px){ :root{ --owl-w:92px } }
body[data-owl-size="s"]{ --owl-w:98px }
body[data-owl-size="l"]{ --owl-w:158px }
@media (max-width:768px){
  body[data-owl-size="s"]{ --owl-w:74px }
  body[data-owl-size="l"]{ --owl-w:116px }
}

/* ── Tombol pembungkus: transparan, hanya wadah maskot ── */
.ai-assistant-fab.owl-mascot{
  /* AKAR MASALAH "chatbot tersembunyi": ui-refresh-v5.css memasang position:relative pada
     .ai-assistant-fab sehingga tombol jatuh ke dasar dokumen (di luar layar). Dikunci kembali ke fixed. */
  position:fixed !important; right:18px; bottom:52px; left:auto; top:auto; /* di atas chip "Online" (bottom:14px) */
  width:var(--owl-w) !important; height:var(--owl-h) !important;
  min-width:0; min-height:0 !important; margin:0; visibility:visible !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important;
  overflow:visible !important; animation:none !important;
  cursor:grab; -webkit-tap-highlight-color:transparent;
  transition:none !important; z-index:999;
}
.ai-assistant-fab.owl-mascot::before{ display:none !important }
.ai-assistant-fab.owl-mascot:hover,
.ai-assistant-fab.owl-mascot:active{ transform:none !important; box-shadow:none !important }
.ai-assistant-fab.owl-mascot:focus-visible{ outline:3px solid var(--primary,#0EA5E9); outline-offset:4px; border-radius:18px !important }
@media (min-width:769px){
  body .ai-chat-panel{ bottom:calc(var(--owl-h) + 66px) !important }
  /* Notifikasi (toast) bergeser ke kiri maskot supaya tidak menutupinya */
  body .toast-container{ right:calc(var(--owl-w) + 40px) }
}
@media (max-width:768px){ .ai-assistant-fab.owl-mascot{ right:8px; bottom:calc(48px + env(safe-area-inset-bottom)) !important } }

.owl-mascot .owl-lean,.owl-mascot .owl-hop,.owl-mascot .owl-bob{ position:absolute; inset:0; display:block; pointer-events:none }
.owl-mascot .owl-lean{ transform-origin:50% 96%; will-change:transform }
.owl-mascot .owl-hop{ transform-origin:50% 100% }
.owl-mascot .owl-bob{ transform-origin:50% 100%; animation:owlNapas 3.4s ease-in-out infinite;
  filter:drop-shadow(0 7px 8px rgba(12,28,60,.28)) }
.owl-mascot img{ position:absolute; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none }
.owl-mascot .owl-body{ left:0; top:0; width:100%; height:100%; z-index:2 }
.owl-mascot .owl-wing-wrap{ position:absolute; z-index:1; left:77.143%; top:40.870%; width:22.481%; height:32.981%;
  transform-origin:14.7% 80.4%; animation:owlSayapDiam 2.9s ease-in-out infinite }
.owl-mascot .owl-wing-wrap img{ left:0; top:0; width:100%; height:100% }
.owl-mascot .owl-pupil{ position:absolute; z-index:3; top:33.789%; height:9.938%; will-change:transform }
.owl-mascot .owl-pupil img{ left:0; top:0; width:100%; height:100% }
.owl-mascot .owl-pupil-l{ left:24.286%; width:12.707% }
.owl-mascot .owl-pupil-r{ left:53.910%; width:12.632% }
.owl-mascot .owl-lid{ left:16.767%; top:29.565%; width:57.293%; height:19.193%; z-index:4;
  clip-path:inset(0 0 100% 0) }
.owl-mascot .owl-shadow{ position:absolute; left:14%; right:14%; bottom:-4%; height:7%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(10,20,45,.34), rgba(10,20,45,0) 70%);
  pointer-events:none; transition:transform .25s ease, opacity .25s ease }

/* ── Gerak bawaan (CSS, ringan) ── */
@keyframes owlNapas{ 0%,100%{ transform:translateY(0) scale(1,1) } 50%{ transform:translateY(-2.5%) scale(1.012,1.018) } }
@keyframes owlSayapDiam{ 0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(-4deg) } }
@keyframes owlSayapLambai{
  0%{ transform:rotate(0deg) } 12%{ transform:rotate(-16deg) } 28%{ transform:rotate(9deg) } 44%{ transform:rotate(-17deg) }
  60%{ transform:rotate(8deg) } 76%{ transform:rotate(-12deg) } 100%{ transform:rotate(0deg) } }
@keyframes owlSayapPanik{ 0%,100%{ transform:rotate(-14deg) } 50%{ transform:rotate(12deg) } }
.owl-mascot.owl-lambai .owl-wing-wrap{ animation:owlSayapLambai 1.35s ease-in-out 1 }
.owl-mascot.owl-panik .owl-wing-wrap{ animation:owlSayapPanik .16s linear infinite }
@keyframes owlLompat{
  0%{ transform:translateY(0) scale(1.06,.9) } 22%{ transform:translateY(-15%) scale(.94,1.08) }
  50%{ transform:translateY(0) scale(1.07,.9) } 70%{ transform:translateY(-4%) scale(.99,1.02) } 100%{ transform:translateY(0) scale(1,1) } }
.owl-mascot.owl-lompat .owl-hop{ animation:owlLompat .62s cubic-bezier(.3,.7,.4,1) 1 }
.owl-mascot.owl-lompat .owl-shadow{ transform:scale(.8); opacity:.6 }
@keyframes owlMuncul{
  0%{ transform:translateY(60%) scale(.5) rotate(-8deg); opacity:0 }
  55%{ transform:translateY(-8%) scale(1.1,.94) rotate(3deg); opacity:1 }
  78%{ transform:translateY(0) scale(.97,1.04) } 100%{ transform:translateY(0) scale(1) rotate(0); opacity:1 } }
.owl-mascot.owl-muncul .owl-hop{ animation:owlMuncul .9s cubic-bezier(.3,.8,.35,1) 1 }
@keyframes owlBicara{ 0%,100%{ transform:scale(1,1) } 50%{ transform:scale(1.025,.975) } }
.owl-mascot.owl-bicara .owl-hop{ animation:owlBicara .34s ease-in-out infinite }
@keyframes owlBerpikir{ 0%,100%{ transform:translateY(0) rotate(-1.5deg) } 50%{ transform:translateY(-3%) rotate(1.5deg) } }
.owl-mascot.owl-berpikir .owl-bob{ animation:owlBerpikir 1.1s ease-in-out infinite }
.owl-mascot.owl-tidur .owl-bob{ animation-duration:6s }
.owl-mascot.owl-tekan .owl-hop{ transform:scale(1.07,.9) }
.owl-mascot.owl-seret .owl-bob{ animation:none }

/* ── Zzz saat tertidur ── */
.owl-zzz{ position:absolute; left:58%; top:6%; width:0; height:0; pointer-events:none; display:none }
.owl-mascot.owl-tidur .owl-zzz{ display:block }
.owl-zzz span{ position:absolute; left:0; top:0; font:800 calc(var(--owl-w) * .15)/1 'Nunito','Segoe UI',system-ui,sans-serif;
  color:var(--primary,#0EA5E9); opacity:0; animation:owlZ 3.2s ease-in infinite; text-shadow:0 1px 0 #fff }
.owl-zzz span:nth-child(2){ animation-delay:1.05s } .owl-zzz span:nth-child(3){ animation-delay:2.1s }
@keyframes owlZ{ 0%{ transform:translate(0,0) scale(.5); opacity:0 } 15%{ opacity:1 }
  100%{ transform:translate(calc(var(--owl-w) * .26),calc(var(--owl-w) * -.34)) scale(1.25); opacity:0 } }

/* ── Notif dot: pindah ke bahu maskot ── */
.ai-assistant-fab.owl-mascot .notif-dot{ top:4%; right:6%; z-index:6; width:13px; height:13px }

/* ── Gelembung ucapan ── */
.owl-bubble{ position:absolute; z-index:7; bottom:calc(100% - 6px); right:6%; width:max-content; max-width:min(250px, 70vw);
  padding:10px 13px; border-radius:16px 16px 4px 16px; text-align:left; cursor:pointer;
  background:#fff; color:#1E293B; border:1.5px solid rgba(14,165,233,.35);
  font:600 12.5px/1.45 'Nunito','Segoe UI',system-ui,sans-serif; letter-spacing:0;
  box-shadow:0 8px 24px rgba(15,35,70,.22);
  opacity:0; transform:translateY(8px) scale(.9); transform-origin:90% 100%; pointer-events:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.3,1.4,.5,1) }
.owl-bubble.tampil{ opacity:1; transform:none; pointer-events:auto }
.owl-bubble.kiri{ right:auto; left:6%; border-radius:16px 16px 16px 4px; transform-origin:10% 100% }
.owl-bubble.bawah{ bottom:auto; top:calc(100% - 4px); border-radius:4px 16px 16px 16px }
.owl-bubble b{ color:#0369A1 }
[data-theme="dark"] .owl-bubble b{ color:#7DD3FC }
[data-theme="dark"] .owl-bubble{ background:#1E293B; color:#F1F5F9; border-color:rgba(56,189,248,.45) }

@media (prefers-reduced-motion: reduce){
  .owl-mascot .owl-bob,.owl-mascot .owl-wing-wrap,.owl-mascot .owl-hop,.owl-zzz span{ animation:none !important }
}
body.owl-diam .owl-mascot .owl-bob,
body.owl-diam .owl-mascot .owl-wing-wrap{ animation:none !important }
@media print{ .ai-assistant-fab.owl-mascot{ display:none !important } }

/* ── Mobile: toast di atas maskot (bukan menimpa), gelembung ringkas ── */
@media (max-width:768px){
  body .toast-container{ bottom:calc(var(--owl-h) + 62px + env(safe-area-inset-bottom)) !important; right:10px !important; left:10px !important; max-width:none }
  .owl-bubble{ max-width:min(210px, calc(100vw - 24px)); font-size:12px; padding:8px 10px }
}