/* MAS Academy · Courses prototype — «MASha» and «ToMAS», the learning coach avatars (avatar.js, 2026-10-19).
   The stage covers most of the screen over the paused lesson: MASha in a video-call tile on the left (office
   backdrop, «Live», live captions, name tag), the question and the conversation on the right, the controls at
   the bottom; or the same tile alone in a floating picture-in-picture window. It is Daintree in both views (like
   the lesson check over the video), so it needs no dark-view overrides. The dock waits in the lesson's corner. */

.av-stage{position:fixed;inset:0;z-index:620;display:grid;place-items:center;padding:clamp(0px,2vmin,1.5rem)}
.av-stage[hidden]{display:none}
.av-scrim{position:absolute;inset:0;background:rgba(15,37,51,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.av-frame{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;inline-size:min(100%,96rem);block-size:min(100%,62rem);overflow:hidden;border-radius:var(--mas-radius-overlay);color:#FBFCFD;font-family:var(--mas-font-ui);
  background:radial-gradient(110% 95% at 28% 42%,color-mix(in oklab,#516F8D 62%,#0F2533) 0,#0F2533 64%);box-shadow:0 0 0 1px rgba(182,227,232,.14),0 40px 90px -30px rgba(0,0,0,.75);animation:av-in .32s var(--mas-damped)}
@keyframes av-in{from{opacity:0;transform:translateY(10px) scale(.985)}}
.av-frame :focus-visible{outline:2px solid #B6E3E8;outline-offset:2px}

/* Top: who, where, language, close */
.av-top{display:flex;align-items:center;gap:var(--mas-space-4);padding:var(--mas-space-3) var(--mas-space-4) var(--mas-space-3) var(--mas-space-6);border-block-end:1px solid rgba(182,227,232,.12)}
.av-id{display:grid;line-height:1.15}
.av-id b{font:800 1.25rem/1.1 var(--mas-font-brand);letter-spacing:-.01em}
.av-id small{color:#B6E3E8;font-size:var(--mas-text-meta);font-weight:600}
.av-where{flex:1;min-inline-size:0;margin:0;overflow:hidden;color:color-mix(in oklab,#FBFCFD 68%,#516F8D);font-size:var(--mas-text-2);white-space:nowrap;text-overflow:ellipsis}
.av-lang{display:inline-flex;gap:2px;padding:3px;border-radius:var(--mas-radius-pill);background:rgba(182,227,232,.1);box-shadow:inset 0 0 0 1px rgba(182,227,232,.18)}
.av-lang button{display:grid;justify-items:center;min-inline-size:4.75rem;padding:.3rem .75rem;border:0;border-radius:var(--mas-radius-pill);background:transparent;color:#FBFCFD;font:inherit;line-height:1.1;cursor:pointer;transition:background-color var(--mas-micro) var(--mas-ease),color var(--mas-micro) var(--mas-ease)}
.av-lang button b{font-size:var(--mas-text);font-weight:800;letter-spacing:.04em}
.av-lang button small{font-size:var(--mas-text-micro);opacity:.75}
.av-lang button:hover{background:rgba(182,227,232,.12)}
.av-lang button[aria-checked=true]{background:#B6E3E8;color:#0F2533}
/* MASha / ToMAS */
.av-who{display:inline-flex;gap:2px;padding:3px;border-radius:var(--mas-radius-pill);background:rgba(182,227,232,.1);box-shadow:inset 0 0 0 1px rgba(182,227,232,.18)}
.av-who button{display:flex;align-items:center;gap:.4rem;padding:.2rem .7rem .2rem .2rem;border:0;border-radius:var(--mas-radius-pill);background:transparent;color:#FBFCFD;font:inherit;font-size:var(--mas-text-2);cursor:pointer;transition:background-color var(--mas-micro) var(--mas-ease),color var(--mas-micro) var(--mas-ease)}
.av-who button b{font:800 var(--mas-text-2)/1 var(--mas-font-brand)}
.av-who button:hover{background:rgba(182,227,232,.12)}
.av-who button[aria-checked=true]{background:#B6E3E8;color:#0F2533}
.av-who-face{display:block;inline-size:1.75rem;block-size:1.75rem;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 35%,#F4ECE0,#CBB597)}
.av-who-face .av-svg{display:block;inline-size:100%;block-size:100%}
.av-x{display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;padding:0;border:0;border-radius:50%;background:rgba(182,227,232,.1);color:#FBFCFD;cursor:pointer}
.av-x:hover{background:rgba(182,227,232,.2)}

/* Body: MASha's video tile takes the larger side */
.av-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(21rem,1fr);min-block-size:0}
.av-figure{min-block-size:0;padding:var(--mas-space-5) 0 var(--mas-space-5) var(--mas-space-5)}
.av-video{position:relative;block-size:100%;overflow:hidden;border-radius:var(--mas-radius-overlay);background:#CBB597;box-shadow:0 0 0 1px rgba(182,227,232,.18),0 24px 50px -24px rgba(0,0,0,.7)}
.av-video>.av-bg,.av-video>.av-svg{position:absolute;inset:0;display:block;inline-size:100%;block-size:100%}
.av-mini{display:block;inline-size:100%;block-size:100%}
/* Over the video: «Live» and the status at the top, captions and the name tag at the bottom */
.av-live,.av-status,.av-tag,.av-cc{position:absolute;z-index:1;margin:0;color:#FBFCFD;background:rgba(15,37,51,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.av-live{inset-block-start:var(--mas-space-4);inset-inline-start:var(--mas-space-4);display:flex;align-items:center;gap:.45rem;padding:.3rem .7rem;border-radius:var(--mas-radius-pill);font-size:var(--mas-text-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.av-live i{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:#FF4D63;box-shadow:0 0 0 0 rgba(255,77,99,.6);animation:av-live 1.6s ease-out infinite}
@keyframes av-live{70%{box-shadow:0 0 0 7px rgba(255,77,99,0)}100%{box-shadow:0 0 0 0 rgba(255,77,99,0)}}
.av-status{inset-block-start:var(--mas-space-4);inset-inline-end:var(--mas-space-4);display:flex;align-items:center;gap:.5rem;padding:.35rem .8rem;border-radius:var(--mas-radius-pill);font-size:var(--mas-text-2);font-weight:600;white-space:nowrap}
.av-tag{inset-block-end:var(--mas-space-4);inset-inline-start:var(--mas-space-4);display:grid;padding:.4rem .8rem;border-radius:var(--mas-radius-control);line-height:1.25}
.av-tag b{font:800 1rem/1.15 var(--mas-font-brand)}
.av-tag span{color:#B6E3E8;font-size:var(--mas-text-micro);font-weight:600}
.av-cc{inset-block-end:4.5rem;inset-inline-start:50%;translate:-50% 0;inline-size:max-content;max-inline-size:min(86%,40rem);padding:.45rem .9rem;border-radius:var(--mas-radius-control);background:rgba(15,37,51,.8);font-size:1.0625rem;font-weight:500;line-height:1.4;text-align:center;text-wrap:balance}
.av-cc[hidden]{display:none}
/* Realistic video avatar (avatar-real.js): the video takes the drawing's place */
.av-real-slot{position:absolute;inset:0;display:none}
.av-real{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 20%}
.av-video[data-real=on] .av-real-slot{display:block}
.av-video[data-real=on]>.av-svg{visibility:hidden}
.av-video[data-real=loading]>.av-svg{animation:av-wait 1.4s ease-in-out infinite}
@keyframes av-wait{50%{opacity:.55}}
.av-wave{display:inline-flex;align-items:center;gap:2px;block-size:14px}
.av-wave i{inline-size:3px;block-size:30%;border-radius:2px;background:#B6E3E8}
.av-video[data-mode=listening] .av-wave i{background:#DF1833;animation:av-wave .9s ease-in-out infinite alternate}
.av-video[data-mode=speaking] .av-wave i{animation:av-wave .6s ease-in-out infinite alternate}
.av-video[data-mode=thinking] .av-wave i{animation:av-dot 1s ease-in-out infinite}
.av-wave i:nth-child(2){animation-delay:.15s!important}.av-wave i:nth-child(3){animation-delay:.3s!important}.av-wave i:nth-child(4){animation-delay:.45s!important}
@keyframes av-wave{to{block-size:100%}}
@keyframes av-dot{50%{opacity:.25}}

/* Panel: the question and the conversation */
.av-panel{display:flex;flex-direction:column;gap:var(--mas-space-4);min-block-size:0;overflow:auto;padding:var(--mas-space-8) var(--mas-space-6) var(--mas-space-5) var(--mas-space-4)}
.av-kicker{display:flex;align-items:center;gap:var(--mas-space-3);margin:0;color:#B6E3E8;font-size:var(--mas-text-meta);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.av-dots{display:inline-flex;gap:5px}
.av-dots i{inline-size:.5rem;block-size:.5rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px #B6E3E8}
.av-dots i[data-on=true]{background:#B6E3E8}
.av-q{margin:0;font:700 clamp(1.25rem,1.1rem + .9vw,1.875rem)/1.25 var(--mas-font-brand);letter-spacing:-.015em;text-wrap:balance}
.av-sub{margin:0;color:color-mix(in oklab,#FBFCFD 78%,#516F8D);font-size:1rem;line-height:1.5}
.av-opts{display:grid;gap:var(--mas-space-3)}
.av-opts:empty{display:none}
.av-opt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--mas-space-3);min-block-size:3.5rem;padding:var(--mas-space-3) var(--mas-space-4);border:1.5px solid rgba(182,227,232,.32);border-radius:var(--mas-radius-object);background:rgba(182,227,232,.06);color:#FBFCFD;font:inherit;font-size:1rem;line-height:1.4;text-align:start;cursor:pointer;transition:background-color var(--mas-micro) var(--mas-ease),border-color var(--mas-micro) var(--mas-ease),transform var(--mas-micro) var(--mas-ease)}
.av-opt b{display:grid;place-items:center;inline-size:2.125rem;block-size:2.125rem;border-radius:50%;background:rgba(182,227,232,.16);color:#B6E3E8;font:800 1rem/1 var(--mas-font-brand)}
.av-opt:hover{border-color:#B6E3E8;background:rgba(182,227,232,.12)}
.av-opt[data-state=right]{border-color:#7FD6A0;background:rgba(127,214,160,.16)}
.av-opt[data-state=right] b{background:#7FD6A0;color:#0F2533}
.av-opt[data-state=wrong]{border-color:#FF8A98;background:rgba(223,24,51,.18);animation:av-nudge .4s var(--mas-ease)}
.av-opt[data-state=wrong] b{background:#DF1833;color:#FBFCFD}
.av-opt[data-state=out]{opacity:.45}
.av-opt[data-state=out] span{text-decoration:line-through}
@keyframes av-nudge{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.av-actions{display:flex;flex-wrap:wrap;gap:var(--mas-space-3)}
.av-actions:empty{display:none}
.av-actions .mas-btn{min-block-size:3rem;padding-inline:var(--mas-space-5);font-size:var(--mas-text)}
.av-actions .mas-btn:not(.mas-btn-primary){border-color:rgba(182,227,232,.4);background:transparent;color:#FBFCFD}
.av-actions .mas-btn:not(.mas-btn-primary):hover{background:rgba(182,227,232,.12)}
.av-heard{margin:0;padding-inline-start:var(--mas-space-3);border-inline-start:3px solid #DF1833;color:#FBFCFD;font-size:1rem;font-style:italic}
.av-heard::before{content:attr(data-label);display:block;color:color-mix(in oklab,#FBFCFD 62%,#516F8D);font-size:var(--mas-text-meta);font-style:normal;font-weight:600}
.av-heard[data-interim=true]{opacity:.7}
.av-type{display:flex;gap:var(--mas-space-2);margin-block-start:auto}
.av-type[hidden]{display:none}
.av-type .mas-input{flex:1;min-inline-size:0;border-color:rgba(182,227,232,.35);background:rgba(15,37,51,.5);color:#FBFCFD}
.av-type .mas-input::placeholder{color:color-mix(in oklab,#FBFCFD 55%,#516F8D)}
.av-type .mas-btn{border-color:rgba(182,227,232,.4);background:transparent;color:#FBFCFD}

/* Bottom bar: mic first */
.av-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-2) var(--mas-space-3);padding:var(--mas-space-3) var(--mas-space-6);border-block-start:1px solid rgba(182,227,232,.12);background:rgba(15,37,51,.35)}
.av-mic{position:relative;display:grid;place-items:center;inline-size:3.75rem;block-size:3.75rem;margin-inline-end:var(--mas-space-2);border:0;border-radius:50%;background:#DF1833;color:#FBFCFD;cursor:pointer;box-shadow:0 10px 24px -10px rgba(223,24,51,.8);transition:transform .2s var(--mas-damped),background-color var(--mas-micro) var(--mas-ease)}
.av-mic .mas-ic{inline-size:1.625rem;block-size:1.625rem}
.av-mic:hover{transform:translateY(-1px);background:#BD142B}
.av-mic[aria-pressed=true]::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #FF8A98;animation:ring 1.2s var(--mas-ease) infinite}
.av-tool{display:inline-flex;align-items:center;gap:.4rem;min-block-size:2.5rem;padding:0 .875rem;border:1px solid rgba(182,227,232,.28);border-radius:var(--mas-radius-pill);background:transparent;color:#FBFCFD;font:inherit;font-size:var(--mas-text-2);font-weight:600;cursor:pointer}
.av-tool:hover{background:rgba(182,227,232,.12)}
.av-tool[aria-checked=false]{color:color-mix(in oklab,#FBFCFD 60%,#516F8D)}
.av-sw{position:relative;inline-size:1.875rem;block-size:1.125rem;border-radius:var(--mas-radius-pill);background:rgba(182,227,232,.25);transition:background-color var(--mas-micro) var(--mas-ease)}
.av-sw::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;inline-size:.875rem;block-size:.875rem;border-radius:50%;background:#FBFCFD;transition:transform var(--mas-micro) var(--mas-ease)}
.av-tool[aria-checked=true] .av-sw{background:#7FD6A0}
.av-tool[aria-checked=true] .av-sw::after{transform:translateX(.75rem)}
.av-voice{flex:1 1 14rem;min-inline-size:0;color:color-mix(in oklab,#FBFCFD 58%,#516F8D);font-size:var(--mas-text-meta);text-align:end}

/* Confetti when an answer is right */
.av-confetti{position:absolute;inset-block-start:40%;inset-inline-start:50%;pointer-events:none}
.av-confetti i{position:absolute;inline-size:8px;block-size:13px;border-radius:2px;background:var(--c);animation:av-pop var(--d) cubic-bezier(.15,.6,.35,1) forwards}
@keyframes av-pop{0%{opacity:1;transform:translate(0,0) rotate(0)}55%{opacity:1;transform:translate(calc(var(--dx) * .8),var(--dy)) rotate(calc(var(--r) * .6))}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 240px)) rotate(var(--r))}}

/* The lesson behind stays as it is; the mic and the dock step aside */
body[data-avatar=open]{overflow:hidden}
body[data-avatar=open] :is(.mic-fab,.av-dock-wrap){visibility:hidden}
body[data-avatar-pip=on] .av-dock-wrap{display:none}

/* Picture-in-picture: the tile alone, with a slim bar. In a Document Picture-in-Picture window it fills the window;
   elsewhere it floats over the lesson as a card that can be dragged by its video. */
.av-pip{display:grid;grid-template-rows:minmax(0,1fr) auto;color:#FBFCFD;font-family:var(--mas-font-ui);background:#0F2533}
.av-pip-tile{position:relative;min-block-size:0;touch-action:none}
.av-pip .av-video{border-radius:0;box-shadow:none}
.av-pip .av-live,.av-pip .av-status{inset-block-start:.5rem;padding:.2rem .55rem;font-size:var(--mas-text-micro)}
.av-pip .av-live{inset-inline-start:.5rem}
.av-pip .av-status{inset-inline-end:.5rem}
.av-pip .av-tag{display:none}
.av-pip .av-cc{inset-block-end:.6rem;max-inline-size:94%;padding:.35rem .6rem;font-size:var(--mas-text-2)}
.av-pip-bar{display:flex;align-items:center;gap:.4rem;padding:.45rem .6rem;border-block-start:1px solid rgba(182,227,232,.14)}
.av-pip-bar .av-mic{inline-size:2.75rem;block-size:2.75rem;margin:0}
.av-pip-bar .av-mic .mas-ic{inline-size:1.25rem;block-size:1.25rem}
.av-pip-name{flex:1;min-inline-size:0;font:800 var(--mas-text)/1 var(--mas-font-brand)}
.av-pip-bar .av-tool{inline-size:2.25rem;block-size:2.25rem;min-block-size:0;padding:0;justify-content:center}
.av-pip-float{position:fixed;inset-inline-end:max(var(--mas-space-6),env(safe-area-inset-right));inset-block-end:calc(max(var(--mas-space-6),env(safe-area-inset-bottom)) + 4.25rem);z-index:calc(var(--mas-z-overlay) + 5);inline-size:min(20rem,calc(100vw - 2rem));block-size:min(25rem,60dvh);overflow:hidden;border-radius:var(--mas-radius-overlay);box-shadow:0 0 0 1px rgba(182,227,232,.2),0 24px 60px -20px rgba(15,37,51,.75);animation:av-in .28s var(--mas-damped)}
.av-pip-float .av-pip-tile{cursor:grab}
.av-pip-doc{margin:0;block-size:100vh;overflow:hidden;background:#0F2533}
.av-pip-doc .av-pip{block-size:100%}

/* Dock: MASha waits in the lesson's corner, next to the voice-command mic */
.av-dock-wrap{position:fixed;inset-inline-end:calc(max(var(--mas-space-6),env(safe-area-inset-right)) + 3.5rem + var(--mas-space-3));inset-block-end:max(var(--mas-space-6),env(safe-area-inset-bottom));z-index:var(--mas-z-overlay);display:grid;justify-items:end}
body:not([data-view=lesson]) .av-dock-wrap,.av-dock-wrap[hidden]{display:none}
.av-dock{display:flex;align-items:center;gap:.625rem;block-size:3.5rem;padding:.25rem 1rem .25rem .25rem;border:0;border-radius:var(--mas-radius-pill);background:#0F2533;color:#FBFCFD;font:inherit;text-align:start;cursor:pointer;box-shadow:var(--mas-shadow-soft);transition:transform .2s var(--mas-damped)}
.av-dock:hover{transform:translateY(-1px)}
.av-dock-face{display:block;inline-size:3rem;block-size:3rem;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 35%,#F4ECE0,#CBB597)}
.av-dock-face .av-svg{animation:av-bob 3.2s ease-in-out infinite}
.av-dock-txt{display:grid;line-height:1.2}
.av-dock-txt b{font:800 var(--mas-text)/1.1 var(--mas-font-brand)}
.av-dock-txt small{max-inline-size:11rem;overflow:hidden;color:#B6E3E8;font-size:var(--mas-text-micro);white-space:nowrap;text-overflow:ellipsis}
.av-mini .av-lid{animation:av-blink 4.6s infinite}
.av-mini .av-lash{animation:av-blink-lash 4.6s infinite}
@keyframes av-blink{0%,93%,100%{transform:none}96%{transform:translateY(21px)}}
@keyframes av-blink-lash{0%,93%,100%{transform:none}96%{transform:translateY(11px) scaleY(-.5)}}
@keyframes av-bob{50%{transform:translateY(1.5px) rotate(-1.5deg)}}
.av-bubble{position:relative;max-inline-size:17rem;margin:0 0 var(--mas-space-3);padding:var(--mas-space-3) var(--mas-space-4);border-radius:var(--mas-radius-object);background:#FBFCFD;color:#0F2533;font-size:var(--mas-text-2);line-height:1.45;box-shadow:0 0 0 1px var(--mas-line),0 14px 30px -14px rgba(15,37,51,.5);cursor:pointer;animation:rise .3s var(--mas-damped)}
.av-bubble::after{content:"";position:absolute;inset-block-end:-6px;inset-inline-end:2.25rem;inline-size:12px;block-size:12px;background:inherit;transform:rotate(45deg)}
.av-bubble[hidden]{display:none}

/* Phone and narrow windows: the stage is the whole screen, MASha on top */
@media (max-width:56rem){
  .av-stage{padding:0}
  .av-frame{block-size:100%;border-radius:0}
  .av-body{grid-template-columns:1fr;grid-template-rows:minmax(13rem,44dvh) minmax(0,1fr)}
  .av-figure{padding:var(--mas-space-3) var(--mas-space-3) 0}
  .av-cc{inset-block-end:3.75rem;max-inline-size:92%;font-size:var(--mas-text)}
  .av-tag{inset-block-end:var(--mas-space-3);inset-inline-start:var(--mas-space-3)}
  .av-live{inset-block-start:var(--mas-space-3);inset-inline-start:var(--mas-space-3)}
  .av-status{inset-block-start:var(--mas-space-3);inset-inline-end:var(--mas-space-3);font-size:var(--mas-text-meta)}
  .av-panel{padding:var(--mas-space-4) var(--mas-space-4) var(--mas-space-3)}
  .av-top{gap:var(--mas-space-3);padding-inline:var(--mas-space-4) var(--mas-space-3)}
  .av-where{display:none}
  .av-who button{padding:.2rem}
  .av-who button b{display:none}
  .av-id{margin-inline-end:auto}
  .av-bar{padding:var(--mas-space-2) var(--mas-space-4)}
  .av-tool span{display:none}
  .av-tool{padding:0 .75rem}
  .av-voice{display:none}
}
@media (max-width:47.5rem){
  .av-dock-wrap{inset-inline-end:calc(max(var(--mas-space-6),env(safe-area-inset-right)) + 3.25rem + var(--mas-space-2))}
  .av-dock{block-size:3.25rem}
  .av-dock-txt{display:none}
  .av-dock{padding:.25rem}
}
@media (prefers-reduced-motion:reduce){
  .av-frame,.av-bubble,.av-opt[data-state=wrong],.av-dock-face .av-svg,.av-mini .av-lid,.av-mini .av-lash,.av-live i{animation:none}
  .av-frame .av-wave i,.av-mic[aria-pressed=true]::after{animation:none!important}
}