/* EDUVILO_SOPHIE_VIDEO_V2 — full source frame, no zoom/crop or artificial motion. */
.sophie-video-layer.sophie-standing-img {
  position: relative !important; display: inline-block !important;
  width: auto !important; height: 100% !important; aspect-ratio: 9 / 16;
  min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important;
  box-sizing: border-box !important; padding: 6px !important; margin: 0 !important;
  overflow: visible !important; transform: none !important; animation: none !important;
  clip-path: none !important; border-radius: 0 !important;
}
.sophie-video-layer > .sophie-speaking-video,
.sophie-video-layer > .sophie-video-idle {
  position: absolute !important; inset: 6px !important;
  width: calc(100% - 12px) !important; height: calc(100% - 12px) !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
  object-fit: contain !important; object-position: center center !important;
  display: block !important; margin: 0 !important; padding: 0 !important;
  transform: none !important; animation: none !important; clip-path: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.sophie-video-layer > .sophie-speaking-video { visibility: hidden !important; }
.sophie-video-layer.sophie-video-playing > .sophie-speaking-video { visibility: visible !important; }
.sophie-video-layer.sophie-video-playing > .sophie-video-idle { visibility: hidden !important; }
#sophie-mascot[data-sophie-video] {
  position: fixed !important; top: auto !important; left: auto !important;
  bottom: var(--sophie-video-bottom, 18px) !important; right: var(--sophie-video-right, 14px) !important;
  height: var(--sophie-video-height, 34vh) !important; width: var(--sophie-video-width, 19.125vh) !important;
  min-height: 0 !important; min-width: 0 !important; max-width: none !important; max-height: none !important;
  visibility: var(--sophie-video-visibility, hidden) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; margin: 0 !important; overflow: visible !important;
  transform: none !important; animation: none !important; transition: none !important;
}
#sophie-mascot[data-sophie-video] .sophie-video-layer {
  width: 100% !important; height: 100% !important; max-width: 100% !important;
}
/* Retain the existing deliberate mobile quiz visibility rule. */
body.quiz-mobile-active #sophie-mascot[data-sophie-video] { display: none !important; }

/* Dashboard figures occupy their own space instead of covering the cards. */
body:has(.experience-dashboard) #sophie-mascot[data-sophie-video] { display: none !important; }
.experience-dashboard .experience-sophie {
  display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(100px, 10vw, 156px) !important;
  gap: 20px !important; align-items: center !important; overflow: hidden !important;
}
.experience-dashboard .sophie-dashboard-copy { min-width: 0; position: relative; z-index: 1; }
.experience-dashboard .sophie-dashboard-copy h3,
.experience-dashboard .sophie-dashboard-copy p { max-width: none; overflow-wrap: anywhere; }
.experience-dashboard .sophie-dashboard-copy .btn { max-width: 100%; white-space: normal; }
.experience-dashboard .sophie-dashboard-stage {
  position: relative; width: 100%; aspect-ratio: 9 / 16; align-self: center;
  border-radius: 18px; background: #fff; overflow: hidden; z-index: 1;
}
.experience-dashboard .sophie-dashboard-stage .sophie-video-layer {
  width: 100% !important; height: 100% !important;
}
.experience-dashboard .experience-hero-art {
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-width: 0 !important; min-height: 300px !important;
}
.experience-dashboard .experience-hero-art > img.sophie-dashboard-hero {
  position: relative !important; inset: auto !important; width: auto !important;
  height: 280px !important; max-width: 100% !important; max-height: none !important;
  box-sizing: border-box !important; padding: 8px !important; margin: 0 !important;
  object-fit: contain !important; object-position: center !important;
  background: #fff; border-radius: 18px; transform: none !important;
  animation: none !important; clip-path: none !important; filter: none !important;
}
@media (max-width: 1100px) {
  .experience-dashboard .experience-today-grid { grid-template-columns: 1fr !important; }
  .experience-dashboard .experience-sophie { grid-template-columns: minmax(0, 1fr) 140px !important; }
}
@media (max-width: 750px) {
  .experience-dashboard .experience-hero { grid-template-columns: minmax(0, 1fr) 150px !important; gap: 14px; }
  .experience-dashboard .experience-hero-art { min-height: 240px !important; }
  .experience-dashboard .experience-hero-art > img.sophie-dashboard-hero { height: 230px !important; }
  .experience-dashboard .experience-float { display: none; }
}
@media (max-width: 500px) {
  .experience-dashboard .experience-hero { grid-template-columns: 1fr !important; }
  .experience-dashboard .experience-hero-art { min-height: 220px !important; }
  .experience-dashboard .experience-hero-art > img.sophie-dashboard-hero { height: 220px !important; }
  .experience-dashboard .experience-sophie { grid-template-columns: 1fr !important; gap: 18px !important; }
  .experience-dashboard .sophie-dashboard-stage { width: 135px; justify-self: center; }
}

/* Both video and idle are rendered with a transparent outer background. */
.experience-dashboard .sophie-dashboard-stage,
.experience-dashboard .experience-hero-art > img.sophie-dashboard-hero { background: transparent !important; border-radius: 0 !important; }
.sophie-cutout-canvas { pointer-events: none; }
.sophie-video-layer > .sophie-cutout-canvas {
  position: absolute !important; inset: 6px !important; z-index: 3;
  width: calc(100% - 12px) !important; height: calc(100% - 12px) !important;
  object-fit: contain !important; object-position: center !important;
}
.sophie-video-layer.sophie-cutout-ready > img,
.sophie-video-layer.sophie-cutout-ready > video { opacity: 0 !important; }
.experience-hero-art > .sophie-cutout-canvas {
  position: absolute; height: 280px; width: 157.5px; max-width: 100%;
  padding: 8px; box-sizing: border-box; object-fit: contain; z-index: 3;
}
.experience-hero-art.sophie-cutout-ready > img.sophie-dashboard-hero { opacity: 0 !important; }
@media(max-width:750px) { .experience-hero-art > .sophie-cutout-canvas { height:230px; width:129.375px; } }
@media(max-width:500px) { .experience-hero-art > .sophie-cutout-canvas { height:220px; width:123.75px; } }

/* Restore mouse/touch access after legacy selection styles disabled it. */
#sophie-mascot[data-sophie-video] { pointer-events:auto !important; cursor:pointer !important; }
#sophie-mascot[data-sophie-video]:focus-visible { outline:3px solid #08787d; outline-offset:4px; border-radius:12px; }
#sophie-mascot[data-sophie-video] > .sophie-video-layer { pointer-events:none !important; }
.sophie-video-layer > .sophie-cutout-canvas { visibility:hidden; }
.sophie-video-layer.sophie-cutout-ready > .sophie-cutout-canvas { visibility:visible; }

/* Keep the closed greeting attached to the visible Sophie's mouth. */
#helper.sophie-mouth-bubble {
  position:fixed !important; left:var(--sophie-bubble-left) !important; top:var(--sophie-bubble-top) !important;
  right:auto !important; bottom:auto !important; width:var(--sophie-bubble-width) !important;
  max-width:calc(100vw - 24px) !important; transform:none !important; overflow:visible !important;
  gap:0 !important; z-index:10000 !important;
}
#helper.sophie-mouth-bubble .helper-bubble { display:block !important; width:100%; max-width:none; box-sizing:border-box; margin:0 !important; animation:none !important; }
#helper.sophie-mouth-bubble .helper-btn { display:none !important; }
#helper.sophie-bubble-offscreen:has(.helper-bubble) { visibility:hidden !important; pointer-events:none !important; }
#helper .sophie-bubble-connector { position:fixed; top:0; left:0; pointer-events:none; overflow:visible; z-index:-1; }
.sophie-dashboard-stage[role="button"] { cursor:pointer; }
.sophie-dashboard-stage[role="button"]:focus-visible { outline:3px solid #08787d; outline-offset:4px; }
.sophie-cutout-canvas { mix-blend-mode:normal !important; opacity:1 !important; }

/* An open chat always has a visible position, even with the floating avatar hidden. */
body #helper.sophie-chat-open {
  position:fixed !important; left:var(--sophie-chat-left, 12px) !important; top:var(--sophie-chat-top, 12px) !important;
  right:auto !important; bottom:auto !important; width:var(--sophie-chat-width, 380px) !important;
  height:var(--sophie-chat-height, 620px) !important; max-width:none !important; max-height:none !important;
  display:flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important;
  transform:none !important; transition:none !important; z-index:10020 !important;
  align-items:stretch !important; margin:0 !important; gap:0 !important;
}
body #helper.sophie-chat-open .helper-panel {
  width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important;
  min-width:0 !important; min-height:0 !important; box-sizing:border-box !important;
  display:flex !important; visibility:visible !important; opacity:1 !important; flex-direction:column !important;
  transform:none !important; animation:none !important;
}
body #helper.sophie-chat-open .helper-body { flex:1 1 auto !important; min-height:0 !important; max-height:none !important; overflow:auto !important; }
body #helper.sophie-chat-open .helper-input { display:flex !important; visibility:visible !important; flex:0 0 auto !important; }
body #helper.sophie-chat-open .helper-input input { min-width:0 !important; flex:1 1 auto; }
body #helper.sophie-chat-open .bubble-tail,
body #helper.sophie-chat-open .bubble-tail-b { display:none !important; }

body #helper.sophie-chat-open .helper-input input { width:auto !important; max-width:none !important; box-sizing:border-box; }
body #helper.sophie-chat-open .helper-input > button { width:48px !important; min-width:48px !important; max-width:48px !important; flex:0 0 48px !important; padding:0 !important; }

/* Hide the entire hit box, including children with explicit visibility. */
#sophie-mascot[data-sophie-video][data-sophie-controls-blocked="true"] { display:none !important; pointer-events:none !important; }