/* Знайка — «живая» Мила: говорящий рот, моргание, кнопки озвучки */

/* Слой поверх картинки с Милой. Координаты лица задаются переменными в % от картинки. */
.mila-face { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mila-face i { position: absolute; display: block; }
.mf-cover {
  left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--face, #0b1532) 72%, rgba(11, 21, 50, 0) 100%);
  opacity: 0; transition: opacity .12s ease;
}
.mf-mouth {
  left: calc(var(--mx) + var(--mw) * .16); top: calc(var(--my) + var(--mh) * .2);
  width: calc(var(--mw) * .68); height: calc(var(--mh) * .62);
  opacity: 0; transition: opacity .12s ease;
}
.mf-mouth svg { width: 100%; height: 100%; display: block; transform-origin: 50% 12%; transform: scaleY(.22); }
.speaking .mf-cover, .speaking .mf-mouth { opacity: 1; }
.speaking .mf-mouth svg { animation: milaMouth .42s steps(1, end) infinite; }
/* живой голос: рот открывается по громкости звука (--open задаёт скрипт) */
.live .mf-mouth svg, .speaking.live .mf-mouth svg { animation: none !important; transform: scaleY(var(--open, .3)); transition: transform 70ms linear; }
@keyframes milaMouth {
  0%   { transform: scaleY(.95); }
  18%  { transform: scaleY(.35); }
  34%  { transform: scaleY(.8); }
  52%  { transform: scaleY(.25); }
  68%  { transform: scaleY(1); }
  84%  { transform: scaleY(.5); }
}
/* веки: короткое моргание раз в несколько секунд */
.mf-eye {
  left: var(--ex); top: var(--ey); width: var(--ew); height: var(--eh);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--face, #0b1532) 0 55%, #1d2a5a 100%);
  transform: scaleY(0); transform-origin: 50% 0;
  animation: milaBlink 5.2s ease-in-out infinite;
}
.mf-eye.r { left: var(--ex2); top: var(--ey2); width: var(--ew2); height: var(--eh2); }
@keyframes milaBlink { 0%, 91%, 100% { transform: scaleY(0); } 94% { transform: scaleY(1.05); } 97% { transform: scaleY(0); } }

/* Мила в заданиях: картинка + лицо двигаются вместе */
.mila .mila-body { position: relative; display: block; transform-origin: 50% 90%; animation: milaIdle 4s ease-in-out infinite; }
.mila .mila-body img { animation: none !important; }
.mila.speaking .mila-body { animation: milaTalkBob 1.2s ease-in-out infinite; }
.mila.happy .mila-body { animation: milaJump .7s cubic-bezier(.3,1.5,.5,1) 2; }
.mila.sad .mila-body { animation: milaShake .8s ease; }
@keyframes milaTalkBob { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-2deg) translateY(-4px); } 70% { transform: rotate(1.5deg) translateY(-2px); } }
.mila.speaking .mila-bubble { opacity: 1; transform: none; }
.mila-bubble .mb-wave { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.mila-bubble .mb-wave i { width: 4px; height: 12px; border-radius: 2px; background: #2f6ff0; animation: mbWave .8s ease-in-out infinite; }
.mila-bubble .mb-wave i:nth-child(2) { animation-delay: .15s; }
.mila-bubble .mb-wave i:nth-child(3) { animation-delay: .3s; }
@keyframes mbWave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* кнопка «Мила, прочитай» на доске задания */
.m-read {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 10px; padding: 8px 16px 8px 8px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #eaf2ff, #f3ebff); color: var(--navy, #0f2a78);
  font: 800 15px var(--font, sans-serif); box-shadow: inset 0 0 0 2px #d6e4ff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.m-read img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff; }
.m-read:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #2f6ff0; }
.m-read.on { box-shadow: inset 0 0 0 2px #2f6ff0, 0 0 0 6px rgba(47, 111, 240, .15); }
.m-read.on img { animation: readPulse .9s ease-in-out infinite; }
.m-read.nudge { animation: readNudge 1.4s ease-in-out 3; }
@keyframes readPulse { 50% { transform: scale(1.12); } }
@keyframes readNudge { 0%, 100% { transform: none; } 20% { transform: translateY(-4px) rotate(-2deg); } 40% { transform: translateY(0) rotate(2deg); } }
.m-q-row { display: flex; flex-direction: column; align-items: center; }

/* Мила на главной */
.hero-mila {
  position: absolute; left: 22%; top: 2%; width: 34%; height: 80%;
  border: 0; padding: 0; background: none; cursor: pointer; z-index: 3; border-radius: 40%;
}
.hero-mila:focus-visible { outline: 3px solid #ffb400; outline-offset: 4px; }
.hero-talk {
  position: absolute; z-index: 4; left: 51%; top: 0; max-width: min(300px, 46%);
  padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: #fff; color: var(--navy, #0f2a78);
  font: 800 15px/1.3 var(--font, sans-serif); box-shadow: 0 12px 30px rgba(15, 42, 120, .2);
  opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 0 100%;
  transition: opacity .25s ease, transform .35s cubic-bezier(.3,1.6,.5,1); pointer-events: none;
}
.hero-talk.show { opacity: 1; transform: none; }
.hero-talk .tap { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #2f6ff0; }

@media (prefers-reduced-motion: reduce) {
  .speaking .mf-mouth svg { animation: none !important; transform: scaleY(.6); }
}

/* панель «Голос Милы» */
.m-subbar-row { position: relative; }
.v-panel { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 32px)); padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px rgba(15, 42, 120, .22); display: grid; gap: 8px; animation: vIn .25s cubic-bezier(.3,1.5,.5,1); font-family: var(--font, sans-serif); }
@keyframes vIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.v-title { font-size: 16px; font-weight: 900; color: var(--navy, #0f2a78); }
.v-row { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 700; font-size: 14px; }
.v-row input { width: 20px; height: 20px; }
.v-lbl { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--navy, #0f2a78); }
.v-ends { display: flex; justify-content: space-between; margin-top: -4px; font-size: 12px; font-weight: 600; color: #5b6b93; }
.v-panel select { padding: 8px 10px; font-size: 14px; border-radius: 12px; }
.v-panel input[type=range] { width: 100%; accent-color: #2f6ff0; }
.v-note { margin: 0; font-size: 12px; color: #5b6b93; font-weight: 600; }
.v-try { justify-self: start; margin-top: 4px; }