.genie-widget{position:fixed;right:18px;bottom:82px;z-index:1001;font:14px/1.5 Inter,Arial,sans-serif}.genie-launch{position:relative;display:block;width:104px;height:125px;padding:0;border:0;background:none;filter:drop-shadow(0 6px 8px #1e40af30)}.genie-launch svg{width:100%;height:100%;overflow:visible;animation:genie-float 4s ease-in-out infinite}.genie-greeting{position:absolute;right:0;bottom:128px;white-space:nowrap;background:white;color:#1e40af;border:1px solid #dbeafe;border-radius:14px 14px 4px 14px;padding:9px 12px;box-shadow:0 4px 16px #15223f16;font-size:12px;font-weight:600}.genie-eyes{transform-box:fill-box;transform-origin:center;animation:genie-blink 5s infinite}.genie-hand{transform-origin:48px 108px}.genie-head{transform-origin:80px 95px}.genie-wave .genie-hand{animation:genie-wave .45s ease-in-out 4 alternate}.genie-wave .genie-head{animation:genie-nod .5s ease-in-out 3 alternate}.genie-panel{position:absolute;right:0;bottom:135px;width:min(360px,calc(100vw - 28px));height:min(520px,calc(100dvh - 240px));min-height:260px;background:#fff;border:1px solid #dce5f7;border-radius:20px;box-shadow:0 12px 48px #15223f35;overflow:hidden;display:flex;flex-direction:column}.genie-panel[hidden]{display:none}.genie-panel header{display:flex;align-items:center;gap:10px;padding:14px;background:#1e40af;color:white}.genie-panel header img{width:42px;height:48px;object-fit:cover;border-radius:12px}.genie-panel header small{display:block;color:#dbeafe;font-size:11px}.genie-close{margin-left:auto;border:0;background:#ffffff22;color:white;width:32px;height:32px;border-radius:50%;font-size:23px}.genie-messages{flex:1;overflow-y:auto;padding:14px;background:#f5f8ff;min-height:0}.genie-message{white-space:pre-wrap;border-radius:14px;padding:10px 12px;margin-bottom:10px;max-width:92%;overflow-wrap:anywhere;font-size:13px}.genie-message.bot{background:white;border:1px solid #e2e8f0;color:#15223f}.genie-message.user{margin-left:auto;background:#1e40af;color:white}.genie-message a{display:inline-block;color:#1e40af;font-weight:700;margin-top:6px;text-decoration:underline}.genie-suggestions{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px}.genie-suggestions button{border:1px solid #dbeafe;background:#eff6ff;color:#1e40af;border-radius:20px;font-size:11px;padding:5px 8px}.genie-form{display:flex;gap:6px;padding:8px 12px}.genie-form input{width:0;flex:1;border:1px solid #cbd5e1;border-radius:10px;padding:10px;font-size:12px}.genie-form button{border:0;border-radius:10px;background:#1e40af;color:white;width:40px}.genie-note{font-size:10px;text-align:center;padding:0 10px 10px;color:#64748b}.genie-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}.is-open .genie-greeting{display:none}@keyframes genie-float{50%{transform:translateY(-5px)}}@keyframes genie-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}@keyframes genie-wave{to{transform:rotate(22deg)}}@keyframes genie-nod{to{transform:rotate(-7deg)}}@media(max-width:600px){.genie-widget{right:12px;bottom:72px}.genie-launch{width:86px;height:104px}.genie-greeting{bottom:109px}.genie-panel{bottom:112px;height:min(500px,calc(100dvh - 205px))}}@media(prefers-reduced-motion:reduce){.genie-launch svg,.genie-eyes,.genie-wave .genie-hand,.genie-wave .genie-head{animation:none}}

/* Use the approved 3D Genie consistently in the launcher and conversation. */
.genie-launch{width:130px;height:156px;filter:drop-shadow(0 5px 12px #1e40af24)}
.genie-character{display:block;width:100%;height:100%;object-fit:contain;animation:genie-float 4s ease-in-out infinite;transform-origin:50% 80%}
.genie-greeting{bottom:158px}
.genie-wave .genie-character{animation:genie-welcome .6s ease-in-out 3}
.genie-panel{bottom:164px;height:min(520px,calc(100dvh - 280px))}
.genie-panel header img{width:60px;height:64px;object-fit:contain;background:radial-gradient(ellipse,#60a5fa66,transparent 75%);border-radius:0}
.genie-message.bot{position:relative;margin-left:36px;max-width:calc(100% - 36px)}
.genie-reply-avatar{position:absolute;left:-39px;top:2px;width:35px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 3px #1e40af22)}
@keyframes genie-welcome{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-8px) rotate(-5deg)}70%{transform:translateY(-4px) rotate(4deg)}}
@media(max-width:600px){.genie-launch{width:110px;height:132px}.genie-greeting{bottom:135px}.genie-panel{bottom:140px;height:min(500px,calc(100dvh - 235px))}}
@media(prefers-reduced-motion:reduce){.genie-character,.genie-wave .genie-character{animation:none}}

.genie-portrait{display:block;background-image:url('img/genie/stem-genie-realistic.png');background-size:230% auto;background-position:53% 15%;background-repeat:no-repeat;border-radius:50%;background-color:#dbeafe}
.genie-panel header .genie-portrait{width:54px;height:54px;flex:none;border:2px solid #ffffff66}
.genie-reply-avatar.genie-portrait{width:32px;height:32px;top:6px;background-size:230% auto}

/* Articulated presentation of the approved character, shared by both surfaces. */
.genie-rig{position:relative;display:block;width:100%;height:100%;animation:genie-float 4s ease-in-out infinite}
.genie-rig>span{position:absolute;inset:0;background:url('img/genie/stem-genie-realistic.png') center/100% 100% no-repeat}
.genie-rig-head{clip-path:polygon(29% 0,74% 0,74% 35%,29% 35%);transform-origin:51% 34%;animation:genie-head-idle 5s ease-in-out infinite}
.genie-rig-hand{clip-path:polygon(0 18%,29% 18%,29% 50%,0 50%);transform-origin:27% 48%;animation:genie-hand-idle 4s ease-in-out infinite}
.genie-rig-tail{clip-path:polygon(0 59%,100% 59%,100% 100%,0 100%);transform-origin:53% 59%;animation:genie-tail-flow 3s ease-in-out infinite}
.genie-rig-body{clip-path:polygon(0 0,29% 0,29% 35%,74% 35%,74% 0,100% 0,100% 59%,0 59%,0 50%,29% 50%,29% 18%,0 18%)}
.genie-wave .genie-rig-hand{animation:genie-hand-wave .65s ease-in-out 4}
.genie-wave .genie-rig-head{animation:genie-head-talk .8s ease-in-out 3}
.genie-stage{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(120deg,#eff6ff,#ecfdf5);padding:4px 14px;flex:none;border-bottom:1px solid #dbeafe}
.genie-stage .genie-rig{width:80px;height:96px;flex:none;filter:drop-shadow(0 3px 5px #1e40af20)}
.genie-stage b{display:block;color:#1e40af;font-size:13px}.genie-stage div>span{display:block;color:#64748b;font-size:11px;margin-top:4px}
.genie-panel{height:min(620px,calc(100dvh - 270px));min-height:350px}
@keyframes genie-head-idle{0%,100%{transform:rotate(0)}50%{transform:rotate(-2deg)}}
@keyframes genie-head-talk{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes genie-hand-idle{0%,75%,100%{transform:rotate(0)}85%{transform:rotate(5deg)}95%{transform:rotate(-3deg)}}
@keyframes genie-hand-wave{0%,100%{transform:rotate(0)}30%{transform:rotate(9deg)}70%{transform:rotate(-5deg)}}
@keyframes genie-tail-flow{0%,100%{transform:skewX(0) scaleX(1)}50%{transform:skewX(-4deg) scaleX(.96)}}
@media(max-width:600px){.genie-panel{height:min(590px,calc(100dvh - 225px))}.genie-stage .genie-rig{width:64px;height:77px}.genie-stage{padding:3px 12px}}
@media(max-height:620px){.genie-panel{position:fixed;top:8px;bottom:8px;right:12px;height:auto;min-height:0}.genie-stage .genie-rig{width:45px;height:54px}}
@media(prefers-reduced-motion:reduce){.genie-rig,.genie-rig>span,.genie-wave .genie-rig-hand,.genie-wave .genie-rig-head{animation:none}}
/* Only show the character inside the conversation while chatting. */
.is-open .genie-launch{display:none}
.is-open .genie-panel{bottom:0;height:min(620px,calc(100dvh - 110px))}
@media(max-width:600px){.is-open .genie-panel{height:min(590px,calc(100dvh - 96px))}}
@media(max-height:620px){.is-open .genie-panel{bottom:8px;height:auto}}

/* Expressive greeting, attentive listening and lively explanation states. */
.genie-stage .genie-rig{width:104px;height:125px}
.genie-stage{min-height:130px;position:relative;overflow:hidden}
.genie-stage::after{content:'✦';position:absolute;left:24%;top:15%;color:#10b981;font-size:16px;opacity:0;pointer-events:none}
.genie-thinking .genie-stage::after,.genie-speaking .genie-stage::after{animation:genie-sparkle 1.3s ease-in-out infinite}
.genie-wave .genie-rig{animation:genie-showman 1.4s ease-in-out 3}
.genie-wave .genie-rig-hand{animation:genie-hand-wave .7s ease-in-out 6}
.genie-wave .genie-rig-head{animation:genie-head-talk .7s ease-in-out 6}
.genie-listening .genie-rig-head{animation:genie-listen 2.8s ease-in-out infinite}
.genie-thinking .genie-rig-head{animation:genie-ponder 2s ease-in-out infinite}
.genie-thinking .genie-rig-tail{animation:genie-tail-flow 1.3s ease-in-out infinite}
.genie-speaking .genie-rig-body{animation:genie-breathe .7s ease-in-out 6}
@keyframes genie-showman{0%,100%{transform:translateY(0) rotate(0) scale(1)}30%{transform:translateY(-6px) rotate(-3deg) scale(1.04)}65%{transform:translateY(-2px) rotate(2deg) scale(1.02)}}
@keyframes genie-hand-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}65%{transform:rotate(-8deg)}}
@keyframes genie-head-talk{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg) translateY(-1px)}70%{transform:rotate(4deg)}}
@keyframes genie-listen{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-6deg)}}
@keyframes genie-ponder{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-2deg)}}
@keyframes genie-breathe{50%{transform:scaleY(1.015)}}
@keyframes genie-sparkle{0%,100%{opacity:0;transform:translateY(7px) scale(.5)}50%{opacity:.9;transform:translateY(-6px) scale(1.2)}}
@media(max-width:600px){.genie-stage{min-height:108px}.genie-stage .genie-rig{width:86px;height:103px}}
@media(max-height:620px){.genie-stage{min-height:65px}.genie-stage .genie-rig{width:54px;height:65px}}
@media(prefers-reduced-motion:reduce){.genie-widget .genie-rig,.genie-widget .genie-rig>span,.genie-stage::after{animation:none!important}}
/* A light glass surface without changing chat layout or character. */
.genie-panel{background:#fffffff0;border-color:#ffffffcc;backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%);box-shadow:inset 0 1px 0 #fff,0 12px 48px #15223f2b}
.genie-panel header{background:linear-gradient(125deg,#1e40aff5,#1e40afdf);box-shadow:inset 0 1px 0 #ffffff40}
.genie-messages{background:#f5f8ffcc}.genie-message.bot{background:linear-gradient(135deg,#fff,#ffffffd9);box-shadow:inset 0 1px 0 #fff,0 3px 10px #15223f05}
@media(prefers-reduced-transparency:reduce){.genie-panel{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}