/* babel.css — o que só existe quando o corpo do Mentor é a babel (publico/corpo-babel.js):
   as joias dos apps na parede dos fundos (a grade 3×3), o voo para a frente com a sala desfocada e o painel da
   janela 3D. O resto da tela é o estilo.css de sempre. */

/* os cristais: botões de verdade, posicionados pela projeção 3D a cada quadro que o olho anda */
#cristais{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .6s ease}
#cristais.prontos{opacity:1}
body.sem-conta #cristais{visibility:hidden}
.cristal{--c:#b899ff;--flash:#fff;position:absolute;left:0;top:0;width:40px;height:48px;margin:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform-origin:20px 24px;will-change:transform;-webkit-tap-highlight-color:transparent}
.cristal .voo{position:absolute;inset:0;display:block;transform-origin:50% 50%}
.cristal .gema{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 14px color-mix(in srgb,var(--c) 45%,transparent));transition:opacity .25s ease,transform .25s ease}
.cristal .g0{fill:var(--c);fill-opacity:.58;stroke:#fff;stroke-opacity:.5;stroke-width:1}
.cristal .g1{fill:#fff;fill-opacity:.2}
.cristal .g2{fill:none;stroke:#fff;stroke-opacity:.38;stroke-width:1}
.cristal .simbolo{position:absolute;left:8px;top:12px;width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .25s ease,transform .25s ease;filter:drop-shadow(0 0 3px rgba(20,8,48,.9))}
.cristal:hover .gema,.cristal:focus-visible .gema,.cristal.destaque .gema,.cristal.atracado .gema{opacity:.55;transform:scale(1.18)}
.cristal:hover .simbolo,.cristal:focus-visible .simbolo,.cristal.destaque .simbolo,.cristal.atracado .simbolo{opacity:1;transform:scale(1)}
.cristal:focus-visible{outline:none}
.cristal:focus-visible .gema{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px var(--c))}
/* o app aberto: o cristal fica aceso, mais claro que os outros, com o símbolo (o J5 via ele "apagado") */
.cristal.atracado .gema{opacity:1;transform:scale(1.22);filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 16px var(--c)) drop-shadow(0 0 26px color-mix(in srgb,var(--c) 60%,transparent))}
.cristal.atracado .g0{fill-opacity:.42}
.cristal.atracado .simbolo{opacity:1;transform:scale(1)}
/* o app chamado vem para a frente e a sala desfoca: o foco fica na joia e na tela ao lado */
#ceu,#ceu3d,#presencaBabel,#luzPedraViva,#ensaioDecoracao{transition:filter .32s ease}
/* o foco nela (05/10): a pedra viva é uma camada à parte; desfoca com o mesmo raio do fundo (presenca-babel.js: --foco-raio) */
#luzPedraViva{filter:blur(var(--foco-raio,0px))}
/* com tela ou menu aberto, tudo atrás desfoca, ela também (05/10, o dono: "quando abrir menus e telas aí ela também desfoca") */
body.com-telas #ceu,body.com-telas #ceu3d,body.com-telas #presencaBabel,body.com-telas #luzPedraViva,body.com-telas #passagemEla,body.com-telas #ensaioDecoracao,body.com-telas #luzDaSala,
body.com-menu #ceu,body.com-menu #ceu3d,body.com-menu #presencaBabel,body.com-menu #luzPedraViva,body.com-menu #passagemEla,body.com-menu #ensaioDecoracao,body.com-menu #luzDaSala{filter:blur(3px) brightness(.9)}
body.leve.com-telas #ceu,body.leve.com-telas #ceu3d,body.leve.com-telas #presencaBabel,body.leve.com-telas #luzPedraViva,body.leve.com-telas #passagemEla,body.leve.com-telas #ensaioDecoracao,body.leve.com-menu #ceu,body.leve.com-menu #presencaBabel,body.leve.com-menu #passagemEla,body.leve.com-menu #ensaioDecoracao{filter:brightness(.92)}
:root[data-tema="claro"] body:not(.com-telas) #ceu,:root[data-tema="claro"] body:not(.com-telas) #presencaBabel{filter:brightness(1.1)}
.cristal.frente .gema{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 22px var(--c)) drop-shadow(0 0 44px color-mix(in srgb,var(--c) 65%,transparent))}
/* o + no centro da grade: a mesma joia, em ouro, com o sinal sempre à mostra */
.cristal-mais{--c:#e0b457;position:absolute;left:0;top:0;width:40px;height:48px;margin:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform-origin:20px 24px;will-change:transform;-webkit-tap-highlight-color:transparent}
.cristal-mais .voo{position:absolute;inset:0;display:block}
.cristal-mais .gema{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 14px color-mix(in srgb,var(--c) 45%,transparent));transition:transform .25s ease}
.cristal-mais .g0{fill:var(--c);fill-opacity:.5;stroke:#fff;stroke-opacity:.5;stroke-width:1}
.cristal-mais .g1{fill:#fff;fill-opacity:.2}
.cristal-mais .g2{fill:none;stroke:#fff;stroke-opacity:.38;stroke-width:1}
.cristal-mais .simbolo{position:absolute;left:8px;top:12px;width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.85}
.cristal-mais:hover .gema,.cristal-mais:focus-visible .gema{transform:scale(1.18)}
.cristal-mais:hover .simbolo,.cristal-mais:focus-visible .simbolo{opacity:1}
.cristal-mais:focus-visible{outline:none}
/* a moldura do jogo da velha na parede, atrás das joias */
#grade-apps{position:absolute;left:0;top:0;opacity:0;pointer-events:none;transition:opacity .4s ease}
#grade-apps svg{width:100%;height:100%;display:block;overflow:visible}
#grade-apps rect,#grade-apps path{fill:none;stroke:rgba(184,153,255,.42);stroke-width:1.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(155,107,255,.45))}
/* a cópia que voa da grade até a tela que abriu */
.cristal-voo{--c:#b899ff;position:fixed;left:0;top:0;width:40px;height:48px;z-index:5;pointer-events:none;transform-origin:20px 24px;will-change:transform,opacity}
.cristal-voo .gema{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 18px var(--c))}
.cristal-voo .g0{fill:var(--c);fill-opacity:.7;stroke:#fff;stroke-opacity:.6;stroke-width:1}
.cristal-voo .g1{fill:#fff;fill-opacity:.3}
.cristal-voo .g2{fill:none;stroke:#fff;stroke-opacity:.4;stroke-width:1}
.cristal .novo{position:absolute;right:4px;top:6px;width:7px;height:7px;border-radius:50%;background:#e0b457;box-shadow:0 0 8px #e0b457;opacity:0}
.cristal.tem-novo .novo{opacity:1}
.cristal.toque .gema{animation:toqueCristal .9s ease-out}
@keyframes toqueCristal{0%{filter:drop-shadow(0 0 2px var(--flash)) drop-shadow(0 0 22px var(--flash));transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.cristal .gema,.cristal .simbolo,.cristal-mais .gema,#grade-apps{transition:none}.cristal.toque .gema{animation:none}}

/* o painel da janela 3D (o botão fica no topo, junto dos outros) */
#painelJanela{position:fixed;z-index:6;top:62px;right:16px;width:min(300px,calc(100vw - 32px));padding:14px 16px;border-radius:16px;background:var(--vidro,rgba(20,14,44,.82));border:1px solid var(--linha,rgba(205,195,255,.16));backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 18px 50px rgba(0,0,0,.45);color:var(--texto,#ece7fb);font:13px/1.45 var(--sans,ui-sans-serif,system-ui,sans-serif)}
#painelJanela label{display:block;margin:0 0 10px}
#painelJanela label.linha{display:flex;gap:8px;align-items:center}
#painelJanela input[type=range]{width:100%;accent-color:var(--roxo,#a376e9)}
#painelJanela output{float:right;color:var(--texto-2,#b9b0d9)}
#painelJanela p{margin:10px 0 0;color:var(--texto-2,#b9b0d9);font-size:12px}
#painelJanela .bt{width:100%}

/* máquina sem placa de vídeo (o WebGL é desenhado pela CPU): o vidro vira fosco sólido. O desfoque do que está atrás
   (backdrop-filter) é refeito a cada piscar dela, porque a sala muda por baixo; e a sombra luminosa dos cristais também */
body.leve .icone,body.leve .tela,body.leve #entrada,body.leve .pilula,body.leve #sugestoes button,body.leve .chip-pend,body.leve .cartao,body.leve #dica,body.leve #painelJanela{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(22,16,48,.94)!important}
body.leve .cristal .gema{filter:none}
body.leve .cristal .simbolo{filter:none}
body.leve .cristal-mais .gema,body.leve .cristal-mais .simbolo,body.leve #grade-apps rect,body.leve #grade-apps path{filter:none}

/* sem WebGL (ou sem a sala): a conversa continua e a tela diz isso */
body.sem-sala::after,body.sem-webgl.corpo-babel::after{content:"sem a sala 3D neste aparelho: a conversa continua aqui embaixo";position:fixed;z-index:1;left:50%;top:74px;transform:translateX(-50%);padding:6px 12px;border-radius:12px;background:rgba(20,14,44,.7);color:var(--texto-2,#b9b0d9);font:12px/1.4 var(--sans,ui-sans-serif,system-ui,sans-serif)}

/* a logo sai do topo e vai bordada na blusa dela (publico/babel/ela.png, dentro/preparar-corpo.mjs) */
body.corpo-babel .topo .marca{visibility:hidden}

/* Mesmos apps e eventos, ancorados na parede também quando o WebGL está pausado.
   O menu continua clicável; nomes não dependem de hover. Nada cobre o rosto. */
#cristais.na-parede{inset:auto;top:clamp(82px,15vh,145px);left:clamp(170px,28vw,500px);transform:translateX(-50%);width:300px;height:240px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,80px);padding:0;opacity:1}
#cristais.na-parede #grade-apps{display:none}
#cristais.na-parede .cristal,#cristais.na-parede .cristal-mais{position:relative;left:auto;top:auto;transform:none!important;width:92px;height:76px;justify-self:center;will-change:auto}
#cristais.na-parede .voo{inset:3px auto auto 26px;width:40px;height:48px;transform:none!important;animation:joiaFlutua var(--ritmo,6s) ease-in-out var(--fase,0s) infinite;transform-origin:center}
#cristais.na-parede button:nth-of-type(3n+1){--ritmo:5.8s;--fase:-1.3s}
#cristais.na-parede button:nth-of-type(3n+2){--ritmo:6.7s;--fase:-3.6s}
#cristais.na-parede button:nth-of-type(3n){--ritmo:7.4s;--fase:-5.2s}
#cristais.na-parede .g1{animation:joiaReflete var(--ritmo,6s) ease-in-out var(--fase,0s) infinite}
@keyframes joiaFlutua{0%,100%{translate:0 -2px;rotate:-1.5deg}50%{translate:1px 3px;rotate:1.5deg}}
@keyframes joiaReflete{0%,100%{opacity:.55}50%{opacity:1}}
#cristais.na-parede .simbolo{opacity:.9;transform:scale(.85)}
.nome-parede{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:11px/1.2 var(--sans);letter-spacing:.035em;color:#e8dffb;text-shadow:0 1px 7px #10051d}
#cristais.na-parede button:focus-visible{outline:2px solid #cab3f6;outline-offset:0;border-radius:12px}
@media(max-width:760px){#cristais.na-parede{left:50%;top:76px;width:min(294px,90vw);height:216px;grid-template-rows:repeat(3,72px)}#cristais.na-parede .cristal,#cristais.na-parede .cristal-mais{height:70px;width:86px}#cristais.na-parede .voo{left:23px}.nome-parede{font-size:10px}}
@media(max-height:640px){#cristais.na-parede{top:68px;height:180px;grid-template-rows:repeat(3,60px)}#cristais.na-parede .cristal,#cristais.na-parede .cristal-mais{height:58px}#cristais.na-parede .voo{transform:scale(.75)!important;transform-origin:top center}.nome-parede{bottom:2px}}
/* Celular em pé (:root.sala-no-topo, ver moldarCelular em presenca-babel.js): a parede fica pequena demais para
   nomes legíveis, então as joias descem para uma prateleira logo abaixo da sala, ao alcance do polegar — 4 em
   cima e 5 embaixo, em favo, com o Criar no meio da fileira de baixo, junto da conversa. Assim nunca cobrem a
   mulher, sentada ou de pé. As vistas criadas seguem numa fila que rola de lado, embaixo da prateleira. */
:root.sala-no-topo #cristais.na-parede{top:calc(var(--sala-base) + 4px);left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 12px));height:auto;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(2,66px);row-gap:2px}
:root.sala-no-topo #cristais.na-parede .cristal,:root.sala-no-topo #cristais.na-parede .cristal-mais{width:100%;max-width:84px;height:64px;grid-row:2!important}
:root.sala-no-topo #cristais.na-parede .voo{left:50%;margin-left:-20px;top:1px}
:root.sala-no-topo #cristais.na-parede .nome-parede{font-size:11px;bottom:1px}
:root.sala-no-topo #cristais.na-parede .cristal[data-id="conversas"]{grid-row:1!important;grid-column:2/span 2!important}
:root.sala-no-topo #cristais.na-parede .cristal[data-id="contatos"]{grid-row:1!important;grid-column:4/span 2!important}
:root.sala-no-topo #cristais.na-parede .cristal[data-id="agenda"]{grid-row:1!important;grid-column:6/span 2!important}
:root.sala-no-topo #cristais.na-parede .cristal[data-id="produtos"]{grid-row:1!important;grid-column:8/span 2!important}
:root.sala-no-topo #cristais.na-parede .cristal[data-id="base"]{grid-column:1/span 2!important}
:root.sala-no-topo #cristais.na-parede .cristal[data-id="agentes"]{grid-column:3/span 2!important}
:root.sala-no-topo #cristais.na-parede .cristal-mais{grid-column:5/span 2!important}
:root.sala-no-topo #cristais.na-parede .cristal[data-id="colecoes"]{grid-column:7/span 2!important}
:root.sala-no-topo #cristais.na-parede .cristal[data-id="painel"]{grid-column:9/span 2!important}
:root.sala-no-topo #cristais.na-parede .joias-novas{top:calc(100% + 2px);left:0;width:100%;max-height:none;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}
:root.sala-no-topo #cristais.na-parede .joia-vista{flex:none;width:76px;scroll-snap-align:start}
/* com uma tela aberta, a folha ocupa o lugar da prateleira; o cabeçalho da folha já diz qual app está aberto */
:root.sala-no-topo body.com-telas #cristais.na-parede{opacity:0;pointer-events:none;transition:opacity .25s ease}

/* A parede cresce para o lado: não empurra as joias sobre a mulher ou a pedra. */
.joias-novas{position:absolute;top:0;left:calc(100% + 14px);width:100px;max-height:min(44vh,320px);display:grid;gap:5px;overflow:auto;scrollbar-width:thin;pointer-events:auto;border-radius:18px}
.joia-vista{position:relative;display:grid;justify-items:center;gap:4px;min-height:64px;padding:4px;border:0;border-radius:14px;background:transparent;color:#eee5ff;font:10px/1.15 var(--sans)}
.joia-vista .gema{width:29px;height:36px;filter:drop-shadow(0 0 5px #b899ff88);animation:joiaFlutua var(--ritmo,6s) ease-in-out var(--fase,0s) infinite}
.joia-vista .g0{fill:#b899ff99;stroke:#dfcfff;stroke-width:1}.joia-vista .g1{fill:#ffffff33}.joia-vista .g2{stroke:#ffffff77;fill:none}
.joia-vista:hover,.joia-vista.ativa{background:#b899ff16}.joia-vista span{max-width:96px;overflow-wrap:anywhere}
@keyframes joiaSurge{from{opacity:0;transform:translateY(6px) scale(.85)}to{opacity:1;transform:none}}
@media(max-width:1000px){.joias-novas{top:calc(100% + 8px);left:0;width:100%;max-height:78px;display:flex;overflow:auto}.joia-vista{min-width:70px;flex:0 0 70px}}
@media(prefers-reduced-motion:reduce){.joia-vista{animation:none}}
#cristais[data-repouso] .voo,#cristais[data-repouso] .g1,#cristais[data-repouso] .joia-vista .gema,body.sem-conta #cristais .voo,body.sem-conta #cristais .g1{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#cristais.na-parede .voo,#cristais.na-parede .g1,#cristais .joia-vista .gema{animation:none;translate:none;rotate:none}}
/* a tela que nasce da fala: a joia de cada tela criada (com o × que apaga), a parede que começa vazia e a joia viva */
.joia-item{position:relative;display:grid}
.joia-item .joia-vista{width:100%}
.joia-apagar{position:absolute;top:0;right:2px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(20,14,40,.88);color:#f3b6b6;font:15px/22px var(--sans);text-align:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s ease}
.joia-item:hover .joia-apagar,.joia-item:focus-within .joia-apagar{opacity:1;pointer-events:auto}
.joia-apagar:hover,.joia-apagar:focus-visible{background:#ef6b6b;color:#1a0808;outline:none}
@media(hover:none){.joia-apagar{opacity:.9;pointer-events:auto}}
.joia-item.viva .g0{fill:#e0b45799;stroke:#f4dfa6}.joia-item.viva .gema{filter:drop-shadow(0 0 6px #e0b457aa)}
.joia-conta[hidden]{display:none}
.joia-conta{position:absolute;top:0;right:20px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e0b457;color:#1a1206;font:600 11px/18px var(--sans);font-style:normal;text-align:center}
#cristais[data-parede="nascente"] .cristal[data-guardada]{visibility:hidden;pointer-events:none}
:root.sala-no-topo #cristais.na-parede .joia-item{flex:none;width:76px;scroll-snap-align:start}
@media(max-width:1000px){.joia-item{min-width:70px;flex:0 0 70px}}
@media(prefers-reduced-motion:reduce){.joia-apagar{transition:none}}
/* O degrau leve inteiro (05/10, auditoria de peso; leveza.js): computador simples. Nada de efeito de tela cheia nem de movimento de
   enfeite: sem a película e sem a luz somada (misturas de tela cheia), sem desfoque (nem o do foco nela, nem o de trás dos vidros),
   a pedra sem pulso e as joias sem flutuar. A conversa, as telas, os objetos e os cliques continuam iguais. */
body.leve .pelicula,body.leve #luzDaSala{display:none!important}
/* nem o escurecimento da sala atrás das telas: filtro em camada de tela cheia é refeito pelo processador a cada quadro (medido: com uma
   tela aberta, 369% de um núcleo; sem o filtro e sem animação sem fim, 3%) */
body.leve #ceu,body.leve #ceu3d,body.leve #presencaBabel,body.leve #luzPedraViva,body.leve #passagemEla,body.leve #ensaioDecoracao,body.leve.com-telas #ceu,body.leve.com-telas #ceu3d,body.leve.com-telas #presencaBabel,body.leve.com-telas #luzPedraViva,body.leve.com-telas #passagemEla,body.leve.com-telas #ensaioDecoracao,body.leve.com-menu #ceu,body.leve.com-menu #ceu3d,body.leve.com-menu #presencaBabel,body.leve.com-menu #luzPedraViva,body.leve.com-menu #passagemEla,body.leve.com-menu #ensaioDecoracao{filter:none}
body.leve *,body.leve *::before,body.leve *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.leve #fala:not(:empty),body.leve #fala.pensando{background:#efe6ffe0}
:root[data-cor-fala="branco"] body.leve #fala:not(:empty),:root[data-cor-fala="branco"] body.leve #fala.pensando{background:#120b26e0}
/* nenhuma animação sem fim: cada uma toca uma vez e para (o pulso da pedra pequena no cabeçalho das telas, os três pontinhos de
   pensando, o microfone ouvindo, as joias, a névoa do login). O sinal continua à vista, só não pulsa */
body.leve *,body.leve *::before,body.leve *::after{animation-iteration-count:1!important}
body.leve .pedra-pulso,body.leve #cristais.na-parede .voo,body.leve #cristais.na-parede .g1,body.leve .joia-vista .gema,body.leve #loginNeblina i{animation:none!important}
/* a sala quieta (leveza.js: tela aberta no desktop, ou ninguém mexendo há 5 minutos): o grão e o pulso da pedra esperam onde estão */
html[data-quieta] #peliculaGrao,html[data-quieta] .pedra-pulso,html[data-quieta] #cristais.na-parede .voo,html[data-quieta] #cristais.na-parede .g1{animation-play-state:paused}
/* o pulso lento anda a 6 por segundo, não a 60 (medido em 05/10, com placa: uma tela aberta custava 16% de um núcleo só para o
   brilho da pedra pequena do cabeçalho pulsar; em degraus, 3%). A curva é a mesma (4,8 s, de 28% a 95%); só o número de quadros cai */
.tela header .selo::after,.pedra-mini::after,.login-avatar::before,.pedra-pulso{animation-timing-function:steps(14,end)!important}
/* o aviso de quando a sala desce sozinha para o degrau leve (leveza.js) */
#avisoLeveza{position:fixed;z-index:42;left:50%;top:64px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 24px));padding:9px 12px 9px 14px;border-radius:14px;border:1px solid rgba(195,166,255,.5);background:rgba(26,19,64,.96);color:#efe6ff;font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 10px 36px rgba(10,6,30,.45)}
#avisoLeveza button{flex:none;border:1px solid rgba(195,166,255,.5);background:transparent;color:#c3a6ff;border-radius:999px;padding:5px 10px;font:inherit;cursor:pointer}
#avisoLeveza button:last-child{border:0;padding:2px 6px;font-size:16px;line-height:1}
#configLeveza .botoes button[aria-pressed="true"]{border-color:#b899ff;background:#b899ff30}