/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* The teacher's status badge (Ready / Listening / Thinking / Speaking) starts the thin lesson bar,
   above the teacher, beside Mic and Voice. It is not a button. */
.teacher-controls>#teacher-status{position:static;flex:1 1 0;min-width:0;justify-content:center;margin:0;max-width:none;min-height:40px;height:40px;
  display:flex;align-items:center;gap:9px;padding:4px 12px;border-radius:999px;border:0;box-shadow:none;
  background:#2f7d4f;color:#fff;font-size:17px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;pointer-events:none;transition:background-color .25s}
.teacher-controls>#teacher-status>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.teacher-controls>#teacher-status i{flex:0 0 22px;width:22px;height:22px;border-radius:0;background:#fff;box-shadow:none;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
/* One white icon per state, drawn as a mask: star Ready, ear Listening, thought cloud Thinking, speaker Speaking. */
.teacher-controls>#teacher-status i{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.85 5.95 6.55.85-4.8 4.55 1.2 6.5L12 17.3l-5.8 3.15 1.2-6.5-4.8-4.55 6.55-.85z'/%3E%3C/svg%3E")}
.teacher-controls>#teacher-status[data-state=listening] i{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5a5.5 5.5 0 0 1 11 0c0 2.6-1.3 3.9-2.5 5-1.1 1-1.3 2.1-1.8 3.4-.6 1.6-1.9 2.6-3.5 2.6-1.4 0-2.4-.7-2.9-1.8'/%3E%3Cpath d='M9.5 9.8a2.5 2.5 0 0 1 5 0c0 1.2-.8 1.8-1.5 2.4'/%3E%3C/svg%3E")}
.teacher-controls>#teacher-status[data-state=thinking] i{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.2' cy='10.2' r='3.8'/%3E%3Ccircle cx='13' cy='7.6' r='4.6'/%3E%3Ccircle cx='17.4' cy='10.8' r='3.6'/%3E%3Crect x='7.6' y='9.6' width='10.2' height='5.2' rx='2.6'/%3E%3Ccircle cx='6.2' cy='17.6' r='1.9'/%3E%3Ccircle cx='3.4' cy='20.8' r='1.2'/%3E%3C/svg%3E")}
.teacher-controls>#teacher-status[data-state=speaking] i{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9.2h3.8L11.6 5v14l-4.8-4.2H3z'/%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' d='M15 9.2a3.9 3.9 0 0 1 0 5.6M18 6.4a7.8 7.8 0 0 1 0 11.2'/%3E%3C/svg%3E")}
/* One colour per state (white text passes contrast on each): Ready green, Listening blue, Thinking amber, Speaking purple. */
.teacher-controls>#teacher-status[data-state=listening]{background:#2563a8}
.teacher-controls>#teacher-status[data-state=thinking]{background:#a8530c}
.teacher-controls>#teacher-status[data-state=speaking]{background:#6b4fa8}
.teacher-controls>#teacher-status[data-state] i{background:#fff}
/* Active states pulse the icon's size, not its opacity, so it stays crisp and readable. */
.teacher-controls>#teacher-status[data-state] i{animation-name:status-icon}
@keyframes status-icon{50%{transform:scale(.84)}}
@media(max-width:760px){.teacher-controls>#teacher-status{flex:0 0 40px;width:40px;padding:0;gap:0}.teacher-controls>#teacher-status>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.teacher-controls>#teacher-status i{flex-basis:19px;width:19px;height:19px}}
@media(prefers-reduced-motion:reduce){.teacher-controls>#teacher-status{transition:none}.teacher-controls>#teacher-status i{animation:none}}