:root{--navy:#071d55;--blue:#103c91;--gold:#d7ab54;--paper:#f5f7fb;--ink:#10203d;--green:#1c9b69;--danger:#b3261e}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Tahoma,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 20% 10%,#dfe9ff 0,transparent 28%),linear-gradient(145deg,#f7faff,#e6ecf8);color:var(--ink)}
button,textarea{font:inherit}.app-shell{width:min(1460px,96vw);margin:2vh auto;min-height:96vh;background:rgba(255,255,255,.92);border:1px solid #dce4f2;border-radius:24px;overflow:hidden;box-shadow:0 24px 70px #243a6b26}
.topbar{height:92px;padding:16px 26px;display:flex;align-items:center;gap:15px;color:#fff;background:linear-gradient(110deg,#061849,#103d8f)}.brand-mark{width:54px;height:54px;display:grid;place-items:center;border:2px solid var(--gold);border-radius:15px;color:var(--gold);font-size:31px;font-weight:800}.topbar h1{margin:0;font-size:24px}.topbar p{margin:5px 0 0;color:#cddcff}.status{margin-right:auto;padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px}.status.ready{background:#e8fff5;color:#097551}.status.busy{background:#fff3d5;color:#805900}.status.error{background:#ffe6e4;color:var(--danger)}
.classroom{display:grid;grid-template-columns:minmax(330px,38%) 1fr;min-height:calc(96vh - 92px)}.teacher-side{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow:hidden;background:linear-gradient(180deg,#dceaff,#9cb8e4)}.teacher-side:before{content:"";position:absolute;inset:7% 8% auto;height:46%;border-radius:50% 50% 8% 8%;background:linear-gradient(#f5fbff,#d8e9ff);border:9px solid #fff8;box-shadow:0 20px 70px #123c7e22}.teacher-frame{position:relative;width:min(310px,80%);aspect-ratio:3/8;z-index:1}.teacher-sprite{position:absolute;inset:0;background-image:url('/static/teacher-sprite.png');background-repeat:no-repeat;background-size:400% 100%;background-position-y:top;filter:drop-shadow(0 12px 18px #06133642);transition:filter .2s}.teacher-sprite.frame-0{background-position-x:0%}.teacher-sprite.frame-1{background-position-x:33.333%}.teacher-sprite.frame-2{background-position-x:66.666%}.teacher-sprite.frame-3{background-position-x:100%}.teacher-sprite.speaking{filter:drop-shadow(0 16px 24px #06133655)}.floor-shadow{position:absolute;right:5%;left:5%;bottom:0;height:25px;border-radius:50%;background:#09265e35;filter:blur(8px)}.teacher-state{position:absolute;z-index:3;right:6%;left:6%;bottom:18px;padding:11px 14px;border-radius:14px;background:#061849dc;color:#fff;text-align:center;box-shadow:0 8px 24px #06184948}
.lesson-side{padding:28px;display:flex;flex-direction:column;gap:18px}.board{min-height:430px;flex:1;border-radius:20px;background:#fbfdff;border:1px solid #dce6f4;box-shadow:inset 0 0 0 7px #edf2fa,0 12px 32px #18346915;overflow:hidden}.board-head{display:flex;justify-content:space-between;padding:17px 22px;background:#f0f5fd;border-bottom:1px solid #dbe5f3;font-weight:800;color:#183878}.live-dot{color:var(--green);font-size:13px}.conversation{padding:23px;max-height:54vh;overflow:auto}.message{margin:0 0 17px;padding:16px 18px;border-radius:17px;line-height:1.85}.message p{margin:5px 0;white-space:pre-wrap}.message .label{font-size:12px;font-weight:800;opacity:.72}.teacher-message{background:#eef4ff;border-right:4px solid var(--blue)}.student-message{margin-right:12%;background:#fff8e9;border-right:4px solid var(--gold)}.loading-message{background:#f4f5f7;color:#596273}.dots{display:inline-flex;gap:4px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:pulse 1s infinite}.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}@keyframes pulse{50%{opacity:.25;transform:translateY(-4px)}}
.ask-box{padding:17px;border:1px solid #dce5f1;border-radius:18px;background:#fff;box-shadow:0 10px 30px #17377414}.ask-box label{display:block;margin-bottom:8px;font-weight:800;color:#183878}.input-row{display:flex;gap:10px;align-items:stretch}.input-row textarea{flex:1;resize:none;padding:13px 15px;border:1px solid #bdcbe0;border-radius:13px;outline:none;line-height:1.5}.input-row textarea:focus{border-color:#2c63c4;box-shadow:0 0 0 3px #2c63c420}.primary-btn,.round-btn,.controls button{border:0;cursor:pointer}.primary-btn{padding:0 20px;border-radius:13px;background:linear-gradient(135deg,#123e94,#092563);color:#fff;font-weight:800}.round-btn{width:52px;border-radius:13px;background:#e8effd;font-size:21px}.round-btn.listening{background:#ffe4e4;animation:listen 1s infinite}@keyframes listen{50%{box-shadow:0 0 0 7px #e34b4b22}}.controls{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}.controls button{padding:9px 12px;border-radius:10px;background:#edf2fa;color:#173670;font-weight:700}.controls button:hover{background:#dce8fb}button:disabled{cursor:not-allowed;opacity:.55}
@media(max-width:850px){.app-shell{width:100%;margin:0;border-radius:0}.topbar{height:auto}.topbar h1{font-size:18px}.classroom{grid-template-columns:1fr}.teacher-side{min-height:390px}.teacher-frame{width:145px}.teacher-state{bottom:8px}.lesson-side{padding:14px}.board{min-height:330px}.conversation{max-height:42vh}.input-row{flex-wrap:wrap}.input-row textarea{flex-basis:calc(100% - 62px)}.primary-btn{height:48px;flex:1 0 100%}}

.teacher-sprite:not(.speaking){animation:nabuIdle 5.5s ease-in-out infinite;transform-origin:50% 78%}.teacher-sprite.speaking{animation:nabuSpeak 3.2s ease-in-out infinite;transform-origin:50% 78%}@keyframes nabuIdle{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-3px) scale(1.003)}70%{transform:translateX(2px) rotate(.15deg)}}@keyframes nabuSpeak{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) rotate(.1deg)}}

.teacher-sprite:after{content:"";position:absolute;top:8.8%;left:45.8%;width:2.5px;height:2.5px;border-radius:50%;background:#111827;box-shadow:24px 0 #111827;z-index:4}.teacher-sprite:not(.speaking):after{animation:nabuListenEyes 7s ease-in-out infinite}.teacher-sprite.speaking:after{animation:nabuReadEyes 4.8s ease-in-out infinite}@keyframes nabuListenEyes{0%,18%,100%{transform:translate(0,0)}30%,42%{transform:translate(-1.3px,.4px)}55%,68%{transform:translate(1.3px,.4px)}76%,78%{transform:translate(0,1px) scaleY(.2)}}@keyframes nabuReadEyes{0%,20%,100%{transform:translate(0,0)}35%,48%{transform:translate(-1px,1px)}63%,76%{transform:translate(1px,1px)}84%,86%{transform:translate(0,1px) scaleY(.2)}}

body:has(#question:focus) .teacher-sprite:not(.speaking),body:has(.round-btn.listening) .teacher-sprite:not(.speaking){animation:nabuLookQuestion 4s ease-in-out infinite;transform-origin:50% 70%}@keyframes nabuLookQuestion{0%,100%{transform:perspective(900px) rotateY(0) translateX(0)}25%,75%{transform:perspective(900px) rotateY(-7deg) translateX(-4px) translateY(-2px)}50%{transform:perspective(900px) rotateY(-10deg) translateX(-6px) translateY(-3px)}}

.teacher-sprite:after{display:none!important}

body:has(#question:focus) .teacher-sprite:not(.speaking),body:has(.round-btn.listening) .teacher-sprite:not(.speaking){animation:nabuIdle 5.5s ease-in-out infinite!important}