/* paleta da identidade babel (índigo é o palco, roxo é a torre, azul é a fala, névoa respira)
   e o Cosmic Latte do babel-coop no tema claro */
:root{
  --fundo:#07050f;
  --vidro:rgba(13,9,26,.56);--vidro-forte:rgba(14,10,28,.9);--vidro-claro:rgba(237,234,247,.05);
  --linha:rgba(184,153,255,.16);--linha-forte:rgba(184,153,255,.3);
  --texto:#edeaf7;--texto-2:#a39cc0;--texto-3:#7d76a0;
  --roxo:#9b6bff;--roxo-texto:#b899ff;--ouro:#d9c08a;--ciano:#39c4ff;--vermelho:#ff6b7a;--lua:#edeaf7;--verde:#7fd6a6;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:"Cormorant Garamond","New York",ui-serif,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --livre:0px;
}
:root[data-tema="claro"]{
  --fundo:#fff8e7;
  --vidro:rgba(255,250,238,.62);--vidro-forte:rgba(255,250,238,.94);--vidro-claro:rgba(6,11,22,.035);
  --linha:rgba(6,11,22,.1);--linha-forte:rgba(6,11,22,.2);
  --texto:#060b16;--texto-2:#4a4660;--texto-3:#8a8472;
  --roxo:#7a45e8;--roxo-texto:#6d3fb8;--ouro:#8e7233;--ciano:#0a6d9c;--vermelho:#b42318;--lua:#4a4660;--verde:#1f7a55;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--fundo);color:var(--texto);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
body.sem-webgl{background:radial-gradient(ellipse at 50% 55%,#1d1535 0%,#0d0a1a 45%,var(--fundo) 80%)}
body.sem-webgl #ceu{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:var(--cursor-mao)}
:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}

#ceu{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#presencaBabel{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background:#100d20}
#presencaBabel.visivel{opacity:1}
#presencaBabel>img,#presencaBabel>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
#pontePresenca{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* ela recortada (05/10): por cima da decoração (#ensaioDecoracao, z 2, vem antes no documento) e abaixo da conversa (#palco, z 3) */
#passagemEla{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:2;transition:filter .32s ease}
/* Plano completo: recorte retangular sobre o sofá criava uma borda de outra cor. */
#pedraDaSala{position:absolute;border:0;background:transparent;border-radius:50%;padding:0;pointer-events:auto;color:#dabfff;box-shadow:none;appearance:none}
#pedraDaSala:hover,#pedraDaSala:focus-visible{background:transparent!important;box-shadow:none}
/* O alvo de clique nunca emite luz: sombra nele revela um disco maior que a pedra.
   Todos os pulsos são desenhados no material, respeitando a silhueta. */
@media(max-width:760px){#presencaBabel>img,#presencaBabel>video,#passagemEla{object-fit:contain}}
@media(prefers-reduced-motion:reduce){#presencaBabel{transition:none}}
body[data-visual="mulher"] #presencaBabel[data-estado="conversa"]{visibility:hidden}
/* ela viva por cima (05/10): na conversa, a camada da foto mostra a sala desfocada; a tela em WebGL (só ela, transparente) sobe
   acima da decoração (#ensaioDecoracao, z 2) e abaixo da conversa (#palco, z 3, vem depois); os botões da sala sobem junto para o
   clique nela continuar chegando */
:root.ela-viva body[data-visual="mulher"] #presencaBabel[data-estado="conversa"]{visibility:visible}
:root.ela-viva #ceu{z-index:3}
:root.ela-viva #pecasSala{z-index:3}
body[data-visual="pedra"] #ceu3d,body[data-visual="pedra"] #painelJanela,body[data-visual="pedra"] #btJanela,body[data-visual="pedra"] .cristal-voo{display:none!important}
/* A marca da sala já mora dentro da pedra; o topo não a repete. */
body[data-visual="pedra"].corpo-babel .topo .marca{visibility:hidden}
body.corpo-babel{background:#100d20}
#luzPedraViva{position:fixed;inset:0;z-index:1;pointer-events:none;transition:opacity .2s}
body.sem-conta #luzPedraViva{visibility:hidden}
.base-pedra-estavel{position:absolute;pointer-events:none;max-width:none;mask-image:linear-gradient(to right,#000 27.1%,transparent 34.4%);-webkit-mask-image:linear-gradient(to right,#000 27.1%,transparent 34.4%)}
.material-pedra{position:absolute;left:calc(var(--pedra-x) - var(--pedra-r) * 1.083333);top:calc(var(--pedra-y) - var(--pedra-r) * .791667);width:calc(var(--pedra-r) * 2.166667);height:calc(var(--pedra-r) * 1.533333);pointer-events:none}
#luzPedraViva.b-gravado .base-pedra-estavel,#luzPedraViva.b-gravado .material-pedra,#luzPedraViva.b-gravado .marca-pedra{visibility:hidden}
.pedra-pulso{position:absolute;left:var(--pedra-x);top:var(--pedra-y);width:0;height:0;opacity:.5;animation:energiaPedra 4.8s ease-in-out infinite}
.marca-pedra{position:absolute;left:calc(var(--pedra-r) * -.28);top:calc(var(--pedra-r) * -.24);width:calc(var(--pedra-r) * .56);height:calc(var(--pedra-r) * .56);object-fit:contain;filter:sepia(.5) hue-rotate(205deg) saturate(.55) drop-shadow(0 0 3px #c9b1eb);mix-blend-mode:soft-light;opacity:.6}
.reflexo-parede{position:absolute;width:calc(var(--pedra-r) * 4.4);height:calc(var(--pedra-r) * 4.5);left:calc(var(--pedra-r) * -2.3);bottom:calc(var(--pedra-r) * .18);background:radial-gradient(ellipse at 52% 95%,#bea1f576,#9671cb29 38%,transparent 71%);filter:blur(12px);mix-blend-mode:screen;transform:skewX(-9deg)}
#luzPedraViva.pensando .pedra-pulso{animation-duration:1.6s}
#luzPedraViva.pausada .pedra-pulso{animation-play-state:paused}
@keyframes energiaPedra{0%,100%{opacity:.28}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.pedra-pulso{animation:none;opacity:.6}#luzPedraViva{transition:none}}
#rotulos{position:fixed;inset:0;pointer-events:none;z-index:1}
.rotulo{position:absolute;left:0;top:0;transform:translate(-50%,0);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,232,246,.72);white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.9);transition:opacity .3s}
.rotulo.empresa{font-size:11.5px;color:rgba(248,232,200,.9)}
.rotulo.mentor{color:rgba(220,205,255,.8)}
#guias{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
#guias path{fill:none;stroke:rgba(215,205,255,.28);stroke-width:1;stroke-dasharray:2 4}
#guias circle{fill:none;stroke:rgba(215,205,255,.55);stroke-width:1}

#dica{position:fixed;z-index:6;pointer-events:none;background:var(--vidro-forte);border:0;border-radius:16px;padding:10px 14px;font-size:12.5px;color:var(--texto);max-width:280px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.2)}
#dica small{display:block;color:var(--texto-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* topo */
.topo{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;pointer-events:none}
.topo>*{pointer-events:auto}
.marca{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:.02em;color:rgba(236,232,246,.9)}
.marca small{font-weight:400;color:var(--texto-3);letter-spacing:.12em;text-transform:uppercase;font-size:10.5px}
.marca .ponto{width:8px;height:8px;border-radius:50%;background:var(--roxo);box-shadow:0 0 12px var(--roxo)}
.acoes{display:flex;align-items:center;gap:8px}
.pilula{border:1px solid var(--linha);background:var(--vidro);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;padding:5px 11px;font-size:11.5px;color:var(--texto-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.pilula.aviso{color:var(--ouro);border-color:rgba(224,180,87,.4)}
.icone{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--linha);background:var(--vidro);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--texto-2);padding:0;transition:border-color .2s,color .2s,background .2s}
.icone:hover{color:var(--texto);border-color:var(--linha-forte)}
.icone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#btVoz .onda{opacity:.25}
#btVoz[aria-pressed="true"]{color:var(--roxo);border-color:rgba(163,118,233,.5)}
#btVoz[aria-pressed="true"] .onda{opacity:1}

/* telas que o Mentor abre */
#telas{position:fixed;z-index:4;top:64px;right:16px;bottom:16px;width:376px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;padding:2px 4px 20px;border-radius:24px;scrollbar-width:thin;scrollbar-color:rgba(205,195,255,.18) transparent;pointer-events:none;overscroll-behavior:contain;perspective:1000px}
#telas>*{pointer-events:auto}
.tela{position:relative;flex:none;background:var(--vidro);border:0;border-radius:24px;padding:16px;max-height:calc(100dvh - 110px);overflow:auto;scrollbar-width:thin;scrollbar-color:#bda1fa55 transparent;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 14px 35px rgba(0,0,0,.22);transform-origin:var(--nascer-x,0px) var(--nascer-y,30px);overscroll-behavior:contain}
.tela.pisca{animation:pisca .7s ease}
@keyframes nasce{from{opacity:0;transform:translateY(16px) rotateX(-4deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes some{to{opacity:0;transform:translateY(12px) rotateX(6deg) scale(.96)}}
@keyframes pisca{0%,100%{box-shadow:0 22px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}40%{box-shadow:0 0 0 1px var(--roxo),0 22px 60px rgba(0,0,0,.45)}}
.tela header{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.selo{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8 0%,var(--c,#a376e9) 35%,#0008 100%);background-size:cover;background-position:center;box-shadow:0 0 18px -2px var(--c,#a376e9),inset -6px -6px 12px rgba(0,0,0,.45)}
.selo.ponto{width:14px;height:14px;margin:0 10px;box-shadow:0 0 14px 2px var(--c)}
.tela header .selo,.pedra-mini{flex:none;width:38px;height:27px;margin:0;border:0;border-radius:52% 52% 16% 16% / 72% 72% 28% 28%;background:url('/publico/cena/pedra-original.jpg') 45.3% 28.3% / 213.3% 195.5% no-repeat!important;box-shadow:none;clip-path:none;transform:none}
.tela header .selo,.pedra-mini{position:relative}
.tela header .selo::after,.pedra-mini::after,.login-avatar::before{content:'';position:absolute;inset:2px 7px 3px;background:url('/publico/b.png') center/contain no-repeat;filter:brightness(2.5) drop-shadow(0 0 3px #f0deff);animation:energiaPedra 4.8s ease-in-out infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.tela header .selo::after,.pedra-mini::after,.login-avatar::before{animation:none;opacity:.75}}
.boca-agente{display:grid;gap:6px;margin:10px 0 14px}.boca-agente select{background:#ffffff09;color:var(--texto);border:0;border-radius:12px;padding:9px;width:100%}.boca-agente option{background:#1c1431}.boca-agente small{font-size:10px;color:var(--texto-3);overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.tela,.tela.sai,.tela.pisca{animation:none!important;transition:none!important}}
@media(max-width:760px){.tela{max-height:44dvh}}
.tela header .t{flex:1;min-width:0}
.tela header small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tela h2{margin:0;font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.15}
.nome{width:100%;background:transparent;border:0;border-bottom:1px solid transparent;padding:1px 0;font-family:var(--serif);font-size:23px;font-weight:500;color:var(--texto);border-radius:0}
.nome:hover{border-bottom-color:var(--linha)}
.nome:focus{outline:none;border-bottom-color:var(--roxo)}
.fechar{flex:none;width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--texto-3);font-size:18px;line-height:1}
.fechar:hover{background:var(--vidro-claro);color:var(--texto)}
.campos{display:grid;grid-template-columns:96px 1fr;gap:2px 10px;align-items:start}
.campos label{font-size:11.5px;color:var(--texto-3);padding-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campos input,.campos textarea,.linha-nova input{width:100%;background:transparent;border:1px solid transparent;border-radius:7px;padding:5px 7px;color:var(--texto);min-height:30px;resize:none;line-height:1.4}
.campos input:hover,.campos textarea:hover{border-color:var(--linha)}
.campos input:focus,.campos textarea:focus,.linha-nova input:focus{outline:none;border-color:rgba(163,118,233,.6);background:rgba(0,0,0,.18)}
.campos input::placeholder,.campos textarea::placeholder{color:#5d5776}
.campos .salvo{border-color:rgba(94,201,155,.55)!important}
.falta{color:var(--vermelho)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--linha);border-radius:999px;padding:3px 9px;font-size:11.5px;color:var(--texto-2);background:var(--vidro-claro)}
button.chip:hover{border-color:var(--linha-forte);color:var(--texto)}
.chip.ouro{color:var(--ouro);border-color:rgba(224,180,87,.4)}
.chip.ciano{color:var(--ciano);border-color:rgba(42,213,229,.4)}
.chip.roxo{color:var(--roxo);border-color:rgba(163,118,233,.45)}
.chip.vermelho{color:var(--vermelho);border-color:rgba(239,107,107,.45)}
.tela footer{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bt{border:1px solid var(--linha);background:var(--vidro-claro);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--texto)}
.bt:hover{border-color:var(--linha-forte)}
.bt.p{background:var(--roxo);border-color:var(--roxo);color:#0c0818;font-weight:600}
.bt.perigo{color:var(--vermelho);border-color:rgba(239,107,107,.35)}
.bt.perigo.p{background:var(--vermelho);color:#1a0808;border-color:var(--vermelho)}
.bt:disabled{opacity:.5;cursor:var(--cursor-seta)}
.lista{display:flex;flex-direction:column;gap:2px;margin:0 -6px}
.linha{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;border:0;background:transparent;text-align:left;width:100%;color:var(--texto)}
.linha:hover{background:var(--vidro-claro)}
.linha .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha .v{flex:none;font-variant-numeric:tabular-nums;color:var(--texto-2);font-size:13px}
.linha i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c,var(--lua));box-shadow:0 0 8px var(--c,var(--lua))}
.tabela{width:100%;border-collapse:collapse;font-size:12.5px}
.tabela th{text-align:left;font-weight:500;color:var(--texto-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border-bottom:1px solid var(--linha)}
.tabela td{padding:6px;border-bottom:1px solid rgba(205,195,255,.06);vertical-align:top}
.tabela tr:hover td{background:var(--vidro-claro);cursor:var(--cursor-mao)}
.rolagem{max-height:280px;overflow:auto;margin:0 -4px;padding:0 4px}
.linha-nova{display:flex;gap:6px;margin-top:8px}
.linha-nova input{border-color:var(--linha)}
.vazio{color:var(--texto-3);font-size:13px;padding:6px 0}
.pergunta{font-family:var(--serif);font-size:16px;line-height:1.4;margin:0 0 10px;color:var(--texto)}
.resumo{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.resumo div{border:1px solid var(--linha);border-radius:12px;padding:10px;background:var(--vidro-claro)}
.resumo b{display:block;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.resumo span{font-size:11.5px;color:var(--texto-3)}
.aviso-tela{font-size:12px;color:var(--texto-3);margin:8px 0 0}
.erro-tela{font-size:12.5px;color:var(--vermelho);margin:8px 0 0}

/* conversa com o agente */
.fio{display:flex;flex-direction:column;gap:6px;height:300px;overflow-y:auto;padding:4px 2px;margin:0 -4px;scroll-behavior:smooth}
.bolha{max-width:84%;padding:7px 11px;border-radius:14px;font-size:13.5px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word}
.bolha.cliente{align-self:flex-end;background:rgba(163,118,233,.22);border:1px solid rgba(163,118,233,.3);border-bottom-right-radius:5px}
.bolha.agente{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--linha);border-bottom-left-radius:5px}
.bolha.sistema{align-self:center;max-width:95%;font-size:11.5px;color:var(--texto-3);background:transparent;padding:2px 6px}
.bolha .chips{margin-top:6px}
.digitando::after{content:"…";animation:respira 1s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.3}50%{opacity:1}}
.compor{display:flex;gap:6px;margin-top:8px}
.compor input{flex:1;background:rgba(0,0,0,.22);border:1px solid var(--linha);border-radius:999px;padding:8px 13px;color:var(--texto)}
.compor input:focus{outline:none;border-color:rgba(163,118,233,.6)}

/* o palco: o que o Mentor fala e a entrada */
#palco{position:fixed;z-index:3;bottom:18px;left:calc(50% - var(--livre) / 2);transform:translateX(-50%);width:min(760px,calc(100vw - 32px - var(--livre)));transition:left .5s cubic-bezier(.3,.8,.3,1),width .5s cubic-bezier(.3,.8,.3,1);pointer-events:none}
#palco>*{pointer-events:auto}
.catalogo-vista{width:100%;height:52vh;min-height:280px;border:0;border-radius:12px;background:transparent;color-scheme:dark}
#disse{margin:0 0 6px;font-size:13px;color:var(--texto-3);min-height:1em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#disse:not(:empty)::before{content:"você  ";letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;color:#655f80}
#fala{margin:0 0 14px;font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.3vw,31px);line-height:1.28;letter-spacing:-.005em;color:var(--texto);text-shadow:0 2px 24px rgba(4,2,12,.95),0 0 2px rgba(4,2,12,.8);max-height:36vh;overflow-y:auto;scrollbar-width:none}
#fala:not(:empty),#fala.pensando{width:fit-content;max-width:100%;overflow-wrap:anywhere;border:1px solid #ffffff20;border-radius:16px 16px 16px 5px;padding:14px 18px;background:#ffffff1f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#211034;text-shadow:none;box-shadow:0 2px 18px #09051308}
:root[data-cor-fala="branco"] #fala{color:#fff;background:#120b261a}
:root[data-cor-fala="preto"] #fala{color:#0b0414}
#coresConversa{width:min(340px,calc(100vw - 32px));padding:20px;border:1px solid #b899ff66;border-radius:22px;background:#1d1235;color:#eee5ff;box-shadow:0 12px 60px #07050f66}
#coresConversa::backdrop{background:#07050f44;backdrop-filter:blur(3px)}
.cores-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}.cores-cab h2{font:500 23px var(--serif);margin:0}
#coresConversa fieldset{border:0;padding:0;margin:22px 0 0}#coresConversa legend{font-size:12px;margin-bottom:10px;color:#cbbbdf}
.opcoes-cor{display:flex;gap:10px}.opcoes-cor button{display:flex;align-items:center;gap:8px;flex:1;border:1px solid #b899ff55;background:#b899ff12;border-radius:12px;padding:10px 14px;color:#eee5ff}
.opcoes-cor button[aria-pressed="true"]{border-color:#b899ff;background:#b899ff30}.opcoes-cor i{width:16px;height:16px;border-radius:50%;border:1px solid #b899ff88}.amostra-preta{background:#0b0414}.amostra-branca{background:#fff}
#fala .p{animation:letra .5s ease both}
@keyframes letra{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
#fala.enquantinho{font-style:italic;color:color-mix(in srgb,currentColor 82%,transparent)}
#fala.pensando::after{content:"";display:inline-block;width:42px;height:10px;background:radial-gradient(circle,var(--lua) 2px,transparent 3px) 0 50%/14px 10px repeat-x;animation:respira 1.1s ease-in-out infinite;opacity:.7}
#fala .montando{display:block;margin-top:8px;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);animation:respira 1.2s ease-in-out infinite}
#fala .montando::after{content:" …"}
#fala.erro{color:#ffb4b4;font-family:var(--sans);font-size:15px}
#sugestoes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
#sugestoes button{border:1px solid var(--linha);background:var(--vidro);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;padding:7px 13px;font-size:13px;color:var(--texto-2);text-align:left}
#sugestoes button:hover{color:var(--texto);border-color:var(--linha-forte)}
/* Linha do protótipo 8840, preservada sem importar o restante do frontend antigo. */
#entrada{display:flex;align-items:center;gap:8px;background:transparent!important;border:0;border-bottom:1px solid var(--linha-forte);border-radius:0;padding:6px 2px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#entrada:focus-within{border-bottom-color:var(--roxo)}
#entrada .icone{border-color:transparent;background:transparent;flex:none}
#entrada .enviar{background:var(--roxo);color:#0c0818}
#entrada .enviar:disabled{opacity:.4}
#btMic.ouvindo{color:var(--vermelho);background:rgba(239,107,107,.14);animation:respira 1.2s ease-in-out infinite}
#msg{flex:1;min-width:0;height:38px;background:transparent;border:0;padding:8px 4px;line-height:1.4;font-size:15px;color:var(--texto)}
#msg:focus{outline:none}
#msg::placeholder{color:#b7adca}
#formBocas select{width:100%;min-height:42px;margin:6px 0 14px;padding:9px 12px;border-radius:10px;background:var(--vidro-forte);border:1px solid var(--linha-forte);color:var(--texto);color-scheme:dark}
#formBocas[aria-busy="true"]{opacity:.7}
#rodape{margin:8px 0 0;text-align:center;font-size:11px;color:#5d5776}

#soltar{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:rgba(7,6,15,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#soltar div{border:1.5px dashed rgba(163,118,233,.7);border-radius:20px;padding:40px 56px;font-family:var(--serif);font-size:22px;color:var(--texto)}

@media (max-width:1100px){
  #telas{width:340px}
}
@media (max-width:760px){
  :root{--livre:0px!important}
  .topo{padding:10px 12px}
  #estado{display:none}
  #guias{display:none}
  #telas{top:auto;left:8px;right:8px;width:auto;bottom:calc(env(safe-area-inset-bottom,0px) + var(--palco-h,128px) + 16px);max-height:min(50vh,calc(100vh - var(--palco-h,128px) - 90px));padding-bottom:4px}
  #palco{left:50%;width:calc(100vw - 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
  body.com-telas #fala{max-height:14vh}
  body.com-telas #disse{display:none}
  #fala{font-size:18px;max-height:30vh}
  #rodape{display:none}
  .fio{height:220px}
}
/* Celular em pé (a sala no topo, ver moldarCelular em presenca-babel.js): a sala é a faixa de cima, com a câmera mirando nela; a prateleira de
   joias fica logo abaixo dela e a conversa embaixo, no alcance do polegar. As telas abrem como folha entre a sala e a
   conversa, no lugar da prateleira. */
@media (max-width:760px){
  :root #ceu,:root #ceu3d,:root #presencaBabel,:root #luzPedraViva,:root #passagemEla{transform-origin:0 0;translate:var(--sala-tx,0px) var(--sala-ty,0px);scale:var(--sala-k,1);transition:filter .32s ease,opacity .2s ease,translate var(--sala-tempo,0ms) cubic-bezier(.45,0,.25,1)}
  :root.sala-no-topo #telas{top:calc(var(--sala-base) + 8px);bottom:calc(env(safe-area-inset-bottom,0px) + var(--palco-h,128px) + 10px);max-height:none}
  :root.sala-no-topo .tela{max-height:none}
  :root.sala-no-topo #fala{max-height:max(14vh,calc(100dvh - var(--sala-base) - 330px))}
  :root.sala-no-topo body.com-telas #fala{max-height:12vh}
  /* topo do celular: o nome da conta encolhe com reticências para os ícones caberem numa linha */
  #btConta{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topo .acoes{flex-wrap:nowrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* tema claro: sem sombra de texto, botões com tinta */
:root[data-tema="claro"] #fala{text-shadow:none}
:root[data-tema="claro"] #fala.erro{color:var(--vermelho)}
:root[data-tema="claro"] .bt.p,:root[data-tema="claro"] #entrada .enviar{color:#fff}
:root[data-tema="claro"] .marca{color:var(--texto)}
:root[data-tema="claro"] #disse:not(:empty)::before{color:var(--texto-3)}
:root[data-tema="claro"] #msg::placeholder{color:#9a93ad}
:root[data-tema="claro"] #rodape{color:#9a93ad}
#btTema .raios{opacity:.35}
:root[data-tema="claro"] #btTema .raios{opacity:1}
body{transition:background .4s}

/* joias: o selo das telas vira uma gema; botão primário no roxo da marca */
.selo{background:radial-gradient(circle at 32% 28%,#fff 0%,rgba(255,255,255,.55) 12%,var(--c,#9b6bff) 38%,rgba(20,8,40,.9) 100%)!important;box-shadow:0 0 22px -4px var(--c,#9b6bff),inset -5px -6px 10px rgba(0,0,0,.35)}
.bt.p,#entrada .enviar{background:var(--roxo);border-color:var(--roxo);color:#fff}
.pergunta{font-size:20px}
.marca{font-family:var(--sans);font-weight:500;letter-spacing:.01em}
.marca .ponto{background:var(--roxo);box-shadow:0 0 12px var(--roxo)}
#fala .p{animation:letra .7s cubic-bezier(.2,.7,.2,1) both}
:root[data-tema="claro"] .selo{box-shadow:0 6px 14px -6px rgba(6,11,22,.35),inset -5px -6px 10px rgba(0,0,0,.18)}

/* babel-os: só a logo no topo; lilás é a cor da marca */
.marca img{display:block;width:40px;height:40px;filter:drop-shadow(0 0 10px rgba(184,153,255,.35))}
:root[data-tema="claro"] .marca img{filter:none}
.chip-pend{border:1px solid rgba(184,153,255,.4);background:var(--vidro);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--roxo-texto);border-radius:999px;padding:7px 13px;font-size:12.5px;letter-spacing:.02em}
.chip-pend:hover{border-color:var(--roxo)}
#rodape.aviso{color:var(--ouro)}

/* a vista: a tela que nasce de uma frase, com impacto */
body.com-vista #telas{width:min(640px,48vw)}
.tela:has(.vista-cab){padding:26px 28px 22px;border-radius:24px;background:linear-gradient(160deg,rgba(28,18,58,.78),rgba(10,8,24,.72));border-color:rgba(184,153,255,.22)}
:root[data-tema="claro"] .tela:has(.vista-cab){background:linear-gradient(160deg,rgba(255,252,244,.9),rgba(250,243,228,.82));border-color:rgba(122,69,232,.18)}
.vista-cab{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.vista-cab .t{flex:1;min-width:0}
.vista-cab small{display:block;font-size:11px;letter-spacing:.2em;text-transform:lowercase;color:var(--roxo-texto);margin-bottom:8px}
.tela .manchete{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.01em;margin:0;animation:nascer .7s cubic-bezier(.2,.7,.2,1) both}
.vista-cab .sub{margin:10px 0 0;color:var(--texto-2);font-size:13.5px}
@keyframes nascer{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vista-corpo{display:flex;flex-direction:column;gap:14px}
.bloco{animation:nascer .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--ordem,0) * 90ms + 150ms)}
.bloco>small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);margin-bottom:8px}
.faixa-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.bloco.numero,.bloco.anel,.bloco.grafico,.bloco.lista-v{border:1px solid var(--linha);border-radius:18px;padding:16px;background:var(--vidro-claro)}
.bloco.numero b{display:block;font-family:var(--serif);font-weight:500;font-size:44px;line-height:1;letter-spacing:-.02em;margin:4px 0 8px;font-variant-numeric:lining-nums tabular-nums}
.fonte{display:inline-block;font-size:11px;color:var(--roxo-texto);border:1px solid rgba(184,153,255,.25);border-radius:999px;padding:2px 8px}
:root[data-tema="claro"] .fonte{border-color:rgba(122,69,232,.2)}
.bloco.anel{position:relative;display:grid;place-items:center;text-align:center;padding:14px}
.bloco.anel svg{width:118px;height:118px;transform:rotate(-90deg)}
.bloco.anel circle{fill:none;stroke-width:6}
.bloco.anel .trilho{stroke:var(--linha)}
.bloco.anel .arco{stroke:var(--roxo);stroke-linecap:round;stroke-dashoffset:var(--fim);animation:fechaAnel 1.1s cubic-bezier(.3,.8,.2,1) both .3s}
@keyframes fechaAnel{from{stroke-dashoffset:276.5}}
.bloco.anel b{position:absolute;top:50px;left:0;right:0;font-family:var(--serif);font-weight:500;font-size:30px}
.bloco.anel small{margin:6px 0 4px}
.barras{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:18px}
.barra{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.barra i{display:block;width:100%;max-width:46px;height:var(--h);border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--roxo-texto),var(--roxo));box-shadow:0 0 24px -6px var(--roxo);transform-origin:bottom;animation:cresce .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms + 300ms)}
@keyframes cresce{from{transform:scaleY(0)}}
.barra .v{font-size:11.5px;color:var(--texto-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.barra .r{font-size:11px;color:var(--texto-3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha-v{display:flex;align-items:center;gap:12px;width:100%;padding:10px 4px;border:0;border-top:1px solid var(--linha);background:transparent;color:var(--texto);text-align:left;font-family:var(--serif);font-size:17px}
.linha-v:first-of-type{border-top:0}
.linha-v:hover{background:var(--vidro-claro)}
.linha-v .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha-v .c{font-family:var(--sans);font-size:12.5px;color:var(--texto-2);font-variant-numeric:tabular-nums}
.bloco.acoes{display:flex;flex-wrap:wrap;gap:8px}
.bt.acao{background:transparent;border-color:rgba(184,153,255,.35);color:var(--texto);padding:9px 16px;font-family:var(--serif);font-size:16px}
.bt.acao:hover{border-color:var(--roxo);background:rgba(155,107,255,.12)}
.linhagem{margin:16px 0 0;font-size:11px;color:var(--texto-3)}
@media (max-width:760px){body.com-vista #telas{width:auto}.bloco.numero b{font-size:36px}}

/* conta: entrar e criar cadastro */
#entrar-conta{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(7,5,15,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
:root[data-tema="claro"] #entrar-conta{background:rgba(255,248,231,.55)}
#formConta{width:min(380px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px;padding:30px 28px;border-radius:24px;border:1px solid var(--linha);background:var(--vidro-forte);box-shadow:0 30px 80px rgba(0,0,0,.45);animation:nascer .6s cubic-bezier(.2,.7,.2,1) both}
#formConta img{align-self:center;filter:drop-shadow(0 0 16px rgba(184,153,255,.45))}
#formConta h1{font-family:var(--serif);font-weight:500;font-size:32px;text-align:center;margin:0 0 6px}
#formConta label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--texto-3);letter-spacing:.04em}
#formConta input{background:var(--vidro-claro);border:1px solid var(--linha);border-radius:12px;padding:11px 13px;color:var(--texto);font-size:15px}
#formConta input:focus{outline:none;border-color:var(--roxo)}
#formConta .so-cadastro{display:none}
#formConta.cadastro .so-cadastro{display:flex}
#formConta .bt{padding:11px;font-size:14px}
body.sem-conta #palco,body.sem-conta #telas{visibility:hidden}
.icone.conta{font-family:var(--serif);font-size:17px;color:var(--roxo-texto)}
/* WhatsApp */
.wpp-bloco{border:1px solid var(--linha);border-radius:16px;padding:14px;margin-bottom:12px;background:var(--vidro-claro)}
.wpp-bloco>small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);margin-bottom:10px}
.wpp-qr{display:block;width:min(260px,100%);margin:4px auto 12px;border-radius:14px;box-shadow:0 0 0 1px var(--linha),0 20px 40px -20px var(--roxo)}
.wpp-qr-area:empty{display:none}.wpp-qr-area{margin:0 0 12px}.wpp-qr-area p{margin:0;font-size:13px;color:var(--texto-2);text-align:center}
.wpp-campo{display:block;margin:12px 0 8px;font-size:13px;color:var(--texto-2)}.wpp-campo input{display:block;width:100%;margin-top:4px;box-sizing:border-box}
.wpp-passos{margin:0 0 12px;padding-left:18px;font-size:13px;color:var(--texto-2);display:flex;flex-direction:column;gap:4px}
.wpp-ok{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px}
.wpp-ok i{width:9px;height:9px;border-radius:50%;background:var(--verde);box-shadow:0 0 10px var(--verde)}
.wpp-acao{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.bt.wpp-conectado,.bt.wpp-conectado:disabled{display:inline-flex;align-items:center;gap:8px;border-color:var(--verde);opacity:1}
.bt.wpp-conectado i{width:9px;height:9px;border-radius:50%;background:var(--verde);box-shadow:0 0 10px var(--verde)}
.wpp-cadastro{font-size:13px;color:var(--texto-2);margin:0 0 10px}.wpp-cadastro b{color:var(--roxo-texto);font-weight:600;letter-spacing:.01em;white-space:nowrap}
.wpp-modos{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
.wpp-modos .chip{cursor:var(--cursor-mao)}
.wpp-registro{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow:auto}
.wpp-item{display:flex;flex-direction:column;gap:4px}
.wpp-quem{font-size:11px;color:var(--texto-3)}
.wpp-bloco select{width:100%;background:transparent;border:1px solid var(--linha);border-radius:8px;padding:6px 8px;color:var(--texto)}

/* ---------- conversa por voz ---------- */
/* a fala aparece palavra por palavra junto com a voz */
#fala .frase .w{opacity:.08;transition:opacity .18s ease}
#fala .frase .w.on{opacity:1}
#fala .frase.nao-dito .w{opacity:.45}
@media (prefers-reduced-motion:reduce){#fala .frase .w{transition:none}}
#disse.interim{color:var(--texto-2);font-style:italic}
#disse.interim::after{content:" ▍";color:var(--roxo-texto);animation:respira 1s ease-in-out infinite}
#estadoVoz{margin:0 0 4px;font-size:11.5px;letter-spacing:.04em;color:var(--roxo-texto);display:flex;align-items:center;gap:7px}
#estadoVoz::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--roxo);box-shadow:0 0 10px var(--roxo);animation:respira 1.6s ease-in-out infinite}
#estadoVoz.esperando,#estadoVoz.paralela{color:var(--texto-3)}
#estadoVoz.esperando::before,#estadoVoz.paralela::before{background:var(--texto-3);box-shadow:none;animation-duration:3.2s}
#estadoVoz.pensando::before{animation-duration:.6s}
#estadoVoz.licenca::before{background:var(--ouro);box-shadow:0 0 12px var(--ouro)}
#estadoVoz.erro{color:var(--vermelho)}#estadoVoz.erro::before{background:var(--vermelho);animation:none}
#btMic.ouvindo{animation:none;color:#0c0818;background:var(--roxo);border-color:var(--roxo);box-shadow:0 0 0 4px rgba(155,107,255,.18),0 0 22px rgba(155,107,255,.45)}
body[data-voz="falando"] #btMic.ouvindo{background:var(--ciano);border-color:var(--ciano)}
body[data-voz="paralela"] #btMic.ouvindo,body[data-voz="esperando"] #btMic.ouvindo{background:var(--vidro);color:var(--roxo-texto)}
/* o cartão: o que o orbe entendeu, o que espera o sim, o "desfazer" */
.cartao{margin:0 0 8px;border:1px solid var(--linha-forte);background:var(--vidro-forte);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:14px;padding:9px 12px;font-size:13px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;animation:nasce .35s cubic-bezier(.2,.9,.25,1.15) both;max-width:560px}
.cartao small{width:100%;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3)}
.cartao p{margin:0;flex:1;min-width:180px;color:var(--texto)}
.cartao .botoes{display:flex;gap:6px;flex-wrap:wrap}
.cartao.pendente{border-color:var(--roxo)}
.cartao.feito{border-color:var(--linha)}
#entrada.credencial{border-bottom-color:#e0b25c!important;box-shadow:0 1px 0 #e0b25c}#entrada.credencial #msg::placeholder{color:#e0b25c}
.cartao.minuta{border-color:var(--roxo)}.cartao.caixa{border-color:#e0b25c}.cartao.caixa .conta-caixa{font:600 12px var(--sans,system-ui);color:#e0b25c}.cartao .sem-origem{text-transform:none;letter-spacing:0;color:#e0b25c}
.cartao .passos{width:100%;margin:0;padding:0 0 0 20px;color:var(--texto)}.cartao .passos li{margin:2px 0;padding-left:2px}
.botoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.aprendi{position:absolute;right:0;top:-30px;font-size:11px;color:var(--roxo-texto);border:1px solid var(--linha);background:var(--vidro);border-radius:999px;padding:3px 10px;animation:nasce .4s both}
/* memória, dicionário, diário, ouvido, prova */
.lembranca{border-top:1px solid var(--linha);padding:8px 0}
.lembranca:first-of-type{border-top:0}
.lembranca small{font-size:10.5px;color:var(--texto-3);letter-spacing:.03em}
.lembranca.aberta{border-left:2px solid var(--ciano);padding-left:8px}
.lm-texto{margin:3px 0;font-size:13px;color:var(--texto)}
.lm-texto.riscado{text-decoration:line-through;color:var(--texto-3)}
.lm-frase{margin:2px 0 4px;font-size:12px;color:var(--texto-2);font-style:italic}
.lm-acoes{display:flex;gap:6px;margin-top:4px}
.mini{border:0;background:none;padding:0;font-size:11px;color:var(--texto-3);text-decoration:underline;text-underline-offset:2px}
.mini:hover{color:var(--texto)}.mini.perigo:hover{color:var(--vermelho)}
.chip .x{border:0;background:none;padding:0 0 0 2px;color:var(--texto-3);font-size:13px;line-height:1}
.chip .x:hover{color:var(--vermelho)}
.fio-aprendi p{margin:3px 0;font-size:12px;color:var(--texto-2)}
.frase-treino{font-family:var(--serif);font-size:20px;line-height:1.3;margin:6px 0 2px;color:var(--texto)}
.bt.gravando{background:var(--vermelho);border-color:var(--vermelho);animation:respira 1.2s ease-in-out infinite}
.cenario{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--linha);font-size:12.5px;color:var(--texto-2)}
.cenario:first-of-type{border-top:0}
.resumo.prova{grid-template-columns:repeat(2,1fr)}
.resumo.prova b{font-size:17px}

/* ---------- navegador ao lado, pesquisa e telas novas (28/09) ---------- */
.nav-barra{display:flex;gap:6px;align-items:center;margin:4px 0 10px}
.nav-barra .bt{min-width:36px}
.nav-url{flex:1;min-width:0;background:transparent;color:var(--texto);border:1px solid var(--linha,rgba(155,107,255,.25));border-radius:10px;padding:8px 10px;font:inherit}
.nav-corpo{max-height:min(58vh,560px);overflow:auto;padding-right:4px}
.nav-corpo p{margin:0 0 .7em;line-height:1.55;color:var(--texto-2,inherit)}
.nav-host{color:var(--texto-2);letter-spacing:.08em}
.nav-titulo{margin:.2em 0 .6em;font-size:1.15em;line-height:1.25}
.nav-sub{display:block;margin:12px 0 6px;color:var(--texto-2)}
.nav-links{display:flex;flex-direction:column;gap:4px}
.nav-pe{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.nav-pe a.bt{text-decoration:none}
/* Canto livre da janela, alinhada à direita: arrastar ajusta, clicar amplia/restaura. */
body.navegador-ajustado #telas{width:var(--nav-largura);max-width:calc(100vw - 32px)}
.tela.nav-ajustada{height:var(--nav-altura);max-height:none;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.nav-ajustada>header,.nav-ajustada>.nav-barra,.nav-ajustada>.nav-pe{flex:none}
.nav-ajustada .nav-moldura{flex:1;min-height:0;aspect-ratio:auto!important}
.nav-ajustada .nav-corpo{flex:1;min-height:0;max-height:none}
.nav-pe .linhagem{flex:1;min-width:120px;margin:0}
.nav-redimensionar{flex:none;align-self:flex-end;width:32px;height:32px;padding:5px;border:1px solid var(--linha-forte);border-radius:8px;background:transparent;color:var(--roxo-texto);cursor:nesw-resize;touch-action:none;user-select:none}
.nav-redimensionar svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav-redimensionar:hover{background:var(--vidro-claro);color:var(--texto)}
.nav-redimensionar:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
@media(max-width:760px){body.navegador-ajustado #telas{width:auto;max-width:none}}
.resultado{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:transparent;color:inherit;border:0;border-bottom:1px solid var(--linha,rgba(155,107,255,.18));padding:10px 2px;cursor:var(--cursor-mao);font:inherit}
.resultado small{color:var(--texto-2)}
.resultado span{color:var(--texto-2);font-size:.92em;line-height:1.45}
.resultado:hover b{text-decoration:underline}
.bloco.texto p{margin:0 0 .6em;line-height:1.55}
.bloco.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cartao-v{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--linha,rgba(155,107,255,.22));border-radius:12px}
.cartao-v span{color:var(--texto-2);font-size:.92em;line-height:1.45}

/* o Navegador babel: a página inteira numa moldura; a imagem recebe o mouse e o teclado da pessoa */
.nav-moldura{position:relative;width:100%;background:#0b0818;border:1px solid var(--linha);border-radius:12px;overflow:hidden}
.nav-quadro{display:block;width:100%;height:100%;object-fit:contain;cursor:var(--cursor-seta);outline:none;user-select:none;-webkit-user-drag:none;background:#0b0818}
.nav-quadro:focus{box-shadow:inset 0 0 0 2px rgba(163,118,233,.6)}
.nav-aviso{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:8px 14px;border-radius:10px;background:rgba(20,14,44,.85);color:var(--texto-2);font-size:13px}
.nav-aviso.erro{color:#ffb4b4}

/* o despertar: o véu da transição do primeiro login (some ao fim do tour) */
.veu-desp{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#060312;transition:opacity .8s ease}
.veu-desp.some{opacity:0;pointer-events:none}
.veu-desp.ja{background:rgba(6,3,18,.55)}
.veu-desp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.veu-desp.mini{background:transparent;place-items:start end;padding:14px;pointer-events:none}
.veu-desp.mini>*{pointer-events:auto}
.desp-legenda{position:relative;margin:0;font-family:var(--serif);font-size:22px;color:var(--roxo-texto);letter-spacing:.02em;animation:desp-respira 2.2s ease-in-out infinite}
@keyframes desp-respira{0%,100%{opacity:.45}50%{opacity:1}}
.desp-topo{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}
.veu-desp.mini .desp-topo{position:static}
.desp-sair{width:34px;padding:6px 0;text-align:center;font-size:16px;line-height:1}
:root[data-tema="claro"] .veu-desp{background:#fff8e7}
:root[data-tema="claro"] .veu-desp.mini{background:transparent}
@media (prefers-reduced-motion:reduce){.veu-desp{transition:none}.desp-legenda{animation:none}}
.catalogo-form{display:grid;gap:12px;margin-top:18px}.catalogo-form label{display:grid;gap:6px}.catalogo-form input,.catalogo-form select{width:100%;box-sizing:border-box;min-height:40px;padding:9px;background:rgba(20,14,40,.7);color:inherit;border:1px solid #7656a0;border-radius:10px;font:inherit}
.bloco.forma{padding:0;overflow:hidden;border-radius:14px;min-height:220px;position:relative;background:radial-gradient(circle at 50% 40%,#ffffff10,transparent 70%)}.bloco.forma .forma-canvas{display:block}.bloco.forma .fonte{position:absolute;left:12px;bottom:8px}.bloco.forma[data-estado=erro]{display:grid;place-items:center;padding:16px}

/* ---------- o cursor da casa (03/10): o triângulo de três luzes, lasca da pedra lilás. Desenho em frontend/publico/icones/cursor ---------- */
:root{--cursor-seta:url('/publico/icones/cursor/seta.svg') 4 3,url('/publico/icones/cursor/seta.png') 4 3,auto;--cursor-mao:url('/publico/icones/cursor/mao.svg') 9 8,url('/publico/icones/cursor/mao.png') 9 8,pointer}
html,body{cursor:var(--cursor-seta)}
a[href],button,summary,select,label[for],[role=button],[role=link],[role=tab],[role=menuitem],input[type=submit],input[type=button],input[type=checkbox],input[type=radio],input[type=range],.bt{cursor:var(--cursor-mao)}
button:disabled,[aria-disabled=true]{cursor:var(--cursor-seta)}
/* ---------- ícones de ufologia (03/10): um por tipo de tela, ao lado do rótulo pequeno do cabeçalho. Conjunto e sha em /publico/icones/manifesto.json ---------- */
.icone,.tela header .t small::before{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em;background:currentColor;-webkit-mask:var(--icone,url('/publico/icones/estrela-guia.svg')) center/contain no-repeat;mask:var(--icone,url('/publico/icones/estrela-guia.svg')) center/contain no-repeat}
.tela header .t small::before{content:'';margin-right:.45em;color:var(--roxo-texto)}
/* o topo (04/10, 19h, pedido do dono: "aquilo está ruim… conversar agora é clicando nela, então pode remover ali, o navegador
   precisa virar um objeto 3D"): a voz e o histórico saem do topo (abrem pelo clique nela), o navegador virou a janela da sala;
   os botões continuam no documento para quem os aciona por dentro. O que fica no topo (conta, cores) volta ao próprio desenho,
   sem a máscara de estrela que deixava todos iguais. */
.topo .icone.fora-do-topo{display:none}
#lugarJanela3d #painelJanela{position:static;width:auto;padding:0;border:0;background:none;backdrop-filter:none;box-shadow:none}
.topo .icone{-webkit-mask:none;mask:none;background:var(--vidro);width:36px;height:36px;vertical-align:middle}
.topo .icone.conta{width:auto;min-width:36px;padding:0 12px;border-radius:999px}
.tela[data-tipo="conversa"],.tela[data-tipo="conversas"]{--icone:url('/publico/icones/contato.svg')}
.tela[data-tipo="whatsapp"],.tela[data-tipo="ouvido"]{--icone:url('/publico/icones/transmissao.svg')}
.tela[data-tipo="criar"],.tela[data-tipo="nova"]{--icone:url('/publico/icones/feixe.svg')}
.tela[data-tipo="ficha"],.tela[data-tipo="contrato"]{--icone:url('/publico/icones/arquivo-x.svg')}
.tela[data-tipo="formulario"],.tela[data-tipo="diario"]{--icone:url('/publico/icones/diario-de-bordo.svg')}
.tela[data-tipo="historico"]{--icone:url('/publico/icones/orbita.svg')}
.tela[data-tipo="lista"],.tela[data-tipo="dicionario"]{--icone:url('/publico/icones/constelacao.svg')}
.tela[data-tipo="navegador"]{--icone:url('/publico/icones/disco-voador.svg')}
.tela[data-tipo="painel"]{--icone:url('/publico/icones/radar.svg')}
.tela[data-tipo="pendencias"]{--icone:url('/publico/icones/cometa.svg')}
.tela[data-tipo="confirmar"],.tela[data-tipo="prova"]{--icone:url('/publico/icones/olho.svg')}
.tela[data-tipo="memoria"]{--icone:url('/publico/icones/monolito.svg')}
.tela[data-tipo="pesquisa"]{--icone:url('/publico/icones/telescopio.svg')}
.tela[data-tipo="vista"]{--icone:url('/publico/icones/planeta-anel.svg')}
.tela[data-tipo="catalogo"]{--icone:url('/publico/icones/nave-mae.svg')}
/* a bateria de consciência no topo e a Loja (06/10/2026, frontend/publico/consciencia.js). Leveza: sem filtro de desfoque, sem laço;
   a largura só muda quando o número muda (transição curta, parada com movimento reduzido) */
.consciencia{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--linha);background:rgba(20,14,40,.72);color:var(--texto-2);font-size:12.5px;cursor:var(--cursor-mao)}
.consciencia:hover{color:var(--texto);border-color:var(--linha-forte)}
.consciencia .bateria,.loja-bateria .bateria{position:relative;display:inline-block;width:30px;height:13px;border:1.5px solid currentColor;border-radius:3px;box-sizing:border-box}
.consciencia .bateria::after,.loja-bateria .bateria::after{content:'';position:absolute;right:-4px;top:3px;width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
.consciencia .bateria i,.loja-bateria .bateria i{position:absolute;left:1px;top:1px;bottom:1px;width:max(0px, calc(var(--carga, 100%) - 2px));background:#9fe3b8;border-radius:1px;transition:width .6s ease}
.consciencia b{font-weight:600;color:var(--texto);min-width:3ch;text-align:right}
.consciencia.baixa .bateria i,.loja-bateria.baixa .bateria i{background:#f2c46b}
.consciencia.esgotada{border-color:rgba(239,107,107,.6)}
.consciencia.esgotada .bateria i{background:#ef6b6b}
@media (prefers-reduced-motion:reduce){.consciencia .bateria i,.loja-bateria .bateria i{transition:none}}
.loja-bateria{display:flex;align-items:center;gap:10px;margin:6px 0 10px;color:var(--texto-2);font-size:13px}
.loja-bateria .bateria{width:44px;height:18px}
.loja-aviso{margin:6px 0;color:var(--roxo-texto)}
.loja-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:6px 0 12px}
.loja-item{display:grid;gap:5px;padding:12px;border:1px solid var(--linha);border-radius:14px;background:rgba(255,255,255,.03)}
.loja-item.destaque{border-color:rgba(184,153,255,.6)}
.loja-item.atual{opacity:.8}
.loja-item small{color:var(--texto-2)}
.loja-item strong{font-size:15px}
/* a voz do agente, na ficha dele (frontend/publico/voz-do-agente.js) */
.voz-agente{display:grid;gap:8px;margin:10px 0;padding:12px;border:1px solid var(--linha);border-radius:14px}
.voz-agente h4{margin:0;font-size:13px;color:var(--texto-2);font-weight:600}
.voz-linha{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.voz-linha>span{flex-basis:100%;color:var(--texto-2);font-size:13px}
.voz-lista{display:grid;gap:6px}
.voz-opcao{display:grid;grid-template-columns:minmax(120px,auto) 1fr auto;align-items:center;gap:8px}
.voz-opcao small{color:var(--texto-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}