/* ================================================================ Maskot status (maskot-anim.js)
   Menggantikan kursor ▍. Satu maskot, lima keadaan: memuat · berpikir · mencari · dalam · menyusun.
   Semua bagian SVG digerakkan dengan transform/opacity saja (murah untuk GPU, tidak memicu tata letak). */
.sc-think { display: flex; align-items: center; gap: 10px; min-height: 56px; color: var(--sc-ink-soft, #52606d);
  font-size: 14px; line-height: 1.35; }
.sc-body + .sc-think, .sc-think + .sc-body { margin-top: 6px; }
.sc-think-center { justify-content: center; align-self: center; margin: 24px 0; }
.sc-msg-bot.sc-waiting { padding: 8px 14px 8px 10px; }
.scm { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffffff 0 55%, #e3edf6 100%);
  box-shadow: inset 0 0 0 1px rgba(31, 53, 88, .12); }
.scm-svg { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); overflow: visible; }
.sc-think-text { min-width: 0; }
.sc-think-phrase { font-weight: 600; color: var(--sc-ink, #1f2933); display: inline-block; }
.sc-think-phrase.is-in { animation: scm-phrase .45s ease-out; }
.sc-think-meta { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sc-think-dots::after { content: "…"; display: inline-block; width: 1.1em; text-align: left;
  animation: scm-dots 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
.sc-think.is-mini { min-height: 30px; font-size: 13px; gap: 8px; }
.sc-think.is-mini .scm { width: 34px; height: 34px; }
.sc-think.is-mini .sc-think-phrase { font-weight: 500; color: var(--sc-ink-soft, #52606d); }

/* bagian SVG: pusat transformasi di kotak bagian itu sendiri */
:where(.scm-svg) :where(g, path, circle) { transform-box: fill-box; transform-origin: center; }
/* grup dengan atribut transform (rotate(a cx cy)) harus memakai titik asal SVG bawaan */
.scm-svg .m-fixed { transform-box: view-box; transform-origin: 0 0; }
.m-ring, .m-orbit, .m-think, .m-air, .m-lens, .m-write, .m-shut { opacity: 0; transition: opacity .3s; }
.m-ring { color: #7fb2d9; transform-box: view-box; transform-origin: 64px 62px; }
.m-orbit { transform-box: view-box; transform-origin: 64px 58px; }
.m-spark { fill: #f5b82e; }
.m-think circle { fill: #fff; stroke: #1f3558; stroke-width: 1.8; }
.m-air circle { fill: #bfe1ff; stroke: #4a86b8; stroke-width: 1.2; }
.m-line { stroke: #9fb4cc; stroke-width: 3.2; stroke-linecap: round; fill: none; stroke-dasharray: 70; stroke-dashoffset: 70; }
.m-tail { transform-origin: right center; }
.m-fin { transform-origin: left top; }
.m-lid { transform-origin: center top; transform: scaleY(0); }
.m-whisker { transform-origin: left center; }

/* dasar (semua keadaan): melayang, ekor mengibas, berkedip, kumis bergoyang */
.sc-think .m-fish { animation: scm-bob 2.6s ease-in-out infinite; }
.sc-think .m-tail { animation: scm-tail 1.1s ease-in-out infinite; }
.sc-think .m-lid { animation: scm-blink 4.2s infinite; }
.sc-think .m-w1 { animation: scm-whisk 2.2s ease-in-out infinite; }
.sc-think .m-w2 { animation: scm-whisk 2.2s ease-in-out -1.1s infinite; }

/* memuat — berenang cepat di dalam cincin gelembung */
.sc-think[data-state="memuat"] .m-ring { opacity: 1; animation: scm-spin 2.4s linear infinite; }
.sc-think[data-state="memuat"] .m-air { opacity: 1; }
.sc-think[data-state="memuat"] .m-air circle { animation: scm-air 1.6s ease-in infinite; }
.sc-think[data-state="memuat"] .m-air circle:nth-child(2) { animation-delay: .5s; }
.sc-think[data-state="memuat"] .m-air circle:nth-child(3) { animation-delay: 1s; }
.sc-think[data-state="memuat"] .m-fish { animation: scm-swim 1.4s ease-in-out infinite; }
.sc-think[data-state="memuat"] .m-tail { animation-duration: .38s; }

/* berpikir — kepala miring, mata melirik ke atas, gelembung pikiran muncul bergiliran */
.sc-think[data-state="berpikir"] .m-fish { animation: scm-tilt 3s ease-in-out infinite; }
.sc-think[data-state="berpikir"] .m-pupil { transform: translate(1.5px, -3px); transition: transform .4s; }
.sc-think[data-state="berpikir"] .m-think { opacity: 1; }
.sc-think[data-state="berpikir"] .m-think circle { animation: scm-pop 1.8s ease-in-out infinite; }
.sc-think[data-state="berpikir"] .m-think circle:nth-child(2) { animation-delay: .25s; }
.sc-think[data-state="berpikir"] .m-think circle:nth-child(3) { animation-delay: .5s; }

/* mencari — kaca pembesar menyapu, mata memindai, sirip mengayuh */
.sc-think[data-state="mencari"] .m-lens { opacity: 1; animation: scm-scan 2s ease-in-out infinite; }
.sc-think[data-state="mencari"] .m-pupil { animation: scm-look 2s ease-in-out infinite; }
.sc-think[data-state="mencari"] .m-fin { animation: scm-paddle .6s ease-in-out infinite; }
.sc-think[data-state="mencari"] .m-tail { animation-duration: .6s; }

/* berpikir dalam — mata terpejam, percikan mengorbit, peci berpendar, napas pelan */
.sc-think[data-state="dalam"] .m-lid { animation: none; transform: scaleY(1); }
.sc-think[data-state="dalam"] .m-shut { opacity: 1; }
.sc-think[data-state="dalam"] .m-orbit { opacity: 1; animation: scm-spin 3.2s linear infinite; }
.sc-think[data-state="dalam"] .m-spark { animation: scm-twinkle 1.6s ease-in-out infinite; }
.sc-think[data-state="dalam"] .m-spark:nth-child(2) { animation-delay: .5s; }
.sc-think[data-state="dalam"] .m-spark:nth-child(3) { animation-delay: 1s; }
.sc-think[data-state="dalam"] .m-cap { animation: scm-glow 2.4s ease-in-out infinite; }
.sc-think[data-state="dalam"] .m-fish { animation: scm-breathe 3.6s ease-in-out infinite; }
.sc-think[data-state="dalam"] .m-tail { animation-duration: 2.2s; }
.sc-think[data-state="dalam"] .scm { background: radial-gradient(circle at 50% 45%, #fffdf3 0 50%, #f6e7b8 100%);
  animation: scm-aura 2.4s ease-in-out infinite; }

/* menyusun — mulut bergerak seperti bicara, pena menulis garis */
.sc-think[data-state="menyusun"] .m-mouth { animation: scm-talk .5s ease-in-out infinite; transform-origin: left center; }
.sc-think[data-state="menyusun"] .m-write { opacity: 1; }
.sc-think[data-state="menyusun"] .m-l1 { animation: scm-draw 2.4s linear infinite; }
.sc-think[data-state="menyusun"] .m-l2 { animation: scm-draw2 2.4s linear infinite; }
.sc-think[data-state="menyusun"] .m-pen { transform-box: view-box; transform-origin: 0 0;
  animation: scm-pen 2.4s linear infinite; }
.sc-think[data-state="menyusun"] .m-pupil { transform: translate(-1px, 2.5px); }

@keyframes scm-phrase { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes scm-dots { from { width: 0; } to { width: 1.1em; } }
@keyframes scm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes scm-swim { 0%, 100% { transform: translateX(-4px) rotate(-2deg); } 50% { transform: translateX(4px) rotate(2deg); } }
@keyframes scm-tilt { 0%, 100% { transform: rotate(-5deg) translateY(-1px); } 50% { transform: rotate(3deg) translateY(1px); } }
@keyframes scm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes scm-tail { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes scm-blink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
@keyframes scm-whisk { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes scm-spin { to { transform: rotate(360deg); } }
@keyframes scm-air { 0% { transform: translate(0, 6px) scale(.4); opacity: 0; } 30% { opacity: 1; }
  100% { transform: translate(4px, -22px) scale(1); opacity: 0; } }
@keyframes scm-pop { 0%, 15% { transform: scale(0); opacity: 0; } 35%, 75% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.6) translateY(-4px); opacity: 0; } }
@keyframes scm-scan { 0%, 100% { transform: translate(-16px, 6px) rotate(-8deg); } 50% { transform: translate(10px, -2px) rotate(8deg); } }
@keyframes scm-look { 0%, 100% { transform: translate(-3px, 1px); } 50% { transform: translate(2.5px, -1px); } }
@keyframes scm-paddle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
@keyframes scm-twinkle { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes scm-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 184, 46, 0)); }
  50% { filter: drop-shadow(0 0 5px rgba(245, 184, 46, .95)); } }
@keyframes scm-aura { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 46, .0), inset 0 0 0 1px rgba(31, 53, 88, .12); }
  50% { box-shadow: 0 0 0 5px rgba(245, 184, 46, .22), inset 0 0 0 1px rgba(31, 53, 88, .12); } }
@keyframes scm-talk { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }
@keyframes scm-draw { 0% { stroke-dashoffset: 70; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes scm-draw2 { 0%, 45% { stroke-dashoffset: 70; } 85%, 100% { stroke-dashoffset: 22; } }
@keyframes scm-pen { 0% { transform: translate(34px, 110px); } 45% { transform: translate(98px, 110px); }
  46% { transform: translate(34px, 120px); } 85%, 100% { transform: translate(82px, 120px); } }

@media (prefers-reduced-motion: reduce) {
  .sc-think *, .sc-think .scm { animation: none !important; }
  .sc-think .m-lid { transform: scaleY(0); }
  .sc-think[data-state="dalam"] .m-lid { transform: scaleY(1); }
  .sc-think .m-line { stroke-dashoffset: 0; }
  .sc-think-dots::after { animation: none; width: 1.1em; }
  .m-ring, .m-orbit, .m-think, .m-air, .m-lens, .m-write, .m-shut { transition: none; }
}