/* Jonas remains in sight while Discovery responses are rendered.
   All styling is scoped to the discovery conversation. */
#jonas-voice-stage.jonas-voice-stage{
 position:sticky;top:max(4px,env(safe-area-inset-top));z-index:15;
 display:flex;align-items:center;justify-content:center;gap:13px;
 width:100%;margin:12px 0 14px;padding:11px 13px;min-height:104px;
 color:#f8f3ff;background:linear-gradient(123deg,rgba(38,22,62,.98),rgba(19,13,38,.97));
 border:1px solid rgba(236,196,110,.56);border-radius:22px;
 box-shadow:0 10px 36px rgba(5,4,14,.28),inset 0 1px rgba(255,255,255,.06);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 isolation:isolate;
}
#jonas-voice-stage .jds-portrait{width:90px;height:90px;flex:0 0 90px;position:relative;border-radius:50%;overflow:visible}
#jonas-voice-stage .jds-rest,#jonas-voice-stage .jds-mouth{
 display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;
 border-radius:50%;pointer-events:none;
}
#jonas-voice-stage .jds-rest{border:2px solid rgba(239,202,116,.95);z-index:1}
#jonas-voice-stage .jds-mouth{z-index:2;opacity:0;clip-path:inset(54% 0 0 0);will-change:opacity}
#jonas-voice-stage .jds-halo{position:absolute;inset:-5px;border:1px solid rgba(218,167,255,.6);border-radius:50%;pointer-events:none;z-index:3;
box-shadow:0 0 calc(10px + 15px * var(--jds-pulse,0)) rgba(159,96,243,.34);
transition:box-shadow 110ms linear}
#jonas-voice-stage .jds-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.4}
#jonas-voice-stage .jds-copy strong{font-size:18px;color:#f5d287;font-weight:750}
#jonas-voice-stage .jds-indicator{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 3px 2px;background:#7fddab}
#jonas-voice-stage .jds-state{color:#d2cae1;font-size:12px}
#jonas-voice-stage .jds-mic{display:grid;place-items:center;min-width:45px;min-height:45px;width:45px;height:45px;flex:none;border-radius:50%;background:linear-gradient(130deg,#d2a65f,#f4d998);
border:0;color:#251632;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3)}
#jonas-voice-stage .jds-mic svg{width:23px;height:23px}
#jonas-voice-stage[data-state="listening"] .jds-indicator{background:#edc970;box-shadow:0 0 8px #edc970}
#jonas-voice-stage[data-state="speaking"] .jds-indicator{background:#83f0ba;box-shadow:0 0 11px #83f0ba}
@media(max-width:420px){#jonas-voice-stage.jonas-voice-stage{gap:11px;padding:9px 11px;min-height:94px;border-radius:17px}#jonas-voice-stage .jds-portrait{width:75px;height:75px;flex-basis:75px}#jonas-voice-stage .jds-copy strong{font-size:16px}#jonas-voice-stage .jds-state{font-size:11px}}
@media(prefers-reduced-motion:reduce){#jonas-voice-stage *{animation:none!important;transition:none!important}}

/* Lifeline: never flash the portrait. Eyes and mouth overlay only their own area. */
#jonas-voice-stage .jds-eyes{
 display:block;position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:center 20%;border-radius:50%;
 clip-path:inset(0 0 51% 0);pointer-events:none;z-index:3;opacity:0;
}
#jonas-voice-stage .jds-portrait{
 transform-origin:center 55%;animation:jds-breathe 4200ms ease-in-out infinite;
}
#jonas-voice-stage[data-state="speaking"] .jds-portrait{
 animation:jds-speaking-breathe 4600ms ease-in-out infinite;
}
@keyframes jds-breathe{
 0%,100%{transform:translateY(.6px) scale(1)}
 48%{transform:translateY(-1.2px) scale(1.010)}
}
@keyframes jds-speaking-breathe{
 0%,100%{transform:translateY(.4px) scale(1)}
 48%{transform:translateY(-.9px) scale(1.006)}
}
@media(prefers-reduced-motion:reduce){
 #jonas-voice-stage .jds-portrait{animation:none!important;transform:none!important}
}

/* 2026-10-12: speech-only continuity. Two mouth crops dissolve rather than
   flashing different whole-face photos. Text mode stays completely still. */
#jonas-voice-stage .jds-mouth{
 clip-path:inset(53% 11% 24% 11%)!important;
 transition:opacity 130ms ease-in-out!important;
 will-change:opacity;
}
#jonas-voice-stage .jds-mouth-next{opacity:0}
#jonas-voice-stage .jds-eyes{
 clip-path:inset(27% 12% 55% 12%)!important;
 transition:opacity 160ms ease-in-out!important;
}
#jonas-voice-stage .jds-portrait{
 animation:none!important;
 transform:none;
}
#jonas-voice-stage[data-state="speaking"] .jds-portrait{
 animation:jds-speaking-breathe 4.1s ease-in-out infinite!important;
 transform-origin:center 68%;
}
@keyframes jds-speaking-breathe{
 0%,100%{transform:translate3d(0,.4px,0) scale(1)}
 42%{transform:translate3d(0,-1px,0) scale(1.006)}
 65%{transform:translate3d(0,-.3px,0) scale(1.003)}
}
@media(prefers-reduced-motion:reduce){
 #jonas-voice-stage .jds-portrait{animation:none!important;transform:none!important}
 #jonas-voice-stage .jds-mouth,#jonas-voice-stage .jds-eyes{transition:none!important}
}