/* MAYA v3.1: bounded, content-sized conversation frame. */
.maya-panel.maya-cartoon-panel{top:auto!important;bottom:84px!important;right:18px;width:min(380px,calc(100vw - 24px));height:auto;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);min-height:0;background:linear-gradient(150deg,#fff,#f0f8ff)!important;color:#19354d!important;border:1px solid #bbd9ed;box-shadow:0 15px 45px #244b7429;border-radius:20px;display:flex;flex-direction:column;overflow:hidden}
.maya-cartoon-panel[hidden]{display:none!important}
.maya-cartoon-panel .maya-head{padding:11px 16px;background:linear-gradient(110deg,#e8f5ff,#fff6e6);flex-shrink:0;border-bottom:1px solid #d5e5f1}
.maya-cartoon-panel .maya-head b{color:#176b9a!important}.maya-cartoon-panel .maya-head button{color:#294b67!important}
.maya-avatar-stage{height:140px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 14px;background:linear-gradient(110deg,#d6f0ff,#f4fbff);border-bottom:1px solid #cce3f2;overflow:hidden}
.maya-avatar-sprite,.maya-mini-avatar{background-image:url('../assets/maya-expressive-sheet.png?v=20261018-1');background-repeat:no-repeat;background-size:200% 200%;background-position:0 0}
.maya-avatar-sprite{height:140px;width:140px;flex:0 0 140px;border-radius:18px;mix-blend-mode:multiply}
.maya-avatar-sprite[data-frame="1"]{background-position:100% 0}.maya-avatar-sprite[data-frame="2"]{background-position:0 100%}.maya-avatar-sprite[data-frame="3"]{background-position:100% 100%}
.maya-avatar-intro{display:flex;flex-direction:column;gap:5px;max-width:160px;font:12px/1.4 'Segoe UI',Arial,sans-serif;color:#425f78}
.maya-avatar-intro strong{font-size:16px;color:#166793}.maya-avatar-intro button{align-self:flex-start;border:1px solid #b8d5e7;background:#ffffffd9;color:#176591;border-radius:20px;padding:5px 8px;cursor:pointer;font-size:11px}
.maya-mini-avatar{display:block;flex-shrink:0;width:42px;height:42px;border-radius:50%;border:2px solid #fff;box-sizing:border-box}
.maya-cartoon-panel .maya-caption{font-size:11px;line-height:1.4;padding:6px 14px;flex-shrink:0;color:#526c81}
.maya-cartoon-panel .maya-chat{flex:0 1 auto;min-height:85px;max-height:260px;display:flex;overflow:hidden}
.maya-cartoon-panel .maya-messages{flex:1;min-width:0;min-height:0;padding:10px 12px;overflow-y:auto;position:relative;overscroll-behavior:contain;color:#23445f;scrollbar-width:thin;scrollbar-color:#8eb9d4 #eef6fc}
.maya-cartoon-panel .maya-msg{margin-bottom:8px;line-height:1.65;font-size:13px;padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere;background:#eff6fc;border:1px solid #ccdfef;color:#23445f;border-radius:12px}
.maya-cartoon-panel .maya-msg.user{background:#dceefa}
.maya-cartoon-panel .maya-scroll-controls{width:34px;flex:0 0 34px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;padding:8px 3px;background:#edf5fb;border-left:1px solid #d5e4ef}
.maya-cartoon-panel .maya-scroll-controls button{width:28px;height:30px;background:white;color:#176591;border:1px solid #b8d2e5;border-radius:8px;font-size:19px;cursor:pointer}
.maya-cartoon-panel .maya-scroll-controls button:disabled{opacity:.35;cursor:default}
.maya-voice-controls{display:flex;align-items:center;gap:6px;padding:5px 12px;flex-shrink:0;border-top:1px solid #d5e5f1;flex-wrap:wrap}
.maya-voice-controls button{border:1px solid #bbd7e9;background:#fff;color:#176591;padding:5px 8px;border-radius:8px;font-size:11px;cursor:pointer}
.maya-voice-controls button:disabled{opacity:.5;cursor:default}.maya-voice-controls label{display:flex;align-items:center;gap:4px;font-size:11px;color:#425f78}
.maya-cartoon-panel .maya-voice-status{margin:0;padding:0 12px 5px;font-size:10px;line-height:1.4;color:#526c81;flex-shrink:0;overflow-wrap:anywhere}
.maya-cartoon-panel .maya-shortcuts{padding:4px 12px;gap:5px;flex-shrink:0}.maya-cartoon-panel .maya-shortcuts button{font-size:11px;padding:6px 9px}
.maya-cartoon-panel .maya-form{padding:8px 10px;gap:6px;flex-shrink:0}.maya-cartoon-panel .maya-form input{font-size:13px;min-width:0;padding:8px}
.maya-cartoon-panel .maya-thinking{flex-shrink:0;padding:4px 12px;font-size:11px}.maya-cartoon-panel .maya-thinking[hidden]{display:none}
.maya-cartoon-panel.is-speaking .maya-avatar-stage{box-shadow:inset 0 0 20px #9cdaf344}
@media(min-width:1500px){.maya-panel.maya-cartoon-panel{bottom:20px!important;max-height:calc(100dvh - 40px)}}
@media(max-height:680px){.maya-avatar-stage{height:90px}.maya-avatar-sprite{height:90px;width:90px;flex-basis:90px}.maya-avatar-intro strong{font-size:14px}.maya-cartoon-panel .maya-head{padding:7px 14px}.maya-cartoon-panel .maya-chat{min-height:60px;max-height:180px}.maya-cartoon-panel .maya-msg{font-size:12px;padding:8px 10px}.maya-cartoon-panel .maya-caption{padding:4px 12px}}
@media(max-height:460px){.maya-avatar-stage{display:none}.maya-cartoon-panel .maya-caption{display:none}.maya-panel.maya-cartoon-panel{bottom:65px!important;max-height:calc(100dvh - 75px)}}
@media(max-width:600px){.maya-panel.maya-cartoon-panel{right:10px;width:calc(100vw - 20px)}.maya-avatar-stage{height:110px}.maya-avatar-sprite{height:110px;width:110px;flex-basis:110px}}
@media print{.maya-cartoon-panel,.maya-toggle{display:none!important}}

/* Latar JKP dan pose demonstrasi yang diluluskan. */
.maya-cartoon-panel .maya-avatar-stage{position:relative;isolation:isolate;background:linear-gradient(140deg,#484078,#7767a2);border-color:#9888b7}
.maya-avatar-stage::before,.maya-avatar-stage::after{content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:50%}
.maya-avatar-stage::before{inset:12px 5%;border:1px solid #d6ccff66;box-shadow:0 0 20px #c5bfff44;animation:jkp-halo 6s ease-in-out infinite}
.maya-avatar-stage::after{width:4px;height:4px;left:8%;top:28%;background:#ffff00;box-shadow:15px 55px #ffff00,290px 15px #ffff00,265px 70px #ffff00;animation:jkp-drift 5s ease-in-out infinite alternate}
.maya-avatar-sprite{mix-blend-mode:normal;background-color:transparent}
.maya-avatar-intro,.maya-avatar-intro strong{color:#fff}
.maya-avatar-intro button{color:#2b034a;border-color:#ffff00;background:#ffff00}
.maya-cartoon-panel .maya-head{background:#2b034a!important}
.maya-cartoon-panel .maya-head b{color:#ffff00!important}.maya-cartoon-panel .maya-head button{color:#fff!important}
@keyframes jkp-halo{50%{opacity:.45;transform:scale(.97)}}
@keyframes jkp-drift{to{transform:translateY(-14px);opacity:.4}}
@media(prefers-reduced-motion:reduce){.maya-avatar-stage::before,.maya-avatar-stage::after{animation:none!important}}

/* MAYA Ekspresif: pergerakan badan halus dan ruang untuk tangan. */
.maya-avatar-stage{height:190px;gap:4px;padding:0 8px}
.maya-avatar-sprite{height:190px;width:190px;flex-basis:190px;border-radius:0;transform-origin:50% 92%;animation:maya-natural-idle 7s ease-in-out infinite;will-change:transform}
.maya-avatar-intro{max-width:130px;font-size:11px}
.maya-cartoon-panel.is-speaking .maya-avatar-sprite{animation:maya-natural-talk 3.2s ease-in-out infinite}
.maya-avatar-sprite[data-frame="1"]{filter:drop-shadow(0 3px 7px #21123922)}
@keyframes maya-natural-idle{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-2px) rotate(.3deg)}}
@keyframes maya-natural-talk{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-1px) rotate(.7deg)}55%{transform:translateY(1px) rotate(-.5deg)}75%{transform:translateY(-1px) rotate(.2deg)}}
@media(max-width:600px){.maya-avatar-stage{height:150px}.maya-avatar-sprite{height:150px;width:150px;flex-basis:150px}}
@media(max-height:680px){.maya-avatar-stage{height:100px}.maya-avatar-sprite{height:100px;width:100px;flex-basis:100px}}
@media(prefers-reduced-motion:reduce){.maya-avatar-sprite,.maya-cartoon-panel.is-speaking .maya-avatar-sprite{animation:none!important;will-change:auto}}

/* Ikon MAYA dikunci pada penjuru kanan bawah, termasuk skrin lebar. */
body .maya-toggle,body #maya-toggle{position:fixed!important;inset:auto 16px 16px auto!important;right:16px!important;bottom:16px!important;left:auto!important;top:auto!important;transform:none!important;z-index:1300;max-width:140px;padding:8px 12px;gap:8px;box-sizing:border-box}
body .maya-toggle .maya-mini-avatar{width:32px;height:32px;flex-basis:32px}
body .maya-panel.maya-cartoon-panel{right:16px!important;left:auto!important;bottom:82px!important;top:auto!important;max-height:calc(100dvh - 100px)!important}
@media(max-width:600px){body .maya-toggle,body #maya-toggle{right:10px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;padding:7px 10px}body .maya-panel.maya-cartoon-panel{right:10px!important;bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;width:calc(100vw - 20px)}}
@media print{body .maya-toggle,body #maya-toggle,body .maya-panel{display:none!important}}