/* Functional audio orbs: local gradients, transforms and opacity; no canvas/WebGL. */
.shell{--user-level:0;--ai-pulse:0}
.voiceStage{display:flex;flex-direction:column;align-items:center;padding:20px 0 14px;isolation:isolate}
.aiVoiceOrb{width:190px;height:190px;position:relative;display:grid;place-items:center;flex:none}
.orbBody{position:relative;display:block;width:142px;height:142px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 34% 23%,#fff5fb 0,#ffb2d0 21%,#ee357e 49%,#ab1454 83%);border:1px solid #ffffffa6;box-shadow:inset -9px -12px 22px #83134935,inset 6px 8px 19px #fff7,0 10px 26px #b11b5c1f;transform:scale(calc(1 + var(--ai-pulse)*.055 + var(--user-level)*.05));transition:transform .12s ease-out,filter .25s,opacity .25s;z-index:2}
.orbBody:before{content:"";position:absolute;z-index:4;inset:4px;border-radius:50%;border:1px solid #fff7;border-left-color:#fff1;border-bottom-color:#7d164b26;box-shadow:inset 0 0 18px #fff4;pointer-events:none;animation:luwiOrbRim 7s ease-in-out infinite}
.orbBody:after{content:"";position:absolute;z-index:1;left:26%;top:28%;width:48%;height:48%;border-radius:50%;background:radial-gradient(circle,#fff8 0,#ffcce25c 35%,transparent 72%);filter:blur(6px);opacity:.36;transform:scale(calc(.92 + var(--ai-pulse)*.12 + var(--user-level)*.08));transition:transform .14s,opacity .2s;pointer-events:none}
.orbFlow{display:block;position:absolute;z-index:2;inset:0;border-radius:50%;overflow:hidden;animation:luwiOrbFlow 6s linear infinite;animation-play-state:paused}
.orbCloud{display:block;position:absolute;width:100%;height:100%;border-radius:50%;background:radial-gradient(ellipse,#ff5f9fb3,transparent 70%)}
.cloudRose{left:-47px;top:30px;background:radial-gradient(ellipse,#ffdfed 0,#ff91b5c9 37%,transparent 69%)}
.cloudBerry{right:-45px;top:35px;background:radial-gradient(ellipse,#9c50f5cc 0,#d840a782 35%,transparent 67%)}
.cloudLight{left:18px;top:-55px;background:radial-gradient(ellipse,#fffefdec 0,#fff1 63%,transparent 72%)}
.orbGlass{position:absolute;z-index:5;inset:7px;border-radius:50%;overflow:hidden;border-top:2px solid #fff8;border-right:1px solid #fff3;transform:rotate(-30deg);pointer-events:none}
.orbShine{position:absolute;display:block;width:42%;height:15%;left:10%;top:14%;border-radius:50%;background:radial-gradient(ellipse,#fff9 0,#fff4 48%,transparent 72%);filter:blur(2px);opacity:.62;transform:translate3d(-18%,0,0) rotate(-8deg);animation:luwiOrbShine 6.8s ease-in-out infinite}
.orbHalo{position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle,#fa76b238 28%,#f596c029 52%,transparent 71%);opacity:.6;transition:opacity .25s}
.orbEcho{position:absolute;inset:20px;border-radius:50%;border:1px solid #dd5d9540;opacity:0;transform:scale(1);pointer-events:none}
.orbWave{position:absolute;z-index:6;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;opacity:.85}
.orbWave i{display:block;width:4px;height:8px;background:#fff;border-radius:12px;box-shadow:0 1px 6px #b4275f18;animation:luwiOrbWave .65s ease-in-out infinite alternate;animation-play-state:paused}
.orbWave i:nth-child(2),.orbWave i:nth-child(4){height:16px;animation-delay:-.18s}.orbWave i:nth-child(3){height:26px;animation-delay:-.35s}
.orbIdentity{display:flex;align-items:center;gap:8px;margin-top:-1px;color:var(--ink);font-size:16px}.orbIdentity b{font-weight:850}.orbIdentity span{font-size:12px;font-weight:650;color:#a33160;border:1px solid #f0d1df;background:#fff9fc;border-radius:20px;padding:4px 8px}
.shell[data-orb-phase=speaking] .orbFlow,.shell[data-orb-phase=speaking] .orbWave i{animation-play-state:running}
.shell[data-orb-phase=speaking] .orbHalo{opacity:1;animation:luwiOrbGlow 1.4s ease-in-out infinite alternate}
.shell[data-orb-phase=ready] .orbFlow,.shell[data-orb-phase=listening] .orbFlow{animation-play-state:running;animation-duration:20s}
.shell[data-orb-phase=ready] .orbHalo,.shell[data-orb-phase=listening] .orbHalo{animation:luwiOrbIdle 4.6s ease-in-out infinite}
.shell[data-orb-phase=speaking] .orbShine{animation-duration:2.1s;opacity:.86}
.shell[data-orb-phase=speaking] .orbBody:after{opacity:.7;animation:luwiOrbCore 1.2s ease-in-out infinite alternate}
.shell[data-orb-phase=thinking] .orbShine{animation-duration:3.4s;opacity:.72}
.shell[data-orb-phase=thinking] .orbBody:before{animation-duration:2.4s;border-top-color:#f3c8ff}
.shell[data-orb-phase=speaking] .orbEcho{animation:luwiOrbEcho 2.1s ease-out infinite}.shell[data-orb-phase=speaking] .echoTwo{animation-delay:1.05s}
.shell[data-orb-phase=thinking] .orbFlow{animation-play-state:running;animation-duration:12s}.shell[data-orb-phase=thinking] .orbWave{opacity:.4}
.shell[data-orb-phase=paused] .orbBody,.shell[data-orb-phase=ended] .orbBody{opacity:.55}
.shell[data-orb-phase=listening] .orbBody{opacity:.82}.shell[data-orb-phase=listening] .orbWave{opacity:.6}
.shell[data-user-speaking=true] .orbHalo{opacity:calc(.65 + var(--user-level)*.35);transform:scale(calc(1 + var(--user-level)*.09))}
.shell[data-user-speaking=true] .orbBody{filter:saturate(calc(1 + var(--user-level)*.35)) brightness(calc(1 + var(--user-level)*.08))}
.shell[data-orb-phase=listening][data-user-speaking=true] .orbWave i{animation:none;transform:scaleY(calc(.65 + var(--user-level)*1.15));opacity:calc(.55 + var(--user-level)*.45)}
.userVoiceFeedback{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 15px;margin:10px 0 2px;background:#fff;border:1px solid #f1dce5;border-radius:20px;overflow:hidden}
.userVoiceOrb{position:relative;width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;gap:3px;border:2px solid #fff;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff7fb,#ffcade 58%,#f0a1c0);box-shadow:0 0 0 1px #f3dce6;transform:scale(calc(1 + var(--user-level)*.13));transition:transform .07s linear}
.userVoiceOrb>span{position:absolute;inset:-4px;border:1px solid #de487c;border-radius:50%;opacity:calc(var(--user-level)*.6);transform:scale(calc(1 + var(--user-level)*.26))}
.userVoiceOrb i{width:3px;height:8px;background:#bb1b56;border-radius:8px}.userVoiceOrb i:nth-of-type(2){height:15px}
.userVoiceLabel{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.userVoiceLabel b{font-size:14px;line-height:1.35;font-weight:800}.userVoiceLabel>span{color:#8a6678;font-size:12px;line-height:1.5}
.userVoiceWave{display:flex;align-items:center;justify-content:center;gap:4px;height:34px;width:58px;flex:0 0 58px}
.userVoiceWave i{width:3px;height:26px;border-radius:8px;background:#df538d;transform:scaleY(calc(.15 + var(--user-level)*.85));transition:transform .07s linear;opacity:calc(.3 + var(--user-level)*.7)}
.userVoiceWave i:nth-child(2n){height:19px}.userVoiceWave i:nth-child(3n){height:32px}.userVoiceWave i:first-child,.userVoiceWave i:last-child{height:12px}
.shell[data-user-speaking=true] .userVoiceFeedback{border-color:#e89dbb}.shell[data-user-speaking=true] .userVoiceLabel>span{color:#a32956}
/* The old perpetual wave must not indicate the user is talking during AI playback. */
.shell[data-orb-phase] .statusDot.listening{background:#d64579;box-shadow:0 0 0 5px #fce5ee;animation:none}
.shell[data-orb-phase] .statusDot.speaking{animation:none}.shell[data-orb-phase] .statusSub{font-size:13px}.shell[data-orb-phase] .sessionGuide{font-size:12px;line-height:1.6}.shell[data-orb-phase] .voiceHint{font-size:13px;line-height:1.6;padding-top:9px}.shell[data-orb-phase] .liveTranscript{font-size:16px;overflow-wrap:anywhere;max-height:150px;overflow:auto}
.shell[data-visual-hidden=true] .voiceStage *{animation-play-state:paused!important}
@keyframes luwiOrbFlow{to{transform:rotate(360deg)}}
@keyframes luwiOrbWave{from{transform:scaleY(.65)}to{transform:scaleY(1.3)}}
@keyframes luwiOrbGlow{from{transform:scale(.95)}to{transform:scale(1.08)}}
@keyframes luwiOrbEcho{0%{opacity:.5;transform:scale(.97)}85%,100%{opacity:0;transform:scale(1.25)}}
@keyframes luwiOrbIdle{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:.72;transform:scale(1.025)}}
@keyframes luwiOrbShine{0%,100%{transform:translate3d(-18%,0,0) rotate(-8deg);opacity:.45}48%,55%{transform:translate3d(112%,18%,0) rotate(-8deg);opacity:.9}}
@keyframes luwiOrbRim{0%,100%{opacity:.58;transform:rotate(-5deg)}50%{opacity:.95;transform:rotate(7deg)}}
@keyframes luwiOrbCore{from{filter:blur(7px);transform:scale(.92)}to{filter:blur(4px);transform:scale(1.14)}}
/* Voice-first session: one large orb represents both sides of the live turn. */
.sessionShell .voiceStage{padding:0;min-height:0}
.sessionShell .aiVoiceOrb{width:300px;height:300px}
.sessionShell .orbBody{width:218px;height:218px;box-shadow:inset -14px -18px 34px #83134942,inset 10px 12px 28px #fff8,0 22px 54px #b11b5c2b}
.sessionShell .orbHalo{inset:-3px}
.sessionShell .orbEcho{inset:35px}
.sessionShell .orbWave{gap:7px}
.sessionShell .orbWave i{width:5px;height:12px}.sessionShell .orbWave i:nth-child(2),.sessionShell .orbWave i:nth-child(4){height:25px}.sessionShell .orbWave i:nth-child(3){height:39px}
.sessionShell[data-user-speaking=true] .orbEcho{opacity:calc(var(--user-level)*.35);transform:scale(calc(1 + var(--user-level)*.15));border-color:#b24fe878}
.sessionShell[data-user-speaking=true] .orbFlow{animation-play-state:running;animation-duration:5.5s}
@media(max-width:390px){.voiceStage{padding:14px 0 12px}.aiVoiceOrb{width:172px;height:172px}.orbBody{width:130px;height:130px}.userVoiceFeedback{padding:11px 12px;gap:10px}.userVoiceWave{width:48px;flex-basis:48px;gap:3px}.orbIdentity{font-size:16px}}
@media(max-width:520px){.sessionShell .voiceStage{padding:0}.sessionShell .aiVoiceOrb{width:min(72vw,270px);height:min(72vw,270px)}.sessionShell .orbBody{width:min(53vw,198px);height:min(53vw,198px)}}
@media(max-height:650px){.sessionShell .aiVoiceOrb{width:210px;height:210px}.sessionShell .orbBody{width:158px;height:158px}}
@media(prefers-reduced-motion:reduce){.voiceStage *, .userVoiceFeedback *{animation:none!important;transition:none!important}.orbHalo,.orbEcho,.userVoiceOrb>span{display:none}.orbBody,.userVoiceOrb,.userVoiceWave i{transform:none!important}.userVoiceWave i{height:8px!important}}