/* NEXUS TRANSLATE — camada de navegação experimental GPT.
   Não altera regras de negócio. Organiza descoberta e navegação. */
:root{--nav-w:68px;--nav-mobile-h:60px}
.nexus-shell{position:relative;max-width:1440px;margin:0 auto;height:calc(100dvh - env(safe-area-inset-top));display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);background:var(--bg);overflow:hidden}
.nexus-rail{background:var(--bg2);border-right:1px solid var(--linha);display:flex;flex-direction:column;align-items:center;padding:10px 7px 9px;gap:6px;min-height:0}
.nexus-rail-brand{width:44px;height:44px;border:0;background:transparent;border-radius:13px;display:grid;place-items:center;cursor:pointer;margin-bottom:5px}
.nexus-rail-brand:hover{background:var(--bg3)}.nexus-rail-brand .logo{width:31px;height:31px}.nexus-rail-nav{display:flex;flex-direction:column;gap:5px;width:100%}
.nexus-nav-btn{border:0;background:transparent;color:var(--txt2);border-radius:11px;min-height:52px;padding:6px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;font-size:9.5px;font-weight:650;line-height:1.1;position:relative}
.nexus-nav-btn[hidden]{display:none!important}
.nexus-nav-btn:hover{background:var(--bg3);color:var(--txt)}.nexus-nav-btn.ativo{background:color-mix(in srgb,var(--nexus) 12%,transparent);color:var(--nexus)}
.nexus-nav-btn.ativo:before{content:"";position:absolute;left:-7px;top:11px;bottom:11px;width:3px;border-radius:0 4px 4px 0;background:var(--nexus)}
.nav-svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nexus-rail-spacer{flex:1}.nexus-rail-user{width:38px;height:38px;border-radius:50%;border:1px solid var(--linha);background:var(--bg3);color:var(--txt);display:grid;place-items:center;cursor:pointer;overflow:hidden}
.nexus-main{min-width:0;min-height:0;position:relative}.nexus-main>.tel{height:100%;max-width:none;margin:0;grid-template-columns:320px minmax(0,1fr)}
.nexus-main .marca{min-height:64px;padding-top:10px;padding-bottom:10px}
/* O rail assume a navegação principal; no desktop o botão da marca vira um
   discreto menu de ações secundárias, evitando repetir o logotipo duas vezes. */
.nexus-main .marca-menu{display:flex;width:30px;height:30px;align-items:center;justify-content:center;border:1px solid var(--linha);background:var(--bg3);border-radius:9px;color:var(--txt2)}
.nexus-main .marca-menu .logo{display:none}.nexus-main .marca-menu:before{content:"•••";font-size:13px;letter-spacing:1px;line-height:1;transform:translateY(-2px)}
.nexus-main .busca{padding:8px 10px}.nexus-main .busca input{padding:8px 11px}
/* Conversas e Grupos já vivem no rail; remover as pastilhas duplicadas deixa a
   hierarquia visual mais clara e libera altura útil. */
.nexus-filterbar{display:none!important}
.nexus-main[data-visao="conversas"] .conv{display:flex}.nexus-main[data-visao="grupos"] .conv:not(.nav-grupo){display:none}
.nexus-main[data-visao="grupos"] .conv.nav-grupo{padding-top:13px;padding-bottom:13px}
/* Pessoas mostra SO conversa de duas pessoas. Sem esta regra a aba existia no
   rail mas nao filtrava nada: a lista continuava com os grupos no meio, e o
   rotulo "Pessoas" mentia sobre o que estava na tela. */
.nexus-main[data-visao="pessoas"] .conv:not(.nav-pessoa){display:none}
/* WhatsApp (DECISIONS/0034): so as conversas que vieram do WhatsApp. */
.nexus-main[data-visao="whatsapp"] .conv:not(.wa){display:none}
.nexus-main[data-visao="pessoas"] .conv.nav-pessoa{padding-top:13px;padding-bottom:13px}
.nexus-context{display:none}
@media(min-width:1180px){
  .nexus-main.com-contexto>.tel{grid-template-columns:320px minmax(0,1fr) 260px}
  .nexus-main.com-contexto .nexus-context{display:flex;grid-column:3;grid-row:1;background:var(--bg2);border-left:1px solid var(--linha);min-width:0;flex-direction:column;overflow:auto}
  .nexus-main.com-contexto .conversa{grid-column:2}.context-head{padding:17px 16px 13px;border-bottom:1px solid var(--linha)}
  .context-title{font-size:15px;font-weight:700;letter-spacing:-.1px}.context-sub{font-size:10.5px;color:var(--txt2);margin-top:2px}.context-body{padding:10px}.context-label{font-size:9px;color:var(--txt3);font-weight:800;letter-spacing:.8px;padding:5px 7px 8px}
  .context-person{width:100%;border:0;background:transparent;color:var(--txt);display:flex;align-items:center;gap:9px;padding:8px 7px;border-radius:10px;text-align:left;cursor:pointer}.context-person:hover{background:var(--bg3)}
  .context-person:disabled{cursor:default;opacity:.68}.context-person:disabled:hover{background:transparent}
  .context-person>span:last-child{display:flex;min-width:0;flex-direction:column}.context-person b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.context-person small{font-size:9.5px;color:var(--txt2);margin-top:1px}
  .context-av{width:32px;height:32px;border-radius:50%;object-fit:cover;display:grid;place-items:center;flex:0 0 auto}.context-av-fallback{background:var(--nexus);color:#fff;font-size:9.5px;font-weight:800}.context-empty{padding:20px 10px;color:var(--txt2);font-size:12px;text-align:center}
  .nexus-main .msgs{padding-left:20px;padding-right:20px}.nexus-main .m{max-width:min(76%,680px)}
}
@media(max-width:820px){
  body{padding-bottom:env(safe-area-inset-bottom)}
  /* A própria shell reserva fisicamente a barra inferior; por isso a conversa
     não precisa receber um segundo padding de 60px. Isso elimina o grande vão
     que aparecia entre o campo de texto e a navegação. */
  .nexus-shell{display:block;height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding-bottom:var(--nav-mobile-h)}
  .nexus-main{height:100%}.nexus-main>.tel{height:100%;grid-template-columns:1fr}
  .nexus-rail{position:fixed;z-index:45;left:env(safe-area-inset-left);right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);height:var(--nav-mobile-h);border-right:0;border-top:1px solid var(--linha);padding:3px 7px;display:flex;flex-direction:row;background:color-mix(in srgb,var(--bg2) 96%,transparent);backdrop-filter:blur(16px)}
  .nexus-rail-brand,.nexus-rail-spacer,.nexus-rail-user{display:none}
  /* UMA coluna por botao visivel, e nao um numero fixo: com 4 colunas cravadas o quinto
     botao (Ajustes) caia para uma segunda linha no celular. Assim cabe 4, 5 ou 6. */
  .nexus-rail-nav{width:100%;height:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px}
  .nexus-nav-btn span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nexus-nav-btn{min-height:48px;padding:3px 2px;border-radius:10px;font-size:9px;gap:2px}.nexus-nav-btn.ativo:before{left:32%;right:32%;top:-3px;bottom:auto;width:auto;height:3px;border-radius:0 0 4px 4px}
  .nav-svg{width:18px;height:18px}.nexus-context{display:none!important}
  .nexus-main .marca{min-height:60px;padding:9px 12px;gap:9px}
  .nexus-main .marca h1{font-size:14.5px}.nexus-main .marca small{font-size:10.5px}
  .nexus-main .marca-menu{width:auto;height:auto;border:0;background:none;padding:0;margin:0;border-radius:10px}
  .nexus-main .marca-menu .logo{display:block;width:30px;height:30px}.nexus-main .marca-menu:before{content:none}
  .nexus-main .busca{padding:8px 10px;gap:7px}.nexus-main .busca input{min-height:36px;padding:8px 10px;font-size:12.5px}
  .nexus-main .conv{padding:10px 12px}.nexus-main[data-visao="grupos"] .conv.nav-grupo{padding:11px 12px}
  .nexus-main .topo{padding:8px 12px;gap:9px;min-height:58px}.nexus-main .topo-nome{font-size:14.5px}.nexus-main .topo-sub{font-size:10.5px}.nexus-main .duplex{padding:4px 9px;border-radius:10px}
  .nexus-main .msgs{padding:14px 14px;gap:12px}.nexus-main .m{max-width:86%}
  .nexus-main .escrever{padding:9px 12px;padding-bottom:calc(9px + env(safe-area-inset-bottom));gap:8px}
  .nexus-main .escrever textarea{padding:9px 13px;min-height:40px}.nexus-main .so-leitura{padding:11px 12px}.nexus-main .dica{padding-top:5px;padding-bottom:5px}
  .nexus-main .convs{padding-bottom:0}
}
/* O iPhone da ZOOM em todo campo com letra menor que 16px quando a pessoa toca
   nele, e a tela inteira desliza para o lado: o botao de enviar ia para fora da
   tela (visto pelo Janser em 10/10/2026). 16px no celular desliga esse zoom sem
   travar o zoom de pinca, que e acessibilidade. */
@media(max-width:820px){
  input,select,textarea,.nexus-main .escrever textarea,.nexus-main .busca input{font-size:16px!important}
}
@media(max-width:420px){
  .nexus-main .marca{min-height:58px}.nexus-main .topo{min-height:56px}.nexus-main .m{max-width:90%}
}