/* transição suave entre telas (no lugar do flash branco do recarregar).
   iOS 18+/WebKit novo aceita; onde não tiver, simplesmente troca normal. */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: vt-sai .26s cubic-bezier(.3,0,.25,1) both; }
::view-transition-new(root){ animation: vt-entra .26s cubic-bezier(.3,0,.25,1) both; }
@keyframes vt-sai{ from{ transform:translateX(0); } to{ transform:translateX(-26%); opacity:.55; } }
@keyframes vt-entra{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }

:root{
  /* identidade escura: fundo preto, texto branco; azul/ciano só como acento (o "V") */
  --azul:#5b83ff; --azul2:#7b97ff; --roxo:#8f86f2;
  --fundo:#000; --painel:#000; --branco:#15171f; --texto:#f3f5f8; --suave:#98a0b3;
  --linha:#262a35; --acento-fraco:#182034; --ok:#33c06f; --erro:#ff5b4d; --aviso:#f0b429;
  --raio:18px; --sombra:0 6px 24px rgba(0,0,0,.45);
  /* cabeçalho/topo e faixas grandes = PRETO TOTAL (#000), igual ao fundo (Nayan 02/07) */
  --grad-topo:#000;
  --grad-v:linear-gradient(90deg,#2b57ef 0%,#19d8cc 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{height:100%;background:#000}
body{
  font-family:Inter,system-ui,sans-serif;color:var(--texto);
  background:var(--fundo);
  -webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit;text-decoration:none}
h1{font-family:'Space Grotesk',Inter,sans-serif}

/* ---------- topo (faixa enxuta, identidade Vértex) ---------- */
.topo{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  background:var(--grad-topo);color:#fff;
  padding:3px 12px 5px;padding-top:calc(env(safe-area-inset-top) - 4px);
  box-shadow:0 3px 16px rgba(20,24,92,.16);
}

/* ---------- home: a faixa do topo vira uma zona só com o hero ---------- */
.pg-home .topo{box-shadow:none}
.pg-home .conteudo{max-width:none;padding:0 0 150px}
.pg-home .hero{
  background:var(--grad-topo);color:#fff;margin:0;
  padding:14px 20px 30px;border-radius:0 0 26px 26px;box-shadow:0 8px 22px rgba(20,24,92,.18);
}
.pg-home .hero-data{color:rgba(255,255,255,.82)}
.pg-home .hero-saud{color:#fff}
.pg-home .hero-sub{color:rgba(255,255,255,.88);white-space:nowrap;font-size:clamp(10px,3.1vw,13px)}
.pg-home .grade-atalhos{max-width:760px;margin:-8px auto 0;padding:0 16px;position:relative;z-index:2}
.marca{display:flex;align-items:center}
.marca img{height:34px;width:auto;display:block}
.btn-icone{background:transparent;border:0;color:#fff;font-size:20px;width:36px;height:36px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.btn-menu{position:relative;background:transparent;border:0;color:#fff;font-size:26px;width:40px;height:40px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.menu-dot{position:absolute;top:5px;right:5px;width:10px;height:10px;border-radius:50%;background:var(--erro);border:2px solid #1c2170}
.btn-pontos{background:transparent;border:0;color:#fff;font-size:30px;width:40px;height:40px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 8px}

/* ---------- ☰ Ferramentas: menu dentro da gaveta (canto esquerdo) ---------- */
.conversas-topo .fer-btn{position:absolute;left:8px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:#fff;font-size:23px;width:38px;height:38px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:7}
.fer-fundo{position:absolute;inset:0;z-index:5;display:none}
.fer-fundo.on{display:block}
.fer-drop{position:absolute;top:60px;left:8px;z-index:6;
  background:var(--branco);color:var(--texto);border:1px solid var(--linha);border-radius:14px;
  box-shadow:var(--sombra);overflow:hidden;display:none;min-width:230px;max-width:calc(100% - 16px);padding:6px}
.fer-drop.aberto{display:block}
.fer-drop a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;
  color:var(--texto);font-weight:600;font-size:15px}
.fer-drop a:active{background:var(--acento-fraco)}
.fer-drop .ga-ic{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.fer-drop .ga-ic img{width:24px;height:24px;object-fit:contain;border-radius:6px}
.btn-perfil{background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.55);padding:0;width:34px;height:34px;border-radius:50%;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.btn-perfil img{width:100%;height:100%;object-fit:cover}
.perfil-inicial{color:#fff;font-weight:700;font-size:15px;font-family:'Space Grotesk'}
.menu-drop{position:absolute;right:8px;top:calc(env(safe-area-inset-top) + 44px);background:#fff;color:var(--texto);border-radius:12px;box-shadow:var(--sombra);overflow:hidden;display:none;min-width:160px;z-index:60}
.menu-drop.aberto{display:block}
.menu-drop a{display:block;padding:13px 18px;border-bottom:1px solid var(--linha)}
.menu-drop a:last-child{border-bottom:0}

/* ---------- gaveta de assuntos (☰) ---------- */
.gaveta-fundo{position:fixed;inset:0;background:rgba(10,12,40,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.gaveta-fundo.on{opacity:1;pointer-events:auto}
.gaveta{
  position:fixed;top:0;left:0;bottom:0;width:80%;max-width:300px;z-index:50;background:#fff;
  box-shadow:6px 0 30px rgba(10,12,40,.25);transform:translateX(-100%);transition:transform .22s ease;
  display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)
}
.gaveta.aberta{transform:translateX(0)}
.gaveta-topo{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--azul);color:#fff;font-family:'Space Grotesk';font-weight:700}
.gaveta-topo .btn-icone{font-size:17px}
.gaveta-lista{display:flex;flex-direction:column;padding:8px 0;overflow-y:auto}
.gaveta-lista a{display:flex;align-items:center;gap:13px;padding:14px 20px;font-size:16px;font-weight:600;color:var(--texto)}
.gaveta-lista a .ic{font-size:20px;width:24px;text-align:center}
.gaveta-lista a .ic-v-menu{width:24px;height:24px;border-radius:7px;object-fit:contain;flex:0 0 auto}
.gaveta-lista a.on{color:var(--azul);background:#eef1fb}
.gaveta-nota{margin-top:auto;padding:16px 20px;color:var(--suave);font-size:12.5px;line-height:1.4}

/* ---------- calendário (escolher dia do fechamento) ---------- */
.cal-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cal-lbl{font-weight:600;font-size:13.5px;color:var(--suave)}
.cal-input{padding:9px 14px;border-radius:12px;background:#fff;border:1px solid var(--linha);
  font-weight:600;font-size:14px;color:var(--azul);box-shadow:var(--sombra);font-family:inherit}

/* ---------- chips (selecionar dia) ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--linha);font-weight:600;font-size:13.5px;color:var(--suave);box-shadow:var(--sombra)}
.chip.on{background:var(--azul);color:#fff;border-color:var(--azul)}

/* ---------- índices financeiros ---------- */
.grade-indices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.indice{margin-bottom:0;padding:13px 14px}
.indice-topo{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;color:var(--suave)}
.indice-ic{font-size:17px}
.indice-valor{font-family:'Space Grotesk';font-weight:700;font-size:21px;margin:6px 0 2px}
.indice-brl{font-size:12px;color:var(--suave);margin-bottom:3px}
.indice-var{font-size:12.5px;font-weight:600}
.indice-var.sobe{color:var(--ok)}
.indice-var.cai{color:var(--erro)}
.taxas-dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.taxa-col{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.taxa-col b{font-size:16px}
.taxa-nome{font-weight:600;color:var(--suave);font-size:13.5px}
.taxa-mes{font-size:12px;color:var(--suave)}
.taxa-info{font-size:11.5px;color:var(--suave);margin:14px 0 0}
.ipca-linha{margin-top:16px;border-top:1px solid var(--linha);padding-top:14px}

/* ---------- bloco de notícias no fechamento ---------- */
.bloco-news-tit{font-family:'Space Grotesk';font-size:18px;margin:22px 4px 12px}

/* ---------- manchetes clicáveis ---------- */
.lista-news li{padding:0;border-bottom:1px solid var(--linha)}
.lista-news li:last-child{border-bottom:0}
.news-item{display:flex;flex-direction:column;gap:1px;padding:7px 2px}
.news-item:active{background:#f4f6fd}
.news-tit{font-size:14.5px;line-height:1.3;font-weight:500}
.news-meta{font-size:11px;color:var(--roxo);font-weight:600}

/* ---------- alerta de topo ---------- */
.alerta-topo{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:9px;
  background:linear-gradient(90deg,#ffe7a1,#ffd166);color:#5a4300;font-weight:600;
  padding:11px 18px;font-size:14.5px;line-height:1.35;box-shadow:0 2px 8px rgba(0,0,0,.06)
}
.alerta-topo .ponto{width:9px;height:9px;border-radius:50%;background:#e8a200;flex:0 0 auto;animation:pisca 1.4s infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- conteúdo ---------- */
.conteudo{max-width:760px;margin:0 auto;padding:18px 16px 24px}
.conteudo.com-tabbar{padding-bottom:90px}

/* ---------- hero (home) ---------- */
.hero{padding:8px 2px 20px}
.hero-data{margin:0 0 4px;color:var(--roxo);font-weight:600;font-size:12.5px;text-transform:capitalize;letter-spacing:.2px}
.hero-saud{margin:0;font-size:30px;line-height:1.1;letter-spacing:-.5px}
.hero-sub{margin:6px 0 0;color:var(--suave);font-size:14.5px}

/* ---------- atalhos (home) — linhas premium ---------- */
.grade-atalhos{display:flex;flex-direction:column;gap:12px}
.atalho{
  --ac:#5b50d6;--tint:#eceafd;
  display:flex;align-items:center;gap:12px;background:var(--branco);border-radius:18px;
  padding:9px 16px;box-shadow:var(--sombra);border:1px solid var(--linha);
  position:relative;overflow:hidden;transition:transform .08s ease,box-shadow .2s ease;
}
.atalho::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ac)}
.atalho:active{transform:scale(.985);box-shadow:0 2px 10px rgba(20,24,92,.10)}
.ic-tile{flex:0 0 auto;width:40px;height:40px;border-radius:13px;background:var(--tint);
  display:flex;align-items:center;justify-content:center;font-size:21px}
.ic-tile-logo{background:#fff;overflow:hidden}
.ic-tile-logo img{width:100%;height:100%;object-fit:contain}
.atalho-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.atalho-tit{font-weight:700;font-size:16.5px;font-family:'Space Grotesk'}
.atalho-sub{color:var(--suave);font-size:13px;line-height:1.3}
.atalho-seta{flex:0 0 auto;color:#c4c9dc;font-size:26px;font-weight:400}
.ac-noite{--ac:#3b3f8f;--tint:#e9eafc}
.ac-roxo{--ac:#5b50d6;--tint:#eceafd}
.ac-verde{--ac:#1f9d57;--tint:#e6f6ec}
.ac-azul{--ac:#2b6cb0;--tint:#e7f0fb}
.ac-laranja{--ac:#d97706;--tint:#fdeede}
.ac-concreto{--ac:#14185C;--tint:#e4e6f3}

/* ---------- cabeçalho de página ---------- */
.cabec-pagina{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 16px;flex-wrap:wrap}
.cabec-pagina h1{font-size:22px;margin:0;display:flex;align-items:center;gap:9px}
.ic-titulo{width:26px;height:26px;border-radius:6px;object-fit:contain}
.cabec-acoes{display:flex;align-items:center;gap:10px}
.ts{color:var(--suave);font-size:12px}
.btn-mini{background:var(--branco);border:1px solid var(--linha);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--azul);box-shadow:var(--sombra)}
.btn-mini:active{transform:scale(.96)}

/* ---------- cartões / listas ---------- */
.cartao{background:var(--branco);border-radius:20px;box-shadow:var(--sombra);border:1px solid var(--linha);padding:16px 18px;margin-bottom:14px}
.cartao-tit{margin:0 0 10px;font-size:16.5px;font-family:'Space Grotesk'}
.lista{margin:0;padding:0;list-style:none}
.lista li{padding:9px 0;border-bottom:1px solid var(--linha);font-size:15px;line-height:1.4}
.lista li:last-child{border-bottom:0}
.vazio{color:var(--suave);text-align:center;padding:30px 10px}
.nota,.cartao .nota{color:var(--suave);font-size:12.5px;text-align:center;margin:4px 0 0}

/* ---------- abas ---------- */
.abas{display:flex;gap:8px;margin-bottom:14px}
.aba{flex:1;text-align:center;padding:10px;border-radius:12px;background:var(--branco);border:1px solid var(--linha);font-weight:600;color:var(--suave);box-shadow:var(--sombra)}
.aba.on{background:var(--azul);color:#fff;border-color:var(--azul)}

/* ---------- vendas (imagem) ---------- */
.foto-vendas{padding:8px;overflow-x:auto}
.foto-vendas img{width:100%;height:auto;border-radius:10px;display:block}

/* ---------- agenda ---------- */
.btn-novo{display:block;text-align:center;background:var(--azul);color:#fff;font-weight:700;padding:13px;border-radius:14px;margin-bottom:16px;box-shadow:var(--sombra)}
.btn-novo:active{transform:scale(.98)}
.dia-tit{display:flex;align-items:baseline;gap:9px;margin:0 0 6px;font-size:16px;font-family:'Space Grotesk'}
.dia-sub{color:var(--suave);font-size:13px;font-weight:500}
.evento{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--linha);color:var(--texto)}
.evento:last-child{border-bottom:0}
.evento:active{background:#f4f6fd}
.evento-hora{flex:0 0 52px;display:flex;flex-direction:column;font-weight:700;font-size:13.5px;color:var(--azul2);line-height:1.25}
.evento-hora .h-fim{color:var(--suave);font-weight:600}
.evento-hora .hora-dia{font-size:11.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.3px}
.evento-corpo{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.evento-tit{font-weight:600;font-size:15px}
.evento-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tag{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:#eceefb;color:var(--azul2)}
.tag-principal{background:#e7ecfb;color:var(--azul2)}
.tag-particular{background:#fdeede;color:#c2670c}      /* laranja */
.tag-feriados{background:#fde7e7;color:#c0392b}        /* vermelho */
.evento-local{font-size:12px;color:var(--suave)}
.evento-seta{flex:0 0 auto;color:var(--suave);font-size:22px;font-weight:400}

/* ---------- formulário (select/checkbox/2 colunas) ---------- */
.form select{padding:13px 14px;border:1px solid var(--linha);border-radius:12px;font-size:16px;background:#fbfcff}
.form .check{flex-direction:row;align-items:center;gap:10px;font-weight:600;color:var(--texto)}
.form .check input{width:20px;height:20px}
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.duas-colunas > label{min-width:0}
.opc{color:var(--suave);font-weight:400;font-size:12px;white-space:nowrap}
.hora-sel{display:flex;align-items:center;gap:5px}
.hora-sel select{flex:1;min-width:0;padding:13px 8px;text-align:center;text-align-last:center}

/* ---------- spinner de carregamento ---------- */
.carregando{position:fixed;inset:0;z-index:80;background:rgba(20,24,92,.18);display:none;align-items:center;justify-content:center;backdrop-filter:blur(1px)}
.carregando.on{display:flex}
/* carregando = o V da Vértex "respirando" (no lugar da roda girando) */
.spinner{width:58px;height:58px;border-radius:16px;background:#14185C;box-shadow:0 8px 26px rgba(20,24,92,.28);animation:respira 1.15s ease-in-out infinite;overflow:hidden}
.spinner img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes respira{0%,100%{transform:scale(.84);opacity:.6}50%{transform:scale(1.06);opacity:1}}
/* V mini "pensando" dentro da bolha do chat */
.pulso-v-mini{width:22px;height:22px;border-radius:7px;flex:0 0 auto;margin-right:9px;animation:respira 1.15s ease-in-out infinite}
.bolha.pensando{display:flex;align-items:center}
.pensando-txt{color:var(--suave);font-style:italic}
/* gravando áudio: barrinhas animadas (equalizador) */
.grav-barras{display:flex;align-items:center;gap:10px;padding:11px 14px;color:var(--roxo);font-weight:600;font-size:13.5px;white-space:nowrap}
.grav-barras .eq{display:flex;align-items:center;gap:3px;height:22px}
.grav-barras .eq i{width:3.5px;height:22px;background:var(--roxo);border-radius:2px;animation:eq .9s ease-in-out infinite}
.grav-barras .eq i:nth-child(2){animation-delay:.12s}
.grav-barras .eq i:nth-child(3){animation-delay:.24s}
.grav-barras .eq i:nth-child(4){animation-delay:.36s}
.grav-barras .eq i:nth-child(5){animation-delay:.48s}
.grav-barras .eq i:nth-child(6){animation-delay:.6s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
/* barras REAGINDO à voz (JS seta o scaleY ao vivo) — estilo ChatGPT */
.grav-barras .eq.eq-live i{animation:none;transform-origin:center;transform:scaleY(.22);transition:transform .07s linear}

/* ---------- login ---------- */
.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(160deg,var(--azul),var(--roxo))}
.tela-login .conteudo{display:flex;align-items:center;justify-content:center;width:100%}
.login-box{background:#fff;border-radius:24px;padding:36px 28px;width:100%;max-width:360px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login-logo{height:46px;width:auto;margin-bottom:6px}
.login-sub{color:var(--suave);margin:0 0 22px;font-size:14px}

/* ---------- formulários ---------- */
.form{display:flex;flex-direction:column;gap:14px;text-align:left}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--suave)}
.form input{padding:13px 14px;border:1px solid var(--linha);border-radius:12px;font-size:16px;background:#fbfcff}
.form input:focus{outline:none;border-color:var(--roxo)}
.btn{background:var(--azul);color:#fff;border:0;border-radius:12px;padding:14px;font-size:16px;font-weight:700;cursor:pointer}
.btn:active{transform:scale(.98)}
.btn-grande{width:100%;margin-top:4px}
.form-excluir{margin-top:14px}
.btn-excluir{width:100%;background:#fff;color:var(--erro);border:1.5px solid #f3c9c4}
.btn-excluir:active{background:#fdecea}

/* ---------- flashes ---------- */
.flashes{margin-bottom:14px}
.flash{padding:12px 16px;border-radius:12px;font-size:14px;margin-bottom:8px}
.flash-erro{background:#fdecea;color:var(--erro)}
.flash-ok{background:#e8f7ee;color:var(--ok)}

/* ---------- botão flutuante de chat (FAB) ---------- */
.fab{
  position:fixed;right:16px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:28;
  width:56px;height:56px;border-radius:50%;background:var(--grad-topo);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:25px;
  box-shadow:0 8px 22px rgba(20,24,92,.30);
}
.fab:active{transform:scale(.94)}

/* ---------- barra "falar com o Vértex" (só na home) ---------- */
.home-ask-wrap{
  position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom));z-index:28;
  max-width:760px;margin:0 auto;
  background:linear-gradient(180deg,rgba(238,241,250,0),var(--fundo) 35%)
}
.home-ask{display:flex;align-items:center;gap:8px;padding:8px 12px 10px}
.home-ask-ic{flex:0 0 auto;font-size:18px;padding-left:6px;opacity:.85}
.home-ask input{
  flex:1;min-width:0;border:1px solid var(--linha);border-radius:24px;padding:13px 18px;
  font-size:16px;font-family:inherit;background:#fff;box-shadow:0 6px 20px rgba(20,24,92,.10)
}
.home-ask input:focus{outline:none;border-color:var(--roxo);box-shadow:0 6px 22px rgba(98,60,234,.18)}
.home-ask-acc{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--azul);background:#eef1fb}
.home-ask-acc:active{transform:scale(.92)}
.home-ask-acc svg{width:21px;height:21px;display:block;stroke:currentColor}
.home-ask-acc .ic-mais{font-size:24px;font-weight:400;line-height:1}
.home-ask-acc.gravando{color:var(--roxo);animation:pulsa 1s infinite}
.home-ask.gravando-on .home-ask-go{display:none}
.home-ask-go{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;background:var(--grad-topo);color:#fff;font-size:18px;cursor:pointer}
.home-ask-go:active{transform:scale(.94)}

/* teclado aberto: some o rodapé pra barra colar no teclado */
body.teclado .tabbar{display:none}
body.teclado .fab{display:none}
/* teclado aberto: a barra de digitar cola no fundo (sem a margem de segurança do
   iPhone, que o teclado já cobre) — senão fica uma folga acima do teclado */
body.teclado .home-ask-wrap{bottom:0}
body.teclado .chat-baixo{bottom:0}

/* ---------- chat ---------- */
/* Chat = layout de "app": a PÁGINA não rola, só a lista de mensagens.
   Assim a faixa do topo fica travada e NÃO some quando o teclado abre (bug do iOS,
   onde a página deslizava pra cima e levava a barra junto).
   --app-h = altura visível da tela, atualizada por JS conforme o teclado abre/fecha. */
.pg-chat{position:fixed;top:0;left:0;right:0;height:var(--app-h,100dvh);
  display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none}
.pg-chat .tabbar{display:none}
/* cabeçalho do chat e barra de digitar = itens fixos da coluna (não rolam) */
.pg-chat .chat-topo{position:static;top:auto;flex:0 0 auto;width:auto;max-width:none;margin:0}
.pg-chat .conteudo{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;padding:0;overflow:hidden;position:relative}
.pg-chat .chat-thread{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 10px calc(var(--kb,0px) + 96px)}
/* barra de digitar no CELULAR: FIXA no rodapé. No app do iPhone a tela já encolhe pra
   excluir o teclado (interactive-widget), então o iOS coloca a barra acima do teclado
   sozinho — não uso `transform` (brigava com esse mecanismo). */
.pg-chat .chat-baixo{position:fixed;left:0;right:0;bottom:0;width:100%;max-width:760px;margin:0 auto;z-index:25;padding-bottom:env(safe-area-inset-bottom)}
/* respiro de 12px acima do teclado. Ligado por body.kb-on (classe que o JS mantém
   pelo foco real do campo — o focusin do iOS se perdia na abertura). Só no celular. */
@media (max-width:899px){
  body.kb-on .chat-baixo{ bottom:12px; padding-bottom:0; }
}
.chat-topo{position:sticky;top:var(--header-h,52px);z-index:20;max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px;padding:9px 8px;background:var(--fundo);border-bottom:1px solid var(--linha)}
.chat-topo-meio{min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px}
.chat-proj-badge{font-size:11px;font-weight:700;color:var(--azul);background:#eef1fb;border-radius:999px;padding:1px 9px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-btn{background:#fff;border:1px solid var(--linha);width:38px;height:38px;border-radius:11px;font-size:18px;color:var(--azul);box-shadow:var(--sombra);cursor:pointer;flex:0 0 auto}
.chat-nome{font-weight:700;font-family:'Space Grotesk';font-size:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-nova-form{margin:0}
.chat-thread{display:flex;flex-direction:column;gap:10px;padding-bottom:128px;min-height:50vh}
.bolha{max-width:90%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.42;white-space:pre-wrap;overflow-wrap:anywhere}
.bolha.user{align-self:flex-end;background:var(--azul);color:#fff;border-bottom-right-radius:5px}
.bolha.vertex{align-self:flex-start;background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra);border-bottom-left-radius:5px}
.bolha.trabalhando{color:var(--suave);font-style:italic}
.bolha-fotos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.bolha-fotos img{width:96px;height:96px;object-fit:cover;border-radius:10px;display:block;cursor:zoom-in}
.bolha-fotos a{line-height:0}
/* imagem que EU mando (relatório etc.): grande e legível já no chat, não miniatura cortada */
.bolha.vertex .bolha-fotos{display:block}
.bolha.vertex .bolha-fotos img{width:100%;max-width:360px;height:auto;object-fit:contain;border:1px solid var(--linha)}
/* zoom em tela cheia, dentro do app (não abre aba nova) */
.lightbox{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:14px;box-sizing:border-box}
.lightbox.on{display:flex}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lightbox-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px;height:40px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;font-size:15px;font-weight:700;line-height:40px;cursor:pointer;display:flex;align-items:center;gap:6px}
.bolha-docs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
/* cartão de arquivo: compacto (largura do conteúdo, não a linha toda), com um
   selo pequeno do tipo (PDF/DOC/XLS…) colorido na frente do nome */
.doc-chip{display:inline-block;max-width:230px;padding:6px 11px 6px 7px;border-radius:10px;background:#eef2f8;color:var(--texto);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top;border:1px solid var(--linha)}
.doc-chip::before,.tray-doc::before{content:attr(data-tipo);display:inline-block;vertical-align:middle;margin-right:7px;font-size:8.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#fff;background:#7a8699;border-radius:4px;padding:3px 4px;line-height:1;min-width:28px;text-align:center}
.doc-chip[data-tipo="pdf"]::before,.tray-doc[data-tipo="pdf"]::before{background:#e23b3b}
.doc-chip[data-tipo="doc"]::before,.tray-doc[data-tipo="doc"]::before{background:#2b6cb0}
.doc-chip[data-tipo="xls"]::before,.tray-doc[data-tipo="xls"]::before{background:#1f9d57}
.doc-chip[data-tipo="ppt"]::before,.tray-doc[data-tipo="ppt"]::before{background:#d35400}
.doc-chip[data-tipo="zip"]::before,.tray-doc[data-tipo="zip"]::before{background:#8e44ad}
.doc-chip[data-tipo="txt"]::before,.tray-doc[data-tipo="txt"]::before{background:#5a6a85}
.bolha.vertex .doc-chip{background:#eef2f8;color:var(--azul);border:1px solid var(--linha)}
/* arquivo na bolha do Nayan (fundo azul): cartão claro pra contrastar */
.bolha.user .doc-chip{background:rgba(255,255,255,.92);color:var(--texto);border:0}

/* ---------- resposta do Vértex SEM balão (texto direto, estilo ChatGPT/Claude) ---------- */
.bolha.vertex{background:none;border:0;box-shadow:none;max-width:100%;padding:2px 2px;border-radius:0}
.bolha.vertex .md{white-space:normal;line-height:1.5}
.bolha .md>div{margin:0}
.bolha .md>div+div,.bolha .md>ul,.bolha .md>ol,.bolha .md>.md-h{margin-top:8px}
.bolha .md ul,.bolha .md ol{margin:6px 0;padding-left:22px}
.bolha .md li{margin:3px 0}
.bolha .md .md-h{font-weight:700;font-family:'Space Grotesk';margin-top:12px}
.bolha .md strong{font-weight:700}
.bolha .md a{color:var(--roxo);text-decoration:underline}
.bolha .md code{background:rgba(20,24,92,.08);padding:1px 5px;border-radius:5px;font-size:.92em}
.bolha .md pre{background:#11143a;color:#eef;padding:10px 12px;border-radius:10px;overflow-x:auto;margin:8px 0}
.bolha .md pre code{background:none;color:inherit;padding:0}
/* ações sob a resposta: copiar + ler em voz alta */
.bolha-acoes{display:flex;gap:2px;margin-top:6px}
.ba-btn{border:0;background:transparent;color:var(--suave);cursor:pointer;width:32px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0}
.ba-btn svg{width:17px;height:17px;display:block}
.ba-btn:hover{background:#eef1fb;color:var(--azul)}
.ba-btn.lendo{color:var(--roxo)}
.ba-btn.carregando{color:var(--roxo)}
.ba-btn.carregando svg{animation:ba-pulsa 1s ease-in-out infinite}
@keyframes ba-pulsa{0%,100%{opacity:1}50%{opacity:.3}}
.ba-vel{font-size:12px;font-weight:600;width:auto;min-width:34px;padding:0 7px;letter-spacing:.2px}
.bolha-audio{display:block;width:230px;max-width:100%;height:40px;margin-bottom:4px}
.bolha-transcricao{font-size:13.5px;opacity:.85;font-style:italic;margin-top:3px;line-height:1.35}
.bolha-hora{display:block;text-align:right;font-size:10.5px;margin-top:3px;opacity:.55}
.dia-sep{display:flex;justify-content:center;margin:14px 0 10px}
.dia-sep span{background:rgba(20,24,92,.08);color:var(--suave);font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:999px}
/* separador de dia flutuante (fixo no topo da conversa, igual WhatsApp) */
.dia-flutuante{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;opacity:0;pointer-events:none;transition:opacity .15s}
.dia-flutuante.on{opacity:1}
.dia-flutuante span{background:#e6e9f4;color:var(--suave);font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:999px;box-shadow:0 1px 6px rgba(20,24,92,.16)}
/* tela vazia: ancorada por PX no topo da área do chat (.conteudo é position:relative
   e seu topo não muda com o teclado), então a saudação não escorrega quando o teclado
   sobe — ela se move junto com o app, não solta. */
.chat-vazio{position:absolute;top:210px;left:0;width:100%;box-sizing:border-box;z-index:1;text-align:center;color:var(--suave);padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.chat-vazio-v{width:66px;height:66px;border-radius:19px;box-shadow:var(--sombra);margin-bottom:8px;animation:vazioV .5s ease}
@keyframes vazioV{from{opacity:0}to{opacity:1}}
.chat-vazio-saud{font-family:'Space Grotesk';font-size:26px;font-weight:700;color:var(--azul);margin:0}
.chat-vazio-sub{font-size:15px;margin:0;opacity:.8}
/* submenus recolhíveis da gaveta (Ferramentas / Projetos) */
.gav-sub{border-bottom:1px solid var(--linha);flex:0 0 auto}
.gav-sub>summary{list-style:none;display:flex;align-items:center;gap:11px;padding:13px 14px;font-weight:700;font-size:15px;color:#1a2a4a;cursor:pointer}
.gav-sub>summary::-webkit-details-marker{display:none}
.gav-sub .gs-ic{width:24px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto;color:var(--roxo)}
.gav-sub .gs-ic svg{width:20px;height:20px;display:block;stroke:currentColor}
.gav-sub .gs-lbl{flex:0 0 auto}
.gav-sub .gs-seta{opacity:.45;transition:transform .15s;flex:0 0 auto}
.gav-sub[open]>summary .gs-seta{transform:rotate(90deg)}
/* "+" pra novo projeto, no fim do título (substitui o botão azul) */
.proj-novo{margin-left:auto;flex:0 0 auto;border:0;background:transparent;color:var(--suave);
  font-size:22px;line-height:1;width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.proj-novo:hover{color:var(--texto);background:var(--acento-fraco)}
.proj-novo:active{transform:scale(.92)}
.gav-sub .gs-badge{background:var(--roxo);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;flex:0 0 auto}
.gav-sub[open]{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* atalhos das seções (dentro do submenu Ferramentas) */
.gav-atalhos{display:flex;flex-direction:column;gap:2px;padding:0 8px 8px}
.gav-atalhos a{display:flex;align-items:center;gap:11px;padding:10px;border-radius:11px;color:#1a2a4a;text-decoration:none;font-weight:600;font-size:15px}
.gav-atalhos a:active{background:#eef1fb}
.gav-atalhos .ga-ic{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.gav-atalhos .ga-ic img{width:24px;height:24px;object-fit:contain;border-radius:6px}
.gav-atalhos .ga-badge{margin-left:auto;background:var(--roxo);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.chat-baixo{position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom));z-index:25;max-width:760px;margin:0 auto;background:linear-gradient(180deg,rgba(238,241,250,0),var(--fundo) 22%)}
.chat-input{position:relative;display:flex;gap:8px;align-items:flex-end;padding:6px 12px 8px}
.chat-tray{display:none;gap:8px;overflow-x:auto;padding:8px 12px 2px;align-items:center;-webkit-overflow-scrolling:touch}
.chat-tray.on{display:flex}
.tray-chip{position:relative;flex:0 0 auto;background:#fff;border:1px solid var(--linha);border-radius:12px;box-shadow:var(--sombra)}
.tray-chip img{width:54px;height:54px;object-fit:cover;border-radius:12px;display:block}
.tray-doc{display:inline-block;padding:11px 12px;font-size:12.5px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray-audio span{display:inline-block;padding:11px 12px;font-size:12.5px;color:var(--azul);font-weight:600}
.tray-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:0;background:var(--roxo);color:#fff;font-size:11px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
/* status do upload no canto do anexo: rodinha enquanto sobe, ✓ discreto quando termina */
.tray-status{position:absolute;left:-6px;bottom:-6px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:#fff;box-shadow:0 1px 5px rgba(20,24,92,.25)}
.tray-status.ok{background:var(--ok);color:#fff}
.tray-status.err{background:var(--aviso);color:#fff}
.tray-spin{width:12px;height:12px;border:2px solid #ddd8f6;border-top-color:var(--roxo);border-radius:50%;display:inline-block;animation:cgspin .7s linear infinite}
.tray-audio span{display:inline-flex;align-items:center;gap:6px}
.tray-audio span svg{width:16px;height:16px;stroke:currentColor}
.chat-input textarea{flex:1;resize:none;border:1px solid var(--linha);border-radius:22px;padding:11px 16px;font-size:16px;font-family:inherit;background:#fff;max-height:140px;box-shadow:var(--sombra);line-height:1.35;min-width:0}
.chat-input textarea:focus{outline:none;border-color:var(--roxo)}
.chat-acc{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;background:#fff;border:1px solid var(--linha);font-size:18px;cursor:pointer;color:var(--azul);box-shadow:var(--sombra);padding:0;display:flex;align-items:center;justify-content:center}
.chat-acc:active{transform:scale(.92)}
.chat-acc.gravando{background:#e9e7fb;border-color:#cfc9f3;color:var(--roxo);animation:pulsa 1s infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(91,80,214,.4)}50%{box-shadow:0 0 0 6px rgba(91,80,214,0)}}
/* ícone (mic) e "+" do anexar, na cor da identidade */
.chat-acc svg{width:21px;height:21px;display:block;stroke:currentColor}
.chat-acc .ic-mais{font-size:24px;font-weight:400;line-height:1}
.chat-enviar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:var(--grad-topo);color:#fff;font-size:17px;cursor:pointer}
.chat-enviar:disabled{opacity:.5}
/* enquanto grava áudio, some o botão enviar (aperta o mic pra parar e aí envia) */
.chat-input.gravando-on .chat-enviar{display:none}
/* onda/“transcrevendo” DENTRO da caixa de texto (estilo ChatGPT) */
.chat-grav{display:none;flex:1 1 auto;min-width:0;height:44px;align-items:center;
  border:1px solid var(--linha);border-radius:22px;background:#fff;box-shadow:var(--sombra);padding:0 16px;overflow:hidden}
.chat-input.grav .chat-grav,.chat-input.transc .chat-grav{display:flex}
/* o campo NÃO some (senão o iOS fecha o teclado): fica invisível mas ainda focado,
   e a onda ocupa o lugar dele */
.chat-input.grav textarea,.chat-input.transc textarea{position:absolute;left:0;bottom:0;width:1px;height:1px;min-width:0;padding:0;border:0;opacity:0;box-shadow:none;pointer-events:none}
.cg-onda{display:flex;align-items:center;gap:2px;height:26px;width:100%}
.chat-input.transc .cg-onda{display:none}
.cg-onda i{flex:1 1 0;min-width:0;background:var(--roxo);border-radius:2px;height:26px;transform:scaleY(.1);transform-origin:center;transition:transform .12s ease-out}
.cg-transc{display:none;align-items:center;gap:9px;color:var(--roxo);font-weight:600;font-size:13.5px;white-space:nowrap}
.chat-input.transc .cg-transc{display:flex}
.cg-spin{width:16px;height:16px;border:2.5px solid #ddd8f6;border-top-color:var(--roxo);border-radius:50%;animation:cgspin .7s linear infinite;flex:0 0 auto}
@keyframes cgspin{to{transform:rotate(360deg)}}
/* nosso menu de anexo (popover acima do +, não fecha o teclado) */
.anexo-pop{position:absolute;left:8px;bottom:calc(100% + 6px);z-index:1100;display:none;
  background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(10,12,40,.28);padding:6px;min-width:210px;
  animation:popEntra .12s ease-out}
.anexo-pop.on{display:block}
.ap-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;color:#1a2a4a;font-size:15px;font-weight:600;padding:12px;border-radius:9px;cursor:pointer}
.ap-item:active{background:#eef1fb}
.ap-ic{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--roxo)}
.ap-ic svg{width:22px;height:22px;stroke:currentColor;fill:none}
/* seta "voltar pro fim" da conversa (estilo ChatGPT/Claude) */
.btn-fim{position:absolute;top:-48px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--linha);background:#fff;color:var(--azul);font-size:19px;box-shadow:var(--sombra);cursor:pointer;display:none;align-items:center;justify-content:center;z-index:26}
.btn-fim.on{display:flex}
.conversas{position:fixed;top:0;left:0;bottom:0;width:100%;max-width:100%;z-index:50;background:#fff;box-shadow:6px 0 30px rgba(10,12,40,.25);transform:translateX(-100%);transition:transform .22s;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.conversas.aberta{transform:translateX(0)}
.conversas-topo{position:relative;display:flex;align-items:center;justify-content:center;padding:16px 18px;background:var(--grad-topo);color:#fff;font-family:'Space Grotesk';font-weight:700}
.conversas-topo .btn-icone{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.conversas-nova{padding:12px 14px;border-bottom:1px solid var(--linha);margin:0}
.conversas-nova button{width:100%;padding:12px;border:0;border-radius:12px;background:#eef1fb;color:var(--azul);font-weight:700;font-size:15px;cursor:pointer}
.conversas-logo{height:30px;width:auto;display:block}
/* rodapé do menu (estilo Claude): foto à esquerda (conta), balão Novo chat à direita */
.conv-rodape{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--linha);background:#fff}
.cr-perfil{position:relative;flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--linha);background:#eef1fb;overflow:hidden;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cr-perfil img{width:100%;height:100%;object-fit:cover}
.cr-inicial{font-weight:800;color:var(--azul);font-size:18px}
.cr-dot{position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:var(--erro);border:2px solid #fff}
.cr-novo-form{flex:0 0 auto;margin:0}
.cr-novo{padding:11px 20px;border:0;border-radius:999px;background:var(--azul);color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;box-shadow:var(--sombra)}
.cr-novo:active{opacity:.9}
/* balãozinho do ⋯ (popover no topo direito, estilo "flag") */
.pop-fundo{position:fixed;inset:0;z-index:1090;display:none}
.pop-fundo.on{display:block}
.pop-acoes{position:fixed;top:calc(env(safe-area-inset-top) + 46px);right:8px;z-index:1100;display:none;
  background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(10,12,40,.25);
  min-width:210px;max-width:84vw;max-height:64vh;overflow-y:auto;padding:6px;
  animation:popEntra .12s ease-out}
.pop-acoes.on{display:block}
@keyframes popEntra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pop-titulo{font-weight:700;color:#1a2a4a;font-size:14.5px;padding:8px 12px 6px;border-bottom:1px solid var(--linha);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-sub{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--suave);padding:8px 12px 2px}
.pop-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;color:#1a2a4a;font-size:15px;font-weight:600;padding:11px 12px;border-radius:9px;cursor:pointer}
.pop-item svg{width:18px;height:18px;flex:0 0 auto;color:var(--roxo)}
.pop-item.pop-excluir{color:var(--erro)}
.pop-item.pop-excluir svg{color:var(--erro)}
.pop-sep{height:1px;background:var(--linha);margin:5px 8px}
.pop-item:active{background:#eef1fb}
/* item com submenu (Mover para o projeto ▸): a setinha vai pra ponta */
.pop-sub-btn .pop-seta{margin-left:auto;opacity:.5;font-size:18px;line-height:1;font-weight:700}
/* pino do chat fixado, na lista de conversas */
.conv-pin{flex:0 0 auto;display:flex;align-items:center;color:var(--suave);margin-left:2px}
.conv-pin svg{width:13px;height:13px;display:block}
/* chat arquivado (só aparece na busca): fica mais apagado */
.conv-item.arquivado .conv-link{opacity:.6}
.conversas-busca{padding:10px 14px 6px}
.conversas-busca input{width:100%;padding:10px 14px;border:1px solid var(--linha);border-radius:12px;font-size:15px;background:#fbfcff}
.conversas-busca input:focus{outline:none;border-color:var(--roxo)}
.conversas-lista{flex:1 1 auto;min-height:0;display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 0}
.conversas-lista .conv-item,.conversas-lista .conv-grupo{flex:0 0 auto}
/* cada chat: arrasta pro lado pra revelar o "Excluir" */
.conv-item{position:relative;overflow:hidden;border-bottom:1px solid var(--linha)}
/* botão "Excluir" de arrastar (celular): ESCONDIDO até arrastar o item. Antes
   ficava sempre atrás e vazava pela beirada arredondada (aquele vermelho no canto). */
.conv-del{position:absolute;top:0;right:0;bottom:0;width:96px;background:var(--erro);color:#fff;display:none;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;cursor:pointer}
.conv-item.aberto .conv-del{display:flex}
.conv-link{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:12px 18px;font-size:14px;font-weight:500;color:var(--texto);background:#fff;transition:transform .2s ease}
.conv-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-hora{flex:0 0 auto;font-size:11px;color:var(--suave);font-weight:500}
.conv-link.on{background:#eef1fb;color:var(--azul);font-weight:700}
.conv-grupo{position:sticky;top:0;z-index:3;background:#fff;padding:10px 18px 6px;font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--suave);text-transform:uppercase;box-shadow:0 4px 6px -4px rgba(20,24,92,.12)}
.conv-item.aberto .conv-link{transform:translateX(-96px)}
.conversas-vazio{padding:20px;color:var(--suave);font-size:13px}
/* acesso discreto a Arquivados / Lixeira (rodapé da lista) */
.conversas-extra{flex:0 0 auto;display:flex;gap:6px;padding:6px 10px;border-top:1px solid var(--linha)}
.ce-link{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:var(--suave);font-size:12px;font-weight:600;padding:8px;border-radius:9px;cursor:pointer}
.ce-link svg{width:14px;height:14px;flex:0 0 auto}
.ce-link:hover{background:var(--acento-fraco);color:var(--texto)}
/* barra "‹ Voltar aos chats" nos modos Arquivados/Lixeira */
.conv-voltar{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--azul);font-size:13px;font-weight:700;padding:11px 14px;cursor:pointer}
/* linha de item na Lixeira: nome + botão Restaurar */
.conv-lixo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--linha)}
.conv-lixo-nome{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--suave);font-size:14px}
.conv-lixo-btn{flex:0 0 auto;border:0;background:var(--acento-fraco);color:var(--azul);font-size:12px;font-weight:700;padding:6px 11px;border-radius:8px;cursor:pointer}
/* topo da lixeira: aviso "some após 30 dias" + botão Esvaziar */
.lixo-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px 10px}
.lixo-info{font-size:11.5px;color:var(--suave)}
.lixo-esvaziar{flex:0 0 auto;border:0;background:transparent;color:var(--erro);font-size:12px;font-weight:700;padding:6px 8px;border-radius:8px;cursor:pointer}
.lixo-esvaziar:hover{background:rgba(255,91,77,.12)}

/* ---- selecionar vários chats (excluir / mover / criar projeto em lote) ---- */
.conversas-sec{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sel-toggle{border:0;background:transparent;color:var(--azul);font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;padding:2px 4px;font-family:inherit}
.sel-toggle:active{opacity:.6}
/* lupa da busca: só aparece no computador (no celular o campo já fica aberto) */
.busca-lupa{display:none;border:0;background:transparent;color:var(--suave);cursor:pointer;padding:2px;width:24px;height:24px;align-items:center;justify-content:center}
.busca-lupa svg{width:16px;height:16px;display:block}
.busca-lupa:hover{color:var(--texto)}
body.busca-on .busca-lupa{color:var(--azul)}
/* ⋯ do topo da lista (Selecionar / Arquivados / Lixeira) */
.sec-menu-btn{margin-left:auto;border:0;background:transparent;color:var(--suave);font-size:20px;line-height:1;cursor:pointer;padding:0;width:30px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:7px}
.sec-menu-btn:hover{background:var(--acento-fraco);color:var(--texto)}
/* a marquinha (bolinha à esquerda) só aparece no modo seleção */
.conv-check{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2;width:20px;height:20px;border:2px solid var(--linha);border-radius:50%;background:#fff;display:none;pointer-events:none}
body.sel-mode .conv-check{display:block}
body.sel-mode .conv-link{padding-left:46px}
body.sel-mode .conv-menu-btn{display:none !important}
.conv-item.sel .conv-check{border-color:var(--azul);background:var(--azul)}
.conv-item.sel .conv-check::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.conv-item.sel .conv-link{background:#eef1fb}
/* barra de ações — aparece só quando há chats marcados (some o rodapé normal) */
.sel-barra{display:none;flex:0 0 auto;flex-direction:column;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--linha);background:#fff}
body.tem-sel .sel-barra{display:flex}
body.tem-sel .conv-rodape{display:none}
.sel-conta{font-size:12.5px;color:var(--suave);font-weight:600}
.sel-conta b{color:var(--azul)}
.sel-acoes{display:flex;gap:6px;flex-wrap:wrap}
.sel-acoes button{flex:1 1 auto;border:1px solid var(--linha);background:#fff;color:var(--texto);font-size:12.5px;font-weight:600;padding:9px 8px;border-radius:10px;cursor:pointer;font-family:inherit}
.sel-acoes button:active{background:#eef1fb}
.sel-acoes .sel-del{color:var(--erro);border-color:var(--erro)}

/* ---------- tabbar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;
  background:#fff;border-top:1px solid var(--linha);padding:7px 4px;padding-bottom:calc(7px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 20px rgba(20,24,92,.06)
}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--suave);font-size:10.5px;font-weight:600;flex:1;padding:3px 0;position:relative}
.tabbar a .ic{font-size:20px;height:24px;display:flex;align-items:center;justify-content:center;filter:grayscale(.45);opacity:.65;transition:transform .12s ease}
.tabbar a .ic-v{width:22px;height:24px;object-fit:contain;border-radius:6px;opacity:.7;transition:transform .12s ease}
.tabbar a.on .ic-v{opacity:1;transform:translateY(-1px)}
.tabbar a.on{color:var(--azul)}
.tabbar a.on .ic{filter:none;opacity:1;transform:translateY(-1px)}
.tabbar a.on::before{content:"";position:absolute;top:-7px;width:24px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--azul2),var(--roxo))}

/* ---------- notificações: sino, bolinhas e lista ---------- */
.topo-dir{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.btn-sino{position:relative;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.4);color:#fff;text-decoration:none}
.btn-sino .sino-ic{font-size:17px;line-height:1}
.badge-num{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--erro);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;border:2px solid var(--azul);box-sizing:border-box}
/* ponto vermelho na gaveta (☰) */
.gaveta-lista a{position:relative}
.dot-menu{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--erro)}
/* ponto vermelho na barra de baixo */
.tab-ic-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.dot-tab{position:absolute;top:-3px;right:-7px;width:9px;height:9px;border-radius:50%;background:var(--erro);border:2px solid var(--fundo);box-sizing:content-box}
/* lista da central */
.lista-notif{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.notif-item{display:flex;align-items:flex-start;gap:12px;background:var(--branco);border-radius:var(--raio);padding:14px;box-shadow:var(--sombra);text-decoration:none;color:var(--texto)}
.notif-item.nao-lido{box-shadow:0 0 0 2px var(--roxo),var(--sombra)}
.notif-ic{font-size:20px;line-height:1.2;flex:0 0 auto}
.notif-corpo{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.notif-tit{font-weight:700;font-size:15px}
.notif-txt{color:var(--texto);font-size:14px;line-height:1.35;word-break:break-word}
.notif-meta{color:var(--suave);font-size:12px;margin-top:2px}
.notif-seta{color:var(--suave);font-size:22px;align-self:center;flex:0 0 auto}

/* Concreto: sub-abas (Vendas | Programação) e form de período */
.abas-topo{margin-bottom:10px}
.periodo-form{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.periodo-form .btn{margin-top:2px}

.conv-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--erro)}

/* copiar mensagem: aviso "Copiado" + segurar a bolha sem o menu nativo brigar */
.copia-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);background:#14185C;color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:3500}
.copia-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.bolha{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ---------- projetos no menu de chats (pastas que agrupam conversas) ---------- */
.proj-bloco{padding:6px 0 8px;background:#f3f5fb;border-bottom:2px solid var(--linha)}
.conversas-sec{padding:12px 14px 4px;font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--suave);text-transform:uppercase}
.proj-cabec{display:flex;align-items:center;justify-content:space-between;padding:6px 14px}
.proj-cabec>span{font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--suave);text-transform:uppercase}
.proj-add{border:0;background:#eef1fb;color:var(--azul);font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:999px;cursor:pointer}
.proj-add:active{transform:scale(.95)}
.proj-lista{display:flex;flex-direction:column;max-height:34vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.proj-item{position:relative;overflow:hidden}
.proj-del{position:absolute;top:0;right:0;bottom:0;width:96px;background:var(--erro);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.proj-link{position:relative;z-index:1;display:flex;align-items:center;gap:9px;padding:10px 14px;background:#fff;transition:transform .2s ease}
.proj-item.aberto .proj-link{transform:translateX(-96px)}
.proj-ic{font-size:16px;flex:0 0 auto}
.proj-nome{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:14.5px}
.proj-qtd{flex:0 0 auto;font-size:11px;color:var(--suave);background:#eef1fb;border-radius:999px;padding:1px 8px;font-weight:600}
.proj-vazio{padding:2px 14px 10px;color:var(--suave);font-size:12.5px;line-height:1.4}
.proj-voltar{display:flex;align-items:center;gap:6px;margin:10px 14px 4px;padding:13px 16px;color:var(--azul);font-weight:700;font-size:15.5px;background:#eef1fb;border-radius:12px}
.proj-voltar:active{transform:scale(.98)}
.proj-sobre{padding:9px 14px;color:var(--suave);font-size:12.5px;line-height:1.4;background:#f7f8fc;border-bottom:1px solid var(--linha);margin:0}

/* ---------- link de configurações do projeto (no menu de chats) ---------- */
.proj-config{display:block;padding:11px 14px;color:var(--azul);font-weight:600;font-size:14px;background:#f7f8fc;border-bottom:1px solid var(--linha)}

/* título do projeto (onde ficava "Todos os chats") + botão de config à direita */
.proj-titulo-linha{display:flex;align-items:center;gap:8px;margin:12px 16px 4px}
.proj-titulo{display:flex;align-items:center;gap:8px;min-width:0;font-family:'Space Grotesk';font-weight:700;font-size:16px;color:#f3f5f8}
.proj-titulo .pt-ic{width:18px;height:18px;flex:0 0 auto;opacity:.85}
.proj-titulo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* engrenagem = ícone de linhas (sliders), encostado na direita */
.proj-config-ic{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:#c8ccd6;opacity:.75;text-decoration:none}
.proj-config-ic svg{width:18px;height:18px}
.proj-config-ic:hover,.proj-config-ic:active,.proj-config-ic.on{opacity:1;background:rgba(255,255,255,.06);color:#fff}

/* ---------- tela do projeto (orientação + links + arquivos) ---------- */
.proj-pg-sub{color:var(--suave);font-size:13.5px;line-height:1.4;margin:0 2px 14px}
.proj-pg-bloco{margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.proj-pg-tit{font-size:14px;margin:0}
/* botão compacto: não ocupa a largura toda nem fica alto (pedido do Nayan) */
.btn-compacto{align-self:flex-start;padding:9px 16px;font-size:14px;font-weight:600;border-radius:10px}

/* wrapper da conversa (thread + barra de baixo): precisa esticar como coluna flex,
   senão a lista perde a altura e NÃO ROLA. Fica escondido no modo config. */
.conversa-col{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.conversa-col[hidden]{display:none}

/* painel de configuração DENTRO da casca do chat (/chat?config=1) — rola sozinho
   na área da conversa, com a lateral do projeto intacta ao lado */
.config-proj{width:100%;max-width:760px;margin:0 auto;padding:16px 14px 48px}
.pg-chat .config-proj{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.carta-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.carta-quando{font-size:11.5px;color:var(--suave);font-weight:500}
@media (min-width:900px){ body.pg-chat .config-proj{max-width:var(--chatw);padding-top:22px} }
/* leitura da carta */
.carta-corpo{line-height:1.5;font-size:15px}
.carta-h{font-family:'Space Grotesk';margin:16px 0 6px;font-size:16px;color:var(--azul)}
.carta-h:first-child{margin-top:0}
.carta-p{margin:6px 0}
.carta-ul{margin:6px 0 6px 2px;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.carta-sp{height:6px}
/* Links e Arquivos: menores, sem exagero — cartão mais justo */
.cartao.proj-pg-bloco:has(.proj-pg-add){padding:14px}
.proj-pg-rotulo{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--suave)}
.proj-pg-rotulo input,.proj-pg-rotulo textarea{padding:12px 14px;border:1px solid var(--linha);border-radius:12px;font-size:16px;font-family:inherit;background:#fbfcff;color:var(--texto)}
.proj-pg-rotulo textarea{resize:vertical;line-height:1.4}
.proj-pg-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.proj-pg-lista li{display:flex;align-items:center;gap:10px;background:#f5f7fc;border-radius:10px;padding:10px 12px}
.proj-pg-link{flex:1;min-width:0;color:var(--azul);font-weight:600;font-size:14px;word-break:break-word}
.proj-pg-arq{flex:1;min-width:0;font-size:14px;word-break:break-word}
.proj-pg-lista form{margin:0;flex:0 0 auto}
.proj-pg-x{border:0;background:transparent;color:var(--erro);font-size:16px;cursor:pointer;padding:2px 6px}
.proj-pg-vazio{color:var(--suave);font-size:13px;margin:0}
.proj-pg-add{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--linha);padding-top:12px}
.proj-pg-add input{padding:11px 13px;border:1px solid var(--linha);border-radius:10px;font-size:15px;background:#fbfcff}
.btn-sec{background:#eef1fb;color:var(--azul)}
.proj-pg-conv{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--texto)}
.proj-pg-conv-q{font-size:11px;color:var(--suave);font-weight:500}

/* sininho foi pro menu da foto: bolinha vermelha na foto + número no item do menu */
.perfil-wrap{position:relative;flex:0 0 auto;display:flex}
.perfil-dot{position:absolute;top:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:var(--erro);border:2px solid #1c2170}
.menu-badge{display:inline-block;min-width:18px;text-align:center;background:var(--erro);color:#fff;font-size:11px;font-weight:700;border-radius:9px;padding:0 5px;margin-left:4px}
/* ⋯ de cada conversa — escondido por padrão (só aparece no computador, ao passar o mouse) */
.conv-menu-btn{display:none;border:0;cursor:pointer;padding:0;font-family:inherit}

/* ============================================================
   COMPUTADOR — navegador em tela larga (≥900px).
   O menu fica SEMPRE aberto na lateral esquerda, estilo Claude/ChatGPT.
   IMPORTANTE: o app no iPhone abre em tela estreita (<900px), então
   NADA aqui vale pra ele — esta é só a "versão computador".
   ============================================================ */
@media (min-width:900px){
  :root{ --sb:300px; --chatw:880px; }   /* --chatw = largura da coluna da conversa */

  /* abre espaço à esquerda pra barra lateral (só quando logado) */
  body:not(.tela-login){ padding-left:var(--sb); }

  /* a barra fica fixa aberta: o ☰, o fundo escuro e a barrinha de baixo somem */
  .btn-menu{ display:none !important; }
  .gaveta-fundo{ display:none !important; }
  .tabbar{ display:none !important; }
  /* computador: pode selecionar o texto com o mouse pra copiar (no celular não, pra
     não atrapalhar o "segurar pra copiar") */
  .bolha{ -webkit-user-select:text; user-select:text; }

  /* ---- telas comuns (Agenda, Concreto, Índices, Notícias…) ----
     usam a MESMA lateral de CHATS do início (não mais a gaveta de Assuntos).
     Os Assuntos ficam no ☰ (Ferramentas) dentro dela. */
  body:not(.tela-login):not(.pg-chat) .gaveta{ display:none; }
  body:not(.tela-login):not(.pg-chat) .conversas.conversas-nav{
    transform:none; width:var(--sb); max-width:var(--sb);
    box-shadow:none; border-right:1px solid var(--linha);
  }
  body:not(.tela-login):not(.pg-chat) .conversas-nav .conversas-topo .btn-icone{ display:none; }   /* sem o ✕ de fechar */
  .gaveta-topo .btn-icone{ display:none; }

  /* ---- chat (tela principal) ----
     a lista de conversas vira a lateral fixa (igual Claude/ChatGPT) */
  body.pg-chat .gaveta{ display:none; }       /* evita duas laterais */
  body.pg-chat .conversas{
    transform:none; width:var(--sb); max-width:var(--sb);
    box-shadow:none; border-right:1px solid var(--linha);
  }
  body.pg-chat .conversas-topo .btn-icone{ display:none; }   /* sem o ✕ */
  /* computador: a barra de cima (logo Vértex) sai em TODA tela — a lateral fixa
     "Assuntos" já tem a marca e o menu. Cada tela mostra só o título + conteúdo.
     (a logo é link pra home; era o "menu do home" que aparecia em cima e o Nayan
     não quer). No celular a barra continua, pra ter o ☰. */
  .topo{ display:none; }
  /* a janela do chat e a barra de digitar começam DEPOIS da lateral,
     e ficam numa coluna central confortável (não esticam a tela toda) */
  /* o container do chat não pode ficar travado nos 760px do CSS base, senão a coluna
     interna não tem como alargar (era por isso que "não mudava nada") */
  body.pg-chat .conteudo{ max-width:none; }
  body.pg-chat .chat-thread{ max-width:var(--chatw); margin:0 auto; width:100%; }
  /* barra de digitar sobe um pouco do rodapé (não fica colada embaixo).
     No computador ela VOLTA a ser fixa (não tem teclado que atrapalhe). */
  body.pg-chat .chat-baixo{ position:fixed; left:var(--sb); right:0; bottom:24px; max-width:var(--chatw); padding-bottom:0; transform:none; }
  .home-ask-wrap{ left:var(--sb); right:0; }

  /* chat NOVO (vazio): a caixa fica no MEIO (como antes); só a saudação sobe um pouco */
  body.pg-chat.chat-novo .conteudo{ justify-content:center; }
  /* o wrapper da conversa preenche a área; no chat vazio ele que centraliza a caixa
     (a barra é position:static aqui), senão ela sobe pro topo */
  body.pg-chat.chat-novo .conversa-col{ justify-content:center; }
  body.pg-chat.chat-novo .chat-thread{ display:none; }
  body.pg-chat.chat-novo .chat-vazio{ position:absolute; top:30%; margin:0; }
  body.pg-chat.chat-novo .chat-baixo{
    position:static; left:auto; right:auto; bottom:auto;
    max-width:var(--chatw); width:100%; margin:0 auto; background:none;
  }

  /* ⋯ em cada conversa (passar o mouse): renomear / mover */
  .conv-menu-btn{
    position:absolute; right:8px; top:50%; transform:translateY(-50%); z-index:2;
    width:30px; height:30px; border-radius:8px; align-items:center; justify-content:center;
    background:#fff; color:var(--suave); font-size:19px; line-height:1;
  }
  .conv-item:hover .conv-menu-btn{ display:flex; }
  .conv-item:hover .conv-hora{ opacity:0; }   /* dá lugar pro ⋯ */
  .conv-menu-btn:hover{ background:#eef1fb; color:var(--azul); }

  /* arrastar arquivo pra dentro da conversa: aviso na tela toda */
  body.arrastando::after{
    content:"📎 Solte o arquivo aqui pra anexar";
    position:fixed; inset:0; z-index:2000; pointer-events:none;
    display:flex; align-items:center; justify-content:center; text-align:center;
    background:rgba(20,24,92,.14); border:3px dashed var(--roxo);
    color:var(--azul); font-weight:700; font-size:20px;
  }

  /* mouse: realce ao passar por cima (no celular isso não existe) */
  .conv-link, .gaveta-lista a, .gav-atalhos a, .proj-link,
  .gav-sub>summary, .pop-item, .ap-item, .atalho, .cr-novo,
  .conversas-nova button, .proj-add, .btn-mini{ cursor:pointer; }
  .conv-link:hover, .gaveta-lista a:hover, .gav-atalhos a:hover,
  .proj-link:hover, .gav-sub>summary:hover{ background:#eef1fb; }
  .atalho:hover{ box-shadow:0 8px 26px rgba(20,24,92,.14); transform:translateY(-1px); }

  /* computador: menu de ações da conversa mais compacto (no celular fica grande
     de propósito, pro dedo; no mouse não precisa) */
  .pop-acoes{ min-width:190px; padding:5px; border-radius:12px; }
  .pop-titulo{ font-size:13px; padding:6px 10px 5px; }
  .pop-sub{ font-size:10.5px; padding:6px 10px 2px; }
  .pop-item{ font-size:13.5px; padding:7px 10px; gap:9px; border-radius:7px; }
  .pop-item svg{ width:16px; height:16px; }
  .pop-item:hover{ background:var(--acento-fraco); }
  .conv-menu-btn{ background:var(--branco); }
  .conv-menu-btn:hover{ background:var(--acento-fraco); color:var(--azul); }
  .conv-link:hover, .gaveta-lista a:hover, .gav-atalhos a:hover,
  .proj-link:hover, .gav-sub>summary:hover{ background:var(--acento-fraco); }
  body.arrastando::after{ background:rgba(0,0,0,.6); }

  /* ☰ Ferramentas no computador: realce ao passar o mouse */
  .fer-drop a:hover{ background:var(--acento-fraco); }
}

/* ============================================================
   IDENTIDADE ESCURA — fundo preto, texto branco. As cores claras
   fixas (fundos #fff, tints azuladas claras, textos navy) viram
   superfícies escuras. O degradê azul→ciano ("V") fica só nos
   botões de ação. Bloco no fim = vence as regras acima.
   ============================================================ */
/* superfícies claras (#fff / tints) -> painel escuro */
.menu-drop, .gaveta, .cal-input, .chip, .chat-btn, .tray-chip,
.chat-input textarea, .chat-acc, .chat-grav, .anexo-pop, .btn-fim,
.conversas, .conv-rodape, .conv-link, .conv-grupo, .tabbar,
.pop-acoes, .proj-link, .login-box, .btn-excluir{ background:var(--branco); }
.conv-link{ color:var(--texto); }
/* inputs de formulário */
.form input, .form select, .conversas-busca input,
.proj-pg-rotulo input, .proj-pg-rotulo textarea, .proj-pg-add input,
.home-ask input{ background:#12141b; color:var(--texto); }
/* tints azuladas claras (estado "on", secundários) -> tint escuro */
.gaveta-lista a.on, .gav-atalhos a:active, .ap-item:active, .pop-item:active,
.conversas-nova button, .conv-link.on, .btn-sec, .proj-qtd, .proj-voltar,
.proj-add, .chat-proj-badge, .home-ask-acc, .cr-perfil, .ba-btn:hover{
  background:var(--acento-fraco); }
.proj-bloco, .proj-sobre, .proj-config, .proj-pg-lista li{ background:#0e1017; }
/* textos navy escuros -> branco */
.gav-sub>summary, .gav-atalhos a, .ap-item, .pop-item, .pop-titulo{ color:var(--texto); }
/* bolha do Nayan: superfície escura (não mais azul cheio) */
.bolha.user{ background:#23262f; color:#fff; }
.bolha.vertex .doc-chip, .doc-chip{ background:var(--acento-fraco); color:var(--texto); border:1px solid var(--linha); }
.bolha .md code{ background:rgba(255,255,255,.12); }
.dia-sep span, .dia-flutuante span{ background:#1a1d26; color:var(--suave); }
/* botões de ação mantêm o degradê do "V" */
.fab, .chat-enviar, .home-ask-go, .cr-novo{ background:var(--grad-v); }
/* login e telas cheias -> preto */
.tela-login{ background:#000; }
.tabbar{ box-shadow:0 -4px 20px rgba(0,0,0,.5); }
.news-item:active, .evento:active{ background:var(--acento-fraco); }
/* tags de agenda: fundos escuros */
.tag, .tag-principal{ background:var(--acento-fraco); color:var(--azul2); }
.tag-particular{ background:rgba(240,180,41,.16); color:#f0b429; }
.tag-feriados{ background:rgba(255,91,77,.16); color:#ff8a7d; }
/* flashes legíveis no escuro */
.flash-erro{ background:rgba(255,91,77,.14); color:#ff8a7d; }
.flash-ok{ background:rgba(51,192,111,.14); color:#5ad592; }
/* cabeçalho da gaveta (☰): preto, não azul cheio */
.gaveta-topo{ background:var(--painel); }
/* caixa de login: borda pra destacar no preto */
.login-box{ border:1px solid var(--linha); box-shadow:0 20px 60px rgba(0,0,0,.6); }

/* ---- alinhar com o ChatGPT (02/07/2026) ---- */
/* texto do chat um tom maior (lê mais nítido) */
.bolha{ font-size:16px; font-weight:450; }
.bolha.vertex .md{ line-height:1.55; font-weight:450; }
.bolha.user{ font-weight:450; }
/* saudação do chat vazio em branco (o "V" gradiente já fica acima dela) */
.chat-vazio-saud{ color:var(--texto); }
/* ícones da lateral: brancos, sem roxo */
.gav-sub .gs-ic, .gav-atalhos .ga-ic, .ap-ic, .pop-item svg{ color:var(--texto); }
.gav-sub .gs-badge, .gav-atalhos .ga-badge{ background:#3a3f4d; color:#fff; }
/* caixa de digitar: sem borda (estilo ChatGPT) */
.chat-input textarea, .chat-grav, .home-ask input{ border:0; }
/* + e microfone: brancos, sem moldura */
.chat-acc, .home-ask-acc{ color:var(--texto); background:transparent; border:0; box-shadow:none; }
.chat-acc.gravando, .home-ask-acc.gravando{ background:transparent; color:var(--azul); }

/* ---- ajustes 2 (02/07/2026) ---- */
/* texto digitado branco + placeholder cinza */
.chat-input textarea, .home-ask input{ color:var(--texto); }
.chat-input textarea::placeholder, .home-ask input::placeholder{ color:var(--suave); }
/* sem realce roxo ao focar (busca dos chats e caixas de digitar) */
.conversas-busca input:focus, .chat-input textarea:focus,
.home-ask input:focus{ border-color:var(--linha); box-shadow:none; outline:none; }
/* caixa de digitar = um recipiente só (estilo ChatGPT): +/mic/enviar por dentro */
.chat-input{ background:var(--branco); border-radius:26px; margin:0 12px; padding:5px 6px 5px 10px; align-items:flex-end; gap:2px; }
.chat-input textarea{ background:transparent; box-shadow:none; border-radius:0; padding:9px 6px; min-height:26px; }
.chat-grav{ background:transparent; box-shadow:none; }
/* botão enviar menor */
.chat-enviar{ width:36px; height:36px; font-size:15px; }
/* lateral: fundo PRETO (não cinza), itens sem bloco cinza */
.conversas, .gaveta{ background:#000; }
.conv-rodape, .conversas-nova{ background:transparent; }
/* linhas de conversa/projeto: PRETO OPACO (cobre o botão "Excluir" vermelho de trás) */
.conv-link, .proj-link{ background:#000; }
.conv-grupo{ background:#000; }
/* conversa ativa: realce escuro discreto (não o bloco azul-claro) + texto branco */
.conv-link.on{ color:var(--texto); background:#1c1f2b; }
.conv-item.sel .conv-link{ background:#1c1f2b; }
/* "Selecionar" branco (não azul) */
.sel-toggle{ color:var(--texto); }
/* barra e botões do modo selecionar: escuros */
.sel-barra, .sel-acoes button{ background:var(--branco); color:var(--texto); }
/* lateral: fonte e largura um pouco menores */
.conv-link{ font-size:13.5px; }
.gaveta-lista a{ font-size:14.5px; }
.gav-sub>summary, .gav-atalhos a{ font-size:14px; }
.conv-grupo, .conversas-sec, .proj-cabec>span{ font-size:11px; }
.conversas-topo{ padding:12px 14px; }
.conversas-logo{ height:24px; }
.conversas-logo-link{ display:flex; align-items:center; }
@media (min-width:900px){ :root{ --sb:260px; } }
/* saudação do chat vazio: V degradê ANTES do texto (mesma linha), sem tile azul */
.chat-vazio-saud-row{ display:flex; align-items:center; justify-content:center; gap:12px; }
.chat-vazio-v{ width:auto; height:46px; border-radius:0; box-shadow:none; margin:0; animation:vazioV .5s ease; }
.chat-vazio-saud{ color:var(--texto); }

/* ---- ajustes 4 (02/07/2026) ---- */
/* CONCLUÍDO / não lido: bolinha BRANCA parada. Só aparece depois que terminou de
   processar (enquanto roda, quem aparece são os três pontinhos abaixo). */
.conv-dot{ flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:#fff; }
.conv-dot::before{ content:none; }
/* conversa EM EXECUÇÃO: três pontinhos BRANCOS "digitando" (igual o Telegram) */
.conv-run{ display:none; flex:0 0 auto; align-items:center; gap:2.5px; margin-right:5px; }
.conv-item.rodando .conv-run{ display:inline-flex; }
.conv-run i{ width:4px; height:4px; border-radius:50%; background:#fff;
  animation:typDot 1.2s infinite ease-in-out both; }
.conv-run i:nth-child(1){ animation-delay:-.24s; }
.conv-run i:nth-child(2){ animation-delay:-.12s; }
@keyframes typDot{ 0%,80%,100%{ opacity:.25; transform:translateY(0); }
  40%{ opacity:1; transform:translateY(-2px); } }

/* ============================================================
   AJUSTES DA LATERAL — COMPUTADOR (02/07/2026)
   Vem por último no arquivo = vence a identidade escura acima.
   Só vale no computador (≥900px); no celular fica como está.
   ============================================================ */
@media (min-width:900px){
  /* "Chats", "Hoje", "Ontem": brancos e um pouco maiores */
  .conv-grupo{ color:var(--texto); font-size:14px; }
  .conversas-sec>span{ color:var(--texto); font-size:14px; }
  /* "Selecionar" menor e discreto, na frente */
  .conversas-sec{ justify-content:flex-start; gap:8px; }
  .conversas-sec>span{ margin-right:2px; }
  .sel-toggle{ margin-left:auto; font-size:10px; padding:1px 3px; }

  /* Busca vira só a lupinha (traços) ao lado de "Chats"; some o campo grande.
     Clicar na lupa (body.busca-on) abre o campo pra digitar. */
  .busca-lupa{ display:flex; }
  .conversas-busca{ display:none; }
  body.busca-on .conversas-busca{ display:block; padding:8px 12px 4px; }
  /* campo compacto e ALINHADO com a linha "Chats" (não sobe nem empurra) */
  body.busca-on .conversas-busca input{ padding:7px 34px 7px 12px; font-size:14px; }
  body.busca-on .busca-x{ right:18px; top:calc(50% + 2px); width:26px; height:26px; font-size:14px; }

  /* Seleção: círculos VAZADOS (sem fundo branco). Marcado = azul. */
  .conv-check{ background:transparent; border-color:var(--suave); }
  .conv-item.sel .conv-check{ background:var(--azul); border-color:var(--azul); }

  /* Lista de chats com mais respiro (estilo ChatGPT): sem linha divisória,
     itens "encaixados" com cantos arredondados, texto mais estreito e negrito,
     mais espaço entre as linhas. */
  .conversas-lista{ padding:6px 6px 10px; }
  .conv-item{ border-bottom:0; margin:2px 0; }
  .conv-link{ padding:10px 12px; border-radius:10px; font-size:14px; font-weight:600; gap:8px; }
  .conv-link.on{ background:#1c1f2b; font-weight:700; }
  .conv-link:hover{ background:#151823; }
  .conv-grupo{ background:#000; padding:14px 12px 6px; }
  /* o botão ⋯ de cada conversa acompanha o novo recuo */
  .conv-menu-btn{ right:10px; }
}

/* lista de chats LIMPA no celular também (sem linhas divisórias) — igual ChatGPT/Claude.
   No computador já não tinha; isto tira a linha que só aparecia no app. */
.conv-item{ border-bottom:0; }
.conv-grupo{ box-shadow:none; }

/* busca abre NO LUGAR do "Chats" (não empurra a tela) — computador E celular */
body.busca-on .conversas-sec{ display:none; }
/* ✕ pra fechar a busca, no fim do campo */
.conversas-busca{ position:relative; }
.conversas-busca input{ padding-right:40px; }
.busca-x{ position:absolute; top:50%; right:20px; transform:translateY(-50%);
  border:0; background:transparent; color:var(--suave); font-size:15px; line-height:1;
  width:30px; height:30px; border-radius:50%; cursor:pointer; display:flex;
  align-items:center; justify-content:center; }
.busca-x:hover{ color:var(--texto); background:var(--acento-fraco); }

/* ===== APP (celular): deixar o menu de chats igual ao computador (Nayan 02/07) =====
   Só < 900px, pra NÃO mexer no computador. */
@media (max-width:899px){
  /* tira o ✕ do topo (fecha tocando no "V" ou fora da gaveta) */
  .conversas-topo .btn-icone{ display:none; }
  /* logo do topo do menu = mesmo tamanho da logo da tela principal (34px) */
  .conversas-logo{ height:34px; }
  /* cabeçalho "Chats": lupa à ESQUERDA, palavra em BRANCO, ⋯ à direita, tudo no mesmo nível */
  .conversas-sec{ justify-content:flex-start; gap:8px; }
  .conversas-sec>span{ color:var(--texto); font-size:15px; }
  /* lupa MAIOR (alvo pro dedo) */
  .busca-lupa{ display:flex; width:44px; height:44px; margin-left:-10px; }
  .busca-lupa svg{ width:24px; height:24px; }
  /* a busca fica ESCONDIDA e só aparece ao tocar na lupa — e aparece NO LUGAR da
     linha "Chats" (some o "Chats" enquanto pesquisa), sem empurrar a tela */
  .conversas-busca{ display:none; }
  body.busca-on .conversas-busca{ display:block; }
  body.busca-on .conversas-sec{ display:none; }
  /* fonte 16px no campo = iOS NÃO dá zoom ao focar (era o "zoom esquisito") */
  .conversas-busca input{ font-size:16px; }
  /* lista: letra maior e mais espaçada, mais limpa */
  .conv-link{ font-size:16px; padding:14px 16px; }
  .conv-grupo{ font-size:12px; padding:14px 16px 6px; }
  .conv-hora{ font-size:11.5px; }
  /* tela principal (chat vazio): SEM o "V" antes do "Boa noite" — só no app */
  .chat-vazio-v{ display:none; }
  /* título "Projetos" do mesmo tamanho do "Chats" */
  .gav-sub>summary{ font-size:15px; }
  /* projetos: nomes maiores e espaçamento igual aos chats; ícone de pasta (sem emoji) */
  .proj-link{ padding:13px 14px; gap:10px; }
  .proj-nome{ font-size:16px; font-weight:600; }
  .proj-ic{ display:flex; align-items:center; color:var(--suave); }
  .proj-ic svg{ width:20px; height:20px; display:block; }
}

/* ============================================================
   BARRA DE DIGITAR EM DUAS LINHAS (texto em cima, funções embaixo,
   estilo Claude). Fica no fim pra vencer as regras anteriores.
   ============================================================ */
.chat-input{ flex-direction:column; align-items:stretch; gap:6px; }
.ci-linha1{ display:flex; align-items:flex-end; min-width:0; }
.ci-linha1 textarea{ flex:1; min-width:0; }
.ci-linha2{ display:flex; align-items:center; gap:6px; padding:0 2px 1px; }
.ci-flex{ flex:1 1 auto; }
/* chips de modelo/esforço */
.ci-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:2px; height:32px;
  padding:0 10px; border-radius:16px; border:1px solid var(--linha); background:transparent;
  color:var(--suave); font-size:13px; font-weight:600; font-family:inherit; cursor:pointer;
  white-space:nowrap; }
.ci-chip:active{ transform:scale(.96); }
.ci-chip .ci-seta{ width:14px; height:14px; opacity:.65; }
/* menu que abre por cima do chip */
.chip-fundo{ display:none; position:fixed; inset:0; z-index:1150; }
.chip-fundo.on{ display:block; }
.chip-menu{ display:none; position:fixed; z-index:1200; min-width:132px; padding:5px;
  background:#15171f; border:1px solid #2a2e3a; border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.55); }
.chip-menu.on{ display:block; }
.chip-menu button{ display:block; width:100%; text-align:left; background:transparent; border:0;
  color:#f3f5f8; font-size:14px; font-family:inherit; padding:9px 12px; border-radius:8px; cursor:pointer; }
.chip-menu button:hover, .chip-menu button.sel{ background:rgba(255,255,255,.07); }

/* X pra cancelar a gravação (só no celular; no computador é o ESC). Aparece ao lado
   do microfone só enquanto grava. Branco (não vermelho). */
.btn-cancel-grav{ display:none; color:#fff; }
.chat-input.grav .btn-cancel-grav{ display:flex; }
@media (min-width:900px){ .btn-cancel-grav{ display:none !important; } }
/* mais respiro: afasta o microfone do enviar e do X de cancelar */
.ci-linha2 #btn-mic{ margin:0 8px; }