/* 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); } }
/* VOLTAR (arrastar da esquerda→direita ou botão ‹): a página atual sai pela DIREITA e a
   de trás entra pela ESQUERDA — sensação de ir "pra trás" acompanhando o dedo. */
html.vt-back::view-transition-old(root){ animation: vt-sai-back .26s cubic-bezier(.3,0,.25,1) both; z-index:2; }
html.vt-back::view-transition-new(root){ animation: vt-entra-back .26s cubic-bezier(.3,0,.25,1) both; z-index:1; }
@keyframes vt-sai-back{ from{ transform:translateX(0); } to{ transform:translateX(100%); } }
@keyframes vt-entra-back{ from{ transform:translateX(-26%); opacity:.55; } to{ transform:translateX(0); opacity:1; } }

: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;overscroll-behavior-x:none}
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}
/* ---- barra do player de leitura (fixa no topo, abaixo do menu do Vértex — tipo ChatGPT) ---- */
.leitor-bar{
  position:fixed; left:8px; right:8px; top:calc(env(safe-area-inset-top,0px) + 46px);
  max-width:744px; margin:0 auto; z-index:40;
  display:none; align-items:center; gap:4px;
  background:var(--branco); border:1px solid var(--linha); border-radius:14px;
  padding:6px 8px; box-shadow:var(--sombra);
}
.leitor-bar.on{display:flex}
.leitor-bar .lp-btn{
  width:36px; height:36px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; color:var(--texto); border-radius:10px; position:relative; cursor:pointer; padding:0;
}
.leitor-bar .lp-btn svg{width:20px; height:20px}
.leitor-bar .lp-seek svg{width:23px; height:23px}
.leitor-bar .lp-seek{color:var(--texto)}
.leitor-bar .lp-btn:active{background:var(--acento-fraco)}
.leitor-bar .lp-pp{width:46px; height:46px}          /* sem fundo — só o ícone, maior que os ±10 */
.leitor-bar .lp-pp svg{width:28px; height:28px}
.leitor-bar .ic-play{display:none}
.leitor-bar.pausado .ic-play{display:block}
.leitor-bar.pausado .ic-pause{display:none}
.leitor-bar .lp-prog{flex:1 1 auto; min-width:24px; height:4px; background:var(--linha); border-radius:3px; overflow:hidden; margin:0 4px}
.leitor-bar .lp-prog-in{height:100%; width:0%; background:linear-gradient(90deg,#5b83ff,#37e6ff); border-radius:3px; transition:width .2s linear}
.leitor-bar .lp-vel{flex:0 0 auto; background:transparent; border:1px solid var(--linha); color:var(--texto); border-radius:999px; padding:5px 10px; font-size:12.5px; font-weight:700; cursor:pointer; min-width:40px}
.leitor-bar .lp-vel:active{background:var(--acento-fraco)}
.leitor-bar .lp-x{color:var(--texto)}
.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}
.topo-esq{display:flex;align-items:center;gap:0}
/* prédinho ao lado do ☰: vai direto pro menu Concreto (que já atualiza sozinho ao abrir) */
.btn-concreto-topo{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#fff}
.btn-concreto-topo svg{width:23px;height:23px}
.btn-concreto-topo:active{opacity:.55}
.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:calc(env(safe-area-inset-top,0px) + 52px);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}
.fer-drop .ga-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.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}
/* Menu ☰ = menuzinho compacto no topo, abaixo do botão (não a gaveta de tela
   inteira) — 05/07/2026. Desktop esconde a .gaveta (usa a lateral fixa). */
.gaveta{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 52px);left:8px;bottom:auto;
  width:auto;min-width:230px;max-width:calc(100% - 16px);z-index:50;
  background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  box-shadow:var(--sombra);padding:6px;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .16s ease,transform .16s ease
}
.gaveta.aberta{opacity:1;transform:none;pointer-events:auto}
.gaveta-topo,.gaveta-nota{display:none}
.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:12px;padding:11px 12px;border-radius:10px;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:var(--acento-fraco)}
.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:4px;margin-bottom:6px}
/* .cartao.indice (0,2,0) vence o .cartao{box-shadow} que vem depois no arquivo:
   sem a sombra deslocada pra baixo, as linhas encostam de verdade na vertical. */
.cartao.indice{margin-bottom:0;padding:10px 12px;box-shadow:none}
.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}
.ic-tile-svg svg{width:23px;height:23px;fill:none;stroke:var(--ac);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.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}
.ic-titulo-svg{display:inline-flex;align-items:center}
.ic-titulo-svg svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.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)}

/* ---------- Concreto: menu em grade (botões enchem a tela, sem rolagem) ---------- */
.concreto-menu{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:12px;
  height:calc(100dvh - env(safe-area-inset-top,0px) - 112px)}
.concreto-menu a{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-align:center;padding:12px 14px;border-radius:18px;background:var(--branco);border:1px solid var(--linha);
  box-shadow:var(--sombra);color:var(--texto);font-family:'Space Grotesk';font-weight:700;font-size:17px;line-height:1.2}
.concreto-menu a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--azul),#39d0e6)}
.concreto-menu a:active{transform:scale(.97);border-color:var(--azul)}
.concreto-menu .cm-sub{font-family:Inter,sans-serif;font-weight:600;font-size:12.5px;color:var(--suave)}
.h1-sub{font-family:Inter,sans-serif;font-weight:600;font-size:14px;color:var(--suave)}
/* bolinha de pendências no alto/direita do botão (paleta azul→ciano, nunca vermelho) */
.conc-badge{position:absolute;top:8px;right:8px;min-width:22px;height:22px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;gap:3px;border-radius:999px;
  background:linear-gradient(135deg,var(--azul),#39d0e6);color:#0b0e14;
  font-family:Inter,sans-serif;font-weight:800;font-size:12.5px;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.5)}
/* estado "atualizando": 3 pontinhos passando dentro da bolinha de degradê */
.conc-badge.carregando i{width:4px;height:4px;border-radius:50%;background:#0b0e14;display:inline-block;
  animation:conc-dot 1s infinite ease-in-out}
.conc-badge.carregando i:nth-child(2){animation-delay:.16s}
.conc-badge.carregando i:nth-child(3){animation-delay:.32s}
@keyframes conc-dot{0%,80%,100%{opacity:.25;transform:translateY(0)} 40%{opacity:1;transform:translateY(-2px)}}
@media (min-width:900px) and (min-height:501px){ .app-so{display:none !important} }
/* prédinho ao lado do ☰ da barra lateral — SÓ no computador (no app já tem no topo) */
.conc-topo-pc{display:none}
@media (min-width:900px) and (min-height:501px){
  .conversas-topo .conc-topo-pc{display:flex;position:absolute;left:46px;top:50%;transform:translateY(-50%);
    width:38px;height:38px;align-items:center;justify-content:center;color:#fff;z-index:7}
  .conversas-topo .conc-topo-pc svg{width:22px;height:22px}
  .conversas-topo .conc-topo-pc:active{opacity:.6}
}
/* "Projetos" centralizado verticalmente entre as duas linhas (padding simétrico) */
.proj-wrap .gav-sub>summary{padding-top:8px;padding-bottom:8px}
/* cabeçalho da seção com o botão de voltar pro menu */
.cabec-concreto h1{flex:1;font-size:20px}
.voltar-concreto{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;background:var(--branco);border:1px solid var(--linha);
  box-shadow:var(--sombra);color:var(--azul);font-size:23px;font-weight:700;line-height:1}
.voltar-concreto:active{transform:scale(.94)}

/* ---------- 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(0,0,0,.4);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) — fundo preto
   (identidade escura), não mais o azul antigo */
/* will-change/translateZ jogam a animação pro COMPOSITOR (GPU): assim o V continua
   pulsando mesmo enquanto a página nova está carregando (o iOS pausa a thread
   principal na troca de tela — era isso que travava o V em telas mais lentas, como
   Informações). */
.spinner{width:66px;height:66px;background:transparent;animation:respira 1.15s ease-in-out infinite;
  will-change:transform,opacity;transform:translateZ(0)}
.spinner img{width:100%;height:100%;object-fit:contain;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) + var(--barra-h,110px) + 40px)}
/* 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), (min-width:900px) and (max-height:500px){
  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) — foto e PDF, com pinça/arrastar */
.lightbox,.pdfview{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.94);display:none}
.pdfview{z-index:3200;background:rgba(10,12,16,.98)}
.lightbox.on,.pdfview.on{display:block}
.lb-stage,.pdf-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
#lightbox-img{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;-webkit-user-drag:none;border-radius:2px}
.pdf-col{position:absolute;left:0;top:0;width:100%;transform-origin:0 0;will-change:transform;display:flex;flex-direction:column;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 14px) 0 10px;box-sizing:border-box}
/* PDF do chat: rolagem NATIVA (inércia do próprio iOS, sem travar). O contêiner
   rola de verdade; a pinça/zoom aplica transform só quando ampliado. */
#pdf-stage{overflow:hidden auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:auto}
#pdf-col{position:relative;left:auto;top:auto;transform-origin:0 0;will-change:auto}
.pdf-col canvas{display:block;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.5);max-width:100%}
.pdf-col img.pdf-pg{display:block;width:100%;border:0;border-radius:0;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.5)}
.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;z-index:3}
.lb-bar{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;gap:10px;justify-content:center;z-index:3;pointer-events:none}
.lb-btn{pointer-events:auto;height:44px;padding:0 18px;border:0;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:7px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb-btn svg{width:17px;height:17px}
.pdf-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));z-index:3}
.pdf-top .lightbox-x{position:static}
.pdf-nome{flex:1;min-width:0;color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.pdf-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#cfd6e2;font-size:14px;z-index:2;padding:0 24px;text-align:center}
.pdfview.pronto .pdf-load{display:none}
.pdf-top,.lb-bar{transition:opacity .18s ease}
.pdfview.limpo .pdf-top,.pdfview.limpo .lb-bar{opacity:0;pointer-events:none}
.pdfview.limpo .lb-btn{pointer-events:none}
.lightbox .lightbox-x{transition:opacity .18s ease}
.lightbox.limpo .lightbox-x,.lightbox.limpo .lb-bar{opacity:0;pointer-events:none}
.lightbox.limpo .lb-btn{pointer-events:none}
.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.ba-carregando{color:var(--roxo)}
.ba-btn.ba-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}
/* "Projetos" com a MESMA cara do rótulo "Chats": maiúsculo, pequeno, cinza (suave) */
.gav-sub>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 14px 4px;font-weight:700;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--suave);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;border-radius:50%;display:flex;align-items:center;justify-content:center}
.tray-status.up{left:-6px;bottom:-6px;width:18px;height:18px;background:#fff;box-shadow:0 1px 5px rgba(20,24,92,.25)}
.tray-status.ok{left:-3px;bottom:-3px;width:9px;height:9px;background:var(--ok);border:1.5px solid var(--fundo);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.tray-status.err{left:-3px;bottom:-3px;width:9px;height:9px;background:var(--aviso);border:1.5px solid var(--fundo);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.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}
/* SÓ NO APP (celular): durante a gravação o enviar CONTINUA aparecendo, ao lado do
   X e do mic. Mic = para e transcreve pra revisar; Enviar = transcreve e manda já.
   No computador (≥900px) nada muda: o enviar segue sumindo durante a gravação. */
.chat-input.grav .chat-enviar{display:flex;align-items:center;justify-content:center}
@media (min-width:900px) and (min-height:501px){ .chat-input.grav .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;justify-content:center;gap:2px;height:26px;width:100%;overflow:hidden}
.chat-input.transc .cg-onda{display:none}
.cg-onda i{flex:0 0 auto;width:3px;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)}
/* marca discreta "arquivado" no menu de mover (projetos arquivados também aparecem) */
.pop-arqtag{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--suave);
  background:var(--acento-fraco);padding:2px 7px;border-radius:999px;letter-spacing:.2px}
.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)}
/* ações de arrastar (celular): Fixar · Renomear · Arquivar · Excluir — as MESMAS
   do ⋯ do computador. ESCONDIDAS até arrastar o item pro lado. */
.conv-acoes{position:absolute;top:0;right:0;bottom:0;display:none;z-index:2}
.conv-item.aberto .conv-acoes{display:flex}
.conv-abtn{flex:0 0 52px;width:52px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#fff;font-size:9.5px;font-weight:600;font-family:inherit;line-height:1;cursor:pointer;padding:0}
.conv-abtn svg{width:15px;height:15px;display:block;stroke:currentColor}
.conv-abtn:active{filter:brightness(.92)}
.conv-fix{background:var(--azul)}
.conv-ren{background:#6b7280}
.conv-arq{background:#4b5563}
.conv-del2{background:var(--erro)}
.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-link.has-trecho{flex-wrap:wrap;align-items:flex-start}
.conv-trecho{flex-basis:100%;width:100%;margin-top:4px;font-size:12px;font-weight:400;line-height:1.45;color:var(--suave);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.conv-trecho b{font-weight:700;color:var(--texto)}
.conv-link.on .conv-trecho b{color:var(--azul)}
.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(-208px)}
.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(--suave);border-radius:50%;background:transparent;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(--texto);border-color:var(--linha)}

/* ---------- 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:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Layout FLEX: o nome fica sempre visível (trunca), e ao arrastar os botões entram
   pela direita ocupando o espaço — o nome NÃO some inteiro. */
/* flex:0 0 auto = item NÃO encolhe. Sem isso, ao abrir os filhos a lista passa do
   max-height e o flex espreme cada linha, um nome por cima do outro. */
.proj-item{position:relative;overflow:hidden;display:flex;align-items:stretch;background:var(--branco);flex:0 0 auto}
.proj-link{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;padding:10px 14px;background:#fff}
.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}
/* fixado = bolinha branca pequena e discreta à ESQUERDA do nome (liga/desliga só com
   a classe .fixado, sem mexer no DOM) */
.proj-item.fixado .proj-nome::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:7px;vertical-align:middle;flex:0 0 auto}
/* PROJETO PAI / FILHOS: o pai ganha uma setinha (›) que abre/fecha os filhos, que
   aparecem recolhidos logo abaixo. Só some/aparece na lista principal (#proj-lista);
   nos fixados/busca o filho aparece normal (flat). Estado aberto = .filhos-abertos
   (NÃO reusar .aberto, que é o swipe das ações). */
.proj-toggle{flex:0 0 24px;width:24px;border:0;background:transparent;-webkit-appearance:none;appearance:none;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.proj-toggle svg{width:15px;height:15px;transition:transform .15s ease}
.filhos-abertos>.proj-toggle svg{transform:rotate(90deg)}
/* espaçador do mesmo tamanho da setinha nos projetos SEM filho, pra o nome alinhar
   com os que têm setinha (senão o pai fica mais pra dentro que o solto) */
.proj-gutter{flex:0 0 24px;width:24px}
.proj-cont{flex:0 0 auto;font-size:11px;font-weight:700;opacity:.55;padding-left:6px}
/* filho recolhido: some da lista principal até o pai abrir; leve indent pra nesting */
#proj-lista .proj-filho{display:none;padding-left:16px}
#proj-lista .proj-filho.mostra{display:flex}
/* nos fixados a setinha não funciona (some), mas mantém o espaço p/ alinhar */
#proj-fixados .proj-toggle{visibility:hidden}
#proj-busca-res .proj-toggle{display:none}
/* filho: Fixar + Excluir na faixa de swipe (sem Arquivar — quem arquiva é o pai) */
.proj-item.aberto .proj-acoes.proj-acoes-filho{width:104px}
/* botões que aparecem ao arrastar pro lado: Arquivar · Fixar · Excluir. Menores;
   só o Excluir é vermelho, os outros na paleta. Fechados = largura 0 (escondidos). */
.proj-acoes{flex:0 0 auto;width:0;overflow:hidden;display:flex;transition:width .2s ease}
.proj-item.aberto .proj-acoes{width:156px}
.proj-abtn{flex:0 0 52px;width:52px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#fff;font-size:9.5px;font-weight:600;font-family:inherit;line-height:1;cursor:pointer;padding:0}
.proj-abtn svg{width:15px;height:15px;display:block;stroke:currentColor}
.proj-abtn:active{filter:brightness(.92)}
.proj-arq{background:#5b6472}
.proj-fix{background:var(--azul)}
.proj-del{background:var(--erro)}
/* strip dos fixados: aparece com a lista de Projetos MINIMIZADA; some quando ela abre
   (lá os fixados já vêm no topo) ou quando não há fixado */
.proj-fixados{background:#f3f5fb}
/* dentro do bloco de projetos as linhas internas ficam finas; o separador GROSSO é só
   no fim (proj-wrap), pra não empilhar duas linhas coladas */
.proj-wrap .gav-sub{border-bottom:0}
/* o .gav-sub[open] genérico tem teto de 46vh — aqui NÃO vale: quem manda na altura
   (e na rolagem) é a .proj-lista, senão sobra um corte no meio da tela e dois scrolls. */
.proj-wrap .gav-sub[open]{max-height:none;overflow:visible}
.proj-fixados:empty{display:none}
.gav-sub[open] ~ .proj-fixados{display:none}
/* "Arquivados" (dentro do bloco de Projetos) + lista que abre/fecha */
.proj-arqlink{display:block;width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  color:var(--suave);font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 14px 4px}
.proj-arqlink.on{color:var(--azul)}
.proj-arqlista{display:none}
/* arquivados DISCRETOS: sem fundo destacado, nomes esmaecidos (cinza), nada que chame atenção */
.proj-arqlista.on{display:block;padding:2px 14px 8px}
.proj-arqitem{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--linha)}
/* filho arquivado: recolhido até abrir a setinha do pai; indent pra mostrar o nesting */
#proj-arqlista .arq-filho{display:none;padding-left:16px}
#proj-arqlista .arq-filho.mostra{display:flex}
#proj-arqlista .proj-toggle{flex:0 0 20px;width:20px;color:var(--texto)}
#proj-arqlista .proj-gutter{flex:0 0 20px;width:20px}
.proj-arqnome{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px;font-weight:600;color:var(--texto);text-decoration:none}
.proj-desarq{flex:0 0 auto;border:0;background:#e7e9ee;color:#556;font-weight:600;font-size:12px;padding:5px 10px;border-radius:999px;cursor:pointer;font-family:inherit}
.proj-desarq:active{transform:scale(.95)}
/* lupa NO LUGAR da pastinha (à esquerda de "Projetos") — igual à lupa dos Chats:
   cinza (suave), mesmo tamanho */
.proj-lupa{flex:0 0 auto;width:24px;height:24px;border:0;background:transparent;color:var(--suave);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px}
.proj-lupa svg{width:16px;height:16px;display:block;stroke:currentColor}
.proj-lupa:active{transform:scale(.9)}
/* botão de arquivados, à direita do ＋ (some da lista lá de baixo) */
.proj-arqbtn{flex:0 0 auto;border:0;background:transparent;color:var(--suave);cursor:pointer;padding:0;margin-left:2px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.proj-arqbtn svg{width:17px;height:17px;display:block;stroke:currentColor}
.proj-arqbtn:active{transform:scale(.9)}
.proj-arqbtn.on{color:#fff}
/* caixa de busca de projetos (abre pela lupa) + resultados */
/* busca abre POR CIMA da linha "Projetos" (overlay), igual a busca dos chats.
   font-size 16px = iOS NÃO dá zoom ao focar. */
/* caixa de busca de projeto IDÊNTICA à dos chats: input largura cheia, ✕ DENTRO do
   campo (não fora), mesmo fundo/raio. Abre por cima da linha "Projetos" (overlay). */
.proj-wrap{position:relative}
.proj-busca{display:none;position:absolute;top:0;left:0;right:0;z-index:6;padding:10px 14px 6px;background:var(--branco);border-bottom:1px solid var(--linha)}
body.proj-busca-on .proj-busca{display:block}
.proj-busca input{width:100%;padding:10px 14px;padding-right:40px;border:1px solid var(--linha);border-radius:12px;font-size:16px;font-family:inherit;background:#fbfcff;color:inherit}
.proj-busca input:focus{outline:none;border-color:var(--roxo)}
.proj-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}
.proj-busca-x:hover{color:var(--texto);background:var(--acento-fraco)}
.proj-busca-res{display:none;border-bottom:1px solid var(--linha)}
.proj-busca-res.on{display:block}
.proj-busca-item{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--linha);text-decoration:none;color:inherit}
.pbi-nome{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:14.5px}
.pbi-arq{flex:0 0 auto;font-size:10.5px;font-weight:600;color:var(--suave);background:var(--acento-fraco);border-radius:999px;padding:2px 8px}
.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) and (min-height:501px){ 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}
/* ⋯ de cada projeto — idem: some no celular (lá o gesto é arrastar pro lado) */
.proj-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) and (min-height:501px){
  :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); }

  /* ⋯ em cada PROJETO (passar o mouse) → menuzinho com Arquivar / Fixar / Excluir */
  .proj-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:var(--branco); color:var(--suave); font-size:19px; line-height:1;
  }
  .proj-item:hover .proj-menu-btn, .proj-item.menu-on .proj-menu-btn{ display:flex; }
  .proj-menu-btn:hover{ background:var(--acento-fraco); color:var(--azul); }
  /* menu aberto: a mesma faixa de 3 botões vira um balãozinho flutuante (posição via JS) */
  .proj-item.menu-on{ overflow:visible; }
  .proj-item.menu-on .proj-acoes{
    width:auto; min-width:152px; overflow:visible; flex-direction:column;
    background:var(--branco); border:1px solid var(--linha); border-radius:12px;
    box-shadow:0 12px 34px rgba(0,0,0,.5); padding:5px; z-index:1200;
  }
  .proj-item.menu-on .proj-abtn{
    flex:0 0 auto; width:100%; flex-direction:row; justify-content:flex-start; gap:9px;
    background:none; color:var(--texto); font-size:13.5px; font-weight:600;
    padding:8px 10px; border-radius:7px; text-align:left;
  }
  .proj-item.menu-on .proj-abtn svg{ width:16px; height:16px; }
  .proj-item.menu-on .proj-abtn:hover{ background:var(--acento-fraco); }
  .proj-item.menu-on .proj-del{ color:var(--erro); }
  .proj-item.menu-on .proj-del:hover{ background:rgba(255,91,77,.12); }

  /* 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,
.proj-busca 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,
.proj-desarq{
  background:var(--acento-fraco); }
.proj-bloco, .proj-sobre, .proj-config, .proj-pg-lista li, .proj-fixados,
.proj-busca-res, .proj-busca-item{ background:#0e1017; }
.proj-desarq{ color:var(--suave); }
/* textos navy escuros -> branco (o summary de Projetos fica CINZA como o "Chats") */
.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, .proj-busca input:focus{ border-color:var(--linha); box-shadow:none; outline:none; }
/* separador entre PROJETOS e CHATS — MESMO padrão de linha do atalho Concreto */
.proj-wrap{ border-bottom:1px solid var(--linha); }
/* 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, .proj-item{ background:#000; }
.conv-grupo{ background:#000; }
/* rolagem: cabeçalho "Chats" e lista em preto sólido, e a data encosta no topo
   (sem faixa/fantasma de linha entre "Chats" e "Ontem" ao rolar) */
.conversas-sec{ background:#000; }
.conversas-lista{ background:#000; padding-top:0; }
/* 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-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) and (min-height:501px){ :root{ --sb:350px; } }  /* nome dos chats não corta (260→307→325→350) */
/* 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 parada na COR MAIS CLARA do V (ciano). 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:8.5px; height:8.5px; border-radius:50%;
  background:#19d8cc; margin-right:5px; }
.conv-dot::before{ content:none; }
/* enquanto está processando, quem manda são os três pontinhos: nunca mostrar a
   bolinha de concluído junto (mesmo que tenha sobrado do ciclo anterior). */
.conv-item.rodando .conv-dot{ display:none; }
/* PUXAR-PRA-ATUALIZAR (celular): três pontinhos passando no topo da lista enquanto
   atualiza (mesmo degradê do "digitando"). Altura controlada pelo JS. */
.ptr{ height:0; overflow:hidden; display:flex; align-items:center; justify-content:center;
  gap:4px; flex:0 0 auto; }
.ptr i{ width:5px; height:5px; border-radius:50%; background:#2b57ef;
  animation:typDot 1.2s infinite ease-in-out both; }
.ptr i:nth-child(1){ animation-delay:-.24s; background:#2b57ef; }
.ptr i:nth-child(2){ animation-delay:-.12s; background:#2497dd; }
.ptr i:nth-child(3){ background:#19d8cc; }
/* conversa EM EXECUÇÃO: três pontinhos "digitando" no DEGRADÊ do V entre si
   (1º mais escuro → 3º puxando pro ciano). */
.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:#2b57ef;
  animation:typDot 1.2s infinite ease-in-out both; }
.conv-run i:nth-child(1){ animation-delay:-.24s; background:#2b57ef; }
.conv-run i:nth-child(2){ animation-delay:-.12s; background:#2497dd; }
.conv-run i:nth-child(3){ background:#19d8cc; }
@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) and (min-height:501px){
  /* "Chats", "Hoje", "Ontem": brancos e um pouco maiores */
  .conv-grupo{ color:var(--texto); font-size:14px; }
  .conversas-sec>span, .gav-sub .gs-lbl{ 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. */
  /* topo SEM respiro: a data ("Ontem") encosta no topo da rolagem e cobre os chats
     com preto sólido — sem faixa/fantasma entre "Chats"/lupa e a data ao rolar.
     O respiro do topo fica dentro da própria faixa preta da data (padding do .conv-grupo). */
  .conversas-lista{ padding:0 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; }

/* ícones modernos (SVG), no lugar de emoji, nos botões de ação e no modo selecionar */
.sel-acoes button svg{ width:15px; height:15px; vertical-align:-3px; margin-right:6px; }
.acao-btn svg{ width:20px; height:20px; vertical-align:-4px; margin-right:10px; }
.proj-del svg{ width:16px; height:16px; flex:0 0 auto; }

/* 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), (min-width:900px) and (max-height:500px){
  /* 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, .gav-sub .gs-lbl{ color:var(--texto); font-size:15px; }
  /* lupa MAIOR (alvo pro dedo) — Projetos usa o MESMO tamanho da lupa dos Chats */
  .busca-lupa, .proj-lupa{ display:flex; width:44px; height:44px; margin-left:-10px; }
  .busca-lupa svg, .proj-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) and (min-height:501px){ .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; }
/* SÓ NO APP: durante a gravação some os chips de modelo/esforço pra dar folga aos
   três botões (X, mic, enviar). No computador (≥900px) os chips continuam. */
.chat-input.grav .ci-chip{ display:none; }
/* SÓ NO APP, gravando: some o "+" também e deixa X, mic e enviar UNIFORMEMENTE
   espaçados (mesmo gap entre os três; sem a margem extra do mic). */
@media (max-width:899px), (min-width:900px) and (max-height:500px){
  .chat-input.grav #btn-anexo{ display:none; }
  .chat-input.grav .ci-linha2{ gap:16px; }
  .chat-input.grav #btn-mic{ margin:0; }
  /* um respiro a mais antes do enviar (botão cheio "pesa" mais e parece colado) */
  .chat-input.grav .chat-enviar{ margin-left:6px; }
}
@media (min-width:900px) and (min-height:501px){ .chat-input.grav .ci-chip{ display:inline-flex; } }

/* Uso do Claude — linha resumida no topo do "Agora" (tela Informações) */
.uso-claude{display:block;padding:12px 16px;margin:0 0 12px;border:1px solid var(--linha);
  border-radius:20px;background:var(--branco);box-shadow:var(--sombra);
  font-size:.88rem;color:var(--suave)}
.uso-claude .uso-l1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.uso-claude .uso-nome{display:flex;align-items:center;gap:8px}
.uso-claude .uso-logo{width:20px;height:20px;flex:0 0 auto;object-fit:contain}
.uso-claude .uso-tit{font-weight:700;color:var(--texto);font-size:1rem}
.uso-claude .uso-5h{margin-left:auto;white-space:nowrap}
.uso-claude .uso-l2{line-height:1.4;text-align:right;white-space:nowrap}
.uso-claude .uso-l3{text-align:right;font-size:.75rem;opacity:.6;margin-top:2px}
.uso-claude b{color:var(--texto);font-weight:700}
.uso-claude i{font-style:normal;opacity:.75;white-space:nowrap}
/* no celular a caixa é mais estreita: encolhe um tico a fonte e a margem lateral
   pra a "Renova HH:MM" caber na MESMA linha (não pular pra linha de baixo) */
@media (max-width:560px){
  .uso-claude{padding:11px 12px}
  .uso-claude .uso-l1{gap:8px}
  .uso-claude .uso-5h,.uso-claude .uso-l2{font-size:.8rem}
}
.indice-ic .ic-moeda{width:18px;height:18px;object-fit:contain;display:block}

/* Ícones SVG limpos no menu Assuntos (no lugar de emoji) — seguem a cor do texto
   (branco; azul quando o item está ativo). */
.gaveta-lista a .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto}

/* ===== Concreto > Ajustes (Ajuste de Pedidos — ciência da diretoria) =====
   Nayan marca de VERMELHO o que NÃO é pra aprovar (pedido dele em 06/07/2026 —
   exceção consciente à regra "sem vermelho"; o vermelho aqui É a informação). */
.aj-grupo{margin:18px 0 6px}
.aj-alianca{font-family:'Space Grotesk';font-size:19px;margin:14px 0 2px;
  padding-bottom:6px;border-bottom:2px solid var(--acento-fraco)}
.aj-alianca-qtd{display:block;font-family:Inter;font-size:12.5px;color:var(--suave);font-weight:400;margin-top:2px}
.aj-tipo{font-size:14.5px;color:var(--azul2);margin:14px 0 8px}
.aj-tipo span{color:var(--suave);font-weight:400}
.aj-item{background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  padding:10px 12px;margin-bottom:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.aj-item .aj-l1{display:flex;align-items:baseline;gap:10px}
.aj-num{font-weight:700;color:var(--azul2);font-size:15.5px}
.aj-vlr{font-weight:700;font-size:15.5px}
.aj-sit{margin-left:auto;font-size:11.5px;color:var(--suave);background:var(--acento-fraco);
  border-radius:8px;padding:2px 8px;white-space:nowrap}
.aj-cli{font-size:13px;color:var(--texto);margin-top:3px}
.aj-mot{font-size:12.5px;color:var(--suave);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* marcado = NÃO dar ciência (fica pendente pro Nayan) */
.aj-item.aj-reter{background:#2a0f0f;border-color:#e5484d}
.aj-item.aj-reter .aj-num,.aj-item.aj-reter .aj-vlr{color:#ff8b8b}
.aj-item.aj-reter .aj-sit{background:#3d1414;color:#ff8b8b}
.aj-vermelho{color:#e5484d;font-weight:700}
.aj-barra{position:sticky;bottom:0;background:var(--fundo);padding:10px 0 14px;
  border-top:1px solid var(--linha);margin-top:16px;text-align:center}
.aj-info{font-size:12.5px;color:var(--suave);margin-bottom:8px}
.aj-btn{width:100%;font-size:16px;padding:13px}
.aj-btn:disabled{opacity:.55}

/* ficha do ajuste (apertar e segurar / botão direito) */
.aj-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.aj-vlr.aj-pos{color:var(--ok)}
.aj-fundo{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:80;
  display:flex;align-items:flex-end;justify-content:center}
.aj-ficha{background:var(--branco);border:1px solid var(--linha);width:100%;
  max-height:82vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:16px 18px 26px}
@media (min-width:900px) and (min-height:501px){
  .aj-fundo{align-items:center}
  .aj-ficha{max-width:560px;border-radius:20px}
}
.aj-ficha-topo{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;gap:10px}
.aj-ficha-topo b{font-family:'Space Grotesk';font-size:16.5px}
#ajf-fechar{background:var(--acento-fraco);color:var(--texto);border:0;border-radius:10px;
  width:34px;height:34px;font-size:20px;line-height:1;cursor:pointer;flex:none}
.ajf-vlr{font-size:22px;font-weight:800;margin:2px 0 12px}
.ajf-vlr small{font-size:12px;color:var(--suave);font-weight:600;
  background:var(--acento-fraco);border-radius:8px;padding:3px 8px;margin-left:8px;vertical-align:2px}
.ajf-vlr.aj-pos{color:var(--ok)}
.ajf-l{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid var(--linha);font-size:13.5px}
.ajf-l span{color:var(--suave);flex:none}
.ajf-l b{font-weight:600;text-align:right}
.ajf-bloco{margin-top:14px}
.ajf-bloco>span{color:var(--suave);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}
.ajf-bloco p{margin:6px 0 0;font-size:14px;line-height:1.45;white-space:pre-wrap}
.ajf-aba-l{padding:8px 0;border-bottom:1px solid var(--linha)}
.ajf-aba-l b{display:block;font-size:13.5px}
.ajf-aba-l i{font-style:normal;color:var(--azul2);font-size:13px}
.ajf-aba-l small{display:block;color:var(--suave);font-size:12px;margin-top:2px}

/* CORREÇÃO 06/07: o display:flex acima atropelava o atributo hidden e a ficha
   nascia aberta cobrindo a tela ("Carregando…" preso). hidden manda. */
.aj-fundo[hidden]{display:none !important}

/* nomes das alianças em MAIÚSCULAS e letra maior (Nayan, 06/07) */
.aj-alianca{text-transform:uppercase;font-size:23px;letter-spacing:.5px}

/* aba da ficha em tabelinha compacta (De → Para) */
.ajf-tab{width:100%;border-collapse:collapse;margin-top:6px}
.ajf-tab th{font-size:10.5px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.5px;text-align:right;padding:2px 4px 4px;font-weight:600}
.ajf-tab td{border-top:1px solid var(--linha);padding:8px 4px;font-size:12.5px;vertical-align:top}
.ajf-tab td+td{text-align:right;white-space:nowrap;color:var(--azul2);font-weight:700}
.ajf-tab td.ajf-t{font-weight:600;padding-right:8px}
.ajf-tab td.ajf-t small{display:block;color:var(--suave);font-weight:400;
  font-size:10.5px;line-height:1.35;margin-top:2px}

/* "Para" pior que o "De" (cobrança/quantidade caiu) = vermelho, pedido do Nayan */
.ajf-tab td.ajf-pior{color:#ff6b6b !important}

/* ===== Concreto > Aprovação de ajustes (decisão do Nayan) =====
   Classes "apr-" (NÃO "ap-": .ap-item já existia como item de menu flex e
   deitou os cartões — bug de 06/07/2026). */
.abas-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.abas-rolagem::-webkit-scrollbar{display:none}
.abas-rolagem .aba{flex:none;white-space:nowrap}
.apr-item{background:var(--branco);border:1px solid var(--linha);border-radius:16px;
  padding:12px 14px;margin-bottom:14px}
.apr-item .ajf-l{font-size:13px}
.apr-acoes{display:flex;gap:10px;margin-top:12px}
.apr-btn{flex:1;padding:11px;border-radius:12px;font-size:14.5px;font-weight:700;
  border:1px solid var(--linha);background:var(--acento-fraco);color:var(--texto);cursor:pointer}
.apr-btn.apr-aprovar.on{background:#0f3d24;border-color:var(--ok);color:#6fe3a1}
.apr-btn.apr-reprovar.on{background:#3d1414;border-color:#e5484d;color:#ff8b8b}
/* ---- Limite de Crédito ---- */
.lim-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.lim-cli{font-size:15px;font-weight:700;line-height:1.25}
.lim-cli small{display:block;margin-top:2px;color:var(--suave);font-size:12px;font-weight:400}
.lim-valor{text-align:right;font-size:16.5px;font-weight:800;white-space:nowrap}
.lim-valor small{display:block;margin-top:2px;color:var(--suave);font-size:11.5px;font-weight:400}
.lim-meta{margin-top:8px;font-size:13px}
.lim-meta small{color:var(--suave);font-size:12px}
.lim-par{margin-top:10px;padding:9px 11px;background:var(--acento-fraco);border-radius:12px}
.lim-par-cab{color:var(--suave);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.lim-par-cab b{font-size:12px}
.lim-par-cab small{text-transform:none;letter-spacing:0;font-size:11.5px}
.lim-par p{margin:5px 0 0;font-size:13.5px;line-height:1.45;white-space:pre-wrap}
.lim-ok{color:#6fe3a1}
.lim-neg{color:#ff8b8b}
.lim-nums{display:flex;gap:8px;margin-top:12px}
.lim-nums>div{flex:1;background:var(--acento-fraco);border-radius:12px;padding:8px 10px;min-width:0}
.lim-nums span{display:block;color:var(--suave);font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.lim-nums b{display:block;margin-top:3px;font-size:12.5px;overflow-wrap:break-word}
.lim-nums b small{color:var(--suave);font-weight:400}
.lim-qtd{font-family:Inter;font-size:12.5px;color:var(--suave);font-weight:400;
  text-transform:none;letter-spacing:0}

/* Ajustes de Centro de Resultado — os dois quadros de rateio (atual × novo) */
.acr-rats{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.acr-rat{flex:1;min-width:260px;background:var(--acento-fraco);border-radius:12px;padding:8px 10px}
.acr-cab{color:var(--suave);font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.acr-cab b{float:right;font-size:12px;color:var(--texto);text-transform:none;letter-spacing:0}
.acr-rat table{width:100%;border-collapse:collapse;margin-top:5px}
.acr-rat td{padding:3px 4px 3px 0;font-size:12.5px;vertical-align:top}
.acr-rat td small{color:var(--suave)}
.acr-cod{color:var(--suave);white-space:nowrap;width:1%}
.acr-perc{color:var(--suave);white-space:nowrap;text-align:right}
.acr-vlr{text-align:right;font-weight:700;white-space:nowrap;width:1%;padding-right:0}

/* Centro de Resultado Detalhamento no cartão da lista (Ciência de ajustes) */
.aj-cr{font-size:12px;color:var(--aviso);margin-top:2px;font-weight:600}

/* retoques da Aprovação (Nayan 06/07): balão do tipo encostado à direita,
   nº e valor mais afastados, botões com respiro do motivo */
.apr-item .aj-l1{display:flex;align-items:baseline;gap:18px}
.apr-item .aj-sit{margin-left:auto}
.apr-acoes{margin-top:30px;padding-top:14px;border-top:1px solid var(--linha)}

/* ===== Concreto > Compra de MCC (ciência da diretoria nos preços) =====
   Agrupado por aliança (mesmo título grande dos ajustes). Cartão enxuto,
   sem rótulos (Nayan conhece a tela de cor — pedido dele, 07/07/2026).
   Histórico inteiro, mais recente primeiro; a rolagem mostra ~4 preços.
   A ciência (e o VERMELHO de "não aprovar") é POR LINHA DE PREÇO. */
.mcc-item{cursor:default;padding:12px 14px}
.mcc-forn{font-weight:700;font-size:17px;letter-spacing:.2px}
/* balãozinho Ativo/Inativo no canto da linha do fornecedor — ativo discreto,
   inativo num vermelho contido (pedido do Nayan 07/07/2026) */
.mcc-atv{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--suave);
  background:var(--acento-fraco);border-radius:8px;padding:2px 8px;white-space:nowrap}
.mcc-atv.mcc-inatv{color:#ff8b8b;background:#3d1414}
/* produto com cara própria (código entre parênteses): tom azul, espaçado,
   pra não confundir com o fornecedor — retoque do Nayan 07/07/2026 */
.mcc-prod{font-size:14px;font-weight:600;color:var(--azul2);margin-top:14px;
  letter-spacing:.3px}
/* prazo · CIF · filial à esquerda; tipo do pedido no cantinho da mesma linha */
.mcc-sub{font-size:12.5px;color:var(--suave);margin-top:6px;
  display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.mcc-tipo{font-size:11.5px;white-space:nowrap}
.mcc-fil{font-style:normal;font-size:11px}
/* contagem "(2)" na frente do nome da aliança, na MESMA linha, grafia pequena
   (classe própria: a .aj-alianca-qtd é display:block e jogava pra linha de baixo) */
.mcc-qtd{display:inline;font-family:Inter;font-size:12.5px;font-weight:400;
  color:var(--suave);letter-spacing:0;text-transform:none;vertical-align:3px}
.mcc-rolagem{max-height:196px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin-top:7px;border-bottom:1px solid var(--linha)}
.mcc-tab td{font-size:13.5px;padding:10px 4px}
.mcc-tab td.ajf-t{font-size:13.5px}
.mcc-tab td.mcc-ci{font-size:12px}
.mcc-tab th{position:sticky;top:0;background:var(--branco);z-index:1}
.mcc-tab th:first-child{text-align:left}
.mcc-tab td.mcc-ci{color:var(--suave);font-weight:500;font-size:11.5px}
.mcc-chip{font-style:normal;font-weight:700;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--azul2);background:var(--acento-fraco);
  border-radius:8px;padding:2px 7px}
.mcc-linha{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mcc-tab tr.mcc-pend td{background:var(--acento-fraco)}
/* linha marcada = NÃO dar ciência (fica pendente no sistema) */
.mcc-tab tr.mcc-reter td{background:#3d1414;color:#ff8b8b}
.mcc-tab tr.mcc-reter td.ajf-t,.mcc-tab tr.mcc-reter td+td{color:#ff8b8b}
.mcc-tab tr.mcc-reter td.ajf-t small{color:#ff8b8b;opacity:.75}
.mcc-tab tr.mcc-reter .mcc-chip{color:#ff8b8b;background:#2a0f0f}

/* ---- Frete de MCC (aba da tela Concreto): seleção POR COTAÇÃO ---- */
.fr-qtd{color:var(--suave);font-weight:400;font-size:12px;font-family:Inter;
  letter-spacing:0;text-transform:none}
.frete-item .aj-l1{gap:8px;margin-bottom:6px}
.fr-prod{font-weight:600;font-size:13px;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.frete-item .aj-sit{flex:none}
.aj-sit.fr-inativo{background:#2a1212;color:#d98080;font-weight:700}
.frete-item .ajf-l{font-size:12.5px;padding:4px 0}
.fr-rodape{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;font-size:12.5px;margin-top:3px}
.fr-rodape span,.fr-rodape b{color:var(--suave);font-weight:400}
.frete-item .mcc-rolagem{margin-top:8px}
tr.fr-cot{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mcc-tab tr.fr-reter td{background:#3d1414;color:#ff8b8b}
.mcc-tab tr.fr-reter td.mcc-ci .mcc-chip{background:#2a0f0f;color:#ff8b8b}

/* ---- Fluxo de Caixa (aba fluxo do Concreto) ---- */
.fx-filtros{margin-bottom:10px}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px}
.fx-chip{background:var(--branco);border:1px solid var(--linha);color:var(--suave);
  border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.fx-chip.on{background:var(--acento-fraco);border-color:var(--azul);color:var(--texto);font-weight:600}
.fx-linha2{display:flex;gap:6px;align-items:center}
/* alianças embaixo: 4 botões iguais preenchendo a linha toda */
.fx-als{flex-wrap:nowrap;margin-top:8px}
.fx-als .fx-chip{flex:1;text-align:center;padding:7px 2px;font-size:12px}
.fx-sel{flex:1;min-width:0;background:var(--branco);border:1px solid var(--linha);
  color:var(--texto);border-radius:10px;padding:7px 10px;font-size:12.5px}
.fx-painel{margin:0 0 12px;padding:12px 14px}
.fx-painel-grp{margin-bottom:10px}
.fx-painel-grp>span{display:block;font-size:11.5px;color:var(--suave);margin-bottom:5px}
.fx-painel-linha{display:flex;align-items:center;gap:10px}
.fx-painel-linha label{font-size:12.5px;color:var(--suave);display:flex;align-items:center;gap:6px}
.fx-painel-linha input{width:70px;background:var(--branco);border:1px solid var(--linha);
  color:var(--texto);border-radius:8px;padding:6px 8px;font-size:13px}
.fx-painel .btn{width:100%;margin-top:4px}
.fx-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 6px;
  border:1px solid var(--linha);border-radius:12px}
.fx-tab{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.fx-tab th{position:sticky;top:0;background:var(--branco);color:var(--suave);font-weight:600;
  font-size:11px;text-align:right;padding:7px 8px;border-bottom:1px solid var(--linha);white-space:nowrap}
.fx-tab th:first-child{text-align:left}
.fx-tab td{padding:6px 8px;border-bottom:1px solid var(--linha);text-align:right;white-space:nowrap}
.fx-tab tr:last-child td{border-bottom:0}
.fx-tab td.fx-nome{text-align:left;color:var(--texto)}
.fx-tab td.fx-nome small{color:var(--suave);margin-left:5px}
.fx-tab .fx-total td{border-top:1px solid var(--linha);font-weight:700;background:var(--acento-fraco)}
/* 1ª coluna fixa no arraste horizontal (Resumo e dia do Fluxo sempre visíveis);
   respiro preto à direita pros números rolando não encostarem na coluna fixa */
.fx-tab td:first-child{position:sticky;left:0;z-index:2;background:var(--fundo);padding-right:22px}
.fx-tab th:first-child{position:sticky;left:0;z-index:3;background:var(--branco);padding-right:22px}
.fx-tab .fx-total td:first-child{background:var(--acento-fraco)}
.fx-tr{color:var(--aviso)}
.fx-neg{color:#ff8b8b}
.fx-pos{color:var(--ok)}
#fx-sc-linha{cursor:pointer}
#fx-sc-linha td.fx-nome{color:var(--azul2)}
.fx-sc-cab{font-size:11.5px;color:var(--suave);margin:8px 2px 5px}
#fx-contas-det{margin-bottom:6px}
#fx-contas-det .fx-tab{font-size:11.5px}
/* células de receita/despesa do fluxo abrem os documentos do dia (cor normal,
   azul ficou ruim — pedido do Nayan 08/07/2026) */
td.fx-doc{cursor:pointer}
.fxd-tot{font-size:12.5px;color:var(--suave);padding:2px 0 8px;border-bottom:1px solid var(--linha)}
.fxd-tot b{color:var(--texto)}
.fxd-item{padding:8px 0;border-bottom:1px solid var(--linha)}
.fxd-item:last-child{border-bottom:0}
.fxd-l1{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.fxd-l1 span{min-width:0}
.fxd-l1 b{white-space:nowrap;font-variant-numeric:tabular-nums}
.fxd-l2{font-size:11px;color:var(--suave);margin-top:2px}
.fxd-chip{font-style:normal;font-size:10px;background:var(--acento-fraco);color:var(--azul2);
  border-radius:6px;padding:1px 6px;margin-left:4px;white-space:nowrap}
.fx-titulo{font-size:14.5px;margin:16px 2px 8px}
.fx-titulo small{color:var(--suave);font-weight:400}
.fx-gerado{margin-top:10px;text-align:center}

/* ===== Concreto > Pendências (Card Pendências 2.0 do Sankhya) =====
   Farol = grau de relevância que vem do próprio card (5=vermelho…1=ciano):
   é dado do ERP, não cor de interface. */
.cpd-quadro{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cpd-rot{display:flex;align-items:center;gap:10px;text-align:left;background:var(--branco);
  border:1px solid var(--linha);border-radius:14px;padding:11px 13px;cursor:pointer;
  font-family:inherit;color:var(--texto);font-size:14.5px;-webkit-tap-highlight-color:transparent}
.cpd-rot.on{border-color:var(--azul);background:var(--acento-fraco)}
.cpd-rot-t{flex:1;font-weight:600;line-height:1.25;min-width:0}
.cpd-rot-t small{display:block;color:var(--suave);font-size:11.5px;font-weight:400;margin-top:1px}
.cpd-qtd{flex:none;background:var(--acento-fraco);color:var(--azul);border-radius:999px;
  padding:3px 10px;font-size:13px}
.cpd-rot.on .cpd-qtd{background:var(--azul);color:#fff}
.cpd-farol{flex:none;width:9px;height:9px;border-radius:50%;display:inline-block}
.cpd-x{flex:none;color:var(--suave);font-size:15px;font-weight:700;padding-left:2px}
.cpd-rot[hidden]{display:none !important}
.cpd-itens{margin-top:10px}
.cpd-itens[hidden]{display:none !important}
.cpd-item{background:var(--branco);border:1px solid var(--linha);border-radius:14px;
  padding:10px 12px;margin-bottom:8px}
.cpd-obs{font-size:13.5px;line-height:1.4;overflow-wrap:break-word}
.cpd-meta{display:flex;align-items:center;gap:6px;color:var(--suave);font-size:11.5px;margin-top:4px}
.cpd-meta .cpd-farol{width:7px;height:7px}
.cpd-acoes{display:flex;gap:8px;margin-top:9px}
.cpd-btn{flex:1;padding:9px;border-radius:11px;font-size:13.5px;font-weight:700;
  border:1px solid var(--linha);background:var(--acento-fraco);color:var(--texto);
  cursor:pointer;font-family:inherit}
.cpd-btn.on{background:var(--azul);border-color:var(--azul);color:#fff}
.cpd-form{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.cpd-form[hidden]{display:none !important}
.cpd-form input{background:var(--fundo);border:1px solid var(--linha);border-radius:11px;
  padding:10px 12px;font-size:14px;color:var(--texto);font-family:inherit;width:100%}
.cpd-form-b{display:flex;gap:8px}
.cpd-ok{flex:1;padding:10px;border-radius:11px;border:0;background:var(--azul);color:#fff;
  font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit}
.cpd-ok:disabled{opacity:.55}
.cpd-canc{flex:none;padding:10px 14px;border-radius:11px;border:1px solid var(--linha);
  background:var(--branco);color:var(--suave);font-size:13.5px;cursor:pointer;font-family:inherit}

/* marcação em lote: toque no corpo do item marca; a barra fixa embaixo age
   em todos os marcados de uma vez (mesma obs / mesma data — pedido 08/07) */
.cpd-item{cursor:pointer;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none}
.cpd-item.sel{border-color:var(--azul);background:var(--acento-fraco)}
.cpd-item.sel .cpd-obs{color:var(--azul2)}
.cpd-barra{z-index:5}
.cpd-barra .cpd-acoes{margin-top:8px}
.cpd-barra-l1{display:flex;align-items:center;gap:8px}
.cpd-barra-l1 .cpd-canc{padding:7px 12px;font-size:12.5px}
.cpd-sel-n{flex:1;text-align:left;font-size:13px;font-weight:700;color:var(--azul)}
.cpd-barra .cpd-form{text-align:left}

/* ficha do item: texto do card quebrado em campos (rotina 203 e afins) */
.cpd-f-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cpd-f-cli{font-size:14.5px;font-weight:700;line-height:1.25;min-width:0}
.cpd-f-cli small{display:block;margin-top:2px;color:var(--suave);font-size:11.5px;font-weight:400}
.cpd-f-vlr{text-align:right;font-size:15px;font-weight:800;white-space:nowrap}
/* duas colunas com lugar FIXO: esquerda = cadastro, direita = datas/dias.
   No celular empilha (esquerda em cima). Pedido do Nayan 08/08/2026. */
.cpd-f-cols{display:grid;grid-template-columns:1fr;gap:0 22px;margin-top:8px;
  border-top:1px solid var(--linha)}
@media (min-width:640px){ .cpd-f-cols{grid-template-columns:1fr 1fr} }
.cpd-f-col{min-width:0}
.cpd-f-l{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px solid var(--linha);font-size:13px}
.cpd-f-l span{color:var(--suave);flex:none}
.cpd-f-l b{font-weight:600;text-align:right;min-width:0;overflow-wrap:break-word}
/* texto longo (justificativa): rótulo em cima, texto embaixo alinhado à esquerda */
.cpd-f-l.cpd-f-bl{display:block}
.cpd-f-l.cpd-f-bl b{display:block;text-align:left;margin-top:2px;font-weight:500;line-height:1.4}
.cpd-f-dias{display:inline-block;margin-top:7px;background:var(--acento-fraco);color:var(--azul2);
  border-radius:8px;padding:3px 9px;font-size:12px;font-weight:700}
.cpd-item.sel .cpd-f-cli{color:var(--azul2)}

/* ===== Vendas Detalhadas (Diretoria 2.0) — réplica do dashboard 461 ===== */
.vd-tab th{cursor:pointer;user-select:none;white-space:nowrap}
.vd-tab th:first-child,.vd-tab td:first-child{position:sticky;left:0;z-index:2;
  background:var(--fundo);max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-tab th:first-child{background:var(--branco);z-index:3}
.vd-tab .fx-total td:first-child{background:#182034}
.vd-linha{cursor:pointer}
.vd-subcel{padding:0 0 4px 10px !important;text-align:left !important}
.vd-subrolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-left:2px solid var(--azul);margin:4px 0 8px;background:rgba(43,87,239,.06)}
.vd-subtab{font-size:11px}
.vd-subtab th{cursor:default}
.vd-subtab th:first-child,.vd-subtab td:first-child{background:#0a0f1c}
.vd-carreg{color:var(--suave);font-size:12px;padding:8px 4px}
#vd-colpainel .fx-chips{max-height:40vh;overflow-y:auto}
#vd-colpadrao{margin-top:2px}

/* Vendas Detalhadas — 2 quadros (08/07): datas largas, quadro 2 com visão própria */
.vd-datas{display:flex;gap:10px}
.vd-datas label{flex:1;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--suave)}
.vd-datas input{width:100%;background:var(--branco);border:1px solid var(--linha);color:var(--texto);
  border-radius:10px;padding:11px 12px;font-size:15px;font-family:inherit;color-scheme:dark}
.vd-t2cab{display:flex;align-items:center;gap:8px;margin:18px 0 0}
.vd-t2cab .fx-sel{flex:1;min-width:0}
#vd-t2info{font-size:11.5px;color:var(--suave);white-space:nowrap}
#vd-t2limpa{flex:none}
tr.vd-sel td{background:var(--acento-fraco)}
tr.vd-sel td:first-child{background:#182034 !important}

/* ===== Vendas Detalhadas — 2º feedback (08/07) ===== */
/* abas de período compactas (Mês/Ontem/Período/Detalhadas) */
.abas-mini{gap:6px;margin-bottom:10px}
.abas-mini .aba{padding:7px 4px;font-size:12px;border-radius:10px}
/* linha 1: alianças pequenas + Filtros */
.vd-linha-al{margin-bottom:8px}
.vd-linha-al .fx-chip{flex:1;text-align:center;padding:7px 2px;font-size:11.5px}
.vd-linha-al .vd-ftbtn{flex:none;padding:7px 10px}
/* deitou o celular nesta tela: some o topo, o título e as abas — só o dashboard */
@media (orientation:landscape) and (max-height:520px){
  body.pg-vd header.topo{display:none !important}
  body.pg-vd .cabec-pagina{display:none !important}
  body.pg-vd .abas{display:none !important}
  body.pg-vd main.conteudo{padding-top:6px}
}

/* Vendas Detalhadas — 3º feedback (08/07): deitado usa a largura toda; chip arrastável */
@media (orientation:landscape) and (max-height:520px){
  body.pg-vd main.conteudo{max-width:none;
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right))}
}
.vd-arrasta{opacity:.75;transform:scale(1.08);box-shadow:0 6px 18px rgba(0,0,0,.65);
  position:relative;z-index:5;border-color:var(--azul) !important}

/* Vendas Detalhadas — 4º feedback (08/07): datas sem sobrepor, painel de filtros completo */
.vd-datas{gap:8px}
.vd-datas label{min-width:0;overflow:hidden}
.vd-datas input{padding:8px 4px;font-size:13px;min-width:0}
.vd-oplista{max-height:34vh;overflow-y:auto}
.vd-txt{width:100%;background:var(--branco);border:1px solid var(--linha);color:var(--texto);
  border-radius:10px;padding:10px 12px;font-size:15px;font-family:inherit}
.vd-nums{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vd-nums label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--suave);min-width:0}
.vd-nums input{width:100%;background:var(--branco);border:1px solid var(--linha);color:var(--texto);
  border-radius:10px;padding:9px 10px;font-size:14px;font-family:inherit}
#vd-aplicar{margin-bottom:12px}

/* autocomplete de cliente/grupo econômico nas Vendas Detalhadas */
.vd-achados{margin-top:8px;max-height:30vh;overflow-y:auto}
.vd-achados .fx-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Vendas Detalhadas — último retoque (08/07): painel alinhado, balões padronizados */
.vd-datas input{padding:6px 4px;font-size:12.5px;border-radius:8px}
.vd-datas label{flex-direction:row;align-items:center;gap:6px;font-size:12px}
.vd-grade{display:grid;gap:8px}
.vd-grade .fx-chip{width:100%;text-align:center;padding:8px 4px;font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.vd-grade2{grid-template-columns:1fr 1fr}
.vd-ts-grade{grid-template-columns:1fr 1fr 1fr}
.vd-ts-grade .fx-chip:nth-child(4){grid-column:span 2}
.vd-nums{grid-template-rows:repeat(4,auto);grid-auto-flow:column}

/* Filtros do tamanho do Colunas, com cara própria; alianças um pouco menores */
.vd-linha-al .fx-chip{padding:6px 2px;font-size:11px}
.vd-linha-al .vd-ftbtn{flex:none;padding:6px 14px;font-size:12.5px;
  background:var(--acento-fraco);border-color:var(--azul);color:var(--texto);font-weight:600}
.vd-linha-al .vd-ftbtn.on{background:var(--azul);border-color:var(--azul);color:#fff}

/* Vendas (Mês atual/Período) ao vivo + botão PDF discreto */
.vm-topo{display:flex;justify-content:flex-end;gap:8px;margin-bottom:8px}
.vd-pdfbtn{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px}
.vd-datas .vd-ftbtn{flex:none;align-self:center;padding:6px 14px;font-size:12.5px;
  background:var(--acento-fraco);border-color:var(--azul);color:var(--texto);font-weight:600}
#vm-tab td b{font-weight:700}

/* Vendas: tabela do resumo cabe na tela; visualizador de PDF; botões de padrão */
#vm-tab th,#vm-tab td{padding:5px 4px}
#vm-tab th:first-child,#vm-tab td:first-child{position:static;max-width:none}
.vd-padroes{display:flex;gap:8px}
.pdf-frame{width:100%;height:calc(100dvh - 150px);border:1px solid var(--linha);
  border-radius:12px;background:#fff}
.pdf-dica{margin-top:6px}

/* contagem de dias à esquerda do Linhas; páginas do PDF em imagem */
.vm-topo{justify-content:space-between}
.vm-dias{font-size:12px;color:var(--suave);align-self:center;margin-right:auto}
.vm-topo .fx-chip,.vm-topo .vd-pdfbtn{flex:none}
.pdf-paginas{display:flex;flex-direction:column;gap:10px}
.pdf-pg{width:100%;border:1px solid var(--linha);border-radius:10px;background:#fff}

/* visualizador de PDF: zoom manual — nada vaza pro lado */
body.pg-pdfver{overflow-x:hidden}
.pdf-pg{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* conferência do Nayan: Comercial x Centro de Resultado (âmbar, sem vermelho) */
.aj-alerta,.ajf-alerta{display:inline-block;background:var(--aviso);color:#1a1305;
  font-weight:700;font-size:12px;border-radius:8px;padding:3px 9px;margin-top:6px}
.ajf-alerta{margin:0 0 10px}
/* cliente à esquerda, liberador à direita */
.aj-cli{display:flex;justify-content:space-between;gap:12px}
.aj-lib{color:var(--suave);flex:none}

/* Aprovação (09/07): título numa linha; cabeçalho do cartão em DUAS linhas
   (aliança + valor / tipo de ajuste + tipo do sistema) — pedido do Nayan */
.cabec-concreto h1{font-size:17.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cabec-concreto .h1-sub{font-size:11.5px}
.apr-item .apr-l1{justify-content:space-between}
.apr-l2{display:flex;justify-content:space-between;gap:10px;margin-top:7px}
.apr-l2 .aj-sit{margin-left:0}
.apr-l2 .aj-sit:last-child{margin-left:auto}

/* ============================================================
   MESA DO CONCRETO — computador (28/07/2026)
   /concreto: menu lateral próprio + telas do Concreto em molduras
   (iframes) que ficam vivas ao trocar de tela. O ícone .conc-pc-dir
   (monitor com prédios) fica no topo DIREITO da lateral de chats.
   ============================================================ */
.conc-pc-dir{display:none}
@media (min-width:900px) and (min-height:501px){
  .conversas-topo .conc-pc-dir{display:flex;position:absolute;right:12px;top:50%;transform:translateY(-50%);
    width:38px;height:38px;align-items:center;justify-content:center;color:#fff;z-index:7}
  .conversas-topo .conc-pc-dir svg{width:22px;height:22px}
  .conversas-topo .conc-pc-dir:hover{color:var(--azul2)}
}

/* dentro de uma moldura da mesa (html.emb, setado no <head> do base.html):
   sem topo, sem laterais, conteúdo com mais largura pra trabalhar */
html.emb .topo, html.emb .gaveta, html.emb .gaveta-fundo, html.emb .conversas,
html.emb .alerta-topo, html.emb .tabbar, html.emb .fab{display:none !important}
html.emb body{padding-left:0 !important}
html.emb .conteudo{max-width:1240px;margin:0 auto;padding:16px 28px 34px}
html.emb .voltar-concreto{display:none}   /* a navegação é o menu da mesa */

/* a mesa em si */
body.pg-concreto{padding-left:0 !important}
body.pg-concreto .conteudo{max-width:none;margin:0;padding:0}
.cw-rail{position:fixed;left:0;top:0;bottom:0;width:232px;z-index:40;display:flex;flex-direction:column;
  background:#000;border-right:1px solid var(--linha);padding:14px 10px 0}
/* 3px pra esquerda = correção ÓPTICA (a palavra "Vértex" pesa pro lado direito
   do desenho; medido: o arquivo em si é simétrico). 28px conversa com os botões de 38. */
.cw-logo{display:flex;align-items:center;position:relative;left:-3px}
.cw-logo img{height:28px;width:auto;display:block}
.cw-nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-top:10px}
.cw-nav a{display:flex;align-items:center;gap:8px;padding:10px 10px;border-radius:10px;
  font-size:13.5px;font-weight:600;color:var(--texto);cursor:pointer}
/* APROVAÇÃO / CIÊNCIA sempre na linha DE BAIXO do "Ajustes de Pedido" (Nayan 08/08) */
.cw-nav a span small{display:block;font-size:10px;font-weight:600;color:var(--suave);
  letter-spacing:.04em;margin:1px 0 0}
.cw-nav a:hover{background:#151823}
.cw-nav a.on{background:var(--acento-fraco)}
.cw-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:var(--grad-v);color:#0b0e14;font-size:11.5px;font-weight:800}
.cw-main{position:fixed;left:232px;top:0;right:0;bottom:0;background:var(--fundo)}
.cw-main iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none;background:var(--fundo)}
.cw-main iframe.on{display:block}
.cw-load{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:var(--fundo);z-index:5}
.cw-load.on{display:flex}
.cw-load img{width:64px;height:64px;animation:respira 1.15s ease-in-out infinite}

/* ============================================================
   MESA DO CONCRETO — telas DENSAS no computador (28/07/2026)
   Só dentro das molduras da mesa (html.emb). Pedido do Nayan:
   colunas próximas (tabela abraça o conteúdo, sem esticar na
   largura toda) e cartões lado a lado pra caber mais informação.
   Módulo a módulo, de cima pra baixo.
   ============================================================ */

/* --- geral: toda tabela abraça o conteúdo; colunas juntas --- */
html.emb .fx-tab{width:auto}
html.emb .fx-tab th, html.emb .fx-tab td{padding:6px 12px}
html.emb .cabec-pagina{margin:2px 0 12px}

/* --- Vendas (Mês atual / Período): tabela compacta à esquerda;
       letra fixa de computador (vence o encolhe-pra-caber do celular) --- */
html.emb #vm-tab{font-size:13px !important}
html.emb #vm-tab th, html.emb #vm-tab td{padding:6px 16px 6px 12px}
html.emb .vm-topo{max-width:640px}

/* --- Programação: o quadro (PNG) cabe INTEIRO na tela, sem rolagem —
       limitado pela ALTURA da janela (28/07, pedido do Nayan) --- */
html.emb .cartao.foto-vendas{max-width:fit-content;padding:10px;margin:0}
html.emb .foto-vendas img{width:auto;max-width:100%;max-height:calc(100vh - 150px);
  margin:0;display:block}

/* --- Fluxo de Caixa: filtros contidos, tabelas coladas --- */
html.emb .fx-sel{max-width:430px}
html.emb .fx-titulo{margin-top:22px}
html.emb .fx-gerado{text-align:left;margin-left:2px}

/* --- Ciência / Pedido de MCC / Pedido de Frete / Limite:
       cartões em GRADE dentro de cada aliança --- */
html.emb .aj-grupo{display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));gap:12px}
html.emb .aj-grupo .aj-alianca, html.emb .aj-grupo .aj-tipo,
html.emb .aj-grupo .nota{grid-column:1/-1}
html.emb .aj-grupo .aj-item, html.emb .aj-grupo .apr-item{margin-bottom:0}
/* Limite de Crédito: cartão tem parecer/valores — mais largo (2 por linha) */
html.emb .aj-grupo:has(.lim-item){grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}

/* --- Aprovação de ajustes: cartões direto na página → grade --- */
html.emb .conteudo:has(#ap-btn){display:grid;
  grid-template-columns:repeat(auto-fill,minmax(470px,1fr));gap:14px}
html.emb .conteudo:has(#ap-btn) .cabec-pagina, html.emb .conteudo:has(#ap-btn) .aj-barra,
html.emb .conteudo:has(#ap-btn) .flashes, html.emb .conteudo:has(#ap-btn) .vazio{grid-column:1/-1}
html.emb .conteudo:has(#ap-btn) .apr-item{margin-bottom:0}

/* --- Pendências: rotinas do card e itens em grade --- */
html.emb .cpd-quadro{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
html.emb .cpd-itens{display:grid;grid-template-columns:1fr;gap:8px}
html.emb .cpd-item{margin-bottom:0}
/* item sem quadro-de-colunas: linha inteira, botões à direita */
html.emb .cpd-itens:not(.cpv-tab) .cpd-item{display:grid;grid-template-columns:1fr max-content;
  gap:3px 20px;align-items:center}
/* item com FICHA (texto já separado em campos): volta a ser bloco, senão as
   linhas caem alternando nas colunas do grid acima (bug visto em 08/08/2026) */
html.emb .cpd-itens .cpd-item:has(.cpd-f-topo){display:block}
html.emb .cpd-itens .cpd-item:has(.cpd-f-topo) .cpd-acoes{margin-top:10px;
  justify-content:flex-end}
html.emb .cpd-itens .cpd-item:has(.cpd-f-topo) .cpd-acoes .cpd-btn{flex:none;
  padding:8px 18px;font-size:12.5px}
html.emb .cpd-itens:not(.cpv-tab) .cpd-obs{grid-column:1}
html.emb .cpd-itens:not(.cpv-tab) .cpd-meta{grid-column:1;margin-top:0}
html.emb .cpd-itens:not(.cpv-tab) .cpd-acoes{grid-column:2;grid-row:1/3;margin-top:0;display:flex;gap:8px}
html.emb .cpd-itens:not(.cpv-tab) .cpd-acoes .cpd-btn{flex:none;padding:8px 16px;font-size:12.5px}
html.emb .cpd-itens:not(.cpv-tab) .cpd-form{grid-column:1/-1}

/* barra de ação (Dar ciência / Enviar respostas): não precisa da largura toda */
html.emb .aj-btn{max-width:430px;margin:0 auto;display:block}

/* --- Ciência de ajustes na MESA: cartão já ABERTO, de linha inteira
       (28/07/2026 — pedido do Nayan). O JS da tela monta as 4 colunas
       (.ajp-c1 nº/valor · .ajp-c2 quem/pedido · .ajp-c3 motivo · .ajp-c4 De→Para)
       e busca a ficha sozinho. Clicar = marcar (vermelho, não dá ciência). --- */
html.emb .conteudo:has(.aj-pc){max-width:1520px}
html.emb .aj-grupo:has(.aj-pc){display:block}
html.emb .aj-item.aj-pc{display:grid;grid-template-columns:160px 330px 1fr 370px;
  gap:6px 26px;align-items:start;margin-bottom:10px;padding:13px 16px}
html.emb .aj-pc .ajp-c1{grid-column:1}
html.emb .aj-pc .ajp-c2{grid-column:2}
html.emb .aj-pc .ajp-c3{grid-column:3}
html.emb .aj-pc .ajp-c4{grid-column:4}
html.emb .aj-pc .aj-l1{flex-direction:column;align-items:flex-start;gap:5px}
html.emb .aj-pc .aj-sit{margin-left:0}
html.emb .aj-pc .aj-cli{display:flex;flex-direction:column;gap:2px;margin-top:0}
html.emb .aj-pc .aj-mot{display:block;-webkit-line-clamp:unset;overflow:visible;
  font-size:13px;color:var(--texto);margin-top:0}
html.emb .aj-pc .aj-cr{margin-top:6px}
html.emb .aj-pc .ajf-l{font-size:12.5px;padding:3px 0}
html.emb .aj-pc .ajf-bloco{margin-top:0}
html.emb .aj-pc .ajf-tab{margin-top:2px}
html.emb .ajp-espera{color:var(--suave);font-size:12px}

/* --- Pendências na MESA: itens da rotina viram QUADRO com colunas alinhadas
       (28/07/2026). O JS da tela quebra o texto "Chave:Valor - Chave:Valor" de
       cada item; como todos têm os mesmos campos, o rótulo aparece UMA vez no
       cabeçalho e cada item é uma linha (subgrid alinha as colunas). --- */
html.emb .conteudo:has(.cpv-tab){max-width:none}   /* usa a tela toda, sem rolagem */
html.emb .cpd-itens.cpv-tab{display:grid;gap:0 14px;align-items:center;
  grid-template-columns:max-content repeat(var(--cpv-n),auto) minmax(120px,max-content)}
html.emb .cpv-tab .cpv-head{display:grid;grid-template-columns:subgrid;grid-column:1/-1;
  color:var(--suave);font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.4px;padding:2px 12px 6px}
html.emb .cpv-tab .cpd-item{display:grid;grid-template-columns:subgrid;grid-column:1/-1;
  align-items:center;margin-bottom:6px;padding:9px 12px}
html.emb .cpv-tab .cpd-meta{margin-top:0;font-size:11.5px}
html.emb .cpv-tab .cpv-v{font-size:12px;line-height:1.35;min-width:0;overflow-wrap:anywhere}
html.emb .cpv-tab .cpd-acoes{margin-top:0;justify-self:end;display:flex;gap:8px}
html.emb .cpv-tab .cpd-acoes .cpd-btn{flex:none;padding:8px 16px;font-size:12.5px}
html.emb .cpv-tab .cpd-form{grid-column:1/-1;margin-top:8px}

/* mesa recém-aberta: Programação da semana (texto) no canto de cima/esquerda
   e o V bem discreto ao fundo (Nayan 08/08) */
.cw-vazio{position:absolute;inset:0;padding:22px 26px;display:flex;justify-content:flex-end;
  align-items:flex-start;overflow-y:auto}
/* coluna da direita: Programação encostada em CIMA, Vendas do mês encostada
   EMBAIXO (Nayan 09/08) */
.cw-paineis{display:flex;flex-direction:column;align-items:flex-end;gap:26px;
  justify-content:space-between;min-height:100%}
.cw-vazio-v{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:88px;height:88px;opacity:.10;pointer-events:none}
/* texto direto no preto: sem cartão, sem borda (Nayan 08/08) */
/* sem título e sem TOTAL (Nayan 08/08): só o produzido do dia e os 7 dias.
   Larguras justas — a caixa abraça o conteúdo em vez de esticar. */
.cwp{position:relative;z-index:1;background:none;border:0;padding:0;width:max-content}
.cwp-espera{color:var(--suave);font-size:13px}
.cwp-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 10px;text-align:center}
.cwp-prod span{display:block;color:var(--suave);font-size:12.5px;font-weight:600}
.cwp-prod b{display:block;font-size:20px;font-weight:800;color:#6d84b5;
  font-variant-numeric:tabular-nums;line-height:1.2}
.cwp-tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13.5px}
.cwp-tab th{color:var(--suave);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.3px;text-align:right;padding:5px 11px;background:none;
  border-bottom:1px solid var(--linha)}
.cwp-tab th:first-child{text-align:left}
.cwp-tab td{padding:5px 11px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--linha)}
.cwp-tab td:first-child{text-align:left;color:var(--texto)}
.cwp-tab tr.cwp-hoje td{color:#7d95c4}
.cwp-tab tr.cwp-tot td{border-bottom:0;border-top:1px solid var(--linha);
  font-weight:800;background:none}
.cwp-tab td{border-bottom-color:#15171f}

/* ---- Departamento Pessoal (Mesa do Concreto, só PC) ---- */
.fx-tab td.dp-txt{text-align:left;color:var(--suave);max-width:220px;overflow:hidden;text-overflow:ellipsis}
.fx-tab td.dp-txt small{opacity:.75;margin-left:4px}
.dp-grp td{background:var(--acento-fraco);color:var(--texto);font-weight:700;text-align:left;padding:7px 8px}
.dp-sub td{color:var(--suave);font-weight:600}
.dp-linha{cursor:pointer}
.dpf-cargo{color:var(--suave);font-size:12.5px;margin:0 0 8px}

/* topo do menu da mesa, igual ao menu do Vértex: ☰ (abre o menuzinho) à
   esquerda, logo CENTRALIZADA de verdade (no meio da largura, como no chat),
   e o botão de LIMPAR a mesa à direita */
.cw-topo{position:relative;height:44px;display:flex;align-items:center;justify-content:center;
  margin-bottom:8px}
.cw-menu{position:absolute;left:0;top:50%;transform:translateY(-50%);border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:9px;color:#fff;font-size:19px;cursor:pointer}
.cw-menu:hover{background:var(--acento-fraco)}
.cw-topo .cw-reset{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.cw-reset{width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.cw-reset svg{width:21px;height:21px}
.cw-reset:hover{background:var(--acento-fraco);color:var(--azul2)}
.cw-reset:active{transform:scale(.94)}

/* --- Vendas do mês no painel da mesa: mesma identidade da Programação --- */
.cwv-tab td:first-child{color:var(--suave)}
.cwv-tab tr:last-child td{border-bottom:0}
.cwv-tab td b{color:var(--texto)}
/* rodapé: linha de separação acima e os "Dias" no MESMO tom/letra da data */
.cwv-pe{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin-top:0;padding-top:7px;border-top:1px solid var(--linha);
  color:var(--suave);font-size:11px}
.cwv-pe b{color:inherit;font-weight:inherit;font-size:inherit;white-space:nowrap}

/* ---- Frete de MCC: cotação dentro da cotação-padrão + tela de Padrões ---- */
.mcc-tab tr.fr-ok td{background:#0f2a1a}
.mcc-chip.ok{background:#0f3d24;color:#6fe3a1}
.fr-teto{font-style:normal;font-weight:400;font-size:11.5px;color:#6fe3a1;
  margin-left:6px}
.fp-form{padding:14px}
.fp-campos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.fp-campos label{display:flex;flex-direction:column;gap:4px;font-size:12px;
  color:var(--suave)}
.fp-campos input{background:var(--fundo);border:1px solid var(--linha);
  border-radius:10px;padding:9px 10px;color:var(--texto);font-size:15px}
.fp-item .aj-l1{gap:8px;margin-bottom:6px}
.fp-item .ajf-l{font-size:12.5px;padding:4px 0}
.fp-teto{color:#6fe3a1}
.fp-x{background:none;border:0;color:var(--suave);font-size:12.5px;
  text-decoration:underline;padding:0;cursor:pointer}

/* ---- Padrões de frete: filtros e edição na própria lista ---- */
.fp-filtros{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.fp-filtros select{background:var(--branco);border:1px solid var(--linha);
  border-radius:10px;padding:9px 10px;color:var(--texto);font-size:13px;
  max-width:100%}
.fp-topo{cursor:pointer}
.fp-item.fp-aberto{border-color:var(--azul2)}
.fp-edit{margin-top:10px;padding-top:10px;border-top:1px solid var(--linha)}
.fp-edit .fp-campos{grid-template-columns:1fr 1fr 1fr;margin-bottom:10px}
.fp-acoes{display:flex;align-items:center;gap:14px}
.fp-acoes .btn{flex:1}
.fp-item[hidden],.fp-grupo[hidden]{display:none !important}