@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f7f6f0;color:#30362b;font-family:'DM Sans','Noto Sans Thai',sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:14px;padding:12px 18px;background:#e7ecd9;color:#374732}button:hover{background:#dbe5c8}button:disabled{opacity:.5;cursor:wait}header{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;border-bottom:1px solid #e6e6dd}.brand{font-weight:700;font-size:32px;color:#455c37;text-decoration:none}.brand span{font-size:10px;letter-spacing:2px;margin-left:16px;font-weight:500}main{max-width:1400px;margin:auto;display:grid;grid-template-columns:42% 58%;padding:40px 5vw;gap:34px}.companion{text-align:center;padding:20px 0}.eyebrow{font-size:11px;letter-spacing:2.3px;color:#77876b}h1{font-size:clamp(38px,4vw,58px);line-height:1.08;letter-spacing:-2px;font-weight:500;margin:22px 0}p{font-size:14px;color:#7b8175;line-height:1.8}.character{position:relative;width:260px;height:270px;margin:25px auto 8px;animation:float 3s ease-in-out infinite}.body{position:absolute;left:45px;top:60px;width:175px;height:180px;border-radius:48% 48% 44% 44%;background:#b4d191;box-shadow:inset -12px -8px 0 #a2c17e;z-index:2}.ear{position:absolute;background:#b4d191;width:55px;height:95px;top:13px;border-radius:80% 80% 15% 15%;border:12px solid #b4d191;box-shadow:inset 0 0 0 50px #e6edcf}.left{left:48px;transform:rotate(-20deg)}.right{right:45px;transform:rotate(20deg)}.eye{position:absolute;top:58px;width:12px;height:17px;border-radius:50%;background:#37482c;animation:blink 5s infinite}.e1{left:48px}.e2{right:48px}.cheek{position:absolute;top:83px;width:26px;height:12px;background:#e7b3a0;border-radius:50%;opacity:.75}.c1{left:26px}.c2{right:26px}.mouth{position:absolute;top:85px;left:78px;width:20px;height:12px;border-bottom:3px solid #3c512f;border-radius:50%}.belly{position:absolute;bottom:16px;left:46px;width:85px;height:66px;border-radius:50%;background:#dbe8c5;color:#8fac6e;padding-top:17px;font-size:25px}.arm{position:absolute;top:143px;background:#aac988;width:36px;height:68px;border-radius:50%}.a1{left:24px;transform:rotate(25deg)}.a2{right:18px;transform:rotate(-28deg);transform-origin:bottom;animation:wave 3s ease infinite}.foot{position:absolute;bottom:17px;width:63px;height:28px;background:#a2c17e;border-radius:50%}.f1{left:55px}.f2{right:43px}.spark{position:absolute;font-size:29px;color:#b5a570}.s1{left:0;top:70px}.s2{right:0;top:25px}.character.thinking{animation:float 1s infinite}.thinking .eye{height:8px}.talking .mouth{height:20px;background:#546b41;animation:talk .25s infinite alternate}.character-label{font-size:13px;display:flex;gap:8px;justify-content:center;align-items:center}.dot{width:7px;height:7px;background:#91aa73;border-radius:50%}.settings{margin-top:25px;font-size:12px}.settings small{display:block;color:#95998c;font-size:10px;margin-top:6px}.little-note{font-size:12px;font-style:italic;color:#929786;margin-top:25px}.workspace{background:#fffef9;border:1px solid #e5e7da;border-radius:26px;padding:22px;box-shadow:0 12px 50px #384b2b05;min-width:0}nav{display:flex;gap:6px;border-bottom:1px solid #e9eadf;padding-bottom:16px}nav button{background:transparent;font-size:13px;padding:10px 12px}nav .active{background:#e7ecd9}#count{background:#cfddbb;border-radius:8px;padding:1px 5px}#status{font-size:12px;min-height:23px;margin:12px 4px;color:#718064}.error{color:#ab493d!important}.pane[hidden]{display:none!important}#chat{display:flex;flex-direction:column;height:570px}#messages{flex:1;overflow:auto;padding:8px 4px}.message{max-width:90%;padding:15px 18px;margin-bottom:15px;border-radius:18px;white-space:pre-wrap;line-height:1.7;font-size:15px;background:#eff3e7}.message.user{background:#ecebe5;margin-left:auto}.message .who{display:block;font-size:10px;letter-spacing:1px;color:#7f8f6c;margin-bottom:6px}.message button{font-size:11px;padding:5px 9px;margin-top:10px}#starters{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0}#starters button{font-size:11px;background:#f5f5ee;border:1px solid #e5e7db;padding:8px 10px}#composer{display:flex;align-items:center;gap:7px;background:#f6f6ef;padding:8px;border:1px solid #dedfd2;border-radius:18px}textarea{flex:1;resize:none;border:0;background:transparent;outline:none;font-size:13px;min-width:0;padding:8px}#send{background:#536d40;color:white}#mic{padding:9px;background:transparent}small{font-size:10px;color:#929689;margin-top:12px;line-height:1.8}h2{font-size:27px;font-weight:500;letter-spacing:-.6px}#profileform{display:grid;gap:16px}label{display:grid;gap:8px;font-size:13px}input,select{border:1px solid #dde1d3;background:#fbfcf7;border-radius:12px;padding:12px;min-width:0}.settings label{display:block}#noteform{display:flex;gap:8px;margin:20px 0}#note{flex:1}.note{border:1px solid #e2e7d7;border-radius:15px;padding:15px;margin:10px 0;background:#f7f9f0;font-size:13px;white-space:pre-wrap}.note small{display:block;color:#789160}.note button{float:right;font-size:11px;padding:4px 9px}button:focus-visible,a:focus-visible{outline:3px solid #9cb97c;outline-offset:3px}@keyframes float{50%{transform:translateY(-9px)}}@keyframes blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.1)}}@keyframes wave{50%{transform:rotate(-45deg)}}@keyframes talk{to{height:8px}}@media(max-width:850px){header{padding:0 20px;height:75px}.brand span{display:none}main{grid-template-columns:1fr;padding:15px;gap:15px}.companion{display:grid;grid-template-columns:1fr 130px;padding:10px;text-align:left}.eyebrow{font-size:9px}h1{font-size:33px;margin:10px 0}.companion p{font-size:12px;margin:0}.character{grid-column:2;grid-row:1/5;transform:scale(.5);transform-origin:top left;width:260px;height:270px;margin:0;animation:none}.character-label{grid-column:1;font-size:11px;justify-content:start;margin-top:12px}.settings{grid-column:1/3;margin:15px 0 0}.little-note{display:none}.workspace{padding:15px}#chat{height:560px}nav button{font-size:12px;padding:8px}#noteform{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
/* Milo's face follows attention while the body keeps breathing. */
.face{position:absolute;inset:0;transform:translate(var(--look-x,0px),var(--look-y,0px)) rotate(var(--turn,0deg));transition:transform .45s ease}.eye{box-shadow:inset -3px -3px 0 #21341b}.eye:after{content:'';position:absolute;width:3px;height:4px;border-radius:50%;background:#fbfff2;left:2px;top:3px}.brow{position:absolute;top:46px;width:16px;height:7px;border-top:2px solid #5c7846;border-radius:50%;opacity:0;transition:all .25s}.b1{left:45px}.b2{right:45px}.blinking .eye{transform:scaleY(.1)}.listening .ear.left{transform:rotate(-12deg)}.listening .ear.right{transform:rotate(12deg)}.ear{transition:transform .5s}.listening .brow{opacity:1;top:41px}.listening .eye{height:20px}.listening .body{transform:rotate(-3deg)}.body{transition:transform .5s}.thinking .body{transform:rotate(6deg)}.thinking .brow{opacity:1}.thinking .b1{transform:rotate(-12deg);top:38px}.thinking .mouth{width:12px;left:84px;transform:rotate(-12deg)}.thinking .a2{animation:ponder 1.8s ease-in-out infinite}.talking .eye{height:19px}.talking .cheek{opacity:1}.talking .body{animation:speak-bounce .8s ease-in-out infinite}.happy .eye{height:12px;background:transparent;border-top:4px solid #37482c;box-shadow:none;border-radius:50%;animation:none}.happy .eye:after{display:none}.happy .mouth{width:27px;left:75px;height:16px;background:#6e8854;border-radius:4px 4px 50% 50%;border:0}.happy .cheek{opacity:1;background:#efa991}.happy .a2{animation:hello .6s ease-in-out 4}.curious .brow{opacity:1}.curious .b1{top:34px}.curious .mouth{width:12px;height:14px;border:2px solid #546b41;left:83px}.curious .body{transform:rotate(-7deg)}.sad .mouth{border-bottom:0;border-top:3px solid #546b41}.sad .brow{opacity:1;transform:rotate(-18deg)}.sad .b2{transform:rotate(18deg)}.sad .ear{transform:rotate(30deg)}#character{cursor:pointer}#activity{margin:8px 3px;font-size:12px;color:#65794f;min-height:24px}#activity.error{background:#fff0e9;border-radius:10px;padding:8px}.recording{background:#f4c3ab!important;animation:mic-pulse 1s infinite}.pending{border:1px dashed #bfd2a4;min-height:60px}.failed{background:#fff0e9;border-color:#e2b5a0}.workspace{position:relative}#chat{height:calc(100dvh - 270px);min-height:410px;max-height:650px}.character-label{min-height:22px}@keyframes ponder{50%{transform:translate(-9px,-20px) rotate(-70deg)}}@keyframes speak-bounce{50%{transform:translateY(-3px) rotate(-2deg)}}@keyframes hello{50%{transform:rotate(-65deg)}}@keyframes mic-pulse{50%{box-shadow:0 0 0 7px #f4c3ab44}}@media(max-width:850px){#chat{height:560px}.companion{grid-template-columns:minmax(0,1fr) 130px}.character{height:135px}.settings{margin-top:9px}.talking .body{animation:speak-bounce .8s infinite}.workspace{min-width:0}}@media(prefers-reduced-motion:reduce){.face{transition:none}.body,.ear{transition:none}}
/* Fit the actual available frame: column widths include the gap. */
html,body{width:100%;overflow-x:hidden}header{height:72px;padding:0 clamp(20px,4vw,60px)}main{width:100%;height:calc(100dvh - 72px);grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;padding:20px 28px;min-height:0}.workspace{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;padding:20px}nav{flex-shrink:0}.workspace>#status{flex-shrink:0;margin:8px 4px;font-size:11px;min-height:20px}#chat{flex:1;height:auto;max-height:none;min-height:0}#messages{min-height:80px;overflow:auto;overscroll-behavior:contain}#composer,#starters,#activity,#chat>small{flex-shrink:0}.message{overflow-wrap:anywhere}#starters{margin:9px 0}#activity{margin:5px 3px}#chat>small{margin-top:6px;font-size:9px}#garden,#profile{min-height:0;overflow:auto;padding-right:5px}.companion{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;min-width:0;min-height:0}.companion h1{font-size:clamp(32px,3.4vw,48px);margin:16px 0}.companion p{margin:0}.character{flex-shrink:0;margin:12px auto 0}.character-label{flex-shrink:0}.settings{margin-top:12px}.little-note{margin-top:16px}@media(min-width:851px) and (max-height:800px){.companion h1{font-size:36px;margin:10px 0}.companion p{font-size:12px}.character{scale:.8;margin:-18px auto -26px}.little-note{display:none}.companion .eyebrow{font-size:9px}.settings{margin-top:8px}}@media(min-width:851px) and (max-height:620px){.character{scale:.65;margin:-38px auto -48px}.companion h1{font-size:29px}.companion p{display:none}.workspace{padding:14px}main{padding:12px 20px}#starters{display:none}.settings small{display:none}}@media(max-width:850px){body{overflow-y:auto}header{height:64px;padding:0 16px}main{height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}.companion{display:grid;grid-template-columns:minmax(0,1fr) 130px;align-items:start;justify-content:normal;min-height:180px;padding:0 5px}.companion h1{font-size:30px;margin:8px 0}.companion p{font-size:11px}.character{grid-column:2;grid-row:1/5;scale:1;transform:scale(.5);transform-origin:top left;width:260px;height:270px;margin:0;animation:none}.character-label{grid-column:1;justify-content:start;font-size:11px;margin-top:10px}.settings{grid-column:1/3;margin-top:12px}.workspace{height:min(650px,calc(100dvh - 95px));min-height:420px;padding:14px}.little-note{display:none}#chat{height:auto;min-height:0}.workspace>#status{font-size:10px}#activity{font-size:11px}#composer{padding:6px}#send{padding:10px 13px}#starters button{font-size:10px}}@media(max-width:450px){main{padding:12px}.brand{font-size:27px}header>button{font-size:11px;padding:10px}nav{gap:2px}nav button{font-size:11px;padding:8px 9px}#starters{gap:4px}.message{font-size:14px}}
.header-actions{display:flex;gap:8px;align-items:center}.header-actions button{font-size:12px;padding:10px 14px;background:transparent}.header-actions #login{background:#e7ecd9}.live-caption{font-size:clamp(17px,2vw,23px);line-height:1.55;max-width:680px;min-height:75px;display:flex;align-items:center;justify-content:center;text-align:center;color:#4c6440;padding:12px 18px;overflow-wrap:anywhere}.conversation-controls{display:flex;justify-content:center;gap:12px;margin:20px 0 6px}.conversation-controls #startConversation{background:#536d40;color:white;font-size:16px;padding:16px 30px;border-radius:30px;box-shadow:0 8px 25px #536d4026}.conversation-controls #stopConversation{background:#f0d7c8;border:1px solid #e4bfa9;padding:14px 28px;border-radius:25px}#voiceStatus{min-height:28px;margin:8px 0;color:#6b7e5b;font-size:13px}.voice-mode main{display:flex;align-items:center;justify-content:center;overflow:auto}.voice-mode .workspace{display:none}.voice-mode .companion{width:100%;height:100%;justify-content:center;gap:0}.voice-mode .companion h1{font-size:clamp(28px,3.4vw,43px);margin:8px 0 6px;letter-spacing:-1px}.voice-mode .intro{font-size:13px}.voice-mode .character{scale:1.15;margin:14px auto 12px;transform-origin:center}.voice-mode .eyebrow{font-size:10px}.voice-mode .settings,.voice-mode .little-note{display:none}.text-mode .conversation-controls,.text-mode #voiceStatus{display:none}.text-mode .live-caption{font-size:16px;min-height:54px;max-height:130px;overflow:auto}.text-mode .intro{display:none}.voice-mode #backVoice{background:#e7ecd9}.text-mode #showChat{background:#e7ecd9}@media(min-width:851px) and (max-height:720px){.voice-mode .character{scale:.9;margin:-12px auto -10px}.voice-mode .live-caption{min-height:55px;padding:8px;font-size:18px}.voice-mode .companion h1{font-size:28px}.voice-mode .conversation-controls{margin:10px 0 0}.voice-mode .intro{display:block}.voice-mode .eyebrow{display:none}}@media(max-width:850px){.header-actions{gap:2px}.header-actions button{font-size:11px;padding:8px}.header-actions #backVoice{display:none}.voice-mode .brand span{display:none}.voice-mode main{height:calc(100dvh - 64px);padding:18px 16px}.voice-mode .companion{display:flex;min-height:0;text-align:center}.voice-mode .character{grid-column:auto;grid-row:auto;scale:1;transform:none;transform-origin:center;margin:12px auto;height:270px;width:260px;animation:float 3s infinite}.voice-mode .character-label{justify-content:center;font-size:12px;margin-top:0}.voice-mode .live-caption{min-height:75px;font-size:18px;padding:10px 6px}.voice-mode .companion h1{font-size:27px}.voice-mode .intro{display:block}.voice-mode .conversation-controls{margin:16px 0 2px}#voiceStatus{font-size:11px}.text-mode .live-caption{display:none}.text-mode .header-actions #backVoice{display:block}}@media(max-height:650px){.voice-mode .character{scale:.8;margin:-20px auto -20px}.voice-mode .eyebrow,.voice-mode .intro{display:none}.voice-mode .companion h1{font-size:25px}.voice-mode .live-caption{min-height:40px;font-size:16px}.voice-mode .conversation-controls{margin:8px 0 0}}@media(prefers-reduced-motion:reduce){.voice-mode .character{animation:none}}
.live-translation{font-size:clamp(14px,1.6vw,18px);line-height:1.6;color:#879776;max-width:680px;text-align:center;min-height:28px;padding:10px 18px 0;overflow-wrap:anywhere}.live-translation:empty{visibility:hidden}.translation{font-family:'Noto Sans Thai',sans-serif;font-size:13px;color:#80916e;line-height:1.6;margin-bottom:6px}.text-mode .live-translation{display:none}.voice-mode .live-caption{min-height:62px;padding-top:4px}.note .translation{color:#7d8d68;font-size:12px}button[hidden]{display:none!important}@media(max-height:720px){.voice-mode .live-translation{font-size:13px;padding-top:3px;min-height:24px}.voice-mode .live-caption{min-height:40px}}@media(max-width:450px){.header-actions #showGarden{display:none}.live-translation{font-size:13px}}
.live-caption{display:block}.difficult-term{display:inline;font:inherit;line-height:inherit;padding:0 2px;margin:0;border:0;border-radius:4px;color:inherit;background:#f2e5a2;text-decoration:underline;text-decoration-color:#b4a050;text-decoration-style:dotted;text-underline-offset:4px;cursor:help;white-space:normal}.difficult-term:hover,.difficult-term:focus-visible{background:#e9d579}.message .difficult-term{font:inherit;padding:0 2px;margin:0}.word-meaning{font-size:13px;background:#fff8d8;border:1px solid #e8dda7;border-radius:12px;padding:10px 16px;margin:8px auto;max-width:600px;color:#706238}.term-meaning{font-size:12px;color:#7b8e69;margin-bottom:5px}.word-meaning[hidden]{display:none}.text-mode .word-meaning{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:5;max-width:85vw;box-shadow:0 6px 30px #343f1f15}.voice-mode .live-caption{min-height:65px}.live-caption:empty{min-height:65px}

.character-label[hidden]{display:none}.correction-text .difficult-term,.speech-correction{color:#c32938;background:#fff0f1}.correction-text .difficult-term{text-decoration-color:#c32938}.speech-correction{padding:10px 14px;border-radius:12px;font-size:14px}

.mic-language{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:#647452}.mic-language select{width:auto;padding:6px 12px;border-radius:12px;border:1px solid #dce3ce;background:#fafbf5;color:#425332}