/* ======================================================================
   NOITE — a linguagem visual do MENTRE.

   O conceito e navegacao celeste: o MENTRE e uma bussola, e o app inteiro
   acontece sobre um ceu noturno vivo (ve static/ceu.js). Tudo o que fica por
   cima dele e feito de tres materiais so:

   - ceu:    o fundo. Nunca recebe cor solida por cima; e o que da profundidade.
   - vidro:  superficies que flutuam (cabecalho, barra, janelas, menu). Poucas
             de proposito: desfoque sobre um canvas animado custa a cada quadro.
   - tinta:  texto e numeros. Pergaminho sobre a noite, ouro so para o que
             importa.

   As cores sao as do MENTRE e mais nenhuma. Tipografia: Instrument Serif nos
   momentos grandes, Geist na interface e nos numeros (algarismos tabulares).
   Este arquivo vem DEPOIS do legado.css e ganha dele nos empates.
   ====================================================================== */

:root{
  --noite:#0b1117; --noite-funda:#05080b; --painel:#111a22; --campo:#17232d; --borda-azul:#2a3b48;
  --ouro:#b08d57; --ouro-claro:#d1ab74; --ouro-luz:#efd6a6; --pergaminho:#ece7da; --nevoa:#8a9690;
  --verde:#5f9873; --critico:#e0524f; --atencao:#fab219;

  --texto-2:rgba(236,231,218,.74);
  --texto-3:rgba(236,231,218,.52);
  --fio:rgba(236,231,218,.08);
  --fio-forte:rgba(236,231,218,.14);
  --fio-ouro:rgba(209,171,116,.32);

  --vidro:linear-gradient(180deg,rgba(24,36,47,.58),rgba(10,15,20,.66));
  --vidro-forte:linear-gradient(180deg,rgba(24,36,47,.82),rgba(10,15,20,.88));
  --vidro-borda:rgba(236,231,218,.1);
  --vidro-brilho:inset 0 1px 0 rgba(236,231,218,.07);
  --desfoque:blur(22px) saturate(150%);
  --lamina:linear-gradient(180deg,rgba(20,30,39,.72),rgba(12,18,24,.78));

  --f-titulo:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --f-ui:'Geist','SF Pro Text',-apple-system,'Segoe UI',system-ui,sans-serif;

  --suave:cubic-bezier(.16,1,.3,1);
  --mola:cubic-bezier(.34,1.5,.64,1);

  /* Os nomes antigos passam a apontar para os materiais novos: o que ainda
     mora no legado.css herda o visual sem precisar ser reescrito. */
  --bg:#070b0f; --panel:#101820; --input:rgba(23,35,45,.72); --border:rgba(236,231,218,.12);
  --gold:var(--ouro); --gold-soft:var(--ouro-claro); --text:var(--pergaminho); --dim:var(--nevoa);
  --sup-1:rgba(15,23,30,.72); --sup-2:rgba(236,231,218,.05); --sup-3:rgba(236,231,218,.09);
  --linha:var(--fio); --txt-2:var(--texto-2);
  --logo:38px;
}

/* ------------------------------------------------------------ base */
html{background:var(--noite-funda);color-scheme:dark}
body{font-family:var(--f-ui);font-feature-settings:"ss01","cv11";letter-spacing:-.005em;
     background:radial-gradient(130% 90% at 50% 115%,#0e1922 0%,#080d12 52%,var(--noite-funda) 100%);
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font-family:var(--f-ui)}
::selection{background:rgba(209,171,116,.32);color:#fff}
*{scrollbar-width:thin;scrollbar-color:rgba(236,231,218,.16) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(236,231,218,.14);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

#ceu{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
#ceuGL{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block;opacity:0;transition:opacity .9s ease-out}
#ceuGL.pronto{opacity:1}
/* No iPhone instalado com faixa medida, o ceu deixa de ser fixed (o iOS recorta
   fixed antes da borda) e cobre o body inteiro, que ja chega a borda fisica. */
html.ios-faixa #ceu,html.ios-faixa #ceuGL{position:absolute;top:0;left:0;width:100%;height:100%}
#app,#login{position:relative;z-index:1}
#app{background:transparent}

/* ------------------------------------------------------------ cabecalho
   Uma lamina de vidro solta do topo. A aba ativa e marcada por um indicador
   unico que DESLIZA entre as abas (.nav-indicador, posicionado pelo JS). */
/* O cabecalho nao e uma caixa pousada sobre o app: e uma nevoa que pertence
   ao proprio ceu. Ficam so as opcoes — o menu, a bussola, o nome e as abas —
   e a nevoa ganha densidade quando o conteudo sobe por baixo dela, que e
   exatamente quando os rotulos precisam de contraste para continuar legiveis.
   Com a tela no topo ela quase nao existe. */
header{margin:12px 14px 0;padding:7px 8px 7px 10px;gap:10px;border:1px solid transparent;
       border-radius:20px;background:transparent;box-shadow:none;position:relative;z-index:30;--veu:.3}
header::before{content:'';position:absolute;inset:-16px -12px -30px;z-index:-1;pointer-events:none;
       border-radius:34px;opacity:var(--veu);transition:opacity .9s var(--suave);filter:blur(10px);
       background:radial-gradient(130% 150% at 50% -30%,rgba(6,10,14,.92),rgba(6,10,14,.44) 46%,rgba(6,10,14,0) 74%);
       animation:nevoa 26s ease-in-out infinite alternate}
@keyframes nevoa{from{transform:translate3d(-2%,-1%,0) scale(1.02)}
                 to{transform:translate3d(2%,1%,0) scale(1.08)}}
html.sem-animacao header::before{animation:none}
#btnLateral{border-radius:12px;color:var(--texto-2);padding:7px 9px}
#btnLateral:hover,#btnLateral.ativo{background:rgba(236,231,218,.06);border-color:var(--fio);color:var(--ouro-claro)}
.marca-header{gap:12px}
header h1{font-size:1.32rem;letter-spacing:.34em;margin-right:-.34em;transform:translateY(1px)}
.logo-mentre{filter:drop-shadow(0 0 14px rgba(209,171,116,.45))}

nav{position:relative;gap:0;padding:4px;border:1px solid var(--fio);border-radius:999px;
    background:rgba(5,8,11,.38);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
nav button,nav button.ativo{position:relative;z-index:1;background:transparent;box-shadow:none;
    color:var(--texto-3);font-weight:500;font-size:.86rem;padding:8px 16px;letter-spacing:-.005em;
    transition:color .35s var(--suave)}
nav button:hover{background:transparent;color:var(--pergaminho)}
nav button.ativo{color:var(--pergaminho);font-weight:550}
nav button .ic{transition:color .35s var(--suave)}
nav button.ativo .ic{color:var(--ouro-luz)}
.nav-indicador{position:absolute;z-index:0;left:0;top:4px;bottom:4px;width:0;border-radius:999px;pointer-events:none;
    background:linear-gradient(180deg,rgba(209,171,116,.24),rgba(176,141,87,.1));
    border:1px solid rgba(209,171,116,.38);
    box-shadow:0 0 26px -6px rgba(209,171,116,.5),inset 0 1px 0 rgba(255,255,255,.1);
    transition:transform .6s var(--suave),width .6s var(--suave),opacity .3s}

/* ------------------------------------------------------------ corpo */
.corpo{position:relative}
.corpo::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .8s var(--suave);
    background:radial-gradient(58% 100% at 50% 50%,rgba(4,7,10,.62),rgba(4,7,10,0) 78%)}
body[data-ceu="lendo"] .corpo::before,body[data-ceu="pensando"] .corpo::before{opacity:1}
main{background:transparent;padding:30px 32px 16px;position:relative}
.aba.visivel{animation:abaNoite .7s var(--suave)}
@keyframes abaNoite{from{opacity:0;transform:translateY(12px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* ------------------------------------------------------------ menu lateral */
#lateral{background:linear-gradient(180deg,rgba(12,18,24,.72),rgba(7,11,15,.8));
         -webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);border-right-color:var(--fio)}
#lateral.aberta{border-right-width:1px}
#btnNovaConversa{background:linear-gradient(180deg,rgba(209,171,116,.16),rgba(176,141,87,.06));
    border:1px solid var(--fio-ouro);border-radius:14px;color:var(--pergaminho);font-weight:550;padding:11px 14px;
    box-shadow:0 0 30px -12px rgba(209,171,116,.5)}
#btnNovaConversa:hover{background:linear-gradient(180deg,rgba(209,171,116,.24),rgba(176,141,87,.1));border-color:rgba(209,171,116,.55)}
#btnConfigLateral,#btnDocsLateral{border-radius:12px;color:var(--texto-2)}
#btnConfigLateral:hover,#btnDocsLateral:hover{background:rgba(236,231,218,.05);color:var(--pergaminho)}
#lateral h4{color:var(--texto-3);letter-spacing:.14em;text-transform:uppercase;font-size:.66rem;font-weight:600}
.conv{border-radius:12px;transition:background .25s var(--suave)}
.conv:hover{background:rgba(236,231,218,.05)}
.conv.atual{background:linear-gradient(90deg,rgba(209,171,116,.12),rgba(209,171,116,.02));box-shadow:inset 0 0 0 1px rgba(209,171,116,.18)}
#lateral .sessao{border-top-color:var(--fio)}

/* ------------------------------------------------------------ conversa */
.bolha{animation:surgeNoite .7s var(--suave)}
@keyframes surgeNoite{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.sia{color:var(--pergaminho);font-size:1rem;line-height:1.78;letter-spacing:-.004em;position:relative}
.bolha strong{color:var(--ouro-luz);font-weight:600}
.bolha em{color:var(--pergaminho)}
.bolha .item > .m{color:var(--ouro-claro)}
/* A estrela do MENTRE: marca cada fala dele na margem, no lugar de avatar. */
@media (min-width:980px){
  .linha:has(> .sia){position:relative}
  .linha:has(> .sia)::before{content:'';position:absolute;left:-30px;top:.62em;width:14px;height:14px;
    background:radial-gradient(circle,#fff3d6 0 12%,rgba(239,214,166,.75) 20%,rgba(209,171,116,.22) 42%,transparent 70%);
    border-radius:50%;animation:cintila 4.5s ease-in-out infinite}
}
@keyframes cintila{50%{opacity:.55;transform:scale(.8)}}
.user{background:linear-gradient(180deg,rgba(209,171,116,.16),rgba(176,141,87,.06));
      border:1px solid rgba(209,171,116,.24);color:var(--pergaminho);border-radius:22px;padding:11px 17px;
      box-shadow:0 10px 30px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)}
.btn-ouvir{background:rgba(236,231,218,.04);border-color:var(--fio-forte);color:var(--texto-2)}
.btn-ouvir:hover{border-color:var(--fio-ouro);color:var(--ouro-luz);background:rgba(209,171,116,.1);box-shadow:0 0 20px -6px rgba(209,171,116,.45)}

/* Pensando: a bussola com um halo que respira, e a legenda do passo em serifa
   italica — o MENTRE "consultando a agenda" soa como alguem trabalhando. */
.carregando-chat{justify-content:flex-start;gap:14px;padding:6px 0 18px}
.carregando-chat .mini-bussola{width:30px;height:30px;filter:drop-shadow(0 0 14px rgba(209,171,116,.65));
    animation:halo 2.4s ease-in-out infinite}
@keyframes halo{50%{filter:drop-shadow(0 0 22px rgba(239,214,166,.85))}}
.legenda-passo{font-family:var(--f-titulo);font-style:italic;font-size:1.08rem;letter-spacing:0;color:var(--texto-2)}
/* Os passos empilham numa coluna ao lado da bussola. O ultimo e o de agora,
   entao os anteriores recuam: ficam legiveis, sem competir com ele. */
.carregando-chat{align-items:flex-start}
.carregando-chat .passos{display:flex;flex-direction:column;gap:5px;min-width:0}
.carregando-chat .passos .legenda-passo{opacity:.45;font-size:.95rem}
.carregando-chat .passos .legenda-passo:last-child{opacity:1;font-size:1.08rem;color:var(--texto-2)}
.carregando-chat.passos-prontos{padding:2px 0 14px}
.carregando-chat.passos-prontos .passos .legenda-passo,
.carregando-chat.passos-prontos .passos .legenda-passo:last-child{opacity:.4;font-size:.92rem}

.opcao-guiada{background:var(--lamina);border-color:var(--fio-forte);border-radius:14px}
.opcao-guiada:hover{border-color:var(--fio-ouro);color:var(--ouro-luz);box-shadow:0 0 24px -10px rgba(209,171,116,.5)}
.pdf-cartao,.mapa-card{background:var(--lamina);border:1px solid var(--fio-forte);border-left:1px solid var(--fio-forte);border-radius:18px}
.pdf-cartao .selo{background:rgba(209,171,116,.14);border-radius:12px}
.pdf-acoes a,.pdf-acoes button{background:rgba(236,231,218,.05);border-color:var(--fio-forte);border-radius:10px}

/* ------------------------------------------------------------ inicio
   Tela vazia e primeira abertura: o titulo e o protagonista. Cada palavra
   entra do desfoque, em sequencia (ve revelarPalavras no index.html). */
.inicio-limpo{margin-top:17vh;max-width:760px;animation:none}
.inicio-limpo .inicio-data{font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ouro-claro);margin-bottom:18px;animation:surgeNoite 1s var(--suave) both}
.inicio-limpo h2,.saudacao h2{font-family:var(--f-titulo);font-weight:400;
    font-size:clamp(2.6rem,6.2vw,4.8rem);line-height:1.02;letter-spacing:-.018em;color:var(--pergaminho);text-wrap:balance}
.palavra{display:inline-block;background:linear-gradient(180deg,#fbf7ee 20%,#d9c39a 115%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:palavra 1.1s var(--suave) both;animation-delay:calc(var(--i,0) * 75ms + 120ms)}
@keyframes palavra{from{opacity:0;filter:blur(14px);transform:translateY(.32em)}to{opacity:1;filter:none;transform:none}}
.saudacao{margin-top:9vh;max-width:760px}
.saudacao h2{margin-bottom:18px}
.saudacao p{color:var(--texto-2);font-size:1.02rem;animation:surgeNoite 1s var(--suave) .45s both}
.saudacao .dica{color:var(--texto-3);animation:surgeNoite 1s var(--suave) .6s both}
.bolhas-capacidades{max-width:700px;gap:12px;margin-top:34px}
.bolha-capacidade{position:relative;overflow:hidden;border-radius:18px;padding:16px 18px;border:1px solid var(--fio-forte);
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(209,171,116,.16),transparent 62%),var(--lamina);
    color:var(--pergaminho);font-size:.9rem;
    animation:surgeNoite .9s var(--suave) both;transition:border-color .35s var(--suave),transform .5s var(--suave),box-shadow .5s var(--suave)}
.bolha-capacidade:nth-child(1){animation-delay:.7s}
.bolha-capacidade:nth-child(2){animation-delay:.78s}
.bolha-capacidade:nth-child(3){animation-delay:.86s}
.bolha-capacidade:nth-child(4){animation-delay:.94s}
.bolha-capacidade:hover{border-color:var(--fio-ouro);background-color:transparent;transform:translateY(-3px);
    box-shadow:0 22px 50px -26px rgba(0,0,0,.9),0 0 40px -18px rgba(209,171,116,.55)}
.bolha-capacidade .ic{color:var(--ouro-luz)}
.aviso-privacidade{color:var(--texto-3);animation:surgeNoite 1s var(--suave) 1.1s both}

/* ------------------------------------------------------------ barra de digitacao */
footer,footer::before{background:transparent}
footer::before{display:none}
footer{padding-top:8px;padding-left:24px;padding-right:24px}
.barra{max-width:780px;padding:6px;border-radius:28px;border:1px solid var(--vidro-borda);
       background:var(--vidro-forte);-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
       box-shadow:var(--vidro-brilho),0 24px 60px -28px rgba(0,0,0,.9);
       transition:border-color .5s var(--suave),box-shadow .6s var(--suave)}
.barra:focus-within{border-color:rgba(209,171,116,.46);
       box-shadow:var(--vidro-brilho),0 0 0 1px rgba(209,171,116,.14),0 0 60px -14px rgba(209,171,116,.42),0 24px 60px -28px rgba(0,0,0,.9)}
.barra input[type=text]{font-size:1rem;letter-spacing:-.005em}
.barra input[type=text]::placeholder{color:var(--texto-3);opacity:1}
.acao{color:var(--texto-2)}
.acao:hover{background:rgba(236,231,218,.07);color:var(--ouro-luz)}
.acao-enviar,.acao-enviar:hover{color:#0b1117;background:radial-gradient(circle at 32% 26%,#f2d8a8,#c19c63 55%,#9c7a45 100%);
       box-shadow:0 0 22px -4px rgba(209,171,116,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.acao-enviar:hover{filter:brightness(1.08)}
/* Superficie de DECISAO, e nao de ambiente.

   O menu usava o mesmo vidro das outras superficies (82% de opacidade). Sobre
   o ceu isso passava despercebido; sobre a CONVERSA, nao: as linhas de texto
   atras atravessavam os itens e o menu parecia dissolvido no chat. Um menu
   que se abre sobre o conteudo precisa cobrir o que esta atras. O desfoque
   fica, para nao destoar do resto do app; o que muda e a cor. */
.mais-menu{background:linear-gradient(180deg,rgba(16,25,33,.985),rgba(10,16,21,.99));
       -webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
       border-color:var(--vidro-borda);border-radius:20px;box-shadow:var(--vidro-brilho),0 30px 70px -20px rgba(0,0,0,.9)}
.mais-menu button{border-radius:14px}
.mais-menu button:hover{background:rgba(236,231,218,.06)}

/* ------------------------------------------------------------ janelas */
.overlay{background:rgba(3,6,9,.52);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.modal{background:var(--vidro-forte);-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
       border:1px solid var(--vidro-borda);border-radius:28px;
       box-shadow:var(--vidro-brilho),0 50px 120px -40px rgba(0,0,0,.9)}
.overlay.aberto .modal{animation:folhaNoite .6s var(--suave)}
@keyframes folhaNoite{from{opacity:0;transform:translateY(26px) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.modal-cab{background:linear-gradient(180deg,rgba(18,27,35,.96),rgba(18,27,35,.82));border-bottom-color:var(--fio);
       border-radius:28px 28px 0 0}
.modal h2{font-size:2rem;letter-spacing:-.01em}
.modal-fechar{border-color:var(--fio-forte);background:rgba(236,231,218,.04)}
.modal label{color:var(--texto-3);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.modal .switch label{text-transform:none;letter-spacing:0;font-size:.88rem;color:var(--pergaminho)}
.modal input,.modal select,.modal textarea{background:rgba(4,7,10,.45);border-color:var(--fio-forte);border-radius:14px}
.switch{background:rgba(4,7,10,.35);border-color:var(--fio);border-radius:16px}
.switch input:checked{background:linear-gradient(180deg,#e2c28e,#b08d57);box-shadow:0 0 16px -4px rgba(209,171,116,.6)}
.btn-ouro{background:linear-gradient(180deg,#e6c692,#b08d57);color:#0b1117;border-radius:14px;
       box-shadow:0 0 30px -10px rgba(209,171,116,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ouro:hover{background:linear-gradient(180deg,#f0d4a4,#c19c63)}
.btn-vazio{background:rgba(236,231,218,.04);border-color:var(--fio-forte);border-radius:14px}
.btn-vazio:hover{border-color:var(--fio-ouro);color:var(--ouro-luz);background:rgba(209,171,116,.07)}
.hr{background:var(--fio)}
.selo-breve{background:rgba(209,171,116,.14);color:var(--ouro-luz)}

/* ------------------------------------------------------------ avisos */
/* O aviso e um cartao que passa, nao uma camada sobre o app.

   No celular o container ficava com `top` (aqui) E `bottom` (legado.css, na
   regra de tela estreita) ao mesmo tempo, com left e right presos as bordas:
   um retangulo vazio de 351x638 — quase a tela inteira — em z-index 200.
   Nada embaixo dele recebia toque. No PWA isso aparecia como a agenda
   travada: o seletor de vista estava la, visivel, e simplesmente nao
   respondia. `pointer-events` resolve mesmo que a geometria volte a escapar:
   o container nunca e alvo, so os avisos dentro dele. */
#toasts{top:calc(84px + env(safe-area-inset-top));pointer-events:none}
.toast{pointer-events:auto}
@media (max-width:768px){
  #toasts{top:auto}
}
.toast{background:var(--vidro-forte);-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
       border-color:var(--vidro-borda);border-radius:16px;box-shadow:var(--vidro-brilho),0 24px 50px -20px rgba(0,0,0,.8);
       animation:surgeNoite .5s var(--suave)}
.dica-tutorial{background:var(--vidro-forte);-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
       border-color:var(--fio-ouro);border-radius:18px;box-shadow:var(--vidro-brilho),0 0 50px -16px rgba(209,171,116,.45)}
.dica-tutorial button{background:linear-gradient(180deg,#e6c692,#b08d57)}
.uso-cx{background:var(--vidro-forte);-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);border-color:var(--vidro-borda);border-radius:20px}
#faixaLive{background:var(--vidro);-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
       border-bottom:1px solid var(--fio-ouro);margin:8px 14px 0;border-radius:16px}

/* ------------------------------------------------------------ celular */
@media (max-width:768px){
  :root{--logo:34px}
  header{margin:calc(6px + env(safe-area-inset-top)) 8px 0;padding:5px 6px 5px 6px;border-radius:18px;gap:8px}
  /* A BARRA DO CELULAR, REFEITA (17/09, o dono: "esta cortando no PWA; algo
     mais legivel, menos poluido, talvez so a bussola").
     - A marca e SO a bussola: o nome saia com 4 abas ao lado e a fila
       transbordava — o cabecalho tem cantos arredondados e cortava a ultima.
     - As abas ocupam TODO o espaco que sobra, em partes iguais, com o icone;
       so a aba ativa mostra o nome e alarga um pouco. Cabe em qualquer
       largura porque nada tem tamanho fixo: e flex, nao rolagem.
     - O indicador dourado continua deslizando por baixo (o JS mede a aba
       ativa depois da troca; o rotulo aparece na hora, sem animar largura,
       para a medida ja ser a final). */
  .marca-texto{display:none}
  .marca-header{gap:0;flex:0 0 auto}
  nav{flex:1 1 auto;min-width:0;margin-left:0;padding:3px;display:flex;justify-content:stretch}
  nav button,nav button.ativo{height:36px;padding:0 6px;font-size:.74rem;flex:1 1 0;min-width:0;
      justify-content:center;gap:6px;white-space:nowrap}
  nav button.ativo{flex:2.1 1 0}
  header nav button .ic{display:inline-block;width:18px;height:18px}
  nav button .rot{display:none;overflow:hidden;text-overflow:ellipsis}
  nav button.ativo .rot{display:inline}
  .nav-indicador{top:3px;bottom:3px}
  main{padding:20px 14px 10px}
  footer{padding-left:10px;padding-right:10px;padding-top:6px}
  .barra{border-radius:26px;padding:4px}
  .inicio-limpo{margin-top:14vh}
  .inicio-limpo h2,.saudacao h2{font-size:clamp(2.3rem,11vw,3.2rem)}
  .saudacao{margin-top:6vh}
  #lateral{margin-top:0}
}
@media (max-width:640px){
  .overlay{align-items:flex-end}
  .modal{width:100%;max-height:92vh;border-radius:28px 28px 0 0;border-bottom:0}
  .overlay.aberto .modal{animation:subirFolha .55s var(--suave)}
  @keyframes subirFolha{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
}
@media (max-width:380px){
  :root{--logo:30px}
  header{gap:6px;margin-left:6px;margin-right:6px}
  nav button,nav button.ativo{padding:0 4px;font-size:.7rem;gap:5px}
  header nav button .ic{width:17px;height:17px}
}

/* ------------------------------------------------------------ movimento reduzido */
html.sem-animacao .aba.visivel,html.sem-animacao .bolha,html.sem-animacao .palavra,html.sem-animacao .inicio-limpo .inicio-data,html.sem-animacao .saudacao p,html.sem-animacao .saudacao .dica,html.sem-animacao .bolha-capacidade,html.sem-animacao .aviso-privacidade,html.sem-animacao .overlay.aberto .modal,html.sem-animacao .toast,html.sem-animacao .carregando-chat .mini-bussola,html.sem-animacao .linha:has(> .sia)::before{animation:none}
html.sem-animacao .nav-indicador{transition:none}

/* ------------------------------------------------------------ sem animacao
   O interruptor das Configuracoes para o app inteiro de uma vez, inclusive o
   que nasceu depois e nao tem regra propria. O ceu tambem escuta (ceu.js). */
html.sem-animacao *,html.sem-animacao *::before,html.sem-animacao *::after{
  animation:none!important;transition:none!important}
html.sem-animacao{scroll-behavior:auto}

/* ------------------------------------------------- memorias editaveis
   A linha deixou de ser "texto + X": agora carrega editar, esquecer e, na
   edicao, o campo no lugar do texto. O botao redondo de 26px do legado servia
   para um X e espremeria a palavra "Editar". */
.item-memoria{align-items:flex-start;gap:12px}
.item-memoria .mem-acoes{display:flex;align-items:center;gap:6px;flex-shrink:0}
.item-memoria .mem-texto{flex:1;font-size:.88rem;line-height:1.45}
.item-memoria button.mem-editar{width:auto;height:28px;padding:0 12px;border-radius:999px;
    font-size:.76rem;color:var(--texto-2);border:1px solid var(--fio);background:transparent}
.item-memoria button.mem-editar:hover{color:var(--ouro-claro);border-color:var(--fio-ouro)}
.item-memoria.editando{flex-direction:column;align-items:stretch;gap:10px}
.item-memoria .mem-campo{width:100%;resize:vertical;min-height:58px;padding:10px 12px;
    border-radius:12px;border:1px solid var(--fio);background:rgba(5,8,11,.42);
    color:var(--pergaminho);font-family:inherit;font-size:.9rem;line-height:1.45}
.item-memoria .mem-campo:focus{outline:none;border-color:var(--fio-ouro)}
.item-memoria.editando .mem-acoes{justify-content:flex-end}
.item-memoria button.mem-cancela,.item-memoria button.mem-salva{width:auto;height:32px;
    padding:0 16px;border-radius:999px;font-size:.8rem}
.item-memoria button.mem-salva{background:linear-gradient(180deg,#e6c692,#b08d57);
    color:#0b1118;border-color:transparent;font-weight:600}
.item-memoria button.mem-cancela{color:var(--texto-3);border:1px solid var(--fio);background:transparent}
.item-memoria button.mem-cancela:hover{color:var(--pergaminho)}

/* ------------------------------------------- o ambiente da conversa
   O chat precisa do proprio ambiente, e o ambiente e a AREA inteira de
   trabalho — nao um cartao dentro dela. Um cartao criaria uma terceira
   moldura na tela (ja ha o cabecalho e o compositor) e deixaria o texto
   preso numa caixa dentro de outra.

   Entao o escurecimento cobre o <main> de borda a borda, do cabecalho ate o
   compositor: e exatamente o espaco onde a conversa pode acontecer. E ele e
   TRANSLUCIDO de proposito — mais fechado que o resto do app, mas ainda
   deixando o ceu passar. Solido resolveria a legibilidade e mataria o que faz
   esta tela ser esta tela; sem desfoque, as estrelas continuam pontos de luz
   em vez de manchas.

   Antes disto, o app apagava o ceu pela metade assim que a primeira mensagem
   chegava — o fundo parecia travado, e o custo recaia sobre o app inteiro. */
/* O escurecimento e o BACKGROUND do <main>, e nao um elemento dentro dele.

   A versao com ::before tinha dois defeitos graves, os dois visiveis:

   1. <main> e quem ROLA. Um filho absoluto com top:0/bottom:0 se prende ao
      bloco e rola junto: cobria a primeira tela e abandonava o resto, entao
      metade da conversa ficava dentro do escuro e metade fora.
   2. Para pintar atras do conteudo, ele exigia `z-index:1` nas abas — e esse
      contexto de empilhamento novo desarrumou o que flutua por cima, como o
      menu do botao "+", que passou a se misturar com o fundo.

   O background de um elemento com overflow fica presa a caixa dele e NAO rola:
   cobre sempre a area visivel, sem elemento nenhum no meio e sem mexer no
   empilhamento. A margem lateral sai do background-size, que e o que da o
   respiro dos lados sem transformar a area num cartao. */
@property --veu-chat{syntax:'<number>';inherits:false;initial-value:0}
main:has(#dialogo.visivel){
  /* A margem e o raio moram no PROPRIO main, e nao num background recortado:
     fundo pintado por background-size nao tem canto, e foi isso que deixou a
     area da conversa com as quatro quinas vivas. Como o fundo continua sendo
     do elemento que rola, ele segue preso a caixa e cobre a conversa inteira.

     O padding lateral sai daqui e vai para o #dialogo (abaixo), senao a
     margem nova somaria ao respiro que ja existia e a coluna de texto
     encolheria. */
  margin-left:clamp(10px,3.6vw,58px);
  margin-right:clamp(10px,3.6vw,58px);
  padding-left:0;padding-right:0;
  border-radius:22px;
  /* A AREA NASCE COM A CONVERSA.

     Na tela de "O que posso fazer por voce" ainda nao ha conversa, e um
     retangulo escuro em volta de uma frase so era peso sem motivo: tapava o
     ceu justo no momento em que ele e o cartao de visita do app. O escuro
     passa a existir so quando ha mensagem (body.com-conversa, ligado em
     atualizarCeu).

     E ele nao aparece de estalo: sobe da barra de digitar ate o topo, o
     caminho que a mensagem acabou de fazer. --veu-chat vai de 0 a 1; a
     primeira parada do gradiente e a base, a segunda acompanha a altura
     alcancada e a terceira e uma borda suave de 18% acima dela. Em 1 o
     resultado e exatamente o fundo de antes (.84 embaixo, .74 em cima).

     Margem, raio e o respiro do texto ficam fixos de proposito: so a cor
     anima. Se a margem tambem entrasse com a primeira mensagem, a coluna
     inteira pularia 13px para o lado no mesmo instante.

     Sem suporte a @property, a variavel troca sem transicao — o escuro so
     aparece de uma vez, que e o comportamento antigo. Com as animacoes
     desligadas em Configuracoes, a regra global zera a transicao. */
  --veu-chat:0;
  background:linear-gradient(0deg,
    rgba(4,7,11,calc(.84 * var(--veu-chat))) 0%,
    rgba(5,9,13,calc(.74 * var(--veu-chat))) calc(var(--veu-chat) * 100%),
    rgba(5,9,13,0) calc(var(--veu-chat) * 100% + 18%));
  transition:--veu-chat .65s cubic-bezier(.22,.8,.24,1);
}
body.com-conversa main:has(#dialogo.visivel){--veu-chat:1}

/* ---------------------------------------------- contraste das Financas
   So aqui. A aba e uma tabela de numero, data e status — o ceu passando por
   tras de cada linha custava leitura sem dar nada em troca. Redefinir os
   TOKENS no escopo da aba deixa cada componente dela mais fechado sem tocar
   no resto do app, que continua com o vidro leve. */
#financas{
  --vidro:linear-gradient(180deg,rgba(22,33,43,.72),rgba(9,14,19,.80));
  --vidro-forte:linear-gradient(180deg,rgba(22,33,43,.90),rgba(9,14,19,.94));
  --lamina:linear-gradient(180deg,rgba(18,28,37,.86),rgba(10,16,21,.90));
  --fio:rgba(236,231,218,.11);
  --texto-2:rgba(236,231,218,.80);
  --texto-3:rgba(236,231,218,.60);
}

/* ------------------------------------------- a pagina nao desliza de lado
   A planilha de lancamentos tem 880px de largura minima: numa tela de 375 ela
   empurrava o <main> inteiro, e dava para arrastar a tela meio palmo para a
   direita e chegar num vazio — o conteudo todo para tras e so o ceu na frente.

   A tabela ja rolava sozinha dentro do proprio quadro; o que faltava era o
   <main> se recusar a rolar junto. `hidden` no eixo X trava a pagina sem tocar
   na rolagem vertical, e `contain` impede que o gesto na tabela escape para a
   pagina quando ela chega ao fim. */
main{overflow-x:hidden}
.fin-tabela-cx{max-width:100%;overscroll-behavior-x:contain}

/* ------------------------------------------- respiro dentro da conversa
   O texto encostava na borda do escurecimento, em cima, embaixo e dos lados. */
main:has(#dialogo.visivel) > #dialogo{
  padding:20px clamp(14px,2.2vw,26px) 26px;
}