:root{color-scheme:dark;--cyan:#39d1ff;--navy:#061622;--panel:#0b2638;--line:#1a526b;--text:#eefaff;--muted:#8aa9b8}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 25% 15%,#123d54 0,#071827 38%,#020910 100%);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text)}
.app{width:min(1180px,96vw);height:min(720px,94vh);display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;border:1px solid #28637a;border-radius:26px;background:#06131ddd;box-shadow:0 30px 90px #000b,0 0 50px #39d1ff15}
.stage{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,#18546b 0,#0b2a3b 32%,#06141f 72%)}.stage:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 49%,#38d1ff09 50%);background-size:100% 5px;pointer-events:none}
.halo{position:absolute;width:72%;aspect-ratio:1;left:14%;top:13%;border:2px solid #39d1ff50;border-radius:50%;box-shadow:0 0 45px #39d1ff33,inset 0 0 45px #39d1ff22;animation:pulse 3s ease-in-out infinite}
#avatar{position:absolute;width:96%;left:2%;bottom:-6%;filter:drop-shadow(0 15px 32px #000a);transform-origin:50% 75%;animation:idle 5s ease-in-out infinite}
.lesson-visual{position:absolute;z-index:4;inset:68px 28px 72px;margin:0;padding:16px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;background:#06131fed;border:1px solid #39d1ff66;border-radius:20px;box-shadow:0 18px 55px #000b;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity .3s,transform .3s}.lesson-visual.visible{opacity:1;transform:scale(1)}.lesson-visual img{width:100%;height:100%;min-height:0;object-fit:contain;border-radius:12px;background:#f8fafc}.lesson-visual figcaption{text-align:center;color:#bfefff;font-size:13px;letter-spacing:.5px}.visual-mode #avatar,.visual-mode .eyelids,.visual-mode .halo{opacity:.08;transition:opacity .25s}
.status{position:absolute;z-index:5;top:22px;left:26px;display:flex;gap:9px;align-items:center;font-size:11px;letter-spacing:2px;color:#a9c6d2}.status span{width:9px;height:9px;border-radius:50%;background:#4ce0a4;box-shadow:0 0 12px #4ce0a4}
.name{position:absolute;z-index:5;left:0;right:0;bottom:18px;text-align:center;text-shadow:0 2px 12px #001}.name strong{display:block;font-size:34px;letter-spacing:8px;color:#fff}.name small{letter-spacing:3px;color:var(--cyan)}
.mouth{position:absolute;z-index:8;left:50%;top:50.2%;width:11%;height:1.1%;transform:translateX(-50%) scaleY(.45);transform-origin:center top;border-radius:8px;background:#02070b;box-shadow:0 0 7px #000,0 0 4px #39d1ff55;opacity:.96;transition:height .08s,transform .08s}.mouth span{display:block;width:72%;height:35%;margin:18% auto 0;background:#d8f8ff99;border-radius:0 0 50% 50%}.speaking .mouth{animation:talk .13s steps(2,end) infinite alternate}.speaking #avatar{animation:nod 1.1s ease-in-out infinite}
.eyelids{position:absolute;z-index:7;left:2%;bottom:-6%;width:96%;aspect-ratio:1;pointer-events:none}.eyelids i{position:absolute;top:31.2%;width:13.4%;height:0;background:#162a35;border-radius:50%;transform-origin:top;animation:blink 5s infinite}.eyelids i:first-of-type{left:33.6%}.eyelids i:last-of-type{right:33.6%}
.panel{display:flex;min-width:0;min-height:0;overflow:hidden;flex-direction:column;padding:28px;background:linear-gradient(145deg,#0b2232,#071620);border-left:1px solid #1b4a61}.messages{flex:1 1 0;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:6px 4px 20px;scrollbar-gutter:stable;scrollbar-color:#1c5b73 transparent}.messages article{width:fit-content;max-width:88%;overflow-wrap:anywhere;padding:13px 16px;margin:9px 0;border-radius:17px;line-height:1.45}.fiero{background:#103449;border:1px solid #1e5d75;border-bottom-left-radius:4px!important}.user{margin-left:auto!important;background:#186181;border-bottom-right-radius:4px!important}
form{display:grid;grid-template-columns:48px 1fr 48px;gap:9px;padding:9px;border:1px solid #24526a;border-radius:18px;background:#06131c}button,input{font:inherit}input{min-width:0;border:0;outline:0;background:transparent;color:white;font-size:15px}button{cursor:pointer;border:0;border-radius:12px;background:#123b50;color:#dff9ff;font-size:20px;transition:.2s}button:hover{background:#1d627d;transform:translateY(-1px)}#mic.listening{background:#ff647c;box-shadow:0 0 18px #ff647c88}.controls{display:flex;justify-content:space-between;align-items:center;padding-top:13px;color:var(--muted);font-size:13px}.controls button{padding:8px 12px;font-size:12px}.thinking .halo{animation-duration:.65s;border-style:dashed}.happy #avatar{transform:translateY(-5px) rotate(-1deg)}
@keyframes idle{50%{transform:translateY(-7px) rotate(.4deg)}}@keyframes pulse{50%{transform:scale(1.035);opacity:.7}}@keyframes blink{0%,45%,49%,100%{height:0}47%{height:13.2%}}@keyframes talk{0%{height:1.4%;transform:translateX(-50%) scaleX(.78) scaleY(.75)}45%{height:4.5%;transform:translateX(-50%) scaleX(1.05) scaleY(1)}100%{height:2.7%;transform:translateX(-50%) scaleX(.9) scaleY(.9)}}@keyframes nod{50%{transform:translateY(2px) rotate(.5deg)}}
@media(max-width:760px){body{display:block;overflow:hidden}.app{width:100%;height:100dvh;border:0;border-radius:0;grid-template-columns:1fr;grid-template-rows:minmax(0,55fr) minmax(0,45fr)}.panel{border-left:0;border-top:1px solid #1b4a61;padding:16px}.name{bottom:8px}.name strong{font-size:25px}}