/* ooptIA · Web.App — Otto animado (doc 16): poses, animações e o Otto flutuante.
   O SVG sai do servidor (Components/Ui/OttoSvg.cs) com TODAS as partes; aqui cada estado
   (.ot.st-{estado}) mostra as suas e liga as animações. O comportamento fica em app/js/otto.js.

   Camadas:
     1. respiração (sempre): flutuar, antena pulsando, piscar
     2. pose do estado: olhos, braços, efeitos
     2b. movimentos de quando está parado: .ge-{nome} (sorteados pelo otto.js com o Otto em "atento")
     3. reações passageiras: .is-blink, .is-tap, [data-gaze]
     4. profundidade: inclinação em perspectiva e camadas que andam com --ot-ox/--ot-oy
   Regras de desempenho: só transform/opacity animam; nenhum filtro animado; o flutuante é uma camada própria. */

.ot { overflow: visible; flex: none; display: block; }
.ot .ot-alt { display: none; }
.ot .ot-eyes, .ot .ot-eye, .ot .ot-glasses, .ot .ot-ant { transform-box: fill-box; transform-origin: center; }
.ot .ot-eyes { transition: transform .25s ease-out; }

/* ---------- 1. respiração ---------- */
.ot .ot-ant { animation: ot-pulse 1.9s ease-in-out infinite; }
.ot:not([data-otto-live]) .ot-eyes-open .ot-eye { animation: ot-blink 4.2s infinite; }
.ot.is-blink .ot-eyes-open .ot-eye { animation: ot-blink-once .18s ease-in-out; }
.ot-full .ot-body { animation: ot-bob 3s ease-in-out infinite; }
.ot-full .ot-shadow { transform-box: fill-box; transform-origin: center; animation: ot-shadow 3s ease-in-out infinite; }
.ot-full .ot-headg { transform-box: fill-box; transform-origin: 50% 90%; }
/* propulsor: a chama tremula sempre, em ritmos diferentes por camada (não fica "batendo" igual) */
.ot-full :is(.ot-jato, .ot-jato-halo, .ot-jato-chama, .ot-jato-miolo) { transform-box: fill-box; transform-origin: 50% 0; }
.ot-full .ot-jato-halo { animation: ot-jato-halo .37s ease-in-out infinite alternate; }
.ot-full .ot-jato-chama { animation: ot-jato .13s ease-in-out infinite alternate; }
.ot-full .ot-jato-miolo { animation: ot-jato .21s ease-in-out infinite alternate-reverse; }
.ot-full .ot-jato { transition: transform .4s ease-out, opacity .4s ease-out; }
.ot-full:is(.st-comemorando, .st-pulinho, .st-assustado, .st-surpreso) .ot-jato { transform: scale(1.12, 1.45); }
.ot-full:is(.st-dormindo, .st-triste) .ot-jato { transform: scale(.8, .55); opacity: .7; }
.ot-full .d2 { animation-delay: .35s !important; }
.ot-full .d3 { animation-delay: .7s !important; }

/* ---------- 2. poses ---------- */
/* olhos: "aberto" é o padrão; os outros estados trocam a forma */
.ot:is(.st-feliz, .st-comemorando, .st-dormindo, .st-desligado, .st-piscadela, .st-triste, .st-surpreso, .st-assustado, .st-tonto) .ot-eyes-open { display: none; }
.ot:is(.st-feliz, .st-comemorando) .ot-eyes-happy,
.ot:is(.st-dormindo, .st-desligado) .ot-eyes-sleep,
.ot.st-piscadela .ot-eyes-wink,
.ot.st-triste .ot-eyes-sad,
.ot:is(.st-surpreso, .st-assustado) .ot-eyes-surprise,
.ot.st-tonto .ot-eyes-dizzy { display: inline; }

/* braços */
.ot:is(.st-acenando, .st-ajeitando, .st-comemorando, .st-assustado) .ot-arm-r-down,
.ot:is(.st-comemorando, .st-assustado) .ot-arm-l-down { display: none; }
.ot:is(.st-acenando, .st-ajeitando, .st-comemorando, .st-assustado) .ot-arm-r-up,
.ot:is(.st-comemorando, .st-assustado) .ot-arm-l-up { display: inline; }

/* efeitos */
.ot.st-acenando .ot-fx-wave,
.ot.st-comemorando .ot-fx-stars,
.ot.st-pensando .ot-fx-dots,
.ot.st-ouvindo .ot-fx-ring,
.ot.st-falando .ot-fx-talk,
.ot.st-dormindo .ot-fx-zz,
.ot.st-triste .ot-fx-drop,
.ot:is(.st-surpreso, .st-assustado) .ot-fx-surprise,
.ot.st-tonto .ot-fx-dizzy,
.ot.is-tap .ot-fx-sparks { display: inline; }

/* atento: só a respiração */

/* acenando: o braço balança e a cabeça inclina */
.ot-full.st-acenando .ot-arm-r-up { transform-box: view-box; animation: ot-wave .9s ease-in-out infinite; }
.ot-full.st-acenando .ot-fx-wave { animation: ot-pulse .9s ease-in-out infinite; }
.ot-full:is(.st-acenando, .st-feliz) .ot-headg { animation: ot-tilt 1.8s ease-in-out infinite; }

/* olhando em volta: olhos e cabeça vão para um lado e para o outro */
.ot.st-olhando .ot-eyes { animation: ot-look-around 2.6s ease-in-out infinite; }
.ot-full.st-olhando .ot-headg { animation: ot-turn 2.6s ease-in-out infinite; }

/* ajeitando os óculos: a mão sobe até a armação e os óculos sobem e descem */
.ot-full.st-ajeitando .ot-arm-r-up { transform-box: view-box; animation: ot-adjust 1.5s ease-in-out infinite; }
.ot.st-ajeitando .ot-glasses { animation: ot-glasses 1.5s ease-in-out infinite; }

/* pulinho: agacha, sobe e amortece */
.ot-full.st-pulinho .ot-body { animation: ot-hop 1.1s cubic-bezier(.3, 0, .4, 1) infinite; }
.ot-full.st-pulinho .ot-shadow { animation: ot-shadow-hop 1.1s cubic-bezier(.3, 0, .4, 1) infinite; }

/* pensando: cabeça inclinada, olhos para cima, pontos, antena rápida */
.ot.st-pensando .ot-eyes { animation: ot-look 2.6s ease-in-out infinite; }
.ot-full.st-pensando .ot-headg { animation: ot-tilt-think 2.6s ease-in-out infinite; }
.ot-full .ot-dot { transform-box: fill-box; transform-origin: center; animation: ot-dot 1.5s ease-in-out infinite; }
.ot:is(.st-pensando, .st-falando) .ot-ant { animation-duration: .5s; }

/* ouvindo: anéis crescendo */
.ot-full .ot-ring { transform-box: fill-box; transform-origin: center; animation: ot-ring 1.8s ease-out infinite; }

/* falando: vira para o balão (à esquerda), olhos pulsam */
.ot.st-falando .ot-eyes-open .ot-eye { animation: ot-talk .34s ease-in-out infinite alternate; }
.ot-full.st-falando .ot-headg { animation: ot-tilt-talk 2.4s ease-in-out infinite; }
.ot-full.st-falando .ot-fx-talk { animation: ot-pulse .9s ease-in-out infinite; }

/* feliz: olhos em arco e a cabeça balança (regra do acenando) */

/* comemorando: braços para cima, pulos e estrelas */
.ot-full.st-comemorando .ot-body { animation: ot-hop .7s cubic-bezier(.3, 0, .4, 1) infinite; }
.ot-full.st-comemorando .ot-arm-l-up { transform-box: view-box; animation: ot-cheer-l .7s ease-in-out infinite; }
.ot-full.st-comemorando .ot-arm-r-up { transform-box: view-box; animation: ot-cheer-r .7s ease-in-out infinite; }
.ot-full .ot-star { transform-box: fill-box; transform-origin: center; animation: ot-star 1.1s ease-in-out infinite; }

/* triste / erro: cabeça baixa, antena fraca, uma gota */
.ot-full.st-triste .ot-headg { transform: translate(50px, 10px) rotate(-5deg); }
.ot-full.st-triste .ot-body { animation-duration: 4.5s; }
.ot.st-triste .ot-ant { animation: none; opacity: .45; }
.ot-full .ot-drop { transform-box: fill-box; transform-origin: center; animation: ot-drop 1.8s ease-in infinite; }

/* surpreso: olhos crescem por um instante */
.ot.st-surpreso .ot-eyes-surprise { transform-box: fill-box; transform-origin: center; animation: ot-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.ot-full.st-surpreso .ot-fx-surprise { animation: ot-pulse .6s ease-in-out infinite; }
.ot-full.st-surpreso .ot-body { animation: ot-startle .5s ease-out both; }

/* assustado (pego no ar pelo usuário): olhos grandes, os dois braços debatendo, antena disparada */
.ot-full.st-assustado .ot-arm-l-up { transform-box: view-box; animation: ot-cheer-l .24s ease-in-out infinite; }
.ot-full.st-assustado .ot-arm-r-up { transform-box: view-box; animation: ot-cheer-r .24s ease-in-out infinite; }
.ot-full.st-assustado .ot-fx-surprise { animation: ot-pulse .4s ease-in-out infinite; }
.ot.st-assustado .ot-ant { animation-duration: .3s; }

/* tonto (chacoalhado): olhos em espiral, estrelinhas em volta da cabeça, que cambaleia */
.ot .ot-spiral { transform-box: fill-box; transform-origin: center; }
.ot.st-tonto .ot-spiral { animation: ot-spin 1s linear infinite; }
.ot-full.st-tonto .ot-headg { animation: ot-wobble 1.2s ease-in-out infinite; }
.ot-full .ot-tontura { transform-box: fill-box; transform-origin: center; animation: ot-orbit 1.2s ease-in-out infinite; }
.ot.st-tonto .ot-ant { animation: none; opacity: .5; }

/* cochilando: olhos fechados, "z", antena quase apagada, respiração lenta */
.ot-full .ot-zz { animation: ot-zz 2.6s ease-in-out infinite; }
.ot-full.st-dormindo .ot-body, .ot-full.st-dormindo .ot-shadow { animation-duration: 5s; }
.ot.st-dormindo .ot-ant { animation: none; opacity: .3; }

/* desligado e rosto em cinza: sem movimento */
.ot.st-desligado, .ot.ot-gray { filter: grayscale(1); opacity: .7; }
.ot.st-desligado *, .ot.ot-still * { animation: none !important; }

/* ---------- 2b. movimentos de quando está parado (ge-{nome}) ----------
   Com o Otto em "atento", o otto.js sorteia um movimento da tabela GESTOS e põe a classe ge-{nome} no <svg>
   pelo tempo dele; a duração vem em --ge-d (escrita pelo otto.js), então ela mora num lugar só.
   Todo movimento começa e termina na pose de repouso: tirar a classe não dá salto.
   ge-mexe e ge-cab leem --mx/--my/--mr/--ms da própria peça (registradas sem herança, para uma peça não
   passar o valor para a de dentro). Regras com .ot valem também para o rosto sozinho; com .ot-full, só corpo inteiro. */
@property --mx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --my { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --mr { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ms { syntax: '<number>'; inherits: false; initial-value: 1; }

.ot-full .ot-ge { transform-box: view-box; transform-origin: 200px 330px; }
.ot-full :is(.ot-arm-l-down, .ot-arm-r-down) { transform-box: view-box; }
.ot .ot-antena { transform-box: fill-box; transform-origin: 50% 100%; }
.ot :is(.ot-orelha, .ot-eye-fx, .ot-eyes-open, .ot-pop, .ot-onda, .ot-lente-brilho, .ot-relogio) { transform-box: fill-box; transform-origin: center; }
.ot :is(.ot-dedo, .ot-polegar, .ot-barra) { transform-box: fill-box; transform-origin: 50% 100%; }
/* punho da mão direita erguida (em unidades do desenho, antes do giro do braço) */
.ot-full .ot-pulso { transform-box: view-box; transform-origin: 330px 230px; }
.ot-head .d2 { animation-delay: .35s !important; }
.ot-head .d3 { animation-delay: .7s !important; }

/* olhos de cada movimento */
.ot:is(.ge-mostrar-tablet, .ge-joinha, .ge-tchauzinho, .ge-cantarolar, .ge-dancar, .ge-reverencia, .ge-rir, .ge-ideia,
       .ge-espreguicar, .ge-limpar-oculos, .ge-coracao, .ge-estrelas) .ot-eyes-open { display: none; }
.ot:is(.ge-mostrar-tablet, .ge-joinha, .ge-tchauzinho, .ge-cantarolar, .ge-dancar, .ge-reverencia, .ge-rir) .ot-eyes-happy,
.ot.ge-ideia .ot-eyes-surprise,
.ot.ge-espreguicar .ot-eyes-sleep,
.ot.ge-limpar-oculos .ot-eyes-squint,
.ot.ge-coracao .ot-eyes-heart,
.ot.ge-estrelas .ot-eyes-star { display: inline; }

/* braço direito erguido (a mão aparece de frente) */
.ot-full:is(.ge-joinha, .ge-tchauzinho, .ge-cocar-cabeca, .ge-apontar, .ge-relogio, .ge-contar-dedos, .ge-espreguicar) .ot-arm-r-down { display: none; }
.ot-full:is(.ge-joinha, .ge-tchauzinho, .ge-cocar-cabeca, .ge-apontar, .ge-relogio, .ge-contar-dedos, .ge-espreguicar) .ot-arm-r-up {
    display: inline; transform-box: view-box; animation: ge-ergue var(--ge-d) cubic-bezier(.3, 1.2, .5, 1) both;
}

/* 01 conferir o tablet: olha para ele, ergue um pouco e as barras se recalculam */
.ot-full.ge-tablet .ot-eyes { --mx: -10px; --my: 9px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-tablet .ot-headg { --mx: -3px; --my: 5px; --mr: -5deg; animation: ge-cab var(--ge-d) ease-in-out both; }
.ot-full.ge-tablet .ot-arm-l-down { --mr: 8deg; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-tablet .ot-barra { animation: ge-barra .8s ease-in-out 3 both; }

/* 02 mostrar o tablet: estica o braço para a pessoa ver, a tela acende */
.ot-full.ge-mostrar-tablet .ot-arm-l-down { --mr: 28deg; animation: ge-mexe var(--ge-d) cubic-bezier(.3, 1.3, .5, 1) both; }
.ot-full.ge-mostrar-tablet .ot-tela-luz { display: inline; animation: ot-pulse .6s ease-in-out infinite; }
.ot-full.ge-mostrar-tablet .ot-headg { --mr: -4deg; animation: ge-cab var(--ge-d) ease-in-out both; }

/* 03 tamborilar: os dedos da mão direita batem um depois do outro */
.ot-full.ge-tamborilar .ot-eyes { --mx: 10px; --my: 9px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-tamborilar .ot-headg { --my: 3px; --mr: 4deg; animation: ge-cab var(--ge-d) ease-in-out both; }
.ot-full.ge-tamborilar .ot-arm-r-down .ot-dedo { animation: ge-tamborila .5s ease-in-out 4 both; }
.ot-full.ge-tamborilar .ot-arm-r-down .ot-dedo.f2 { animation-delay: .1s; }
.ot-full.ge-tamborilar .ot-arm-r-down .ot-dedo.f1 { animation-delay: .2s; }

/* 04 estalar os dedos */
.ot-full.ge-estalar .ot-arm-r-down { --mr: -16deg; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-estalar .ot-arm-r-down :is(.ot-dedo, .ot-polegar) { animation: ge-estala var(--ge-d) ease-in-out both; }
.ot-full.ge-estalar .ot-fx-estalo { display: inline; }
.ot-full.ge-estalar .ot-fx-estalo .ot-pop { animation: ge-pop var(--ge-d) ease-out both; }

/* 05 joinha: dedos fechados e o polegar para cima */
.ot-full.ge-joinha .ot-arm-r-up { --mr: 0deg; }
.ot-full.ge-joinha .ot-arm-r-up .ot-dedo { transform: scaleY(.3); }
.ot-full.ge-joinha .ot-arm-r-up .ot-polegar { transform: rotate(calc(var(--lado) * -38deg)) scaleY(1.1); }
.ot-full.ge-joinha .ot-fx-sparks { display: inline; }

/* 06 tchauzinho para a pessoa: ergue a mão aberta, ela balança pelo punho, os dedos abanam,
   a cabeça inclina para o outro lado (a mão fica livre), o corpo acompanha e as ondinhas saem da mão */
.ot-full.ge-tchauzinho .ot-arm-r-up { --mr: 14deg; }
.ot-full.ge-tchauzinho .ot-pulso { animation: ge-tchau .8s ease-in-out .4s 2 both; }
.ot-full.ge-tchauzinho .ot-arm-r-up .ot-dedo { animation: ge-dedo-aceno .2s ease-in-out .4s 8 alternate both; }
.ot-full.ge-tchauzinho .ot-arm-r-up .ot-dedo.f2 { animation-delay: .47s; }
.ot-full.ge-tchauzinho .ot-arm-r-up .ot-dedo.f3 { animation-delay: .54s; }
.ot-full.ge-tchauzinho .ot-headg { --mx: -3px; --mr: -6deg; animation: ge-cab var(--ge-d) ease-in-out both; }
.ot-full.ge-tchauzinho .ot-ge { animation: ge-tchau-corpo var(--ge-d) ease-in-out both; }
.ot-full.ge-tchauzinho .ot-fx-wave { display: inline; animation: ge-tchau-onda var(--ge-d) ease-in-out both; }

/* 07 espreguiçar: um braço para cima, o outro para o lado, o corpo estica */
.ot-full.ge-espreguicar .ot-arm-r-up { --mr: -18deg; }
.ot-full.ge-espreguicar .ot-arm-l-down { --mr: 20deg; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-espreguicar .ot-ge { animation: ge-estica var(--ge-d) ease-in-out both; }

/* 08 bocejar: cabeça para trás, olhos quase fechados, antena caída */
.ot-full.ge-bocejar .ot-headg { --my: -4px; --mr: -7deg; animation: ge-cab var(--ge-d) ease-in-out both; }
.ot.ge-bocejar .ot-eyes-open { animation: ge-aperta var(--ge-d) ease-in-out both; }
.ot.ge-bocejar .ot-antena { --mr: 16deg; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-bocejar .ot-ge { --my: 5px; animation: ge-mexe var(--ge-d) ease-in-out both; }

/* 09 coçar o lado da cabeça */
.ot-full.ge-cocar-cabeca .ot-arm-r-up { animation: ge-coca var(--ge-d) ease-in-out both; }
.ot-full.ge-cocar-cabeca .ot-arm-r-up .ot-dedo { transform: scaleY(.7); }
.ot-full.ge-cocar-cabeca .ot-eyes { --mx: 7px; --my: -7px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-cocar-cabeca .ot-headg { --mr: -5deg; animation: ge-cab var(--ge-d) ease-in-out both; }

/* 10 dúvida: cabeça de lado e um "?" */
.ot.ge-duvida .ot-eyes { --my: -5px; --ms: .85; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-duvida .ot-headg { --mr: 9deg; animation: ge-cab var(--ge-d) ease-in-out both; }
.ot-full.ge-duvida .ot-fx-duvida { display: inline; }
.ot-full.ge-duvida .ot-fx-duvida .ot-pop { animation: ge-surge var(--ge-d) cubic-bezier(.3, 1.4, .5, 1) both; }

/* 11 ideia: lâmpada acesa, um saltinho e a antena piscando */
.ot-full.ge-ideia .ot-fx-ideia { display: inline; }
.ot-full.ge-ideia .ot-fx-ideia .ot-pop { animation: ge-surge var(--ge-d) cubic-bezier(.3, 1.4, .5, 1) both; }
.ot-full.ge-ideia .ot-ge { animation: ge-salto var(--ge-d) ease-out both; }
.ot.ge-ideia .ot-ant { animation: ge-luz .25s ease-in-out 6 alternate; }

/* 12 limpar os óculos: tira, esfrega, põe de volta e a lente brilha */
.ot.ge-limpar-oculos .ot-glasses { animation: ge-limpa var(--ge-d) ease-in-out both; }
.ot.ge-limpar-oculos .ot-lente-brilho { display: inline; animation: ge-brilho var(--ge-d) ease-out both; }

/* 13 olhar por cima dos óculos */
.ot.ge-oculos-baixo .ot-glasses { --my: 13px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot.ge-oculos-baixo .ot-eyes { --my: -9px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-oculos-baixo .ot-headg { --my: 4px; --mr: -3deg; animation: ge-cab var(--ge-d) ease-in-out both; }

/* 14 óculos tortos: escorregam de lado e ele ajeita */
.ot.ge-oculos-tortos .ot-glasses { animation: ge-torto var(--ge-d) ease-in-out both; }
.ot.ge-oculos-tortos .ot-eyes { --my: -5px; animation: ge-mexe var(--ge-d) ease-in-out both; }

/* 15 lupa: os olhos crescem atrás das lentes */
.ot.ge-lupa .ot-eyes { --ms: 1.35; animation: ge-mexe var(--ge-d) cubic-bezier(.3, 1.4, .5, 1) both; }
.ot.ge-lupa .ot-glasses { --ms: 1.08; animation: ge-mexe var(--ge-d) cubic-bezier(.3, 1.4, .5, 1) both; }

/* 16 antena de mola */
.ot.ge-antena-mola .ot-antena { animation: ge-mola var(--ge-d) ease-out both; }
.ot.ge-antena-mola .ot-eyes { --my: -9px; animation: ge-mexe var(--ge-d) ease-in-out both; }

/* 17 radar: ondas saem da antena e os olhos varrem */
.ot.ge-radar .ot-radar { display: inline; }
.ot.ge-radar .ot-onda { animation: ge-onda 1.1s ease-out infinite; }
.ot.ge-radar .ot-eyes { animation: ge-varre var(--ge-d) ease-in-out both; }
.ot.ge-radar .ot-ant { animation-duration: .4s; }

/* 18 orelhas sintonizando */
.ot.ge-orelhas .ot-orelha { animation: ge-orelha .5s ease-in-out 4 alternate both; }
.ot.ge-orelhas .ot-eyes { --ms: 1.12; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-orelhas .ot-fx-wave { display: inline; animation: ot-pulse .5s ease-in-out infinite; }

/* 19 piscar rápido */
.ot.ge-piscar-rapido .ot-eyes-open .ot-eye { animation: ot-blink-once .3s ease-in-out 4; }

/* 20 olhos de coração, rubor e o corpo balança */
.ot.ge-coracao .ot-eye-fx { animation: ge-bate .45s ease-in-out infinite alternate; }
.ot.ge-coracao .ot-rubor { display: inline; opacity: .45; }
.ot-full.ge-coracao .ot-ge { animation: ge-balanca var(--ge-d) ease-in-out both; }

/* 21 olhos de estrela e faíscas */
.ot.ge-estrelas .ot-eye-fx { animation: ge-estrela 1s linear infinite; }
.ot-full.ge-estrelas .ot-fx-sparks { display: inline; }
.ot-full.ge-estrelas .ot-spark { animation-iteration-count: 2; }

/* 22 olhar para cima */
.ot.ge-olhar-cima .ot-eyes { --mx: 3px; --my: -11px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-olhar-cima .ot-headg { --my: -5px; --mr: -3deg; animation: ge-cab var(--ge-d) ease-in-out both; }
.ot.ge-olhar-cima .ot-antena { --mr: -10deg; animation: ge-mexe var(--ge-d) ease-in-out both; }

/* 23 olhar a chama do propulsor, que cresce */
.ot-full.ge-olhar-chama .ot-eyes { --my: 11px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-olhar-chama .ot-headg { --my: 7px; --mr: 2deg; animation: ge-cab var(--ge-d) ease-in-out both; }
.ot-full.ge-olhar-chama .ot-jato { animation: ge-jato var(--ge-d) ease-in-out both; }

/* 24 revirar os olhos */
.ot.ge-revirar .ot-eyes { animation: ge-revira var(--ge-d) ease-in-out both; }
.ot-full.ge-revirar .ot-headg { --mr: 3deg; animation: ge-cab var(--ge-d) ease-in-out both; }

/* 25 vesgo, e depois sacode a cabeça */
.ot.ge-vesgo .ot-eyes-open .ot-eye:first-child { --mx: 10px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot.ge-vesgo .ot-eyes-open .ot-eye:last-child { --mx: -10px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-vesgo .ot-headg { animation: ge-sacode-fim var(--ge-d) ease-in-out both; }

/* 26 cantarolar: notas no ar, cabeça no ritmo */
.ot-full.ge-cantarolar .ot-fx-notas { display: inline; }
.ot-full .ot-nota { animation: ge-nota 1.4s ease-out infinite; }
.ot-full.ge-cantarolar .ot-headg { animation: ge-cantar 1.5s ease-in-out 2 both; }

/* 27 dançar: corpo e braços no ritmo */
.ot-full.ge-dancar .ot-ge { animation: ge-danca 1.6s ease-in-out 2 both; }
.ot-full.ge-dancar .ot-arm-l-down { animation: ge-braco-danca .8s ease-in-out 4 both; }
.ot-full.ge-dancar .ot-arm-r-down { animation: ge-braco-danca .8s ease-in-out 4 reverse both; }
.ot-full.ge-dancar .ot-jato { animation: ge-jato .8s ease-in-out 4 both; }

/* 28 pirueta */
.ot-full.ge-pirueta .ot-ge { animation: ge-pirueta var(--ge-d) ease-in-out both; }

/* 29 subir alto devagar */
.ot-full.ge-subir .ot-ge { --my: -34px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-subir .ot-jato { animation: ge-jato var(--ge-d) ease-in-out both; }
.ot-full.ge-subir .ot-shadow { animation: ge-sombra var(--ge-d) ease-in-out both; }
.ot-full.ge-subir .ot-eyes { --my: 6px; animation: ge-mexe var(--ge-d) ease-in-out both; }

/* 30 mergulho: desce, a chama apaga e ele volta com força */
.ot-full.ge-mergulho .ot-ge { animation: ge-mergulho var(--ge-d) ease-in-out both; }
.ot-full.ge-mergulho .ot-jato { animation: ge-jato-mergulho var(--ge-d) ease-in-out both; }
.ot-full.ge-mergulho .ot-eyes { --my: 6px; animation: ge-mexe var(--ge-d) ease-in-out both; }

/* 31 reverência */
.ot-full.ge-reverencia .ot-headg { --my: 16px; animation: ge-cab var(--ge-d) ease-in-out both; }
.ot-full.ge-reverencia .ot-ge { --my: 5px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-reverencia .ot-arm-r-down { --mr: 24deg; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-reverencia .ot-arm-l-down { --mr: -6deg; animation: ge-mexe var(--ge-d) ease-in-out both; }

/* 32 apontar para a tela */
.ot-full.ge-apontar .ot-arm-r-up { --mr: 44deg; }
.ot-full.ge-apontar .ot-arm-r-up :is(.ot-dedo.f1, .ot-dedo.f3) { transform: scaleY(.3); }
.ot-full.ge-apontar .ot-arm-r-up .ot-polegar { transform: rotate(calc(var(--lado) * -60deg)) scaleY(.7); }
.ot-full.ge-apontar .ot-eyes { --mx: 11px; --my: 2px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-apontar .ot-headg { --mx: 3px; --mr: 4deg; animation: ge-cab var(--ge-d) ease-in-out both; }

/* 33 olhar o "relógio" do punho */
.ot-full.ge-relogio .ot-arm-r-up { --mr: 30deg; }
.ot-full.ge-relogio .ot-arm-r-up .ot-dedo { transform: scaleY(.55); }
.ot-full.ge-relogio .ot-arm-r-up .ot-relogio { animation: ge-relogio .4s ease-in-out infinite alternate; }
.ot-full.ge-relogio .ot-eyes { --mx: 10px; --my: 5px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-relogio .ot-headg { --my: 2px; --mr: 5deg; animation: ge-cab var(--ge-d) ease-in-out both; }

/* 34 contar nos dedos */
.ot-full.ge-contar-dedos .ot-arm-r-up { --mr: 4deg; }
.ot-full.ge-contar-dedos .ot-arm-r-up .ot-dedo { animation: ge-dedo-abre .35s ease-out .7s both; }
.ot-full.ge-contar-dedos .ot-arm-r-up .ot-dedo.f2 { animation-delay: 1.1s; }
.ot-full.ge-contar-dedos .ot-arm-r-up .ot-dedo.f3 { animation-delay: 1.5s; }
.ot-full.ge-contar-dedos .ot-arm-r-up .ot-polegar { animation: ge-polegar-abre .35s ease-out 1.9s both; }
.ot-full.ge-contar-dedos .ot-eyes { --mx: 9px; --my: -5px; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-contar-dedos .ot-headg { --mr: 3deg; animation: ge-cab var(--ge-d) ease-in-out both; }

/* 35 mosca: ele acompanha com os olhos até ela ir embora */
.ot-full.ge-mosca .ot-fx-mosca { display: inline; }
.ot-full.ge-mosca .ot-mosca { animation: ge-mosca var(--ge-d) linear both; }
.ot-full .ot-asa { transform-box: fill-box; transform-origin: 50% 100%; animation: ge-asa .08s linear infinite alternate; }
.ot-full.ge-mosca .ot-eyes { animation: ge-segue var(--ge-d) linear both; }
.ot-full.ge-mosca .ot-headg { animation: ge-segue-cab var(--ge-d) ease-in-out both; }

/* 36 cabecear: cochila em pé e acorda num tranco */
.ot.ge-cabecear .ot-eyes-open { animation: ge-cochila var(--ge-d) ease-in-out both; }
.ot-full.ge-cabecear .ot-headg { animation: ge-cabeceia var(--ge-d) ease-in-out both; }

/* 37 soluço */
.ot-full.ge-soluco .ot-ge { animation: ge-soluco var(--ge-d) ease-out both; }
.ot.ge-soluco .ot-eyes { animation: ge-soluco-olho var(--ge-d) ease-out both; }
.ot.ge-soluco .ot-antena { animation: ge-soluco var(--ge-d) ease-out both; }

/* 38 espirro */
.ot-full.ge-espirrar .ot-headg { animation: ge-espirro var(--ge-d) ease-in-out both; }
.ot.ge-espirrar .ot-eyes-open { animation: ge-espirro-olho var(--ge-d) ease-in-out both; }
.ot-full.ge-espirrar .ot-fx-surprise { display: inline; animation: ge-flash var(--ge-d) linear both; }
.ot-full.ge-espirrar .ot-ge { animation: ge-recuo var(--ge-d) ease-in-out both; }

/* 39 tímido: rubor, olhar para baixo e o braço junto do corpo */
.ot.ge-timido .ot-rubor { display: inline; animation: ge-rubor var(--ge-d) ease-in-out both; }
.ot.ge-timido .ot-eyes { --mx: -9px; --my: 8px; --ms: .9; animation: ge-mexe var(--ge-d) ease-in-out both; }
.ot-full.ge-timido .ot-headg { --my: 3px; --mr: -6deg; animation: ge-cab var(--ge-d) ease-in-out both; }
.ot-full.ge-timido .ot-arm-r-down { --mr: 14deg; animation: ge-mexe var(--ge-d) ease-in-out both; }

/* 40 pescoço que estica */
.ot-full.ge-pescoco .ot-headg { animation: ge-pescoco var(--ge-d) ease-in-out both; }
.ot.ge-pescoco .ot-eyes { --my: -5px; --ms: 1.1; animation: ge-mexe var(--ge-d) ease-in-out both; }

/* 41 sacudir a cabeça: orelhas e antena vão junto */
.ot-full.ge-sacudir .ot-headg { animation: ge-sacudir var(--ge-d) ease-in-out both; }
.ot.ge-sacudir .ot-orelha { animation: ge-orelha .2s ease-in-out 6 alternate both; }
.ot.ge-sacudir .ot-antena { animation: ge-mola var(--ge-d) ease-out both; }

/* 42 passear de um lado para o outro */
.ot-full.ge-passear .ot-ge { animation: ge-passeia var(--ge-d) ease-in-out both; }
.ot-full.ge-passear .ot-eyes { animation: ge-passeia-olho var(--ge-d) ease-in-out both; }

/* 43 rir: o corpo sacode */
.ot-full.ge-rir .ot-ge { animation: ge-ri .16s ease-in-out 10 alternate; }
.ot-full.ge-rir .ot-headg { animation: ge-ri-cab .6s ease-in-out 3 both; }

/* keyframes dos movimentos */
@keyframes ge-mexe { 0%, 100% { transform: none; } 18%, 82% { transform: translate(var(--mx), var(--my)) rotate(var(--mr)) scale(var(--ms)); } }
@keyframes ge-cab { 0%, 100% { transform: translate(50px, 0) rotate(0deg); } 18%, 82% { transform: translate(calc(50px + var(--mx)), var(--my)) rotate(var(--mr)); } }
@keyframes ge-ergue { 0%, 100% { transform: rotate(70deg); } 22%, 80% { transform: rotate(var(--mr)); } }
@keyframes ge-barra { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.35); } }
@keyframes ge-tamborila { 0%, 60%, 100% { transform: scaleY(1); } 30% { transform: scaleY(.5); } }
@keyframes ge-estala { 0%, 30%, 62%, 100% { transform: scaleY(1); } 40%, 52% { transform: scaleY(.35); } }
@keyframes ge-pop { 0%, 50% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 82% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes ge-surge { 0% { transform: scale(0); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 25%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.6); opacity: 0; } }
@keyframes ge-tchau { 0%, 100% { transform: none; } 25% { transform: rotate(-16deg); } 75% { transform: rotate(24deg); } }
@keyframes ge-tchau-corpo { 0%, 100% { transform: none; } 30% { transform: rotate(2deg); } 55% { transform: rotate(-1.5deg); } 80% { transform: rotate(1.5deg); } }
@keyframes ge-tchau-onda { 0%, 15%, 100% { opacity: 0; } 25%, 85% { opacity: 1; } }
@keyframes ge-dedo-aceno { from { transform: rotate(-12deg) scaleY(.85); } to { transform: rotate(12deg) scaleY(1); } }
@keyframes ge-estica { 0%, 100% { transform: none; } 30%, 75% { transform: translateY(-8px) scale(1.03, 1.07); } }
@keyframes ge-aperta { 0%, 100% { transform: scaleY(1); } 20%, 80% { transform: scaleY(.22); } }
@keyframes ge-coca { 0%, 100% { transform: rotate(70deg); } 20% { transform: rotate(-20deg); } 30%, 50%, 70% { transform: rotate(-25deg); } 40%, 60%, 80% { transform: rotate(-18deg); } }
@keyframes ge-salto { 0%, 40%, 100% { transform: none; } 15% { transform: translateY(-14px); } 28% { transform: translateY(2px); } }
@keyframes ge-luz { from { transform: scale(1); } to { transform: scale(1.35); } }
@keyframes ge-limpa { 0%, 100% { transform: none; } 15% { transform: translateY(-16px); } 25%, 45%, 65% { transform: translate(-5px, -16px) rotate(-3deg); } 35%, 55% { transform: translate(5px, -16px) rotate(3deg); } 75% { transform: translateY(-16px); } 90% { transform: translateY(2px); } }
@keyframes ge-brilho { 0%, 72% { transform: scale(0); opacity: 0; } 84% { transform: scale(1.2) rotate(30deg); opacity: 1; } 100% { transform: scale(.4) rotate(60deg); opacity: 0; } }
@keyframes ge-torto { 0%, 100% { transform: none; } 12%, 55% { transform: translateY(3px) rotate(13deg); } 66% { transform: rotate(-5deg); } 76% { transform: rotate(3deg); } 86% { transform: rotate(-1deg); } }
@keyframes ge-mola { 0%, 100% { transform: none; } 8% { transform: rotate(24deg); } 22% { transform: rotate(-19deg); } 36% { transform: rotate(14deg); } 50% { transform: rotate(-10deg); } 64% { transform: rotate(6deg); } 78% { transform: rotate(-3deg); } 90% { transform: rotate(1deg); } }
@keyframes ge-onda { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ge-varre { 0%, 100% { transform: none; } 25% { transform: translateX(-11px); } 50% { transform: translateX(11px); } 75% { transform: translateX(-6px); } }
@keyframes ge-orelha { from { transform: scale(1); } to { transform: scale(1.2) rotate(25deg); } }
@keyframes ge-bate { from { transform: scale(.9); } to { transform: scale(1.12); } }
@keyframes ge-balanca { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(-4deg); } 40%, 80% { transform: rotate(4deg); } }
@keyframes ge-estrela { 0% { transform: rotate(0deg) scale(.9); } 50% { transform: rotate(45deg) scale(1.15); } 100% { transform: rotate(90deg) scale(.9); } }
@keyframes ge-jato { 0%, 100% { transform: none; } 30%, 75% { transform: scale(1.15, 1.5); } }
@keyframes ge-revira { 0%, 100% { transform: none; } 20% { transform: translate(-10px, -2px); } 40% { transform: translate(-6px, -10px); } 60% { transform: translate(6px, -10px); } 80% { transform: translate(10px, -2px); } }
@keyframes ge-sacode-fim { 0%, 70%, 100% { transform: translate(50px, 0) rotate(0deg); } 76% { transform: translate(50px, 0) rotate(-6deg); } 82% { transform: translate(50px, 0) rotate(6deg); } 88% { transform: translate(50px, 0) rotate(-4deg); } 94% { transform: translate(50px, 0) rotate(2deg); } }
@keyframes ge-nota { 0% { transform: translate(0, 10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(14px, -30px) rotate(10deg); opacity: 0; } }
@keyframes ge-cantar { 0%, 100% { transform: translate(50px, 0) rotate(0deg); } 25% { transform: translate(50px, 0) rotate(-6deg); } 75% { transform: translate(50px, 0) rotate(6deg); } }
@keyframes ge-danca { 0%, 50%, 100% { transform: none; } 15% { transform: translate(-9px, -6px) rotate(-6deg); } 35% { transform: translate(9px, -6px) rotate(6deg); } 65% { transform: translate(-6px, -10px) rotate(-4deg); } 85% { transform: translate(6px, -10px) rotate(4deg); } }
@keyframes ge-braco-danca { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes ge-pirueta { 0%, 100% { transform: none; } 25% { transform: translateY(-10px) scaleX(0); } 50% { transform: translateY(-14px) scaleX(-1); } 75% { transform: translateY(-10px) scaleX(0); } }
@keyframes ge-sombra { 0%, 100% { transform: scaleX(1); opacity: 1; } 18%, 82% { transform: scaleX(.65); opacity: .5; } }
@keyframes ge-mergulho { 0%, 100% { transform: none; } 35% { transform: translateY(16px) scale(1.02, .97); } 60% { transform: translateY(-16px); } 80% { transform: translateY(3px); } }
@keyframes ge-jato-mergulho { 0%, 100% { transform: none; } 35% { transform: scale(.8, .5); } 60% { transform: scale(1.2, 1.7); } }
@keyframes ge-relogio { from { opacity: 1; transform: scale(1); } to { opacity: .4; transform: scale(1.7); } }
@keyframes ge-dedo-abre { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes ge-polegar-abre { from { transform: rotate(calc(var(--lado) * -60deg)) scaleY(.7); } to { transform: none; } }
@keyframes ge-mosca { 0% { transform: translate(410px, 20px); } 18% { transform: translate(300px, 60px); } 35% { transform: translate(70px, 90px); } 50% { transform: translate(110px, 210px); } 65% { transform: translate(230px, 20px); } 82% { transform: translate(350px, 170px); } 100% { transform: translate(450px, -30px); } }
@keyframes ge-asa { from { transform: scaleY(1); } to { transform: scaleY(.3); } }
@keyframes ge-segue { 0%, 100% { transform: none; } 10% { transform: translate(11px, -7px); } 18% { transform: translate(8px, -6px); } 35% { transform: translate(-10px, -4px); } 50% { transform: translate(-7px, 5px); } 65% { transform: translate(2px, -8px); } 82% { transform: translate(11px, 3px); } }
@keyframes ge-segue-cab { 0%, 100% { transform: translate(50px, 0) rotate(0deg); } 35%, 50% { transform: translate(50px, 0) rotate(-4deg); } 82% { transform: translate(50px, 0) rotate(4deg); } }
@keyframes ge-cochila { 0%, 100% { transform: scaleY(1); } 15%, 72% { transform: scaleY(.12); } 80% { transform: scaleY(1.25); } 90% { transform: scaleY(1); } }
@keyframes ge-cabeceia { 0%, 100% { transform: translate(50px, 0) rotate(0deg); } 25% { transform: translate(50px, 8px) rotate(4deg); } 40% { transform: translate(50px, 4px) rotate(2deg); } 62% { transform: translate(50px, 12px) rotate(6deg); } 76% { transform: translate(50px, -5px) rotate(-2deg); } 88% { transform: translate(50px, 1px) rotate(0deg); } }
@keyframes ge-soluco { 0%, 22%, 55%, 77%, 100% { transform: none; } 8%, 63% { transform: translateY(-13px); } }
@keyframes ge-soluco-olho { 0%, 22%, 55%, 77%, 100% { transform: scale(1); } 8%, 63% { transform: scale(1.25); } }
@keyframes ge-espirro { 0%, 100% { transform: translate(50px, 0) rotate(0deg); } 40% { transform: translate(50px, -6px) rotate(-7deg); } 52% { transform: translate(50px, 9px) rotate(8deg); } 70% { transform: translate(50px, 0) rotate(0deg); } }
@keyframes ge-espirro-olho { 0%, 100% { transform: scaleY(1); } 25%, 45% { transform: scaleY(.45); } 52%, 66% { transform: scaleY(.1); } 76% { transform: scaleY(1); } }
@keyframes ge-flash { 0%, 50%, 75%, 100% { opacity: 0; } 54%, 68% { opacity: 1; } }
@keyframes ge-recuo { 0%, 45%, 70%, 100% { transform: none; } 54% { transform: translateY(5px); } }
@keyframes ge-rubor { 0%, 100% { opacity: 0; } 25%, 80% { opacity: .55; } }
@keyframes ge-pescoco { 0%, 100% { transform: translate(50px, 0); } 28%, 60% { transform: translate(50px, -24px); } 70% { transform: translate(50px, 4px); } 80% { transform: translate(50px, -4px); } 90% { transform: translate(50px, 1px); } }
@keyframes ge-sacudir { 0%, 100% { transform: translate(50px, 0) rotate(0deg); } 12% { transform: translate(50px, 0) rotate(-9deg); } 26% { transform: translate(50px, 0) rotate(9deg); } 40% { transform: translate(50px, 0) rotate(-7deg); } 54% { transform: translate(50px, 0) rotate(6deg); } 68% { transform: translate(50px, 0) rotate(-3deg); } 82% { transform: translate(50px, 0) rotate(2deg); } }
@keyframes ge-passeia { 0%, 100% { transform: none; } 30% { transform: translateX(-24px) rotate(-3deg); } 45% { transform: translateX(-24px); } 72% { transform: translateX(22px) rotate(3deg); } 85% { transform: translateX(22px); } }
@keyframes ge-passeia-olho { 0%, 100% { transform: none; } 15%, 40% { transform: translateX(-10px); } 55%, 80% { transform: translateX(10px); } }
@keyframes ge-ri { from { transform: none; } to { transform: translateY(-4px) scaleY(1.01); } }
@keyframes ge-ri-cab { 0%, 100% { transform: translate(50px, 0) rotate(0deg); } 25% { transform: translate(50px, 0) rotate(-4deg); } 75% { transform: translate(50px, 0) rotate(4deg); } }

/* ---------- 3. reações ---------- */
/* toque: faíscas e o corpo quica */
.ot-full.is-tap .ot-body { animation: ot-tap .6s cubic-bezier(.3, 1.5, .5, 1); }
.ot-full .ot-spark { transform-box: fill-box; transform-origin: center; animation: ot-star .9s ease-out both; }
/* rolagem: o olhar acompanha a direção */
.ot[data-gaze="down"] .ot-eyes { transform: translateY(7px); }
.ot[data-gaze="up"] .ot-eyes { transform: translateY(-7px); }

/* ---------- 4. profundidade (3D) ----------
   otto.js escreve --ot-ox/--ot-oy (de -1 a 1) nos Ottos vivos: para onde ele olha (ponteiro ou campo em foco).
   O boneco gira um pouco em perspectiva e as camadas andam em velocidades diferentes:
   corpo parado, cabeça um pouco, óculos mais, olhos mais ainda (olham para o ponto); a sombra vai para o outro lado.
   Em px dentro do SVG = unidades do desenho, então vale para qualquer tamanho. */
.ot[data-otto-live] {
    transform: perspective(520px) rotateY(calc(var(--ot-ox, 0) * 14deg)) rotateX(calc(var(--ot-oy, 0) * -9deg));
    transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.ot :is(.ot-headp, .ot-olhar, .ot-oculosp, .ot-chao) { transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
.ot .ot-headp { transform: translate(calc(var(--ot-ox, 0) * 6px), calc(var(--ot-oy, 0) * 4px)); }
.ot .ot-oculosp { transform: translate(calc(var(--ot-ox, 0) * 8px), calc(var(--ot-oy, 0) * 5px)); }
.ot .ot-olhar { transform: translate(calc(var(--ot-ox, 0) * 11px), calc(var(--ot-oy, 0) * 8px)); }
.ot .ot-chao { transform: translateX(calc(var(--ot-ox, 0) * -12px)); }
/* dormindo, desligado, tonto e na mão do usuário: olha para a frente */
.ot:is(.st-dormindo, .st-desligado, .st-tonto, .st-assustado), .ottof.is-pego .ot { --ot-ox: 0 !important; --ot-oy: 0 !important; }

/* ---------- keyframes ---------- */
@keyframes ot-blink { 0%, 91%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes ot-blink-once { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.08); } }
@keyframes ot-talk { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
@keyframes ot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes ot-look { 0%, 100% { transform: translate(0, -4px); } 30% { transform: translate(7px, -8px); } 65% { transform: translate(-6px, -7px); } }
@keyframes ot-look-around { 0%, 100% { transform: translate(0, 0); } 25%, 40% { transform: translate(-11px, 0); } 65%, 80% { transform: translate(11px, -2px); } }
@keyframes ot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ot-jato { from { transform: scale(1, 1); } to { transform: scale(.92, 1.16); } }
@keyframes ot-jato-halo { from { transform: scale(1, .94); opacity: .8; } to { transform: scale(1.06, 1.1); opacity: 1; } }
@keyframes ot-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.9); } }
@keyframes ot-shadow-hop { 0%, 100% { transform: scaleX(1); opacity: 1; } 55% { transform: scaleX(.7); opacity: .6; } }
@keyframes ot-wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-17deg); } 75% { transform: rotate(9deg); } }
@keyframes ot-adjust { 0%, 100% { transform: rotate(0deg); } 35%, 65% { transform: rotate(-38deg); } }
@keyframes ot-glasses { 0%, 30%, 70%, 100% { transform: translateY(0); } 45% { transform: translateY(-7px); } 55% { transform: translateY(-3px); } }
@keyframes ot-tilt { 0%, 100% { transform: translate(50px, 0) rotate(0deg); } 50% { transform: translate(50px, 0) rotate(4deg); } }
@keyframes ot-tilt-think { 0%, 100% { transform: translate(50px, 0) rotate(-3deg); } 50% { transform: translate(50px, 0) rotate(6deg); } }
@keyframes ot-tilt-talk { 0%, 100% { transform: translate(50px, 0) rotate(-5deg); } 50% { transform: translate(50px, 0) rotate(-2deg); } }
@keyframes ot-turn { 0%, 100% { transform: translate(50px, 0) rotate(0deg); } 25%, 40% { transform: translate(46px, 0) rotate(-5deg); } 65%, 80% { transform: translate(54px, 0) rotate(5deg); } }
@keyframes ot-hop { 0%, 100% { transform: translateY(0) scaleY(1); } 18% { transform: translateY(6px) scaleY(.94); } 55% { transform: translateY(-26px) scaleY(1.03); } 80% { transform: translateY(2px) scaleY(.98); } }
@keyframes ot-tap { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(5px) scale(1.03, .95); } 60% { transform: translateY(-12px) scale(.98, 1.03); } 100% { transform: translateY(0) scale(1); } }
@keyframes ot-startle { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes ot-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@keyframes ot-cheer-l { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(14deg); } }
@keyframes ot-cheer-r { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@keyframes ot-star { 0%, 100% { transform: scale(.3) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(40deg); opacity: 1; } }
@keyframes ot-dot { 0%, 100% { transform: scale(.5); opacity: .25; } 50% { transform: scale(1); opacity: 1; } }
@keyframes ot-ring { 0% { transform: scale(.75); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes ot-zz { 0% { transform: translate(0, 10px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(10px, -22px); opacity: 0; } }
@keyframes ot-drop { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes ot-spin { to { transform: rotate(360deg); } }
@keyframes ot-wobble { 0%, 100% { transform: translate(50px, 0) rotate(-7deg); } 50% { transform: translate(50px, 0) rotate(7deg); } }
@keyframes ot-orbit { 0%, 100% { transform: translateX(-34px) scale(.6); opacity: .35; } 50% { transform: translateX(34px) scale(1); opacity: 1; } }

/* ---------- Otto flutuante (web, tablet e celular): .ottof, .bal, .fab ----------
   Sempre na tela, por cima do conteúdo. A posição de repouso (canto inferior direito da área de
   conteúdo) vem daqui; o deslocamento — passeio, arrastar, subir para falar — é um transform
   escrito por app/js/otto/flutuante.js, sem refluir a página. */
.ottof {
    position: fixed; right: var(--sp-4); bottom: var(--sp-3);
    z-index: var(--z-float);
    display: flex; align-items: flex-end; gap: var(--sp-1);
    pointer-events: none;            /* só o Otto, o balão e o botão recebem clique */
    contain: layout style;           /* o que muda aqui não reflui a página */
}
.ottof > * { pointer-events: auto; }
.ottof-btn {
    position: relative;
    border: 0; background: none; padding: 0; cursor: grab; border-radius: var(--r-lg);
    will-change: transform;          /* camada própria: animar o Otto não repinta a lista */
    touch-action: none;              /* arrastar o Otto não rola a página */
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ottof-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ottof.is-movendo { will-change: transform; }
/* o olhar segue o que acontece (arrastar, balão): flutuante.js escreve --ot-lx/--ot-ly; a rolagem ([data-gaze]) vence */
.ottof .ot-eyes { transform: translate(var(--ot-lx, 0px), var(--ot-ly, 0px)); }

/* na mão do usuário: pendurado pelo ponto em que foi pego, sem a respiração e quase sem sombra */
.ottof.is-pego .ottof-btn { cursor: grabbing; }
.ottof.is-pego :is(.ot-body, .ot-shadow) { animation: none; }
.ottof.is-pego .ot-shadow { opacity: .05; }
.ottof.is-pego .hint { display: none; }

/* "carimbo" da casa nova: um anel se abre no chão onde ele foi solto */
.ottof-casa {
    position: absolute; left: 50%; bottom: -2px; width: 72px; height: 16px; margin-left: -36px;
    border: 2px solid var(--atencao); border-radius: 50%; opacity: 0; pointer-events: none;
}
.ottof.is-carimbo .ottof-casa { animation: ot-casa 1.1s ease-out; }
@keyframes ot-casa { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* rastro: faíscas que ficam para trás quando ele é levado depressa */
.ottof-faisca {
    position: fixed; z-index: var(--z-float); width: 7px; height: 7px; border-radius: 2px;
    background: var(--atencao); pointer-events: none;
    animation: ot-faisca .9s ease-out forwards;
}
.ottof-faisca.c { background: var(--ciano); }
@keyframes ot-faisca {
    from { transform: translate(0, 0) rotate(45deg) scale(1); opacity: 1; }
    to { transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(200deg) scale(.2); opacity: 0; }
}

/* aviso do Otto (ViewData["OttoBalloon"]): um balão de história em quadrinho que sai da boca dele. O texto quebra em
   linhas (nunca corta); a borda é escura e o bico, na altura da boca, aponta para o Otto. */
.ottof .hint {
    position: relative; display: block;
    width: max-content; max-width: 250px;
    background: var(--surface); color: var(--ink);
    border: 2px solid var(--ink); border-radius: 20px;
    padding: 10px 14px; margin: 0 10px 46px 0;
    font-size: 13px; font-weight: 600; line-height: 1.38; white-space: normal; overflow-wrap: anywhere;
    box-shadow: 3px 3px 0 rgb(0 0 0 / .12);
    cursor: pointer;
    transform-origin: 100% 85%;
    animation: ot-quadrinho 380ms cubic-bezier(.3, 1.6, .5, 1) both;
}
/* o bico: um triângulo de borda (::before) com o miolo branco por cima (::after), saindo para a boca */
.ottof .hint::before, .ottof .hint::after {
    content: ""; position: absolute; width: 0; height: 0; border-style: solid;
}
.ottof .hint::before { right: -14px; bottom: 10px; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent var(--ink); }
.ottof .hint::after { right: -10px; bottom: 12px; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--surface); }
@keyframes ot-quadrinho {
    0% { transform: scale(.4); opacity: 0; }
    70% { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .ottof .hint { animation: none; } }

/* balão: o Otto sobe para o canto superior direito e o balão abre ao lado dele, para baixo.
   Saudação + três direcionamentos: perguntar, sugestões e dar feedback. */
.ottof .bal {
    position: absolute; right: 70px; top: 6px;
    width: min(290px, calc(100vw - 110px));
    max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line);
    border-radius: 14px 4px 14px 14px; padding: 12px 14px 10px;
    box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.45;
    transform-origin: 100% 0;
    animation: ot-bal-in 280ms cubic-bezier(.3, 1.45, .55, 1);
}
.ottof .bal[hidden] { display: none; }
.ottof .bal b { font-family: var(--display); }
.ottof .bal .bal-t { min-height: 3.2em; margin: 0 var(--sp-5) var(--sp-2) 0; }

/* os três direcionamentos entram em cascata, vindos do lado do Otto */
.ottof .bal-ops { display: flex; flex-direction: column; gap: var(--e6); }
/* A fala da tela (RN-LEN-042): os botões de resposta no lugar das opções padrão. */
.ottof .bal-fala { display: flex; flex-wrap: wrap; gap: var(--e6); margin: 0 0 var(--sp-2); }
.ottof .bal-resp { padding: 6px 12px; border: 1px solid var(--primariaBorda, var(--borda)); border-radius: 999px; background: var(--superficie); color: var(--texto); font: var(--tipoRotulo); font-size: 13px; cursor: pointer; }
.ottof .bal-resp:hover { border-color: var(--primaria); }
.ottof .bal-resp.is-principal { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.ottof .bal-resp:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.ottof .bal-ops[hidden], .ottof .bal-off[hidden], .ottof .bal-note[hidden] { display: none; }
.ottof .bal-op {
    display: flex; align-items: center; gap: var(--e10); width: 100%; min-height: 44px;
    padding: var(--e8) var(--e10); border: 1px solid transparent; border-radius: var(--r12);
    background: var(--primariaSuave); color: var(--texto); text-align: left; cursor: pointer;
    animation: ot-op-in 420ms cubic-bezier(.3, 1.45, .55, 1) both;
}
.ottof .bal-op:nth-child(1) { animation-delay: 90ms; }
.ottof .bal-op:nth-child(2) { animation-delay: 230ms; }
.ottof .bal-op:nth-child(3) { animation-delay: 370ms; }
.ottof .bal-op:hover { border-color: var(--primariaBorda); }
.ottof .bal-op:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.ottof .bal-op-ic {
    flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--superficie); color: var(--primariaTexto);
}
.ottof .bal-op-ic svg.ic { width: 17px; height: 17px; }
.ottof .bal-op-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ottof .bal-op-t b { font: var(--tipoRotulo); font-size: 13px; color: var(--texto); }
.ottof .bal-op-t small { font: var(--tipoLegenda); font-size: 11px; color: var(--textoSuave); }
.ottof .bal-op > svg.ic { flex: none; width: 16px; height: 16px; color: var(--textoSuave); }
@keyframes ot-op-in { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
.ottof .bal .bal-t .caret { display: inline-block; width: 2px; height: 1em; vertical-align: -2px; background: var(--blue); margin-left: 1px; }
.ottof .bal .bal-note { font-size: 12px; color: var(--amber-text); background: var(--amber-soft); border-radius: var(--r-sm); padding: 6px 8px; margin: 0 0 var(--sp-2); }
.ottof .bal .btn { margin-top: 6px; }
.ottof .bal .bal-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; min-height: 0; }
.ottof .bal .bal-off {
    display: block; width: 100%; margin-top: var(--sp-2); padding: 4px 0 0;
    border: 0; border-top: 1px solid var(--line); background: none;
    color: var(--muted); font-size: 11px; cursor: pointer; text-align: center;
}
.ottof .bal .bal-off:hover { color: var(--ink); text-decoration: underline; }
@keyframes ot-bal-in { from { opacity: 0; transform: scale(.6); } 70% { opacity: 1; } to { transform: scale(1); } }

/* botão do Otto desligado: rosto em cinza */
.ottof .fab {
    display: none;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--shadow-md);
    place-items: center; cursor: pointer; padding: 0;
}
.ottof .fab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
:root[data-otto-float="off"] .ottof .fab { display: grid; }
:root[data-otto-float="off"] .ottof :is(.ottof-btn, .hint, .bal) { display: none; }
/* desligado: o botão cinza fica no canto, sem o deslocamento do passeio */
:root[data-otto-float="off"] .ottof { transform: none !important; }
.ottof.is-open .hint { display: none; }

/* celular: menor (62) e acima da barra inferior */
@media (max-width: 599.98px) {
    .ottof { bottom: calc(var(--bnav-h) + var(--sp-2)); right: var(--sp-2); }
    .ottof .ot-full { width: 62px; height: 78px; }
    .ottof .hint { margin-bottom: 34px; max-width: min(220px, calc(100vw - 110px)); font-size: 12.5px; }
    .ottof .bal { right: 56px; top: 4px; width: min(290px, calc(100vw - 76px)); }
    .ottof-casa { width: 58px; margin-left: -29px; }
}

/* escondido quando há janela ou gaveta aberta
   (data-modal = "Nova venda" do app.js; oo-sem-rolagem = janelas/folhas do ooAbrir, forms.js) */
:root:is([data-modal="open"], [data-otto-sheet="open"], [data-side-sheet="open"], [data-otto-voz="open"], .oo-sem-rolagem) .ottof { visibility: hidden; }

/* aba oculta: tudo parado (o otto.js também para os relógios) */
:root[data-otto-paused] .ot, :root[data-otto-paused] .ot * { animation-play-state: paused !important; }

/* ---------- reduzir movimento: só troca de pose, nada em loop ---------- */
@media (prefers-reduced-motion: reduce) {
    .ot, .ot *, .ottof, .ottof * { animation: none !important; transition: none !important; }
}

/* ==========================================================================================
   Painel do Otto — conversa em fluxo e cartões (H1 · docs/13-telas.md, docs/dev/10-otto.md).
   Marcação em Views/Shell/Components/OttoPanel; comportamento em app/js/otto/painel.js.
   Só tokens (tokens.css): nenhuma cor crua aqui.
   ========================================================================================== */

/* recolhido (web): o histórico e o aviso somem junto com a conversa */
@media (min-width: 1100px) {
    :root[data-otto="closed"] .otto-hist,
    :root[data-otto="closed"] .otto-aviso { display: none; }
}

/* cabeçalho estreito (300): o subtítulo corta com reticências em vez de quebrar em duas linhas */
.otto-h .t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otto-h .icon-btn { flex: none; }

/* ---------- campo de texto ---------- */
.otto-i { align-items: flex-end; }
.otto-i textarea {
    flex: 1; min-width: 0; min-height: 38px; max-height: 120px; resize: none;
    background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--r18);
    padding: 9px var(--e14); font: var(--tipoMensagem); color: var(--texto); outline: none;
}
.otto-i textarea:focus-visible { border-color: var(--primaria); box-shadow: var(--focus-ring); }
.otto-i textarea::placeholder { color: var(--textoSuave); }
.otto-enviar {
    width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--primaria); color: var(--sobrePrimaria);
}
.otto-enviar svg.ic { width: 17px; height: 17px; }
.otto-enviar[disabled] { background: var(--controleApagado); color: var(--textoSuave); cursor: default; }
.otto-enviar:focus-visible, .otto-b:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
/* com texto digitado o enviar toma o lugar do microfone; vazio, o microfone volta */
.otto-i:has(textarea:not(:placeholder-shown)) .mic { display: none; }
.otto-i:has(textarea:placeholder-shown) .otto-enviar { display: none; }

/* ---------- mensagens ---------- */
.otto-b .msg { overflow-wrap: anywhere; white-space: pre-wrap; }
.otto-b .msg.erro { border-color: var(--erro); background: var(--erroSuave); color: var(--erroTexto); }
.otto-b .msg:empty { display: none; }
.otto-b .msg.escrevendo::after {
    content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 2px; vertical-align: -1px;
    background: var(--primaria); border-radius: var(--e2); animation: otto-cursor 1s steps(2) infinite;
}
@keyframes otto-cursor { 50% { opacity: 0; } }

/* "Consultando clientes…" → "Consultei: clientes" */
.otto-consultas { display: flex; flex-direction: column; gap: var(--e2); font: var(--tipoLegenda); color: var(--textoSuave); padding: 0 var(--e4); }
.otto-consultas:empty { display: none; }
.otto-consulta { display: flex; align-items: center; gap: var(--e6); }
.otto-consulta::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; box-sizing: border-box;
    border: 2px solid var(--primaria); border-right-color: transparent; animation: otto-gira .8s linear infinite;
}
.otto-consulta.ok::before { border: 0; background: var(--sucesso); animation: none; }
.otto-consulta.falhou::before { border: 0; background: var(--erro); animation: none; }
@keyframes otto-gira { to { transform: rotate(360deg); } }

/* pensando: três pontos enquanto a primeira palavra não chega */
.otto-pensando {
    display: inline-flex; gap: var(--e4); padding: var(--e10) var(--e12); align-self: flex-start;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raioBalaoOtto);
}
.otto-pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--textoSuave); animation: otto-ponto 1.2s ease-in-out infinite; }
.otto-pensando i:nth-child(2) { animation-delay: .15s; }
.otto-pensando i:nth-child(3) { animation-delay: .3s; }
@keyframes otto-ponto { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.otto-demora { font: var(--tipoLegenda); color: var(--textoSuave); padding: 0 var(--e4); }

/* ---------- cartões ---------- */
.ocard {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r14);
    padding: var(--e10) var(--e12); font: var(--tipoMensagem); color: var(--texto); min-width: 0;
}
.ocard > b { font: var(--tipoTituloCartao); display: flex; align-items: center; gap: var(--e6); margin-bottom: var(--e6); }
.ocard > b small { margin-left: auto; font: var(--tipoLegenda); color: var(--textoSuave); }
.ocard .periodo { display: block; font: var(--tipoLegenda); color: var(--textoSuave); margin: calc(var(--e4) * -1) 0 var(--e6); }

/* indicadores */
.ocard-ind { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e8); }
.ocard-ind > div { background: var(--fundo); border-radius: var(--r10); padding: var(--e8) var(--e10); min-width: 0; }
.ocard-ind > div.destaque { background: var(--primariaSuave); }
.ocard-ind span { display: block; font: var(--tipoIndicadorRotulo); color: var(--textoSuave); }
/* valor em dinheiro inteiro, nunca cortado (task 53): no painel estreito os indicadores ficam um por linha */
.ocard-ind strong { display: block; font: var(--tipoNumero); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ocard-ind small { display: block; font: var(--tipoLegenda); color: var(--textoSuave); }

/* tabela: rola dentro do cartão, o painel nunca rola de lado */
.ocard-tab { overflow-x: auto; margin: 0 calc(var(--e4) * -1); }
.ocard-tab table { width: 100%; border-collapse: collapse; font: var(--tipoMensagem); font-size: 11.5px; }
.ocard-tab th { text-align: left; font: var(--tipoCabecalhoTabela); color: var(--textoSuave); padding: var(--e4); }
.ocard-tab td { padding: var(--e6) var(--e4); border-top: 1px solid var(--borda); vertical-align: top; }
.ocard-tab td:first-child { font-weight: 600; }
/* telefone, data e valor não quebram no meio: quem cede espaço é a primeira coluna (o cartão rola se faltar) */
.ocard-tab td:not(:first-child) { white-space: nowrap; }
.ocard-tab tr[data-rota] { cursor: pointer; }
.ocard-tab tr[data-rota]:hover td, .ocard-tab tr[data-rota]:focus-visible td { background: var(--primariaSuave); }
.ocard-tab tr[data-rota]:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; }
.ocard .ver-todos { display: inline-block; margin-top: var(--e6); font: var(--tipoRotulo); color: var(--primariaTexto); }

/* ação: borda de conferência (âmbar) até a pessoa decidir */
.ocard.acao { border: var(--bordaConferencia); }
.ocard.acao dl { margin: 0 0 var(--e8); display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e10); }
.ocard.acao dt { color: var(--textoSuave); }
.ocard.acao dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ocard.acao dd.duvida { color: var(--atencaoTexto); background: var(--atencaoSuave); border-radius: var(--r5); padding: 0 var(--e4); justify-self: start; }
.ocard.acao dd del { color: var(--textoSuave); font-weight: 400; margin-right: var(--e6); }
.ocard.acao .resumo { margin: 0 0 var(--e6); color: var(--textoSuave); }
.ocard.acao .consequencias {
    margin: 0 0 var(--e8); padding: var(--e6) var(--e8) var(--e6) var(--e20); border-radius: var(--r8);
    background: var(--atencaoSuave); color: var(--atencaoTexto); font: var(--tipoLegenda);
}
.ocard.acao .botoes { display: flex; flex-wrap: wrap; gap: var(--e6); }
.ocard.acao .nota { margin: var(--e6) 0 0; font: var(--tipoLegenda); color: var(--textoSuave); }
.ocard.acao .nota.erro { color: var(--erroTexto); }
.ocard.acao .nota:empty { display: none; }
.ocard.acao.bloqueada { border: 1px solid var(--borda); background: var(--neutroSuave); }
.ocard.acao.confirmada { border: 1px solid var(--sucesso); background: var(--sucessoSuave); }
.ocard.acao.confirmada > b { color: var(--sucessoTexto); }
.ocard.acao.descartada, .ocard.acao.vencida { border: 1px dashed var(--bordaForte); opacity: .75; }
.ocard.acao.falhou { border: 1px solid var(--erro); }

/* navegação */
.ocard-nav { align-self: flex-start; max-width: 100%; }

/* exemplos de pedidos (balão do H3 e conversa vazia) */
.otto-exemplos { display: flex; flex-direction: column; gap: var(--e6); align-items: flex-start; }
.otto-exemplos > b { font: var(--tipoRotulo); color: var(--textoSuave); }
.otto-exemplo {
    text-align: left; cursor: pointer; max-width: 100%;
    border: 1px solid var(--primariaBorda); background: var(--primariaSuave); color: var(--primariaTexto);
    border-radius: var(--r14); padding: var(--e6) var(--e10); font: var(--tipoMensagem);
}
.otto-exemplo:hover { border-color: var(--primaria); }
.otto-exemplo:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* ---------- aviso de créditos ---------- */
.otto-aviso {
    flex: none; margin: 0; padding: var(--e6) var(--e12); font: var(--tipoLegenda);
    background: var(--atencaoSuave); color: var(--atencaoTexto); border-top: 1px solid var(--borda);
}
.otto-aviso.limite { background: var(--erroSuave); color: var(--erroTexto); }
.otto-aviso[hidden] { display: none; }

/* ---------- histórico ---------- */
.otto-hist { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--superficie); }
.otto-hist[hidden] { display: none; }
.otto-hist:not([hidden]) ~ .otto-b, .otto-hist:not([hidden]) ~ .otto-i, .otto-hist:not([hidden]) ~ .otto-aviso { display: none; }
.otto-hist-h {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: var(--e8) var(--e8) var(--e8) var(--e14); border-bottom: 1px solid var(--borda); font: var(--tipoTituloCartao);
}
.otto-hist-l { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e8); display: flex; flex-direction: column; gap: var(--e4); }
.otto-hist-i {
    display: block; width: 100%; text-align: left; cursor: pointer; border: 0; background: transparent; color: var(--texto);
    border-radius: var(--r10); padding: var(--e8) var(--e10); font: var(--tipoMensagem);
}
.otto-hist-i:hover, .otto-hist-i:focus-visible { background: var(--primariaSuave); outline: none; }
.otto-hist-i[aria-current="true"] { background: var(--primariaSuave); font-weight: 600; }
.otto-hist-i small { display: block; font: var(--tipoLegenda); color: var(--textoSuave); }
.otto-hist-vazio { padding: var(--e16); text-align: center; color: var(--textoSuave); font: var(--tipoMensagem); }

@media (prefers-reduced-motion: reduce) {
    .otto-consulta::before, .otto-pensando i, .otto-b .msg.escrevendo::after { animation: none; }
}

/* ============================================================================================
   Modo de voz (H2 · docs/13-telas.md, doc 16 §Modo de voz, mockups-05-otto.html#onde) — otto/voz.js
   Celular: tela cheia. Tablet e web: folha no centro, sobre a tela escurecida.
   --voz-nivel (0 a 1) vem do microfone e move os anéis; cada barra tem a sua --voz-barra.
   ============================================================================================ */
.mic[hidden] { display: none; }
.otto-voz[hidden] { display: none; }
.otto-voz {
    --voz-nivel: 0;
    position: fixed; inset: 0; z-index: var(--camadaSuspenso);
    display: grid; background: var(--superficie);
}
.otto-voz-folha {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    padding: var(--e16); padding-bottom: max(var(--e16), env(safe-area-inset-bottom));
    background: var(--superficie); color: var(--texto);
}
.otto-voz-h { display: flex; align-items: center; justify-content: space-between; gap: var(--e12); }
.otto-voz-estado {
    display: inline-flex; align-items: center; gap: var(--e6);
    padding: var(--e4) var(--e10); border-radius: var(--pilula);
    background: var(--atencaoSuave); color: var(--atencaoTexto); font: var(--tipoEtiqueta);
}
.otto-voz-estado i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.otto-voz[data-estado="ouvindo"] .otto-voz-estado { background: var(--erroSuave); color: var(--erroTexto); }
.otto-voz[data-estado="ouvindo"] .otto-voz-estado i { animation: otto-voz-pisca 1.2s ease-in-out infinite; }
.otto-voz[data-estado="enviando"] .otto-voz-estado { background: var(--sucessoSuave); color: var(--sucessoTexto); }
.otto-voz[data-estado="erro"] .otto-voz-estado { background: var(--controleApagado); color: var(--textoSuave); }

.otto-voz-c {
    flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--e16); text-align: center; overflow-y: auto; padding: var(--e16) 0;
}
.otto-voz-orbe {
    position: relative; flex: none; width: 168px; height: 168px; border-radius: 50%; border: 0; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    background: var(--atencaoSuave); color: inherit;
    transition: transform var(--duracaoRapida) var(--curvaEntrada);
}
.otto-voz-orbe:hover { transform: scale(1.02); }
.otto-voz-orbe:active { transform: scale(.98); }
.otto-voz-orbe:focus-visible { outline: 3px solid var(--primaria); outline-offset: 4px; }
.otto-voz-orbe .ot { position: relative; }
/* anéis: crescem com o volume da voz */
.otto-voz-anel {
    position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--atencao); pointer-events: none;
    opacity: calc(.18 + var(--voz-nivel) * .6);
    transform: scale(calc(1 + var(--voz-nivel) * .16));
    transition: transform 90ms linear, opacity 90ms linear;
}
.otto-voz-anel.a2 {
    border-width: 2px;
    opacity: calc(.08 + var(--voz-nivel) * .4);
    transform: scale(calc(1.08 + var(--voz-nivel) * .34));
}
/* barras abaixo do rosto */
.otto-voz-eq { display: flex; align-items: center; justify-content: center; gap: 5px; height: 40px; }
.otto-voz-eq i {
    --voz-barra: 0;
    width: 5px; border-radius: var(--pilula); background: var(--atencao);
    height: calc(6px + var(--voz-barra) * 34px);
    transition: height 90ms linear;
}
/* sem o nível do microfone (permissão só do reconhecimento, Android): anéis e barras pulsam sozinhos */
.otto-voz.sem-nivel[data-estado="ouvindo"] .otto-voz-anel { animation: otto-voz-anel 1.8s ease-out infinite; }
.otto-voz.sem-nivel[data-estado="ouvindo"] .otto-voz-anel.a2 { animation-delay: .6s; }
.otto-voz.sem-nivel[data-estado="ouvindo"] .otto-voz-eq i { animation: otto-voz-barra 1s ease-in-out infinite; }
.otto-voz.sem-nivel .otto-voz-eq i:nth-child(2n) { animation-delay: .15s; }
.otto-voz.sem-nivel .otto-voz-eq i:nth-child(3n) { animation-delay: .3s; }
.otto-voz.sem-nivel .otto-voz-eq i:nth-child(5n) { animation-delay: .45s; }
/* ligando, enviando e erro: tudo parado */
.otto-voz:not([data-estado="ouvindo"]) .otto-voz-anel { opacity: .14; transform: none; }
.otto-voz:not([data-estado="ouvindo"]) .otto-voz-eq i { height: 6px; }
.otto-voz[data-estado="erro"] .otto-voz-orbe { background: var(--controleApagado); cursor: default; }
.otto-voz[data-estado="erro"] .otto-voz-anel { border-color: var(--borda); }
.otto-voz[data-estado="erro"] .otto-voz-eq i { background: var(--borda); }

/* transcrição: o trecho confirmado em destaque, o trecho em andamento mais claro */
.otto-voz-t {
    margin: 0; max-width: 34ch; min-height: 2.6em; font: var(--tipoTituloTela); font-size: 17px;
    color: var(--texto); overflow-wrap: anywhere;
}
.otto-voz-t b { font-weight: 700; }
.otto-voz-t span { font-weight: 400; color: var(--textoSuave); }
.otto-voz-dica { margin: 0; text-align: center; font: var(--tipoLinhaSub); color: var(--textoSuave); }
.otto-voz-dica.alerta { color: var(--atencaoTexto); font: var(--tipoCorpo); max-width: 44ch; align-self: center; }

@keyframes otto-voz-pisca { 50% { opacity: .35; } }
@keyframes otto-voz-anel { 0% { transform: scale(.96); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes otto-voz-barra { 0%, 100% { height: 8px; } 50% { height: 32px; } }

/* tablet e web: folha no centro */
@media (min-width: 600px) {
    .otto-voz { place-items: center; background: var(--veu); padding: var(--e24); }
    .otto-voz-folha {
        width: min(440px, 100%); min-height: 460px; max-height: 100%;
        border-radius: var(--r22); box-shadow: var(--sombraJanela); padding: var(--e20);
    }
}
@media (prefers-reduced-motion: reduce) {
    .otto-voz-anel, .otto-voz-eq i, .otto-voz-orbe { transition: none; animation: none !important; }
    .otto-voz-estado i { animation: none !important; }
}

/* ---------- "Ler com o Otto" no espaço de foto (otto/leitura.js) ---------- */
.oo-foto-ler { display: inline-flex; align-items: center; gap: var(--e6); }
.oo-foto-ler[hidden] { display: none; }
.oo-foto-ler svg.ic { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.oo-foto-ler[aria-busy="true"] { cursor: progress; opacity: .75; }
.oo-foto-ler[aria-busy="true"] svg.ic { animation: otto-voz-pisca 1s ease-in-out infinite; }
.oo-foto-leitura {
    margin: 0; padding: var(--e8) var(--e10); border-radius: var(--r8);
    border: 1px solid var(--lidoBorda); background: var(--lido); color: var(--texto); font: var(--tipoLinhaSub);
}
.oo-foto-leitura[hidden] { display: none; }
.oo-foto-leitura.duvida { border-color: var(--atencao); background: var(--atencaoSuave); color: var(--atencaoTexto); }
.oo-foto-leitura.erro { border-color: var(--erro); background: var(--erroSuave); color: var(--erroTexto); }
.oo-foto-leitura.lendo { border-style: dashed; color: var(--textoSuave); }
@media (prefers-reduced-motion: reduce) { .oo-foto-ler[aria-busy="true"] svg.ic { animation: none; } }

/* ---------- avisos por regra (task 53): cartão no painel e no resumo do dia do Início ---------- */
.ocard.avisos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e8); }
.ocard.avisos li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--e8); align-items: start; }
.ocard.avisos .ponto { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--atencao); }
.ocard.avisos li.urgente .ponto { background: var(--erro); }
.ocard.avisos strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ocard.avisos li small { display: block; font: var(--tipoLegenda); color: var(--textoSuave); }
.ocard.avisos a { display: inline-block; margin-top: var(--e2); font: var(--tipoRotulo); color: var(--primariaTexto); }
.ocard.avisos a:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: var(--r5); }