/* Digital Human — one canonical full-body frame at a time (must load last).
   No sprite sheets, no arm tubes, no clipped face or detached logo layers.
   Loading last gives this layer canonical ownership of AI presence geometry. */

body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:410px;
  padding-right:46%;
}

body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled:before,
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled:after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  animation:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  clip-path:none!important;
}

body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-motion{
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  inset:12px 12px auto auto!important;
  width:min(42%,280px)!important;
  height:auto!important;
  aspect-ratio:3/4!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:22px!important;
  background:transparent!important;
  box-shadow:none!important;
  contain:layout paint;
  pointer-events:none!important;
}

body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-visual-hidden .sylora-avatar-motion,
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-visual-hidden .ai-human-presence{
  display:none!important;
}

/* One complete body plate owns the character and garment artwork. */
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-frame{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  object-fit:cover!important;
  object-position:center top!important;
  background:none!important;
  pointer-events:none!important;
  user-select:none;
  -webkit-user-drag:none;
  image-rendering:auto;
  backface-visibility:hidden;
}

body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-body{
  z-index:1!important;
  opacity:1!important;
  transform:translate3d(0,var(--body-y,0px),0) rotate(var(--body-rot,0deg)) scale(var(--body-scale,1));
  transform-origin:50% 74%;
  will-change:transform;
}

/* A legacy second body layer would recreate logo/silhouette ghosting. */
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-gesture{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:none!important;
}

/* Legacy collage layers must never paint, even if old JS mounts them. */
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-rig-arm,
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-head,
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-hair,
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-eyes,
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-blink,
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-motion>i{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .ai-human-presence{
  z-index:3;
  right:18px;
  top:auto!important;
  bottom:18px!important;
  width:min(34%,210px);
  background:rgba(255,252,249,.78);
}

body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live{
  min-height:420px;
}
body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live .realtime-call-deck{
  z-index:4;
}

/* Tablet: keep portrait readable without crowding the copy column. */
@media(max-width:980px) and (min-width:721px){
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled{
    min-height:372px;
    padding-right:42%;
  }
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-motion{
    width:min(38%,250px)!important;
    inset:14px 14px auto auto!important;
  }
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .ai-human-presence{
    width:min(36%,200px);
  }
}

@media(max-width:720px){
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled{
    min-height:clamp(680px,180vw,720px)!important;
    padding:64px 20px 390px!important;
  }
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-motion{
    inset:auto auto 92px 50%!important;
    left:50%!important;
    right:auto!important;
    width:min(66vw,258px)!important;
    transform:translateX(-50%);
  }
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .ai-human-presence{
    right:20px;
    top:auto!important;
    bottom:104px!important;
    width:min(48%,184px);
  }
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.sylora-visual-hidden{
    min-height:300px!important;
    padding:64px 20px 24px!important;
  }
  /* LIVE: full coherent body above a compact control strip — never cut through the torso. */
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live{
    min-height:74vh!important;
    padding:16px 12px 156px!important;
  }
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live>.eyebrow,
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live>h1,
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live>p,
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live>.scene-readout,
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live .ai-human-presence{
    display:none!important;
  }
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live .sylora-avatar-motion{
    inset:12px 12px 148px 12px!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    max-height:calc(74vh - 180px)!important;
    margin:0 auto!important;
    transform:none!important;
  }
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live .realtime-call-deck{
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    top:auto!important;
    width:auto!important;
    z-index:5!important;
    padding:10px 12px!important;
  }
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled.realtime-live .realtime-call-deck p{
    display:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-view="ai"] #app>.hero.sylora-ai-hero.sylora-assembled .sylora-avatar-body{
    transform:none!important;
  }
}