/* Saif uses the same photographic portrait as the text assistant.
   Motion stays small so the face remains natural and readable. */
.cywolf-realtime .rv-avatar.rv-saif-stage {
  --voice-level: 0;
  --mic-level: 0;
  width: 220px;
  height: 225px;
  margin: 7px auto 1px;
  position: relative;
  isolation: isolate;
}
.cywolf-realtime .rv-saif-aura {
  position: absolute;
  inset: 7px 18px 28px;
  border-radius: 50%;
  border: 1px solid #cfe2f3;
  background: radial-gradient(circle at 50% 44%, #eaf6ff, #f8fbff 64%, transparent 72%);
  box-shadow: 0 12px 30px #1763b51a;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.cywolf-realtime .rv-saif-portrait {
  position: absolute;
  z-index: 2;
  left: 22px;
  top: 11px;
  width: 176px;
  height: 176px;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #edf5fa;
  box-shadow: 0 9px 22px #0f3d6830, 0 0 0 2px #d6e6f2;
  transform-origin: 50% 78%;
  animation: rv-saif-breathe 5.6s ease-in-out infinite;
}
.cywolf-realtime .rv-saif-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
  user-select: none;
}
.cywolf-realtime .rv-saif-shadow {
  position: absolute;
  left: 62px;
  right: 62px;
  bottom: 23px;
  height: 12px;
  border-radius: 50%;
  background: #1b5b9b24;
  filter: blur(8px);
  animation: rv-saif-shadow 5.6s ease-in-out infinite;
}
.cywolf-realtime .rv-saif-signal {
  position: absolute;
  z-index: 1;
  left: 13px;
  top: 2px;
  width: 194px;
  height: 194px;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
  pointer-events: none;
}
.cywolf-realtime .rv-saif-voice-bars {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 75px;
  height: 20px;
  transform: translateX(-50%);
  opacity: .42;
}
.cywolf-realtime .rv-saif-voice-bars i {
  display: block;
  width: 4px;
  height: 5px;
  border-radius: 5px;
  background: #1763f5;
}
.cywolf-realtime .rv-avatar[data-state="Listening"] .rv-saif-portrait {
  animation: rv-saif-listen 5.4s ease-in-out infinite;
}
.cywolf-realtime .rv-avatar[data-state="Listening"] .rv-saif-aura {
  border-color: #54bf9d;
  box-shadow: 0 0 calc(8px + var(--mic-level) * 28px) #39bd9266, 0 12px 30px #1763b51a;
}
.cywolf-realtime .rv-avatar[data-state="Listening"] .rv-saif-signal {
  border-color: #39bd92;
  animation: rv-saif-listen-ring 2.8s ease-out infinite;
}
.cywolf-realtime .rv-avatar[data-state="Listening"] .rv-saif-signal-two {
  animation-delay: 1.4s;
}
.cywolf-realtime .rv-avatar[data-state="Listening"] .rv-saif-voice-bars i {
  animation: rv-saif-listen-bars 1.4s ease-in-out infinite alternate;
}
.cywolf-realtime .rv-avatar[data-state="Thinking"] .rv-saif-portrait {
  animation: rv-saif-think 3.5s ease-in-out infinite;
}
.cywolf-realtime .rv-avatar[data-state="Thinking"] .rv-saif-aura {
  border-color: #dfba70;
  background: radial-gradient(circle at 50% 44%, #fff8e9, #fffdf8 64%, transparent 72%);
}
.cywolf-realtime .rv-avatar[data-state="Thinking"] .rv-saif-voice-bars i {
  background: #c89945;
  animation: rv-saif-think-bars 1.1s ease-in-out infinite;
}
.cywolf-realtime .rv-avatar[data-state="Speaking"] .rv-saif-portrait {
  animation: rv-saif-speak 3.1s ease-in-out infinite;
}
.cywolf-realtime .rv-avatar[data-state="Speaking"] .rv-saif-aura {
  border-color: #68a7ff;
  box-shadow: 0 0 calc(10px + var(--voice-level) * 24px) #2f83e351, 0 12px 30px #1763b51a;
}
.cywolf-realtime .rv-avatar[data-state="Speaking"] .rv-saif-voice-bars {
  opacity: 1;
}
.cywolf-realtime .rv-avatar[data-state="Speaking"] .rv-saif-voice-bars i {
  animation: rv-saif-speak-bars .65s ease-in-out infinite alternate;
}
.cywolf-realtime .rv-saif-voice-bars i:nth-child(2) { animation-delay: .12s !important; }
.cywolf-realtime .rv-saif-voice-bars i:nth-child(3) { animation-delay: .27s !important; }
.cywolf-realtime .rv-saif-voice-bars i:nth-child(4) { animation-delay: .08s !important; }
.cywolf-realtime .rv-saif-voice-bars i:nth-child(5) { animation-delay: .2s !important; }
.cywolf-realtime .rv-avatar[data-state="Paused"] .rv-saif-portrait,
.cywolf-realtime .rv-avatar[data-state="Conversation ended"] .rv-saif-portrait {
  opacity: .72;
  animation: none;
}
.cywolf-realtime .rv-avatar[data-state="Paused"] .rv-saif-voice-bars i,
.cywolf-realtime .rv-avatar[data-state="Conversation ended"] .rv-saif-voice-bars i {
  animation: none;
}
@keyframes rv-saif-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.012); }
}
@keyframes rv-saif-shadow {
  0%, 100% { opacity: .55; transform: scaleX(1); }
  50% { opacity: .35; transform: scaleX(.9); }
}
@keyframes rv-saif-listen {
  0%, 100% { transform: translateY(0) rotate(0); }
  28% { transform: translateY(-2px) rotate(1.5deg); }
  62% { transform: translateY(-1px) rotate(-1deg); }
}
@keyframes rv-saif-listen-ring {
  0% { opacity: .62; transform: scale(.91); }
  100% { opacity: 0; transform: scale(1.14); }
}
@keyframes rv-saif-listen-bars {
  to { height: 9px; }
}
@keyframes rv-saif-think {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  45% { transform: translateY(-2px) rotate(-3deg); }
  72% { transform: translateY(0) rotate(-1deg); }
}
@keyframes rv-saif-think-bars {
  50% { height: 13px; }
}
@keyframes rv-saif-speak {
  0%, 100% { transform: translateY(0) rotate(0); }
  19% { transform: translateY(-2px) rotate(.8deg); }
  42% { transform: translateY(0) rotate(-.7deg); }
  70% { transform: translateY(-1px) rotate(1deg); }
}
@keyframes rv-saif-speak-bars {
  to { height: 17px; }
}
@media (max-height: 800px) {
  .cywolf-realtime .rv-avatar.rv-saif-stage { height: 185px; margin-top: 0; }
  .cywolf-realtime .rv-saif-aura { inset: 4px 34px 19px; }
  .cywolf-realtime .rv-saif-portrait { left: 39px; top: 5px; width: 142px; height: 142px; }
  .cywolf-realtime .rv-saif-signal { left: 32px; top: -2px; width: 156px; height: 156px; }
  .cywolf-realtime .rv-saif-shadow { bottom: 14px; }
  .cywolf-realtime .rv-saif-voice-bars { bottom: 3px; }
}
@media (max-height: 600px) {
  .cywolf-realtime .rv-avatar.rv-saif-stage { height: 146px; }
  .cywolf-realtime .rv-saif-aura { inset: 2px 52px 15px; }
  .cywolf-realtime .rv-saif-portrait { left: 55px; top: 3px; width: 110px; height: 110px; }
  .cywolf-realtime .rv-saif-signal { left: 50px; top: -2px; width: 120px; height: 120px; }
  .cywolf-realtime .rv-saif-shadow { bottom: 10px; }
  .cywolf-realtime .rv-saif-voice-bars { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cywolf-realtime .rv-saif-stage * { animation: none !important; transition: none !important; }
}


/* Keep the live voice view consistent with the transparent Saif motion preview. */
.cywolf-realtime .rv-saif-aura,
.cywolf-realtime .rv-saif-signal,
.cywolf-realtime .rv-saif-shadow,
.cywolf-realtime .rv-saif-voice-bars{display:none!important}
.cywolf-realtime .rv-saif-portrait{
  left:0!important;top:0!important;width:220px!important;height:225px!important;
  overflow:visible!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}
.cywolf-realtime .rv-saif-portrait img{
  object-fit:contain!important;object-position:center bottom!important;transform:none!important;
}
@media (max-height:800px){
  .cywolf-realtime .rv-saif-portrait{left:20px!important;width:180px!important;height:185px!important}
}
@media (max-height:600px){
  .cywolf-realtime .rv-saif-portrait{left:37px!important;width:145px!important;height:150px!important}
}

/* Facial movement is rendered inside Saif's transparent portrait. */
.cywolf-realtime .rv-saif-portrait,
.cywolf-realtime .rv-avatar[data-state] .rv-saif-portrait{
  animation:none!important;transform:none!important;
}
.cywolf-realtime .rv-saif-portrait img{display:block;width:100%;height:100%;object-fit:contain}
.cywolf-realtime .rv-saif-portrait canvas{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:contain;opacity:0;pointer-events:none;
}
.cywolf-realtime .rv-saif-portrait canvas.is-ready{opacity:1}

/* Once the canvas has its first frame, remove the still image beneath it.
   Two differently fitted transparent portraits caused a second shoulder edge. */
.cywolf-realtime .rv-saif-portrait.is-animated img{opacity:0}