@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#183e4b;--blue:#08789b;--paper:#f7f5ed;--muted:#758184;--gold:#f4cb42}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #e6ba25;outline-offset:4px}.top{max-width:1180px;margin:auto;height:95px;display:flex;align-items:center;justify-content:space-between;padding:0 40px}.brand{display:flex;gap:9px;align-items:center;color:var(--ink);font:800 30px Manrope,sans-serif;text-decoration:none;letter-spacing:-1.8px}.brand-dot{color:var(--gold)}.brand-mark{display:grid;place-items:center;background:var(--blue);color:#ffda43;width:35px;height:35px;border-radius:12px 12px 12px 3px;font-size:30px;transform:rotate(-10deg)}.top-actions{display:flex;align-items:center;gap:20px}.voice-pill{font-size:12px;border:1px solid #dce3db;padding:9px 13px;border-radius:20px;background:#ffffff77;display:flex;align-items:center;gap:8px}.voice-pill span{width:6px;height:6px;background:#65a888;border-radius:50%}.icon-button{background:none;border:0;padding:8px}.icon-button svg{width:23px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}main{max-width:760px;margin:0 auto;padding:13px 24px 30px;text-align:center}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.6px;color:#6b8989;margin:0 0 12px}h1{font:700 clamp(29px,4vw,42px)/1.15 Manrope,sans-serif;letter-spacing:-1.5px;margin:0}#subtitle{font-size:15px;color:var(--muted);margin:13px 0}.stage{position:relative;height:420px;max-width:540px;margin:8px auto 0;isolation:isolate}.orbit{border-radius:50%;position:absolute;z-index:-2}.orbit-one{width:355px;height:355px;left:50%;top:35px;transform:translateX(-50%);background:#eaf0dc}.orbit-two{width:395px;height:395px;left:50%;top:14px;transform:translateX(-50%);border:1px solid #e5e9da}.stage canvas{position:relative;height:350px;width:266px;display:block;margin:auto;top:29px;filter:drop-shadow(0 9px 0 #75918309)}.ground{position:absolute;bottom:38px;width:195px;height:15px;border-radius:50%;left:50%;transform:translateX(-50%);background:#a7b49b25;z-index:-1}.spark{position:absolute;color:#e4ba3e;font-size:24px}.spark-one{left:15%;top:105px}.spark-two{right:15%;top:250px;color:#75a5a0;font-size:30px}.state-pill{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap;background:#ffffffad;border:1px solid #e2e5dc;border-radius:20px;padding:8px 14px}#state-dot{width:5px;height:5px;border-radius:50%;background:#80a78c}.thought{display:none;position:absolute;right:22%;top:64px;gap:5px;background:white;padding:16px 20px;border-radius:25px;z-index:2}.thought i{height:6px;width:6px;background:#9aacac;border-radius:50%;animation:dots 1.2s infinite}.thought i:nth-child(2){animation-delay:.2s}.thought i:nth-child(3){animation-delay:.4s}body[data-state=thinking] .thought{display:flex}.conversation{margin:20px auto 0;max-width:470px}.record{background:var(--blue);color:white;border:0;border-radius:19px;padding:18px 27px;min-width:267px;display:inline-flex;justify-content:center;align-items:center;gap:12px;box-shadow:0 6px 0 #056887,0 11px 21px #006e8c19;font-size:15px;font-weight:600;transition:transform .15s,background .2s}.record:hover{background:#096d8c;transform:translateY(-2px)}.record svg{height:20px;width:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}.hint{font-size:11px;color:#869191;margin:16px 0 0}.secondary{display:flex;justify-content:center;gap:20px;align-items:center;margin:26px 0 0}.text-button{color:#678081;background:none;border:0;padding:8px 2px;font-size:12px}.text-button span{font-size:18px;margin-right:4px}.divider{height:13px;width:1px;background:#d8dfd6}.play-controls{display:flex;gap:8px;justify-content:center;margin:20px 0 0}.play-controls[hidden]{display:none}.play-controls button,.pose-buttons button{border:1px solid #d5dfd7;border-radius:12px;background:#fff8;color:var(--ink);padding:9px 13px;font-size:12px}#notice{font-size:12px;line-height:1.5;color:#8e613f;margin:12px 0 0}.sound-bars{display:none;height:22px;align-items:center;justify-content:center;gap:4px;margin:0 0 15px}.sound-bars i{width:3px;height:8px;border-radius:6px;background:#75a8a0;animation:wave .8s infinite alternate}.sound-bars i:nth-child(2n){animation-delay:.2s}.sound-bars i:nth-child(3n){animation-delay:.5s}body[data-state=listening] .sound-bars,body[data-state=speaking] .sound-bars{display:flex}body[data-state=listening] .record{background:#ca7250;box-shadow:0 6px 0 #ad593a}body[data-state=listening] #state-dot{background:#ca7250}.lab{margin:35px auto 0;text-align:left;max-width:490px;border-top:1px solid #e1e5da;padding-top:15px;font-size:12px;color:#7b8987}.lab summary{cursor:pointer;text-align:center;font-size:11px}.lab p{line-height:1.6}.pose-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.lab form label{display:block;margin-bottom:8px}.lab form div{display:flex;gap:7px}.lab input:not([type=file]){min-width:0;flex:1;padding:11px;border:1px solid #d5dfd7;border-radius:10px;background:#fffc}.lab form button{border:0;border-radius:10px;background:var(--blue);color:white;padding:10px 16px}.lab details{margin:15px 0}.file-label{display:block;margin:18px 0 8px}.file-label input{display:block;margin-top:8px;font-size:11px;width:100%}.small{font-size:11px;color:#7f8d8a;line-height:1.6}footer{display:flex;justify-content:space-between;max-width:1180px;margin:0 auto;padding:26px 40px;font-size:10px;color:#98a19a}dialog{border:0;border-radius:24px;padding:34px;max-width:390px;width:calc(100% - 30px);background:var(--paper);color:var(--ink);box-shadow:0 25px 90px #183e4b33}dialog::backdrop{background:#153d4866;backdrop-filter:blur(4px)}dialog h2{margin:0 0 25px;font-family:Manrope,sans-serif}dialog label{display:block;font-size:12px;margin:17px 0 7px}dialog select{width:100%;padding:12px;border:1px solid #d4ded3;border-radius:10px;background:white;color:var(--ink)}.close{position:absolute;top:14px;right:16px;border:0;background:none;font-size:25px;color:#7d8e87}.save{width:100%;background:var(--blue);color:white;border:0;border-radius:12px;padding:13px;margin-top:12px}@keyframes dots{50%{transform:translateY(-4px)}}@keyframes wave{to{height:20px}}@media(max-width:600px){.top{height:77px;padding:0 22px}.brand{font-size:26px}.top-actions{gap:12px}main{padding:15px 18px 15px}.stage{height:365px;margin-top:5px}.stage canvas{height:308px;width:234px;top:18px}.orbit-one{width:300px;height:300px;top:25px}.orbit-two{width:330px;height:330px;top:10px}.spark-one{left:8%;top:80px}.spark-two{right:8%;top:240px}.ground{bottom:38px}.conversation{margin-top:18px}.intro .eyebrow{font-size:8px;letter-spacing:2px}#subtitle{font-size:13px}footer{padding:25px 22px}.lab{margin-top:25px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.record{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

dialog{max-height:90vh;overflow:auto;max-width:460px}.cost-panel{border-top:1px solid #dbe2d7;margin-top:22px;padding-top:8px}.cost-panel h3{font-size:16px;margin:17px 0 8px}.cost-panel h4{font-size:12px;margin:20px 0 9px}.metric{display:flex;justify-content:space-between;gap:14px;font-size:11px;margin:10px 0}.metric strong{white-space:nowrap;font-size:12px}.metric.total{border-top:1px solid #e0e5dc;padding-top:11px}.cost-panel input{width:100%;padding:11px;border:1px solid #d4ded3;border-radius:10px;background:white}.cost-panel details{font-size:11px;margin:15px 0}.cost-panel summary{cursor:pointer}.cost-panel #stats-days p{border-bottom:1px solid #e0e5dc;padding:8px 0}.secondary{flex-wrap:wrap}button[hidden]{display:none!important}

.awaiting-call > header,.awaiting-call > main,.awaiting-call > footer{display:none}.call-screen{min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:28px;box-sizing:border-box;background:radial-gradient(ellipse at center,#e6f1ec 0,transparent 65%)}.call-screen[hidden]{display:none}.call-screen h1{max-width:540px;font-size:clamp(30px,6vw,48px)}.call-phone{width:min(280px,75vw);border:0;background:transparent;cursor:pointer;margin:24px 0;touch-action:manipulation;filter:drop-shadow(0 16px 12px #18466b20)}.call-phone img{width:100%;display:block}.call-phone:focus-visible{outline:3px solid #2476ac;outline-offset:12px;border-radius:30px}.call-phone:disabled{opacity:1;cursor:wait}.call-phone.ringing{animation:phone-ring .28s linear infinite;transform-origin:50% 90%}@keyframes phone-ring{0%,100%{transform:rotate(-11deg) translate(-5px,-3px)}25%{transform:rotate(9deg) translate(5px,-9px)}50%{transform:rotate(-9deg) translate(-4px,-5px)}75%{transform:rotate(12deg) translate(5px,-10px)}}@media(prefers-reduced-motion:reduce){.call-phone.ringing{animation:none}}

.call-phone .telephone-art{width:100%;display:block;overflow:visible}.phone-waves{opacity:0}.ringing .phone-waves{opacity:1;animation:ring-waves .28s alternate infinite}.ringing .phone-handset{transform-origin:160px 65px;animation:handset-shake .14s alternate infinite}@keyframes handset-shake{from{transform:translateY(-4px) rotate(-4deg)}to{transform:translateY(-9px) rotate(4deg)}}@keyframes ring-waves{from{opacity:.35}to{opacity:1}}@media(prefers-reduced-motion:reduce){.ringing .phone-handset,.ringing .phone-waves{animation:none}}

.record,.record *{user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;touch-action:none}.record *{pointer-events:none}.stage canvas{position:absolute;left:50%;margin:0;transform:translateX(-50%);top:37px}.spoken-answer{font-size:15px;line-height:1.55;background:#ffffff99;border-radius:16px;padding:14px;margin:18px 0}.spoken-answer[hidden]{display:none}@media(max-width:600px){.stage canvas{top:21px}.record{min-height:64px;width:100%;max-width:350px}}

/* Conversa em uma tela: configuração, personagem e botão. */
body:not(.awaiting-call){height:100svh;overflow:hidden;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
body:not(.awaiting-call) .top{height:60px;min-height:60px;width:100%;max-width:none;padding:calc(8px + env(safe-area-inset-top)) 16px 8px;justify-content:flex-end;margin:0}
body:not(.awaiting-call) .brand,body:not(.awaiting-call) .voice-pill,body:not(.awaiting-call) .intro,body:not(.awaiting-call) .secondary,body:not(.awaiting-call) .lab,body:not(.awaiting-call) footer,body:not(.awaiting-call) .hint,body:not(.awaiting-call) .play-controls,body:not(.awaiting-call) .spoken-answer,body:not(.awaiting-call) .sound-bars,body:not(.awaiting-call) .state-pill,body:not(.awaiting-call) .spark,body:not(.awaiting-call) .thought,body:not(.awaiting-call) #notice,body:not(.awaiting-call) #retry{display:none!important}
body:not(.awaiting-call) main{width:100%;max-width:650px;flex:1;min-height:0;padding:0 20px 24px;display:flex;flex-direction:column;align-items:center;gap:12px}
body:not(.awaiting-call) .stage{flex:1;width:100%;min-height:0;height:auto;max-width:520px;margin:0}
body:not(.awaiting-call) .stage canvas{position:absolute;height:95%;width:auto;max-width:100%;object-fit:contain;top:0;left:50%;transform:translateX(-50%);margin:0;aspect-ratio:1100/1450}
body:not(.awaiting-call) .orbit-one{width:min(90%,380px);height:auto;aspect-ratio:1;top:45%;transform:translate(-50%,-50%)}
body:not(.awaiting-call) .orbit-two{display:none}body:not(.awaiting-call) .ground{bottom:4%;width:45%}
body:not(.awaiting-call) .conversation{flex:none;margin:0;width:100%;max-width:350px}body:not(.awaiting-call) .record{width:100%;min-width:0;min-height:64px;padding:16px 20px;transform:none}
body:not(.awaiting-call) .record:hover{transform:none}
@media(max-height:500px){body:not(.awaiting-call) .top{height:44px;min-height:44px}body:not(.awaiting-call) main{padding-bottom:14px;gap:5px}body:not(.awaiting-call) .record{min-height:50px}}

html{height:100%;overscroll-behavior:none}body.awaiting-call{height:100svh;overflow:hidden;overscroll-behavior:none}.call-screen{height:100svh;min-height:0;overflow:hidden;padding:calc(20px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));gap:12px}.call-screen h1{font-size:clamp(26px,5.5vw,42px);margin:0}.call-screen .eyebrow{margin:0}.call-phone{width:min(250px,60vw,38svh);margin:12px 0}.call-screen #call-status{margin:0;font-size:15px}@media(max-height:500px){.call-screen{gap:6px;padding:12px}.call-screen h1{font-size:25px}.call-phone{margin:0;width:min(160px,35svh)}}

.tree-branch{position:absolute;left:50%;transform:translateX(-50%);width:calc(100vw + 4px);height:clamp(66px,14vw,100px);bottom:calc(8.7% - clamp(33px,7vw,50px) + 30px);z-index:-1;pointer-events:none;overflow:visible}body:not(.awaiting-call) .ground{display:none}@media(min-width:650px){.tree-branch{width:min(100vw,1000px)}}

.tree-branch{display:none!important}

body:not(.awaiting-call)[data-state=thinking] .thought{display:flex!important;position:absolute;top:8%;right:5%;gap:7px;background:#fffdf7;border:2px solid #c9d9c6;border-radius:25px;padding:15px 20px;box-shadow:0 5px 14px #183e4b12;z-index:3}
body[data-state=thinking] .thought::before,body[data-state=thinking] .thought::after{content:'';position:absolute;border:2px solid #c9d9c6;background:#fffdf7;border-radius:50%}
body[data-state=thinking] .thought::before{width:13px;height:13px;bottom:-17px;left:12px}body[data-state=thinking] .thought::after{width:7px;height:7px;bottom:-30px;left:2px}
body[data-state=thinking] .thought i{width:8px;height:8px;background:#538d91;animation:thinking-dots 1.2s ease-in-out infinite}body[data-state=thinking] .thought i:nth-child(2){animation-delay:.2s}body[data-state=thinking] .thought i:nth-child(3){animation-delay:.4s}@keyframes thinking-dots{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-6px);opacity:1}}

.call-screen,.call-phone{transition:none}.call-phone{width:min(230px,58vw,35svh)}

/* Escola e cerca compartilham o mesmo canvas, sem desencontro de apoio. */
body:not(.awaiting-call) .orbit,body:not(.awaiting-call) .ground{display:none!important}
body:not(.awaiting-call) .stage canvas{height:100%;max-width:100%;border-radius:24px}

body:not(.awaiting-call) .stage canvas{object-fit:fill}