/* Student-selectable narration and professional vector tutor characters. */
.lecture-setting-action {
  align-self: flex-end;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.lecture-setting-action:hover { border-color: var(--teal); box-shadow: 0 5px 15px rgba(13,118,110,.12); transform: translateY(-1px); }
#lecture-avatar-select { min-width: 160px; }
#lecture-voice { min-width: 250px; max-width: 310px; }
#lecture-voice-preview-audio { display: none; }

.lecture-avatar-picker {
  position: relative;
  z-index: 8;
  padding: 18px;
  border-bottom: 1px solid rgba(17,45,56,.12);
  background: linear-gradient(145deg, #f7fbf9, #eaf4f1);
}
.lecture-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.lecture-picker-heading > div { display: grid; gap: 3px; }
.lecture-picker-heading small { color: var(--teal-dark); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.lecture-picker-heading strong { color: var(--navy); font-size: 15px; }
.lecture-picker-heading button {
  width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--navy); font-size: 20px; cursor: pointer;
}
.lecture-avatar-grid { display: grid; grid-template-columns: repeat(4, minmax(155px, 1fr)); gap: 12px; }
.lecture-avatar-card {
  position: relative;
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: 78px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(17,45,56,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease, background .17s ease;
}
.lecture-avatar-card:hover { transform: translateY(-2px); border-color: rgba(13,118,110,.48); box-shadow: 0 12px 28px rgba(20,61,66,.12); }
.lecture-avatar-card.selected { border-color: var(--teal); background: #f3fbf7; box-shadow: 0 0 0 3px rgba(13,118,110,.1); }
.lecture-avatar-card > i {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: var(--teal); color: #fff; font-size: 10px; font-style: normal; opacity: 0; transform: scale(.7);
  transition: opacity .15s ease, transform .15s ease;
}
.lecture-avatar-card.selected > i { opacity: 1; transform: scale(1); }
.lecture-avatar-card-visual {
  width: 78px; height: 82px; display: grid; place-items: center; overflow: hidden; border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, #e2f1ed, #bdd8d4); border: 1px solid rgba(17,45,56,.1);
}
.lecture-avatar-card-visual svg { width: 80px; height: 100px; transform: translateY(10px); }
.lecture-avatar-card-visual img { width: 100%; height: 100%; object-fit: cover; }
.lecture-avatar-card-copy { min-width: 0; display: grid; gap: 3px; }
.lecture-avatar-card-copy strong { color: var(--navy); font-size: 12px; }
.lecture-avatar-card-copy small { color: var(--teal-dark); font-size: 8px; font-weight: 800; }
.lecture-avatar-card-copy p { margin: 2px 0 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.lecture-avatar-picker > .fine-print { margin: 11px 0 0; }

.lecture-avatar-built-in {
  position: relative;
  z-index: 2;
  width: min(350px, 94%);
  height: 455px;
  display: grid;
  place-items: end center;
  overflow: visible;
}
.lecture-avatar-built-in > svg { width: 100%; height: 100%; overflow: visible; }
.vector-floor { fill: rgba(1,13,18,.34); }
.vector-puppet { transform-origin: 180px 420px; animation: tutorBreathing 4.6s ease-in-out infinite; }
.vector-head { transform-origin: 180px 292px; transition: transform .3s ease; animation: tutorHeadFloat 5.2s ease-in-out infinite; }
.vector-body { transform-origin: 180px 430px; }
.vector-jacket { stroke: rgba(255,255,255,.13); stroke-width: 2; }
.vector-neck, .vector-face { stroke: rgba(72,39,29,.15); stroke-width: 1.5; }
.vector-arm, .vector-hand { transform-origin: 265px 406px; transition: transform .3s ease; }
.vector-pointer { opacity: .84; }
.vector-brow { transition: transform .22s ease; transform-box: fill-box; transform-origin: center; }
.vector-eye-white { fill: #fff; transition: transform .08s ease; transform-box: fill-box; transform-origin: center; }
.vector-pupil { fill: #14100e; }
.vector-glint { fill: #fff; }
.vector-iris, .vector-pupil, .vector-glint { transition: transform .22s ease; }
.vector-lid { fill: none; stroke: rgba(86,47,33,.5); stroke-width: 2.5; }
.vector-mouth-neutral { opacity: 1; transition: opacity .1s ease, transform .16s ease; }
.vector-mouth-open, .vector-teeth, .vector-tongue { opacity: 0; transition: opacity .08s ease, transform .08s linear; }
.vector-mouth-open { transform-box: fill-box; transform-origin: center; transform: scale(1, var(--mouth-open, .2)); }
.vector-teeth, .vector-tongue { transform-box: fill-box; transform-origin: center; }
.vector-cheek { transition: opacity .2s ease; }
.vector-glasses { opacity: .92; }

.lecture-player.is-blinking .vector-eye-white,
.lecture-player.is-blinking .vector-iris,
.lecture-player.is-blinking .vector-pupil,
.lecture-player.is-blinking .vector-glint { transform: scaleY(.08); }
.lecture-player.is-speaking .vector-mouth-neutral { opacity: 0; }
.lecture-player.is-speaking .vector-mouth-open,
.lecture-player.is-speaking .vector-teeth,
.lecture-player.is-speaking .vector-tongue { opacity: 1; }
.lecture-player.is-speaking.mouth-a .vector-mouth-open { transform: scale(1, 1.15); }
.lecture-player.is-speaking.mouth-o .vector-mouth-open { transform: scale(.67, 1.08); }
.lecture-player.is-speaking.mouth-e .vector-mouth-open { transform: scale(1.2, .62); }
.lecture-player.is-speaking.mouth-m .vector-mouth-open { transform: scale(.88, .08); }
.lecture-player.is-speaking.mouth-m .vector-teeth,
.lecture-player.is-speaking.mouth-m .vector-tongue { opacity: 0; }
.lecture-player.is-speaking.mouth-f .vector-mouth-open { transform: scale(1.03, .24); }
.lecture-player.is-speaking.mouth-f .vector-tongue { opacity: 0; }
.lecture-player.is-speaking .vector-head { animation: vectorTutorTalking 1.05s ease-in-out infinite; }
.lecture-player.is-speaking .vector-hand { animation: tutorHandTalk 1.75s ease-in-out infinite; }
.lecture-player.voice-expressive .vector-pointer { animation: pointerTalk 2.1s ease-in-out infinite; }
.lecture-player.speech-nod .vector-head { transform: translateY(3px) rotate(.8deg); }
.lecture-player.speech-emphasis .vector-head { transform: translateY(-5px) scale(1.015); }
.lecture-player.speech-emphasis .vector-brow { transform: translateY(-5px); }
.lecture-player.speech-emphasis .vector-hand { transform: translate(-9px,-18px) rotate(-8deg); }

.lecture-player[data-expression="welcome"] .vector-cheek,
.lecture-player[data-expression="celebrate"] .vector-cheek { opacity: .36; }
.lecture-player[data-expression="welcome"] .vector-mouth-neutral,
.lecture-player[data-expression="celebrate"] .vector-mouth-neutral { transform: translateY(-2px) scaleX(1.15); }
.lecture-player[data-expression="thinking"] .vector-head { transform: rotate(-3deg) translateY(-2px); }
.lecture-player[data-expression="thinking"] .vector-iris,
.lecture-player[data-expression="thinking"] .vector-pupil,
.lecture-player[data-expression="thinking"] .vector-glint { transform: translate(1.5px,-0.5px); }
.lecture-player[data-expression="thinking"] .vector-brow-left { transform: translateY(-5px) rotate(-5deg); }
.lecture-player[data-expression="thinking"] .vector-brow-right { transform: translateY(2px) rotate(6deg); }
.lecture-player[data-expression="emphasis"] .vector-brow { transform: translateY(-5px); }
.lecture-player[data-expression="emphasis"] .vector-hand { transform: translate(-10px,-18px) rotate(-8deg); }
.lecture-player[data-expression="caution"] .vector-brow-left { transform: translateY(2px) rotate(8deg); }
.lecture-player[data-expression="caution"] .vector-brow-right { transform: translateY(2px) rotate(-8deg); }
.lecture-player[data-expression="caution"] .vector-mouth-neutral { transform: rotate(180deg) translateY(-5px); }
.lecture-player[data-expression="celebrate"] .vector-head { transform: translateY(-6px); }
.lecture-player[data-expression="celebrate"] .vector-hand { transform: translate(-16px,-31px) rotate(-18deg); }

@keyframes vectorTutorTalking {
  0%,100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-2px) rotate(-.7deg); }
  70% { transform: translateY(1px) rotate(.6deg); }
}
@keyframes pointerTalk {
  0%,100% { transform: rotate(0deg); transform-origin: 294px 405px; }
  50% { transform: rotate(-3deg); transform-origin: 294px 405px; }
}

@media (max-width: 1180px) {
  .lecture-avatar-grid { grid-template-columns: repeat(3, minmax(155px,1fr)); }
  #lecture-voice { min-width: 210px; }
}
@media (max-width: 860px) {
  .lecture-avatar-grid { grid-template-columns: repeat(2, minmax(145px,1fr)); }
  .lecture-avatar-built-in { height: 320px; width: min(250px,90%); }
  .lecture-setting-action { width: 100%; }
}
@media (max-width: 560px) {
  .lecture-avatar-grid { grid-template-columns: 1fr; }
  .lecture-avatar-card { grid-template-columns: 72px minmax(0,1fr); }
  #lecture-voice, #lecture-avatar-select { min-width: 0; max-width: none; width: 100%; }
}

/* v0.8 deterministic viseme rig. Variables are driven by avatar_viseme.js. */
.lecture-player {
  --mouth-open: .06;
  --mouth-width: .88;
  --mouth-round: .1;
  --jaw-open: .02;
  --teeth-opacity: 0;
  --tongue-opacity: 0;
  --mouth-corners: .08;
  --gaze-x: 0;
  --gaze-y: 0;
}
.lecture-player .vector-mouth {
  transform-box: fill-box;
  transform-origin: center;
  translate: 0 calc(var(--jaw-open) * 5px);
}
.lecture-player .vector-mouth-open {
  opacity: calc(.08 + var(--mouth-open) * .92);
  transform: scale(
    calc(var(--mouth-width) * (1 - var(--mouth-round) * .18)),
    calc(.12 + var(--mouth-open) * 1.12)
  );
  rx: calc(23px - var(--mouth-round) * 7px);
  ry: calc(9px + var(--mouth-open) * 11px);
}
.lecture-player .vector-mouth-neutral {
  opacity: calc(1 - min(1, var(--mouth-open) * 3));
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(calc(var(--mouth-corners) * -4px)) scaleX(var(--mouth-width));
}
.lecture-player .vector-teeth {
  opacity: var(--teeth-opacity);
  transform: translateY(calc(var(--jaw-open) * 1px)) scaleX(var(--mouth-width));
}
.lecture-player .vector-tongue {
  opacity: var(--tongue-opacity);
  transform: translateY(calc(var(--jaw-open) * 4px)) scaleX(calc(.8 + var(--mouth-width) * .18));
}
.lecture-player .vector-iris,
.lecture-player .vector-pupil,
.lecture-player .vector-glint {
  translate: calc(var(--gaze-x) * 24px) calc(var(--gaze-y) * 20px);
}
.lecture-player.is-speaking .vector-cheek {
  opacity: calc(.20 + var(--mouth-open) * .16);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(calc(1 + var(--mouth-corners) * .12));
}
.lecture-player[data-viseme="MBP"] .vector-teeth,
.lecture-player[data-viseme="MBP"] .vector-tongue { opacity: 0; }
.lecture-player[data-viseme="TH"] .vector-tongue,
.lecture-player[data-viseme="L"] .vector-tongue { opacity: .72; }
.lecture-player[data-viseme="OO"] .vector-mouth-open,
.lecture-player[data-viseme="WQ"] .vector-mouth-open,
.lecture-player[data-viseme="OH"] .vector-mouth-open { filter: saturate(.94); }
.lecture-player.is-speaking .vector-head {
  animation: v8TutorProsody 2.35s cubic-bezier(.42,0,.36,1) infinite;
}
.lecture-player.is-speaking .vector-hand {
  animation: v8TutorGesture 3.4s ease-in-out infinite;
}
@keyframes v8TutorProsody {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-1px, -1px) rotate(-.35deg); }
  48% { transform: translate(1px, -2px) rotate(.45deg); }
  72% { transform: translate(0, 1px) rotate(-.2deg); }
}
@keyframes v8TutorGesture {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  40% { transform: translate(-4px, -6px) rotate(-2deg); }
  65% { transform: translate(-1px, -3px) rotate(-.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lecture-player .vector-puppet,
  .lecture-player .vector-head,
  .lecture-player .vector-hand,
  .lecture-player .vector-pointer { animation: none !important; }
}

/* Progressive neural-voice preparation. This is deliberately scoped to the
   existing lecture start overlay so all other lesson and application controls
   retain their established layout and behaviour. */
.lecture-prepare-status {
  margin: 18px auto 16px;
  padding: 13px 14px;
  width: min(420px, 100%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  text-align: left;
}
.lecture-prepare-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.lecture-prepare-heading strong { color: #fff; }
.lecture-prepare-heading span { color: rgba(255,255,255,.72); white-space: nowrap; }
.lecture-prepare-track {
  height: 7px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
}
.lecture-prepare-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lime), #9fe7d8);
  transition: width .25s ease;
}
.lecture-prepare-status > small {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.65);
  font-size: 9px;
  line-height: 1.45;
}
#lecture-start:disabled {
  cursor: wait;
  opacity: .62;
  filter: saturate(.65);
}

/* Resume-aware lecture start selection. The controls live only inside the
   existing start overlay and do not alter the lecture transport or progress UI. */
.lecture-player .lecture-start-overlay {
  overflow-y: auto;
}
.lecture-player .lecture-start-card {
  max-height: calc(100% - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lecture-start-position {
  margin: 18px auto 0;
  padding: 13px 14px;
  width: min(420px, 100%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  text-align: left;
}
.lecture-start-position-heading {
  display: grid;
  gap: 4px;
}
.lecture-start-position-heading strong {
  color: #fff;
  font-size: 11px;
}
.lecture-start-position-heading small,
.lecture-start-position > small {
  display: block;
  margin-top: 0;
  color: rgba(255,255,255,.65);
  font-size: 9px;
  line-height: 1.45;
}
.lecture-start-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}
.lecture-start-shortcut {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font: inherit;
  font-size: 9px;
  line-height: 1.3;
  cursor: pointer;
}
.lecture-start-shortcut:hover,
.lecture-start-shortcut:focus-visible {
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.11);
  outline: none;
}
.lecture-start-shortcut.selected,
.lecture-start-shortcut[aria-pressed="true"] {
  border-color: var(--lime);
  background: rgba(191,255,95,.13);
  color: #fff;
}
.lecture-start-slide-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  color: rgba(255,255,255,.74);
  font-size: 9px;
}
.lecture-start-slide-picker select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 30px 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: #0f313b;
  color: #fff;
  font: inherit;
  font-size: 10px;
}
.lecture-start-slide-picker select:focus-visible {
  border-color: var(--lime);
  outline: 2px solid rgba(191,255,95,.22);
  outline-offset: 2px;
}
.lecture-start-position > #lecture-start-window {
  margin-top: 9px;
}
@media (max-width: 520px) {
  .lecture-start-shortcuts {
    grid-template-columns: 1fr;
  }
  .lecture-start-slide-picker {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}