/* capa.css — a casca da página da Jade.
   Ideia: a página abre como uma pergunta, não como uma tabela. Enquanto ninguém
   falou nada, a tela inteira é o convite; quando a conversa começa, o convite sai
   de cena e o MESMO campo desce e vira a barra de digitação. Nada é recriado:
   é o mesmo <textarea>, só muda o CSS — por isso o que a pessoa já digitou
   continua lá durante a transição.
   O chat.css cuida das mensagens; aqui só mora a casca. */

:root{
  /* a paleta da casa, a mesma da Central de Tabelas (home.php) */
  --bg:#060b08; --surface:#0a120d; --surface2:#0d1712; --surface3:#101a14;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.12);
  --text:#f5f3ee; --text2:#94a89e; --text3:#6f8478;
  --ou:#c9a84c; --ou2:#e2c46a; --ou3:#f5e0a0;
  --vd:#1a3a2e; --vd2:#234a3b; --vd3:#2d5c49;
  /* o acento em cru, para o chat.css montar transparências sobre ele */
  --ac-rgb:201,168,76;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:15px; line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
  overflow-x:hidden;
}
/* luz de fundo: o verde da marca com um fio de dourado por cima, como no
   hero da Central. Fixa, atrás de tudo. */
body::before{
  content:''; position:fixed; z-index:0; pointer-events:none;
  width:min(92vw,880px); height:min(92vw,880px);
  top:-32%; left:50%; transform:translateX(-50%);
  background:
    radial-gradient(circle at 50% 42%,rgba(201,168,76,.10),transparent 58%),
    radial-gradient(circle at 50% 50%,rgba(26,58,46,.55),rgba(26,58,46,.18) 48%,transparent 72%);
  filter:blur(30px);
}
.je-env:focus-visible,.je-ico:focus-visible,a:focus-visible,button:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ou); outline-offset:3px; border-radius:6px;
}

/* ---------- topo: a faixa verde com o fio dourado da Central ---------- */
.topo{
  position:relative; z-index:2;
  /* Sem faixa de cor e sem borda: a capa e uma tela so, e o
     fundo animado precisa atravessar o topo em vez de morrer
     numa linha dura. */
  background:transparent;
}
.topo-dentro{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px max(20px,env(safe-area-inset-left,0px));
  max-width:1060px; margin:0 auto; width:100%;
}
.marca{display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit}
.marca img{height:46px; object-fit:contain; display:block}
.marca .badge{
  font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ou3); background:rgba(var(--ac-rgb),.15);
  border:1px solid rgba(var(--ac-rgb),.35); border-radius:20px; padding:4px 11px;
  white-space:nowrap;
}
.topo-link{
  font-size:13.5px; color:#cfe0d6; text-decoration:none;
  padding:8px 2px; border-bottom:1px solid transparent; transition:color .15s,border-color .15s;
  white-space:nowrap;
}
.topo-link:hover{color:var(--ou3); border-color:rgba(var(--ac-rgb),.5)}

/* ---------- palco ---------- */
.palco{
  position:relative; z-index:1; flex:1;
  width:100%; max-width:780px; margin:0 auto;
  padding:0 max(20px,env(safe-area-inset-left,0px));
  display:flex; flex-direction:column;
}

/* ---------- a capa (só enquanto a conversa não começou) ---------- */
.capa{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 0 10px; gap:0;
  animation:capaEntra .5s cubic-bezier(.2,.75,.3,1) both;
}
@keyframes capaEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.capa-sel{
  width:74px; height:74px; border-radius:21px; display:grid; place-items:center;
  color:var(--ou); background:linear-gradient(160deg,var(--vd2),#0f2219);
  border:1px solid rgba(var(--ac-rgb),.3);
  box-shadow:0 14px 42px -18px rgba(var(--ac-rgb),.6);
  margin-bottom:24px;
}
.capa-olho{
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ou); margin-bottom:16px;
}
.capa h1{
  margin:0 0 14px;
  /* o mesmo corte dos títulos da Central: Montserrat 800, bem fechado */
  font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.5px;
  line-height:1.16; font-size:clamp(19px,4.6vw,40px);
  color:var(--text); width:100%; max-width:min(26ch,100%);

  /* piso de 19px: e o tamanho em que a maior das partes (26
     caracteres) cabe numa linha de 375px. Abaixo disso a quebra
     forcada nao adianta -- a propria parte quebraria em duas. */
  /* 26ch porque e esse o tamanho da maior parte das frases. Em
     19ch a caixa era mais estreita que o texto e as partes
     quebravam dentro dela, por mais que o <br> separasse as
     duas oracoes. O balance sai: a quebra ja esta decidida. */
  /* width:100% porque .capa e coluna flex centralizada: sem isso
     o h1 fica do tamanho do conteudo (206px medidos num espaco de
     335) e quebra onde nao precisa. max-width limita, nao estica. */}
.capa-sub{
  margin:0 0 30px; font-size:15.5px; color:var(--ou3); max-width:640px; line-height:1.6;

  /* 640px cabe em DUAS linhas. Em 450 quebrava em tres, e tres
     linhas de apoio competem com o titulo; duas o acompanham. */; font-weight:300;
  /* Dourado, como a mesma frase ja e nos testes (.je-ola p). A capa
     estava no cinza do corpo de texto, fora do padrao das outras. */}

/* atalhos da capa */
.capa-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:30px}
.capa-chip{
  display:inline-flex; align-items:center; gap:9px;
  font-family:inherit; font-size:13.5px; color:var(--text2);
  background:var(--surface); border:1px solid var(--border); border-radius:100px;
  padding:10px 18px; cursor:pointer;
  transition:border-color .16s,color .16s,background .16s,transform .16s;
}
.capa-chip svg{color:var(--ou); opacity:.85; flex:0 0 auto}
.capa-chip:hover{
  color:var(--text); background:var(--surface2);
  border-color:rgba(var(--ac-rgb),.38); transform:translateY(-1px);
}

/* ---------- o campo: grande na capa, barra quando a conversa abre ---------- */
.je-barra{width:100%}

/* estado capa: a caixa é o centro da tela */
body:not(.jeAberto) .je-barra{position:static; background:none; padding:0 0 10px}
body:not(.jeAberto) .je-campo{
  display:block; position:relative; min-height:168px;
  padding:20px 20px 64px; border-radius:20px;
  background:var(--surface); border:1px solid var(--border2);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
}
body:not(.jeAberto) .je-campo textarea{
  width:100%; height:74px; max-height:200px; font-size:16.5px; padding:0;
}
body:not(.jeAberto) .je-campo .je-ico{position:absolute; right:68px; bottom:14px}
body:not(.jeAberto) .je-campo .je-env{position:absolute; right:14px; bottom:14px; width:44px; height:44px; flex-basis:44px}
.campo-nota{
  display:none; position:absolute; left:21px; bottom:26px;
  font-size:12.5px; color:var(--text3); pointer-events:none;
}
body:not(.jeAberto) .campo-nota{display:block}
/* na capa as sugestões do chat.js ficam escondidas: os atalhos já estão acima */
body:not(.jeAberto) .je-sug{display:none}

/* estado conversa: a caixa encolhe e gruda no rodapé */
body.jeAberto .je-barra{
  position:sticky; bottom:0; z-index:3;
  background:linear-gradient(180deg,rgba(11,19,16,0),var(--bg) 26%);
  padding:20px 0 max(14px,env(safe-area-inset-bottom,0px));
}

/* ---------- a conversa ---------- */
.conversa{display:none}
body.jeAberto .conversa{display:block; animation:capaEntra .4s cubic-bezier(.2,.75,.3,1) both}
body.jeAberto .capa{display:none}
.conversa .je-chat{max-width:100%; margin:0}   /* .conversa qualifica: o chat.css entra depois e sem isso a largura dele (1144px) venceria e estouraria a capa */
body.jeAberto .je-chat{margin-top:22px}

/* ---------- rodapé ---------- */
.rodape{
  position:relative; z-index:1; text-align:center;
  max-width:780px; margin:0 auto;
  padding:26px 20px max(22px,env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border);
}
.rodape p{margin:0}
.rodape-linha{font-size:12.5px; color:var(--text3)}
/* o mesmo aviso legal da Central: a página mostra valores de tabela */
.rodape-aviso{
  margin-top:14px !important; font-size:10px; line-height:1.65;
  color:var(--text3); text-align:justify; opacity:.85;
}
.rodape-copyright{margin-top:12px !important; font-size:10px; color:var(--text3)}
/* "Desenvolvido por" apagado, a marca em destaque e clicável */
.rodape-credito{margin-top:10px !important; font-size:11.5px; color:var(--text3)}
.rodape-credito a{color:var(--text); text-decoration:none; transition:color .2s}
.rodape-credito a:hover{color:var(--ou)}
.rodape a{color:var(--text2); text-decoration:none}
.rodape a:hover{color:var(--ou)}
/* o rodapé fica: é onde moram o aviso legal e o crédito. Na conversa ele
   aparece ao rolar até o fim, abaixo da barra de digitar. */
body.jeAberto .rodape{margin-top:10px}

@media (max-width:620px){
  .topo-dentro{padding:13px 16px; gap:10px}
  .marca img{height:38px}
  .marca .badge{display:none}
  .capa{padding:30px 0 6px}
  .capa-sel{width:62px;height:62px;border-radius:18px;margin-bottom:20px}
  .capa-chips{gap:8px}
  .capa-chip{padding:9px 15px;font-size:12.5px}
  body:not(.jeAberto) .je-campo{min-height:150px;padding:17px 17px 60px}
  body:not(.jeAberto) .je-campo textarea{height:58px;font-size:16px}
  /* na tela estreita a frase esbarraria nos botoes: ela sai */
  body:not(.jeAberto) .campo-nota{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* O selo da versao, ao lado do nome: a Jade tem versao, como todo
   produto que vai mudar. */
.je-quem b em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--ou);background:rgba(var(--ac-rgb),.14);border:1px solid rgba(var(--ac-rgb),.3);
  border-radius:100px;padding:2px 8px;margin-left:8px;vertical-align:2px}

/* Nome, versao e descricao: tres pesos, tres papeis. Antes era uma
   linha so em caixa alta de 11px, que dava ao NOME da IA o mesmo
   peso da legenda que a descreve. A pastilha da versao repete a da
   tarja dos testes, para a capa apresentar a Jade do mesmo jeito
   que as outras paginas. */
.capa-nome{display:flex;align-items:center;justify-content:center;
  gap:9px;margin:0 0 5px;font-family:'Montserrat',sans-serif;
  font-weight:800;font-size:19px;letter-spacing:1.6px;
  color:var(--text)}
.capa-ver{font-family:'Inter',sans-serif;font-size:10.5px;
  font-weight:700;letter-spacing:.6px;padding:3px 9px;
  border-radius:100px;color:var(--ou3);
  background:rgba(var(--ac-rgb),.14);
  border:1px solid rgba(var(--ac-rgb),.3)}
.capa-olho{margin:0 0 26px;font-family:'Inter',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:.4px;
  text-transform:none;color:var(--text3)}
@media (max-width:620px){
  .capa-nome{font-size:17px}
  .capa-olho{font-size:11.5px;margin-bottom:22px}
}

/* Area de toque dos atalhos no celular. Medido em 375px: 36px de
   altura, abaixo dos 44 recomendados. A regra que eu tinha escrito
   no chat.css cobria .je-sg e esqueceu estes. */
@media (pointer:coarse){
  .capa-chip{min-height:44px}
}

/* O subtitulo no celular. Em 15,5px o texto ocupava QUATRO linhas e
   empurrava os atalhos para fora da primeira tela. A 13,5px, com a
   entrelinha menor, ele ocupa o espaco de tres e os atalhos sobem
   para onde servem para alguma coisa. */
@media (max-width:560px){
  .capa-sub{font-size:13.5px;line-height:1.5}
}

/* Os atalhos sairam de dentro da .capa para ficarem abaixo do
   campo -- o campo precisava subir, para a esfera ficar a vista
   enquanto ela pensa. Fora da .capa, eles nao somem mais junto com
   ela quando a conversa abre, entao a regra vem para ca. */
body.jeAberto .capa-chips{display:none}
.capa-chips{margin-top:18px}

/* O topo limpo: a marca um pouco menor e mais discreta, porque sem
   a faixa atras ela ganha peso demais sozinha. */
/* Centralizada: o space-between herdado servia para marca + link, um
   em cada ponta. Sozinha, a marca ficava encostada na esquerda.
   Com ar em cima e embaixo ela vira assinatura da pagina, nao canto
   de cabecalho. */
/* Coluna: marca em cima, identificacao embaixo, tudo centralizado. */
.topo-limpo .topo-dentro{flex-direction:column;justify-content:center;
  gap:14px;padding-block:28px 22px}
.topo-limpo .marca img{height:38px;opacity:.9;transition:opacity .2s}
.topo-limpo .marca:hover img{opacity:1}
@media (max-width:620px){
  .topo-limpo .marca img{height:32px}
  .topo-limpo .topo-dentro{padding-block:22px 18px}
}

/* O link da Central. Discreto de proposito: e a saida para quem nao
   quer conversar, nao a acao principal da pagina. Some quando a
   conversa abre, como os atalhos. */
.capa-central{margin:16px 0 0;text-align:center}
.capa-central a{display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;color:var(--ou2);
  /* Dourado: em cinza ele tinha a mesma cor do aviso legal logo
     abaixo, e o olho nao distinguia qual dos dois era clicavel. */
  text-decoration:none;padding:7px 10px;border-radius:8px;
  transition:color .18s,background .18s}
.capa-central a:hover{color:var(--ou3);background:rgba(var(--ac-rgb),.10)}
.capa-central svg{transition:transform .18s}
.capa-central a:hover svg{transform:translateX(2px)}
body.jeAberto .capa-central{display:none}

/* No toque, o link da Central ganha altura suficiente para o dedo.
   Medido em 375px: 34px, abaixo dos 44 recomendados. O padding faz
   isso sem inchar o desenho do texto. */
@media (pointer:coarse){
  .capa-central a{padding-block:12px}
}

/* A identificacao no cabecalho. As margens de baixo que o bloco
   tinha na capa saem: aqui quem manda no espacamento e o gap da
   coluna do cabecalho. */
.topo-identidade{text-align:center}
.topo-identidade .capa-nome{margin-bottom:4px}
.topo-identidade .capa-olho{margin-bottom:0}
@media (max-width:620px){
  .topo-limpo .topo-dentro{gap:11px;padding-block:20px 16px}
}