/* chat-celular.css — no celular a babel-os é uma conversa (05/10/2026; o dono: "a versão mobile, responsiva: deve ser tipo um
   chat, seja conversado ou digitado, enquanto vai aparecendo as telas"). Tudo aqui vale só com html.modo-chat (largura até 760 px,
   posto por presenca-babel.js); no desktop sobra uma linha: o grupo vivo não tem caixa própria.
   De cima para baixo: o topo, a faixa da sala (ela), a fileira dos apps que rola de lado, o fio (bolhas e telas, na ordem) e a linha
   de escrever com microfone e enviar. A faixa cede altura ao fio e some com o teclado aberto (moldarCelular). Ver chat-celular.js. */
#fioVivo{display:contents}
#fioChat,#fundoChat{display:none}

:root.modo-chat{--chat-chao:#0f0b20;--chat-ela:#221a4e;--chat-ela-borda:#b899ff2e;--chat-texto:#eeeafb;--chat-margem:12px;--trilho-h:70px}
:root.modo-chat[data-tema="claro"]{--chat-chao:#fff8e7;--chat-ela:#fffdf5;--chat-ela-borda:#060b1626;--chat-texto:#1a1430}

/* o chão da conversa: tudo abaixo da faixa da sala */
:root.modo-chat #fundoChat{display:block;position:fixed;left:0;right:0;top:var(--sala-base,56px);bottom:0;z-index:3;background:var(--chat-chao);transition:top var(--sala-tempo,0ms) cubic-bezier(.45,0,.25,1)}
:root.modo-chat #fundoChat::before{content:'';position:absolute;left:0;right:0;top:-24px;height:24px;background:linear-gradient(to bottom,transparent,var(--chat-chao));pointer-events:none}
:root.modo-chat body.sem-conta #fundoChat,:root.modo-chat body.sem-conta #fioChat{display:none}
/* a película (tom, vinheta e grão, pelicula.js) é da sala: no celular fica só na faixa dela, não por cima do chão da conversa */
:root.modo-chat .pelicula{clip-path:inset(0 0 calc(100% - var(--sala-base,56px)) 0);transition:clip-path var(--sala-tempo,0ms) cubic-bezier(.45,0,.25,1)}
/* sem altura para a sala (teclado aberto): ela sai da vista e fica só a conversa */
:root.modo-chat:not(.sala-no-topo) #ceu,:root.modo-chat:not(.sala-no-topo) #ceu3d,:root.modo-chat:not(.sala-no-topo) #presencaBabel,:root.modo-chat:not(.sala-no-topo) #luzPedraViva,:root.modo-chat:not(.sala-no-topo) #passagemEla,:root.modo-chat:not(.sala-no-topo) #ensaioDecoracao,:root.modo-chat:not(.sala-no-topo) #luzDaSala,:root.modo-chat:not(.sala-no-topo) #pecasSala{visibility:hidden}
/* a tela aberta é um cartão no fio: a sala não desfoca por causa dela (o menu dela continua desfocando) */
:root.modo-chat body.com-telas:not(.com-menu) #ceu,:root.modo-chat body.com-telas:not(.com-menu) #ceu3d,:root.modo-chat body.com-telas:not(.com-menu) #presencaBabel,:root.modo-chat body.com-telas:not(.com-menu) #passagemEla,:root.modo-chat body.com-telas:not(.com-menu) #ensaioDecoracao,:root.modo-chat body.com-telas:not(.com-menu) #luzDaSala{filter:none}
:root.modo-chat body.com-telas:not(.com-menu) #luzPedraViva{filter:blur(var(--foco-raio,0px))}

/* os apps: uma fileira só, que rola de lado, logo abaixo da sala; a imagem do objeto vai no próprio botão (ensaio.js põe --movel) */
:root.modo-chat body #cristais.na-parede{z-index:3;top:calc(var(--sala-base,56px) + 2px);left:0;right:0;transform:none;width:auto;height:var(--trilho-h);display:flex;align-items:flex-start;gap:0;padding:2px 6px 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;opacity:1;pointer-events:auto;transition:top var(--sala-tempo,0ms) cubic-bezier(.45,0,.25,1)}
:root.modo-chat body #cristais.na-parede::-webkit-scrollbar{display:none}
:root.modo-chat body #cristais.na-parede::before,:root.modo-chat body #cristais.na-parede::after{content:'';flex:1 0 0}   /* cabe inteira (celular largo): fica no meio */
:root.modo-chat body.com-telas #cristais.na-parede{opacity:1;pointer-events:auto}
:root.modo-chat:not(.sala-no-topo) body #cristais.na-parede{display:none}
:root.modo-chat body #cristais.na-parede .cristal,:root.modo-chat body #cristais.na-parede .cristal-mais{flex:0 0 72px;width:72px;max-width:none;height:64px;scroll-snap-align:start}
:root.modo-chat body #cristais.na-parede .cristal::before,:root.modo-chat body #cristais.na-parede .cristal-mais::before{content:'';position:absolute;left:9px;right:9px;top:2px;bottom:17px;background:var(--movel,none) center bottom/contain no-repeat;filter:saturate(.86) contrast(.94) brightness(.95);pointer-events:none}
:root.modo-chat body #cristais.na-parede .nome-parede{font-size:11px;bottom:1px;color:var(--chat-texto)}   /* a fileira fica no chão da conversa: a letra é a da conversa, nos dois temas */
:root.modo-chat body #cristais.na-parede .cristal.atracado .nome-parede{color:#fff;text-shadow:0 0 8px #b899ff}
:root.modo-chat[data-tema="claro"] body #cristais.na-parede .nome-parede{text-shadow:none}
:root.modo-chat[data-tema="claro"] body #cristais.na-parede .cristal.atracado .nome-parede{color:#4a2bbd;font-weight:600;text-shadow:none}
:root.modo-chat body #cristais.na-parede .joias-novas{position:static;display:flex;flex:none;gap:0;width:auto;max-height:none;overflow:visible;border-radius:0}
:root.modo-chat body #cristais.na-parede .joia-item,:root.modo-chat body #cristais.na-parede .joia-vista{flex:0 0 72px;width:72px;min-width:0}
:root.modo-chat body #cristais[data-parede="nascente"] .cristal[data-guardada]{display:none}

/* o fio: bolhas e telas na ordem da conversa; poucas bolhas ficam embaixo, junto da linha de escrever */
:root.modo-chat #telas{display:none}
:root.modo-chat #fioChat{display:flex;flex-direction:column;gap:8px;position:fixed;z-index:4;left:0;right:0;top:calc(var(--sala-base,56px) + var(--trilho-h) + 4px);bottom:calc(env(safe-area-inset-bottom,0px) + var(--palco-h,56px) + 14px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:14px var(--chat-margem) 4px;scrollbar-width:none;outline:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px);mask-image:linear-gradient(to bottom,transparent 0,#000 16px);transition:top var(--sala-tempo,0ms) cubic-bezier(.45,0,.25,1)}
:root.modo-chat:not(.sala-no-topo) #fioChat{top:calc(var(--sala-base,56px) + 4px)}
:root.modo-chat #fioChat::-webkit-scrollbar{display:none}
:root.modo-chat #fioChat::before{content:'';flex:1 1 auto}
:root.modo-chat #fioChat>*{flex:none}
:root.modo-chat body #fioVivo{display:flex;flex-direction:column;gap:8px}
:root.modo-chat body #fioVivo>*{order:5}
:root.modo-chat body #disse{order:1}
:root.modo-chat body #estadoVoz{order:2;margin:0}
:root.modo-chat body #fala{order:3}
:root.modo-chat body #cartao{order:4;margin:0;max-width:100%}
:root.modo-chat body #sugestoes{order:6;margin:0;gap:6px}
:root.modo-chat body #sugestoes:empty{display:none}
:root.modo-chat .bolha-chat,:root.modo-chat body #disse,:root.modo-chat body #fala{width:fit-content;max-width:86%;max-height:none;min-height:0;margin:0;padding:9px 13px;border-radius:18px;font:400 15px/1.45 var(--sans);letter-spacing:0;overflow:visible;overflow-wrap:anywhere;white-space:pre-wrap;text-shadow:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-line-clamp:unset}
:root.modo-chat .bolha-chat.voce,:root.modo-chat body #disse{display:block;align-self:flex-end;background:linear-gradient(135deg,#5b3bd0,#2f7fe0);color:#fff;border:0;border-bottom-right-radius:6px}
:root.modo-chat .bolha-chat.ela,:root.modo-chat body #fala{align-self:flex-start;background:var(--chat-ela);color:var(--chat-texto);border:1px solid var(--chat-ela-borda);border-bottom-left-radius:6px}
:root.modo-chat .bolha-chat.erro,:root.modo-chat body #fala.erro{color:#ffb4b4;font-size:14px}
:root.modo-chat[data-tema="claro"] .bolha-chat.erro,:root.modo-chat[data-tema="claro"] body #fala.erro{color:var(--vermelho)}
:root.modo-chat body #disse::before{content:none}
:root.modo-chat body #disse.interim{opacity:.82;font-style:italic;color:#fff}
:root.modo-chat body #disse:empty,:root.modo-chat body #disse[data-no-fio],:root.modo-chat body #fala[data-no-fio],:root.modo-chat body #fala:empty:not(.pensando){display:none}
:root.modo-chat body #fala.pensando:empty{padding:12px 14px}
/* as regras antigas do celular davam teto de altura à fala (12vh com tela aberta): no fio ela tem o tamanho do texto */
:root.modo-chat body #fala,:root.modo-chat body.com-telas #fala{max-height:none!important}
:root.modo-chat body.com-telas #disse:not(:empty):not([data-no-fio]){display:block}
@media(prefers-reduced-motion:no-preference){:root.modo-chat .bolha-chat{animation:bolhaChega .22s ease-out both}}
@keyframes bolhaChega{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* a tela no fio: um cartão da largura da conversa, do tamanho do que tem dentro (quem rola é o fio) */
:root.modo-chat #fioChat>.tela{width:100%;max-height:none;overflow:auto;overscroll-behavior:auto;margin:2px 0;padding:14px;border-radius:20px;background:var(--chat-ela);border:1px solid var(--chat-ela-borda);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
:root.modo-chat #fioChat>.tela.nav-ajustada{height:auto}
:root.modo-chat #fioChat>.tela .nav-moldura{min-height:220px}
:root.modo-chat #fioChat>.tela:has(.vista-cab){padding:18px 16px}

/* a linha de escrever: campo arredondado, microfone e enviar com o próprio desenho e 44 px de toque */
:root.modo-chat body #palco{z-index:4;left:var(--chat-margem);right:var(--chat-margem);width:auto;transform:none;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);transition:none}
:root.modo-chat body #entrada{background:var(--chat-ela)!important;border:1px solid var(--chat-ela-borda);border-radius:28px;padding:4px 5px;gap:2px;box-shadow:0 6px 24px #05031055}
:root.modo-chat body #entrada:focus-within{border-color:var(--roxo)}
:root.modo-chat body #entrada.credencial{border-color:#e0b25c}
:root.modo-chat body #entrada .icone{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--chat-texto);-webkit-mask:none;mask:none;vertical-align:baseline}
:root.modo-chat body #entrada .icone svg{width:21px;height:21px}
:root.modo-chat body #entrada .enviar{background:var(--roxo);color:#fff}
:root.modo-chat body #entrada #btMic.ouvindo{background:var(--roxo);color:#0c0818;box-shadow:0 0 0 4px rgba(155,107,255,.18)}
:root.modo-chat body[data-voz="falando"] #entrada #btMic.ouvindo{background:var(--ciano)}
:root.modo-chat body[data-voz="paralela"] #entrada #btMic.ouvindo,:root.modo-chat body[data-voz="esperando"] #entrada #btMic.ouvindo{background:var(--vidro);color:var(--roxo-texto)}
:root.modo-chat body #msg{height:44px;font-size:16px;padding:8px 6px}
/* o topo: a marca (escondida neste corpo) não guarda lugar; o botão de melhorias mora aqui, à esquerda (melhorias.js) */
:root.modo-chat body .topo .marca{display:none}
:root.modo-chat body .topo{justify-content:flex-end}