/* nova-2.css — a /nova-2 veste o cânone do mockup (frontend/nova/canone/tokens.css, gerado do mockup escolhido): a moldura, a sala e a
   conversa leem as cores e as letras do mockup, e nada é trocado pelo azul de antes. Só vale com html.nova-2. */
html.nova-2 {
  /* a moldura do /nova (nova.css) */
  --nv-vidro: rgba(24, 20, 56, .94); --nv-vidro-claro: var(--glass); --nv-borda: var(--line); --nv-borda-forte: var(--line-2);
  --nv-lilas: var(--brand); --nv-lilas-forte: var(--brand-2); --nv-txt-1: var(--ink); --nv-txt-2: var(--ink-2); --nv-txt-3: var(--ink-3);
  --nv-bom: var(--ok); --nv-atencao: var(--warn); --nv-ruim: var(--bad); --nv-destaque: var(--brand-2);
  /* a sala e a conversa (estilo.css) */
  --fundo: var(--bg-0); --vidro: rgba(17, 14, 38, .72); --vidro-forte: rgba(24, 20, 56, .94); --vidro-claro: var(--glass);
  --linha: var(--line); --linha-forte: var(--line-2); --texto: var(--ink); --texto-2: var(--ink-2); --texto-3: var(--ink-3);
  --roxo: var(--brand); --roxo-texto: var(--brand-2); --ouro: var(--desenho-7, #e0b457); --ciano: var(--info); --vermelho: var(--bad); --verde: var(--ok);
  --sans: var(--font); --serif: 'Instrument Serif', Georgia, serif; /* o estilo.css da sala também chama a serifa de --serif (Cormorant): na /nova-2 vale a do mockup */
  --desenho-fundo: var(--bg-2);
}
html.nova-2 body { font-family: var(--font); }
html.nova-2 :focus-visible { outline-color: var(--brand); }
/* a janela é a superfície do mockup, com a borda e a sombra dele */
html.nova-2 .nv-janela { background: var(--bg-2) !important; border-color: var(--line-2) !important; box-shadow: var(--shadow); }
html.nova-2 .nv-jornada button { background: var(--brand-tint) !important; border-color: var(--line-2) !important; color: var(--ink) !important; }
/* a fala dela na letra do mockup */
html.nova-2 #fala, html.nova-2 .fala-dela { font-family: var(--serif); font-style: italic; }

/* o botão que ainda não faz nada fica apagado e diz o porquê (title e o aviso no clique) */
html.nova-2 .n2-apagado { opacity: .42; cursor: help !important; }
html.nova-2 .n2-extra { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 500; color: var(--brand-2); cursor: pointer; white-space: nowrap; }
html.nova-2 .n2-extra:hover { background: var(--brand-tint); }
/* 16/10: a ação principal que a planta põe na aba ("principal"): o lilás da marca, como o botão principal das outras telas */
html.nova-2 .n2-extra.n2-principal { background: var(--brand); color: var(--brand-ink); border-color: transparent; font-weight: 600; }
html.nova-2 .n2-extra.n2-principal:hover { background: var(--brand-2); }
/* o botão que leva a outra aba sai do destaque: uma ação principal por aba (planta "secundario"; 14/10, Conta › Extrato) */
html.nova-2 [data-quadro] .n2-secundario { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; font-weight: 500 !important; }
html.nova-2 .n2-extra-linha { display: flex; justify-content: flex-end; padding: 12px 22px 0; }

/* a caixa de criar: centro, 560 px, rótulo em cima, a frase que vai pela conversa embaixo (cânone, peças comuns §2.2) */
.n2-caixa-fundo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(8, 7, 26, .55); padding: 16px; }
.n2-caixa { width: min(560px, 100%); border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  padding: 22px; display: flex; flex-direction: column; gap: 14px; color: var(--ink); font: 14px/1.45 var(--font); }
.n2-caixa h3 { margin: 0; font-size: 17px; font-weight: 500; }
.n2-campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-3); }
.n2-campo input, .n2-campo select { height: 40px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink); font: 14px var(--font); }
.n2-campo input:focus, .n2-campo select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* 16/10: a caixa dos botões conferidos tem até seis campos e o texto longo; a caixa rola por dentro em tela baixa */
.n2-caixa { max-height: calc(100dvh - 32px); overflow-y: auto; }
.n2-campo textarea { min-height: 76px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink); font: 14px var(--font); resize: vertical; }
.n2-campo textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* 16/10: o link do convite da equipe sai numa caixa com Copiar e Mandar pelo WhatsApp (um link com cara de botão) */
.n2-pe { flex-wrap: wrap; }
.n2-pe a.n2-botao { display: inline-flex; align-items: center; text-decoration: none; }
.n2-falta { margin: 0; font-size: 13px; color: var(--warn); }
.n2-frase { margin: 0; font-size: 12px; color: var(--ink-3); }
.n2-pe { display: flex; justify-content: flex-end; gap: 8px; }
.n2-botao { height: 36px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: 500 13px var(--font); cursor: pointer; }
.n2-botao.principal { background: var(--brand); border-color: transparent; color: var(--brand-ink); }
.n2-botao:disabled { opacity: .45; cursor: not-allowed; }   /* 19/10: a caixa sem lead ou sem quem escreveu não manda */
.n2-aviso { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 95; max-width: min(520px, calc(100% - 32px)); padding: 12px 16px;
  border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink-2); font: 13px/1.45 var(--font); box-shadow: var(--shadow); }
[data-n2gaveta][hidden] { display: none !important; }
/* a comparação do azul claro (nova-2.js, ?destaque=azul) */
html.nova-2.n2-azul { --brand: #9fd8ff; --brand-2: #c9ebff; --brand-ink: #0b1f2e; --brand-tint: rgba(159, 216, 255, .14); --brand-tint-2: rgba(159, 216, 255, .26); --nv-lilas: #9fd8ff; --nv-lilas-forte: #c9ebff; --nv-destaque: #9fd8ff; }

/* a cor das janelas (nova-2.js, o menu da pessoa): D vidro roxo, E vidro lilás clarinho, as duas translúcidas sobre a sala; o desenho dentro
   fica transparente para o vidro aparecer, e os cartões de dentro ficam escuros e translúcidos para o texto continuar legível */
html.nova-2[data-janela] .nv-janela { -webkit-backdrop-filter: blur(24px) saturate(1.15) !important; backdrop-filter: blur(24px) saturate(1.15) !important; }
html.nova-2[data-janela="roxo"] .nv-janela { background: rgba(42, 31, 102, .72) !important; }
html.nova-2[data-janela="lilas"] .nv-janela { background: rgba(184, 153, 255, .20) !important; -webkit-backdrop-filter: blur(28px) saturate(1.2) !important; backdrop-filter: blur(28px) saturate(1.2) !important; }
html.nova-2[data-janela] .nv-janela .nv-desenho-cartao, html.nova-2[data-janela] .nv-janela .nv-molde-painel { background: transparent !important; }
html.nova-2[data-janela] .nv-janela [style*="background:#110e26"], html.nova-2[data-janela] .nv-janela [style*="background: rgb(17, 14, 38)"] { background: rgba(17, 14, 38, .55) !important; padding: 8px 16px 8px 16px; /* conserto do Olheiro */}
html.nova-2[data-janela] .nv-janela [style*="background:#141031"] { background: rgba(20, 16, 49, .7) !important; }
/* no degrau leve não há desfoque: a mesma cor quase sólida, para o texto não perder o contraste */
html.nova-2[data-janela="roxo"] body.leve .nv-janela { background: rgba(42, 31, 102, .95) !important; }
html.nova-2[data-janela="lilas"] body.leve .nv-janela { background: rgba(70, 56, 128, .95) !important; }
.nv-menu-cores { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nv-menu-cores > span { width: 100%; font-size: 12px; color: var(--ink-3, #9992c6); }
.nv-cor-janela { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(200, 190, 255, .22); background: transparent; color: inherit; font: 13px var(--font, system-ui); cursor: pointer; }
.nv-cor-janela i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); }
.nv-cor-janela[aria-checked="true"] { background: rgba(171, 151, 255, .18); border-color: transparent; }
html.nova-2[data-janela] .nv-janela [data-lista] { background: rgba(17, 14, 38, .45) !important; padding: 8px 8px 8px 8px; /* conserto do Olheiro */}

/* toda aba ocupa a janela inteira (11/10, o Theus: "cada uma segue uma altura diferente"): o desenho estica até o pé da janela e, nas
   janelas de vidro, é uma folha só, escura e translúcida, da mesma altura em todas as abas; os blocos de dentro ficam por cima dela */
html.nova-2 .nv-janela .nv-j-corpo > .nv-aba-corpo { min-height: 100%; display: flex; flex-direction: column; }
/* Conversas tem listas que rolam por dentro: o conteúdo não pode impor sua altura à janela. */
html.nova-2 .nv-janela[data-app="conversas"] > .nv-j-corpo:has(> .nv-aba-corpo > .cv) { overflow: hidden; }
html.nova-2 .nv-janela[data-app="conversas"] > .nv-j-corpo > .nv-aba-corpo:has(> .cv) { flex: 1 1 0; min-height: 0; height: 100%; overflow: hidden; }
html.nova-2 .nv-janela[data-app="conversas"] .nv-aba-corpo > .cv { flex: 1 1 0; min-height: 0; overflow: hidden; }
html.nova-2 .nv-janela[data-app="conversas"] .cv-ficha-corpo .cv-cartao { min-width: 0; overflow-wrap: anywhere; }
html.nova-2 .nv-janela .nv-aba-corpo > .nv-quadro, html.nova-2 .nv-janela .nv-quadro > .nv-molde { flex: 1 1 auto; min-height: 100%; display: flex; flex-direction: column; }
html.nova-2 .nv-janela .nv-molde > .nv-molde-painel { flex: 1 1 auto; width: 100% !important; max-width: none !important; }
/* o app inteiro fica da cor da janela (o Theus: "antes tava certo, o app todo ficava da cor"): o desenho e o cartão dele não pintam fundo nenhum;
   a altura guardada do desenho (mapa "alturas") não passa da janela, para nenhuma aba rolar sem precisar */
html.nova-2[data-janela] .nv-janela .nv-molde-painel, html.nova-2[data-janela] .nv-janela .nv-desenho-cartao { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html.nova-2 .nv-janela .nv-molde > .nv-molde-painel { min-height: 100% !important; }

/* a tela toda no estilo sistema operacional (11/10, o Theus; tela-toda.js): a janela cobre a tela inteira na MESMA cor de vidro escolhida
   (roxo ou lilás clarinho), e a sala aparece em vulto atrás do desfoque; os três pontos ficam no meio do alto, como em toda janela.
   Alto: as abas dos apps abertos à esquerda, a hora à direita. Lateral: todos os apps por grupo. Embaixo: a pesquisa, com a resposta da babel. */
html.nova-2 .nv-janela.nv-so { inset: 0 !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; z-index: 60 !important; padding-bottom: 76px; box-sizing: border-box; }
html.nova-2 .nv-janela.nv-so:not(.nv-frente) { visibility: hidden; }
html.nova-2[data-janela="roxo"] .nv-janela.nv-so { background: rgba(42, 31, 102, .66) !important; }
html.nova-2 .nv-janela.nv-so .nv-j-cab { height: 44px; border-radius: 0; cursor: default; border-bottom: 1px solid rgba(200, 190, 255, .10); }
html.nova-2 .nv-janela.nv-so .nv-j-cab :is(.nv-j-icone, .nv-j-titulo) { display: none !important; }
html.nova-2 .nv-janela.nv-so .nv-so-hora { position: absolute; right: 20px; font-size: 12px; color: #d7d0f5; font-variant-numeric: tabular-nums; }
html.nova-2 .nv-janela.nv-so .nv-selo { right: 196px; }
html.nova-2 .nv-janela.nv-so :is(.nv-abas, .nv-j-corpo, .n2-cab-app) { padding-left: 112px !important; }
html.nova-2 .nv-janela.nv-so .nv-jornada { padding-left: 120px !important; }
html.nova-2 .nv-janela.nv-so .nv-alca { display: none; }
/* O NAVEGADOR NA TELA TODA (12/10, o Theus: "ele tem que ser tela toda, fica por trás do menu lateral, o commandbar de baixo fica por cima e as
   abas normal em cima… trilha etc vira tipo um menu de opções"): a página do Chrome ocupa a janela inteira debaixo das abas do alto, por trás
   do menu lateral e da barra de baixo; a cabeça e a fileira de abas do app saem e viram o botão de opções (navegador-tela-toda.js); a barra de
   endereço fica numa fileira logo abaixo das abas, depois do menu lateral */
.n2-nav-opcoes { display: none; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] > :is(.n2-cab-app, .nv-abas) { display: none !important; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] > .nv-j-corpo { position: relative; padding: 60px 24px 24px 112px !important; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"]:has(> .nv-j-corpo > .n2p-navegador) { padding-bottom: 0 !important; }   /* a página vai até o pé da tela, por baixo da barra de baixo */
html.nova-2 .nv-janela.nv-so[data-app="navegador"] > .nv-j-corpo:has(> .n2p-navegador) { padding: 0 !important; overflow: hidden; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] .n2p-navegador { position: absolute; inset: 0; display: block; padding: 0; min-height: 0; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] .n2p-navegador > :is(.n2p-cab, .n2p-dicas) { display: none; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] .n2p-palco-nav { position: absolute; inset: 0; display: block; min-height: 0; border-radius: 0; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] .n2p-palco-nav .tela { position: absolute; inset: 0; display: block; min-height: 0; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] .n2p-palco-nav .nav-barra { position: absolute; z-index: 3; top: 10px; left: 112px; right: 196px; margin: 0; padding: 6px; border-radius: 14px; border: 1px solid rgba(200, 190, 255, .14); background: rgba(17, 14, 38, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] .n2p-palco-nav .nav-barra .nav-url { flex: 1; min-width: 0; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] .n2p-palco-nav .nav-moldura { position: absolute; top: 62px; right: 0; bottom: 0; left: 0; min-height: 0 !important; aspect-ratio: auto !important; border: 0; border-radius: 0; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] .n2p-palco-nav .nav-pe { display: none; }
html.nova-2 .nv-janela.nv-so[data-app="navegador"] > .n2-nav-opcoes { display: block; position: absolute; z-index: 4; top: 54px; right: 16px; }
.n2-nav-opcoes-bt { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(200, 190, 255, .18); background: rgba(17, 14, 38, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #efecff; font: 500 14px/1 var(--font, Inter, system-ui); cursor: pointer; }
.n2-nav-opcoes-bt:hover, .n2-nav-opcoes-bt[aria-expanded="true"] { background: rgba(42, 31, 102, .78); }
.n2-nav-opcoes-bt:focus-visible, .n2-nav-opcao:focus-visible { outline: 2px solid #ab97ff; outline-offset: 2px; }
.n2-nav-opcoes-icone { width: 16px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; opacity: .8; }
.n2-nav-opcoes-seta { font-size: 11px; color: #bdb6e3; }
.n2-nav-opcoes-menu { position: absolute; right: 0; top: 48px; min-width: 240px; max-height: min(70vh, 520px); overflow-y: auto; padding: 8px; border-radius: 16px; border: 1px solid rgba(200, 190, 255, .16); background: rgba(24, 20, 56, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 18px 48px rgba(0, 0, 0, .45); }
/* no degrau leve não há desfoque sobre a página que anda (cada quadro novo refaria o desfoque): a mesma cor quase sólida */
body.leve :is(.nv-janela.nv-so[data-app="navegador"] .n2p-palco-nav .nav-barra, .n2-nav-opcoes-bt, .n2-nav-opcoes-menu) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(17, 14, 38, .94) !important; }
.n2-nav-opcoes-titulo { margin: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }   /* sem maiúsculas: "babel" fica minúsculo */
.n2-nav-opcao { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: #e7e2ff; font: 500 14px/1.3 var(--font, Inter, system-ui); cursor: pointer; }
.n2-nav-opcao:hover { background: rgba(255, 255, 255, .07); }
.n2-nav-opcao.atual { background: rgba(171, 151, 255, .18); color: #fff; }
.n2-nav-dica { color: #c9bcff; }
html.nv-modo-so, html.nv-modo-so body { overscroll-behavior-x: none; }   /* o gesto de lado troca de aba, nunca volta a página */
html.nv-modo-so .nv-trilho, html.nova-2 #nvBandeja { display: none !important; }   /* na /nova-2 as abas do alto fazem o papel da bandeja */

/* as abas do alto */
#n2SoAbas, #n2SoLado, #n2SoBusca { display: none; }
html.n2-com-abas #n2SoAbas { display: flex; position: fixed; z-index: 62; top: 0; left: 12px; height: 44px; max-width: calc(50% - 76px); align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.n2-so-aba { flex: 0 0 auto; height: 32px; max-width: 200px; display: inline-flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: #bdb6e3; font: 500 13px/1 Inter, var(--sans, system-ui); cursor: pointer; touch-action: none; }
.n2-so-aba img { width: 16px; height: 16px; opacity: .75; }
.n2-so-aba span:not(.n2-so-x) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n2-so-aba:hover { background: rgba(255, 255, 255, .06); color: #efecff; }
.n2-so-aba[aria-selected="true"] { background: rgba(255, 255, 255, .10); border-color: rgba(200, 190, 255, .18); color: #efecff; }
.n2-so-aba[aria-selected="true"] img { opacity: 1; }
.n2-so-aba:focus-visible, .n2-so-app:focus-visible, .n2-so-mais:focus-visible { outline: 2px solid #ab97ff; outline-offset: 2px; }
.n2-so-aba.n2-movendo { position: relative; z-index: 1; background: rgba(171, 151, 255, .22); cursor: grabbing; }
.n2-so-x { width: 18px; height: 18px; border-radius: 6px; display: inline-grid; place-items: center; color: var(--ink-3); }
.n2-so-x::before { content: '×'; font-size: 15px; line-height: 1; }
.n2-so-x:hover { background: rgba(255, 255, 255, .10); color: #efecff; }
.n2-so-mais { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: #bdb6e3; font-size: 18px; cursor: pointer; }
.n2-so-mais:hover { background: rgba(255, 255, 255, .06); color: #efecff; }

/* todos os apps na lateral, por grupo */
html.nv-so-visivel #n2SoLado { display: block; position: fixed; z-index: 62; top: 56px; bottom: 12px; left: 12px; width: 88px; overflow-y: auto; scrollbar-width: none; padding: 8px 0; box-sizing: border-box; border-radius: 20px; border: 1px solid rgba(200, 190, 255, .10); background: rgba(14, 11, 34, .38); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.n2-so-grupo { display: grid; gap: 2px; padding: 4px 6px 8px; }
.n2-so-grupo + .n2-so-grupo { border-top: 1px solid rgba(200, 190, 255, .08); padding-top: 8px; }
.n2-so-grupo h3 { margin: 0 0 2px; font: 500 10px/1.2 Inter, var(--sans, system-ui); color: var(--ink-3); text-align: center; }
.n2-so-app { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: #bdb6e3; font: 11px/1.15 Inter, var(--sans, system-ui); cursor: pointer; }
.n2-so-app img { width: 20px; height: 20px; opacity: .7; }
.n2-so-app span { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.n2-so-app:hover { background: rgba(255, 255, 255, .06); color: #efecff; }
.n2-so-app:hover img, .n2-so-app[aria-current="page"] img { opacity: 1; }
.n2-so-app[aria-current="page"] { background: rgba(171, 151, 255, .16); color: #efecff; }

/* a pesquisa embaixo */
/* a barra de conversa é a mesma na sala e na tela toda (na sala ela fica no lugar da linha de escrever de sempre, que segue funcionando por trás) */
html.nova-2 body:not(.sem-conta) #n2SoBusca { display: flex; flex-direction: column; align-items: center; gap: 8px; position: fixed; z-index: 62; left: 24px; right: 24px; bottom: 16px; pointer-events: none; }
html.nv-so-visivel #n2SoBusca { left: 112px; }
html.nova-2 body:not(.sem-conta) #entrada { visibility: hidden; }
/* a resposta da babel é a mesma na sala e na tela toda (11/10, o Theus: "a mensagem da sala que o sistema envia, faça ser igual a mensagem
   quando maximizado"): a caixa logo acima da barra; a fala grande de antes e o "VOCÊ" seguem por trás (a voz acende as palavras lá), sem aparecer */
@media (min-width: 761px) { html.nova-2 body:not(.sem-conta) :is(#disse, #fala) { visibility: hidden !important; } }
body.n2-fala-dormindo #disse, body.n2-fala-dormindo #fala { opacity: 0; transition: opacity .8s ease; }   /* a resposta fica 1 minuto e some */
#n2SoBusca > * { pointer-events: auto; }
.n2-so-form { width: min(720px, 100%); height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; box-sizing: border-box; border-radius: 16px; border: 1px solid rgba(200, 190, 255, .18); background: rgba(14, 11, 34, .55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.n2-so-form:focus-within { border-color: rgba(171, 151, 255, .6); }
.n2-so-lupa { width: 14px; height: 14px; border: 2px solid var(--ink-3); border-radius: 50%; position: relative; flex: 0 0 auto; }
.n2-so-lupa::after { content: ''; position: absolute; width: 2px; height: 7px; background: var(--ink-3); right: -4px; bottom: -6px; transform: rotate(-45deg); border-radius: 2px; }
#n2SoCampo { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #efecff; font: 15px Inter, var(--sans, system-ui); }
#n2SoCampo::placeholder { color: var(--ink-3); }
#n2SoSugestoes { width: min(720px, 100%); margin: 0; padding: 6px; box-sizing: border-box; list-style: none; border-radius: 16px; border: 1px solid rgba(200, 190, 255, .14); background: rgba(20, 16, 44, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); order: -1; }
#n2SoSugestoes[hidden] { display: none; }
#n2SoSugestoes li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; cursor: pointer; color: #efecff; font-size: 14px; }
#n2SoSugestoes li:hover, #n2SoSugestoes li[aria-selected="true"] { background: rgba(255, 255, 255, .07); }
#n2SoSugestoes li img { width: 18px; height: 18px; }
#n2SoSugestoes li b { font-weight: 500; }
#n2SoSugestoes li small { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.n2-so-pedir { color: #cdbfff; }

/* a carta coringa (coringa.js): o botão na barra e a paleta de tudo */
.n2-so-coringa { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(171, 151, 255, .28), rgba(171, 151, 255, .12)); color: #efecff; display: grid; place-items: center; cursor: pointer; }
.n2-so-coringa svg { width: 20px; height: 20px; }
.n2-so-coringa:hover { background: rgba(171, 151, 255, .4); }
.n2-so-coringa[aria-expanded="true"] { background: #ab97ff; color: #160f33; }
.n2-so-coringa:focus-visible { outline: 2px solid #ab97ff; outline-offset: 1px; }
.n2-coringa { width: min(720px, 100%); max-height: min(60vh, 460px); overflow: auto; margin: 0; padding: 8px; box-sizing: border-box; border-radius: 16px; border: 1px solid rgba(200, 190, 255, .18); background: rgba(20, 16, 44, .96); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .7); order: -2; }
.n2-coringa[hidden] { display: none; }
.n2-cor-topo { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px 8px; }
.n2-cor-topo b { font: 600 14px var(--sans, system-ui); color: #efecff; }
.n2-cor-dica { font-size: 12px; color: var(--ink-3); }
.n2-cor-busca { width: 100%; height: 42px; padding: 0 14px; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(200, 190, 255, .22); background: rgba(14, 11, 34, .6); color: #efecff; font: 15px var(--sans, system-ui); }
.n2-cor-busca::placeholder { color: var(--ink-3); }
.n2-cor-busca:focus-visible { outline: 2px solid #ab97ff; outline-offset: 1px; }
.n2-cor-corpo { display: grid; gap: 2px; margin-top: 6px; }
.n2-cor-grupo { display: flex; align-items: center; gap: 7px; padding: 10px 10px 4px; font: 600 11.5px var(--sans, system-ui); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.n2-cor-ic { display: inline-grid; place-items: center; width: 15px; height: 15px; color: #ab97ff; } .n2-cor-ic svg { width: 15px; height: 15px; }
.n2-cor-item { display: grid; gap: 1px; text-align: left; width: 100%; min-height: 42px; padding: 7px 12px; border: 0; border-radius: 10px; background: transparent; color: #efecff; cursor: pointer; font: 14px var(--sans, system-ui); }
.n2-cor-item b { font-weight: 500; } .n2-cor-item small { color: var(--ink-3); font-size: 12px; }
.n2-cor-item:hover, .n2-cor-item[aria-selected="true"] { background: rgba(171, 151, 255, .16); }
.n2-cor-item:focus-visible { outline: 2px solid #ab97ff; outline-offset: -2px; }
.n2-so-resposta { width: min(720px, 100%); margin: 0; padding: 8px 14px; box-sizing: border-box; border-radius: 12px; background: rgba(14, 11, 34, .5); color: #d7d0f5; font-size: 13px; line-height: 1.4; max-height: calc(4.2em + 16px); overflow-y: auto; }
/* 18/10 (o Olheiro: "conteúdo cortado sem rolagem" em 3 telas): a resposta comprida perdia a terceira linha sem aviso (3,6em com 16 px de respiro
   davam 1,7 linha); agora mostra 3 linhas e rola o resto. A lista do desenho que estica (flex:1 em coluna, overflow:hidden: os pratos do
   Cardápio do cliente) rola dentro do cartão em vez de esconder o que passa */
/* o estilo posto por JS chega escrito pelo navegador, com espaço ("flex: 1 1 0%"): os Comprovantes do Dinheiro escapavam da regra (18/10, 21:5x) */
html.nova-2 .nv-janela :is([style*="flex:1"], [style*="flex: 1"]):is([style*="flex-direction:column"], [style*="flex-direction: column"]):is([style*="overflow:hidden"], [style*="overflow: hidden"]) { overflow-y: auto !important; }
.n2-so-resposta[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .n2-so-aba.n2-movendo { transition: none; } }
html.nv-modo-so:has(.n2-so-resposta:not([hidden])) .nv-janela.nv-so { padding-bottom: 122px; }   /* a resposta da babel acima da pesquisa não cobre o "Continuar com" */
/* 17/10 (o Olheiro: "elemento coberto" em 18 telas): sem a resposta, a barra cobria o fim da janela; a janela reserva a altura medida da barra */
html.nv-modo-so .nv-janela.nv-so, html.nv-modo-so:has(.n2-so-resposta:not([hidden])) .nv-janela.nv-so { padding-bottom: var(--n2-barra-altura, 122px); }

/* a troca entre as telas à vista (janela.js, animarTroca): no tamanho normal as de trás ficam mais apagadas e a da frente acende;
   na tela toda, a que sai fica visível só enquanto desliza */
html.nova-2 .nv-janela:not(.nv-so) { transition: opacity .25s ease; }
html.nova-2 .nv-janela:not(.nv-so):not(.nv-frente) { opacity: .82; }
html.nova-2 .nv-janela.nv-so.nv-saindo { visibility: visible; z-index: 61 !important; pointer-events: none; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.nova-2 .nv-janela.nv-so.nv-saindo > .nv-j-cab { visibility: hidden; }   /* a barra de cima é a da que entra: não anda nem dobra */
@media (prefers-reduced-motion: reduce) { html.nova-2 .nv-janela:not(.nv-so) { transition: none; } }


/* ---- a cabeça do app, igual em todas as telas (nova-2.js, padronizar) ---- */
html.nova-2 .n2-cab-app { flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 24px 4px; box-sizing: border-box; }
html.nova-2 .n2-cab-icone { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .065); border: 1px solid rgba(200, 190, 255, .10); }
html.nova-2 .n2-cab-icone img { width: 22px; height: 22px; }
html.nova-2 .n2-cab-nome { margin: 0; font: 500 22px/1.2 Inter, var(--sans, system-ui); letter-spacing: -.015em; color: #efecff; white-space: nowrap; }
html.nova-2 .n2-cab-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
html.nova-2 .n2-cab-acoes:empty { display: none; }
html.nova-2 .nv-janela .nv-j-titulo, html.nova-2 .nv-janela .nv-j-cab .nv-j-icone { display: none !important; }
html.nova-2 [data-n2fora] { display: none !important; }
html.nova-2 .nv-jornada { display: none !important; }   /* o "Continuar com" saiu: a pesquisa e a lateral levam a qualquer app */
/* as abas do app: sempre a fileira da janela, logo abaixo do nome, com o traço lilás na aberta */
html.nova-2 .nv-janela .nv-abas:not([hidden]) { display: flex !important; gap: 22px; padding: 6px 24px 0; border-bottom: 1px solid rgba(200, 190, 255, .10); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
html.nova-2 .nv-janela .nv-abas::-webkit-scrollbar { display: none; }
html.nova-2 .nv-janela .nv-aba { padding: 8px 0 10px; border-radius: 0; color: var(--ink-3); font: 400 13.5px/1 Inter, var(--sans, system-ui); flex-shrink: 0; }
html.nova-2 .nv-janela .nv-aba:hover { color: #efecff; }
html.nova-2 .nv-janela .nv-aba[aria-selected="true"] { color: #efecff; font-weight: 500; }
html.nova-2 .nv-janela .nv-aba[aria-selected="true"]::after { left: 0; right: 0; background: #ab97ff; }
html.nova-2 .nv-janela .nv-j-corpo { padding-top: 16px; }
[data-laco] { user-select: none; }
[data-laco].laco-arrastando { cursor: grabbing; }
[data-laco].laco-arrastando * { pointer-events: none; }
/* clicar num app: o aberto tem um ponto, o da frente acende, o toque afunda de leve */
.n2-so-app { position: relative; transition: background .15s, color .15s, transform .12s; }
.n2-so-app:active { transform: scale(.94); }
.n2-so-app[data-aberto]::after { content: ''; position: absolute; left: 4px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #ab97ff; }
.n2-so-aba[data-min] { opacity: .6; }
.n2-so-aba:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .n2-so-app, .n2-so-app:active, .n2-so-aba:active { transition: none; transform: none; } }

/* ---- a Visão geral do Painel (visao.js): o dinheiro grande em cima, a saúde, os 30 dias e o que precisa de você no meio, os apps embaixo ---- */
.n2v { display: grid; gap: 16px; padding: 4px 24px 24px; align-content: start; }
.n2v-data { margin: 0; color: #bdb6e3; font-size: 14px; }
.n2v-cartao { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 18px; background: rgba(17, 14, 38, .55); border: 1px solid rgba(200, 190, 255, .10); cursor: pointer; transition: border-color .15s, background .15s, transform .12s; min-width: 0; }
.n2v-cartao:hover { border-color: rgba(171, 151, 255, .40); background: rgba(24, 20, 56, .70); }
.n2v-cartao:active { transform: scale(.99); }
.n2v-cartao:focus-visible { outline: 2px solid #ab97ff; outline-offset: 2px; }
.n2v-rot { color: #bdb6e3; font-size: 13px; }
.n2v-cartao small { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; }
.n2v-herois { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.n2v-heroi { min-height: 132px; justify-content: space-between; }
.n2v-grande { font: 600 clamp(26px, 2.6vw, 40px)/1.05 Inter, var(--sans, system-ui); letter-spacing: -.02em; color: #efecff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n2v-ouro { color: #f5cf7a; }
.n2v-alerta { border-color: rgba(244, 168, 192, .45); }
.n2v-alerta .n2v-grande { color: #f4a8c0; }
.n2v-meio { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 1.4fr) minmax(0, 1.2fr); gap: 16px; }
.n2v-saude { align-items: center; text-align: center; }
.n2v-saude .n2v-rot { align-self: flex-start; }
.n2v-anel { position: relative; width: 132px; height: 132px; margin: 4px 0; }
.n2v-anel-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.n2v-anel-num b { font: 600 36px/1 Inter, var(--sans, system-ui); color: #efecff; }
.n2v-anel-num small { color: #6ee7c8; font-size: 13px; }
.n2v-barras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; flex: 1; margin-top: 8px; }
.n2v-barra { display: grid; gap: 4px; justify-items: start; }
.n2v-barra-trilho { width: 100%; height: 120px; border-radius: 10px; background: rgba(200, 190, 255, .06); display: flex; align-items: flex-end; overflow: hidden; }
.n2v-barra-trilho i { display: block; width: 100%; border-radius: 10px; }
.n2v-barra b { font: 600 17px/1.2 Inter, var(--sans, system-ui); color: #efecff; }
.n2v-barra span { color: #bdb6e3; font-size: 13px; }
.n2v-precisa { padding: 18px 20px; border-radius: 18px; background: rgba(17, 14, 38, .55); border: 1px solid rgba(200, 190, 255, .10); }
.n2v-precisa h3 { margin: 0 0 10px; font: 500 13px Inter, var(--sans, system-ui); color: #bdb6e3; }
.n2v-precisa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.n2v-precisa li button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); color: #efecff; font-size: 14px; cursor: pointer; }
.n2v-precisa li button:hover { background: rgba(171, 151, 255, .14); }
.n2v-precisa li button:focus-visible { outline: 2px solid #ab97ff; }
.n2v-precisa li b { margin-left: auto; color: #f5cf7a; font-weight: 500; }
.n2v-precisa li i { font-style: normal; color: var(--ink-3); }
.n2v-calmo { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.n2v-contas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.n2v-medio { font: 600 30px/1.1 Inter, var(--sans, system-ui); color: #efecff; }
@media (max-width: 1100px) { .n2v-herois, .n2v-contas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .n2v-meio { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .n2v-cartao { transition: none; } .n2v-cartao:active { transform: none; } }

/* os botões da barra: anexar à esquerda, voz e enviar à direita */
.n2-so-form { padding: 0 6px 0 6px !important; gap: 4px !important; }
.n2-so-bt { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 12px; background: transparent; color: #bdb6e3; display: grid; place-items: center; cursor: pointer; }
.n2-so-bt svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.n2-so-bt:hover { background: rgba(255, 255, 255, .07); color: #efecff; }
.n2-so-bt:focus-visible { outline: 2px solid #ab97ff; outline-offset: 1px; }
.n2-so-voz[aria-pressed="true"] { background: rgba(171, 151, 255, .22); color: #efecff; }
/* gravando a nota de voz para a pessoa (18/10): o anel na cor da marca enquanto o microfone está aberto */
.n2-so-voz.gravando { box-shadow: 0 0 0 2px var(--brand); }
.n2-so-enviar { background: rgba(171, 151, 255, .18); color: #efecff; }
.n2-so-enviar:hover { background: #ab97ff; color: #160f33; }
#n2SoCampo { padding: 0 6px; font-size: 16px; /* conserto do Olheiro */}
/* o cartão do arquivo recebido: o que a babel viu e as escolhas */
.n2-anexo { width: min(720px, 100%); box-sizing: border-box; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(171, 151, 255, .35); background: rgba(20, 16, 44, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #efecff; font-size: 14px; line-height: 1.45; }
.n2-anexo[hidden] { display: none; }
.n2-anexo p { margin: 0 0 10px; }
.n2-anexo-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.n2-anexo-opcoes button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(200, 190, 255, .22); background: rgba(255, 255, 255, .04); color: #efecff; font: 500 13px Inter, var(--sans, system-ui); cursor: pointer; }
.n2-anexo-opcoes button:hover { background: rgba(171, 151, 255, .2); border-color: rgba(171, 151, 255, .5); }
.n2-anexo-opcoes .n2-anexo-nao { color: var(--ink-3); border-color: transparent; background: transparent; }

/* ---- tudo o que flutua segue a cor escolhida das janelas (11/10, o Theus: "tanto as opções que saem da conversa quanto o menu dos apps
   acompanhar a cor escolhida no sistema"): o menu dos apps, as opções da barra, o cartão do arquivo, a resposta, a barra e a lateral ---- */
html.nova-2[data-janela="roxo"] { --n2-vidro: rgba(42, 31, 102, .72); --n2-vidro-filtro: blur(24px) saturate(1.15); --n2-vidro-borda: rgba(171, 151, 255, .26); --n2-vidro-claro: rgba(255, 255, 255, .07); }
html.nova-2[data-janela="lilas"] { --n2-vidro: rgba(184, 153, 255, .20); --n2-vidro-filtro: blur(28px) saturate(1.2); --n2-vidro-borda: rgba(215, 196, 255, .38); --n2-vidro-claro: rgba(255, 255, 255, .12); }
html.nova-2[data-janela] body:not(.leve) :is(.nv-lu-vidro, #n2SoSugestoes, .n2-anexo, .n2-so-form, .n2-so-resposta, #n2SoLado) {
  background: var(--n2-vidro) !important; border-color: var(--n2-vidro-borda) !important;
  -webkit-backdrop-filter: var(--n2-vidro-filtro) !important; backdrop-filter: var(--n2-vidro-filtro) !important; }
html.nova-2[data-janela] body:not(.leve) .nv-lu-vidro { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 30px 90px rgba(0, 0, 0, .40) !important; }
html.nova-2[data-janela] body:not(.leve) :is(#n2SoSugestoes li:hover, #n2SoSugestoes li[aria-selected="true"], .nv-lu-app:hover, .nv-lu-app:focus-visible, .n2-anexo-opcoes button:hover) { background: var(--n2-vidro-claro) !important; }
html.nova-2[data-janela] .nv-lu-busca { background: var(--n2-vidro-claro); border-color: var(--n2-vidro-borda); }
/* no lilás clarinho as caixas pequenas passam por cima do chão claro da sala: a letra de apoio clareia e ganha uma sombra leve para ser lida */
html.nova-2[data-janela="lilas"] :is(#n2SoSugestoes, .n2-anexo, .n2-so-form, .n2-so-resposta, .nv-lu-vidro, #n2SoLado) { text-shadow: 0 1px 2px rgba(28, 18, 70, .55); }
html.nova-2[data-janela="lilas"] :is(#n2SoSugestoes li small, .n2-so-pedir, .n2-so-resposta, .n2-anexo-nao, .nv-lu-grupo h3, .n2-so-grupo h3, .n2-so-app, .n2-so-bt) { color: #f3eeff !important; }
html.nova-2[data-janela="lilas"] #n2SoCampo::placeholder, html.nova-2[data-janela="lilas"] .nv-lu-busca::placeholder { color: rgba(243, 238, 255, .85); }

.n2-arrastando { cursor: grabbing; user-select: none; -webkit-user-select: none; transition: none !important; }

/* ---- Precisa de você (ronda.js): a decisão da vez à esquerda, a fila à direita, a faixa do que está saindo em cima ---- */
.n2r { display: grid; gap: 14px; padding: 4px 24px 24px; align-content: start; outline: none; }
.n2r-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.n2r-resumo { margin: 0; color: #d7d0f5; font-size: 15px; }
.n2r-topo-bts { margin-left: auto; display: flex; gap: 8px; }
.n2r-bt { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(200, 190, 255, .24); background: rgba(255, 255, 255, .04); color: #efecff; font: 500 13.5px Inter, var(--sans, system-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.n2r-bt:hover { background: rgba(255, 255, 255, .09); }
.n2r-bt:focus-visible, .n2r-chip:focus-visible, .n2r-fila button:focus-visible { outline: 2px solid #ab97ff; outline-offset: 2px; }
.n2r-bt[disabled], .n2r-chip[disabled] { opacity: .45; cursor: default; }
.n2r-bt[aria-pressed="true"] { border-color: rgba(171, 151, 255, .6); background: rgba(171, 151, 255, .16); }
.n2r-principal { background: #ab97ff; color: #160f33; border-color: transparent; }
.n2r-principal:hover { background: #bfafff; }
.n2r-leve { border-color: transparent; color: #bdb6e3; }
.n2r-bt kbd { font: 600 10.5px Inter, var(--sans, system-ui); padding: 1px 5px; border-radius: 5px; border: 1px solid currentColor; opacity: .6; }
.n2r-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.n2r-chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(200, 190, 255, .18); background: transparent; color: #bdb6e3; font: 500 13px Inter, var(--sans, system-ui); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.n2r-chip b { font-weight: 600; color: #efecff; }
.n2r-chip[aria-pressed="true"] { background: rgba(171, 151, 255, .18); border-color: rgba(171, 151, 255, .5); color: #efecff; }
.n2r-faixa { display: grid; gap: 6px; padding: 10px 14px; border-radius: 14px; background: rgba(245, 207, 122, .10); border: 1px solid rgba(245, 207, 122, .35); color: #f5e3b5; font-size: 14px; }
.n2r-faixa-item { display: flex; align-items: center; gap: 12px; } .n2r-faixa-item .n2r-bt { margin-left: auto; height: 30px; }
.n2r-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.n2r-cartao, .n2r-vazio, .n2r-fila { border-radius: 18px; background: rgba(17, 14, 38, .55); border: 1px solid rgba(200, 190, 255, .12); padding: 20px 22px; }
.n2r-cartao { display: grid; gap: 14px; max-width: 760px; transition: opacity .25s, transform .25s; }
.n2r-cartao.n2r-saindo { opacity: .35; transform: translateY(-4px); }
.n2r-cartao-cab { display: flex; align-items: center; gap: 10px; }
.n2r-tipo { font: 600 11.5px Inter, var(--sans, system-ui); letter-spacing: .04em; color: #cdbfff; }
.n2r-prazo { margin-left: auto; font-size: 12.5px; color: #bdb6e3; font-variant-numeric: tabular-nums; }
.n2r-prazo.n2r-quase { color: #f5cf7a; }
.n2r-pergunta { margin: 0; font: 500 19px/1.4 Inter, var(--sans, system-ui); color: #efecff; }
.n2r-origem { display: grid; gap: 6px; }
.n2r-quem { font-size: 12.5px; color: #bdb6e3; }
.n2r-origem blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid #ab97ff; border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, .04); color: #e3ddff; font-size: 14px; }
.n2r-aviso { margin: 0; color: #f5cf7a; font-size: 13.5px; }
.n2r-bts { display: flex; gap: 10px; flex-wrap: wrap; } .n2r-bts .n2r-bt { height: 44px; padding: 0 20px; font-size: 15px; }
.n2r-dica { margin: 0; color: var(--ink-3); font-size: 12.5px; }
.n2r-vazio h3 { margin: 0 0 6px; font: 500 20px Inter, var(--sans, system-ui); color: #efecff; } .n2r-vazio p { margin: 0 0 10px; color: #bdb6e3; line-height: 1.5; }
.n2r-fila h4 { margin: 0 0 10px; font: 500 12.5px Inter, var(--sans, system-ui); color: #bdb6e3; }
.n2r-fila ol, .n2r-fila ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.n2r-fila ol button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: #d7d0f5; font-size: 13px; }
.n2r-fila ol button:hover { background: rgba(255, 255, 255, .05); }
.n2r-fila ol button[aria-current="true"] { background: rgba(171, 151, 255, .16); box-shadow: inset 3px 0 0 #ab97ff; color: #efecff; }
.n2r-n { color: var(--ink-3); font-variant-numeric: tabular-nums; } .n2r-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .n2r-fila small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.n2r-nada { margin: 0; color: var(--ink-3); font-size: 13px; }
.n2r-feitas { margin-top: 12px; color: #bdb6e3; font-size: 13px; } .n2r-feitas summary { cursor: pointer; } .n2r-feitas li { padding: 4px 0; } .n2r-feitas b { color: #efecff; font-weight: 500; }
@media (max-width: 900px) { .n2r-grade { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .n2r-cartao { transition: none; } }

html.nova-2 #nvPendencias { display: none !important; }   /* na /nova-2 o aviso do topo é o das decisões (#n2Decisoes) */

/* ---- os modos da barra: o chip "babel" ou "Para: Ana · WhatsApp"; a lista das conversas e das pessoas por papel ---- */
.n2-so-modo { flex: 0 0 auto; height: 32px; max-width: 240px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(200, 190, 255, .22); background: rgba(255, 255, 255, .05); color: #d7d0f5; font: 500 12.5px Inter, var(--sans, system-ui); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; overflow: hidden; white-space: nowrap; }
.n2-so-modo:hover { background: rgba(255, 255, 255, .10); }
.n2-so-modo:focus-visible { outline: 2px solid #ab97ff; outline-offset: 1px; }
.n2-so-modo i { font-style: normal; font-size: 10px; opacity: .7; }
.n2-so-modo { display: inline-flex; align-items: center; gap: 6px; } .n2-so-modo-estrela { display: inline-grid; place-items: center; width: 16px; height: 16px; color: #ab97ff; } .n2-so-modo-estrela svg { width: 15px; height: 15px; }
.n2-so-modo[aria-expanded="true"] { background: rgba(171, 151, 255, .28); border-color: rgba(171, 151, 255, .6); }
.n2-so-modo-para { overflow: hidden; text-overflow: ellipsis; } .n2-so-modo-para b { font-weight: 600; color: #efecff; } .n2-so-modo-para small { color: #bdb6e3; }
.n2-so-modo.n2-so-modo-pessoa { border-color: rgba(110, 231, 200, .5); background: rgba(110, 231, 200, .12); color: #e9fff8; }
#n2SoSugestoes .n2-so-grupo-titulo { min-height: 26px; padding: 6px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); cursor: default; background: none !important; }
.n2-cv-dica { margin: 0; padding: 10px 14px; color: #bdb6e3; font-size: 13px; }

/* ---- Agenda (agenda.js): a semana em cima, a linha do agora, a coluna de apoio ---- */
.nv-ag-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.nv-ag-semana-dia { display: grid; grid-template-columns: auto auto auto; align-items: baseline; justify-content: center; gap: 6px; padding: 6px 4px; height: 36px; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(200, 190, 255, .12); background: rgba(17, 14, 38, .45); color: #bdb6e3; cursor: pointer; font: 12px Inter, var(--sans, system-ui); }
.nv-ag-semana-dia b { font: 600 17px Inter, var(--sans, system-ui); color: #efecff; } .nv-ag-semana-dia i { font-style: normal; font-size: 11.5px; color: #cdbfff; }
.nv-ag-semana-dia[data-hoje] { border-color: rgba(110, 231, 200, .5); }
.nv-ag-semana-dia[aria-pressed="true"] { background: rgba(171, 151, 255, .2); border-color: rgba(171, 151, 255, .6); }
.nv-ag-semana-dia:focus-visible { outline: 2px solid #ab97ff; outline-offset: 2px; }
.nv-ag-agora { position: relative; z-index: 2; height: 0; border-top: 2px solid #f4a8c0; pointer-events: none; }
.nv-ag-agora::before { content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #f4a8c0; }
.nv-ag-lista { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: #d7d0f5; }
.nv-ag-lista .nv-link { text-align: left; }

/* o Treino (treino.js, 11/10): a conversa de teste com o agente à esquerda, a Mente do agente à direita; o dono é o cliente */
.n2t { padding: 16px 24px 24px; height: 100%; box-sizing: border-box; }
.n2t-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; height: 100%; min-height: 420px; }
.n2t-conversa { display: flex; flex-direction: column; min-height: 0; border-radius: 16px; border: 1px solid rgba(200, 190, 255, .10); background: rgba(14, 11, 34, .55); }
.n2t-topo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(200, 190, 255, .10); color: #b9b2df; font-size: 13px; }
.n2t-agente { height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(200, 190, 255, .22); background: rgba(255, 255, 255, .05); color: #efecff; font: 500 13px Inter, var(--sans, system-ui); }
.n2t-conta { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.n2t-fio { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.n2t-bolha { max-width: 72%; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: #efecff; font-size: 14px; line-height: 1.45; }
.n2t-bolha p { margin: 0; white-space: pre-wrap; max-width: 72ch; /* conserto do Olheiro */}
.n2t-bolha[data-de="cliente"] { align-self: flex-end; background: rgba(171, 151, 255, .22); }
.n2t-bolha[data-de="agente"] { align-self: flex-start; }
.n2t-bolha[data-de="casa"], .n2t-bolha[data-de="aviso"] { align-self: center; max-width: 86%; background: transparent; border: 1px dashed rgba(200, 190, 255, .22); color: #b9b2df; font-size: 13px; }
.n2t-bolha[data-corrigida] { border: 1px solid rgba(110, 231, 200, .35); }
.n2t-pensando p { color: var(--ink-3); }
.n2t-sob { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--ink-3); font-size: 11.5px; }
.n2t-lapis { border: 0; background: none; color: #cdbfff; font: 500 12px Inter, var(--sans, system-ui); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.n2t-lapis:hover { background: rgba(171, 151, 255, .14); }
.n2t-ensinar { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.n2t-certo { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(200, 190, 255, .22); background: rgba(14, 11, 34, .6); color: #efecff; font: 14px/1.4 Inter, var(--sans, system-ui); resize: vertical; }
.n2t-linha { display: flex; align-items: center; gap: 10px; }
.n2t-msg { margin: 0; color: #b9b2df; font-size: 12.5px; }
.n2t-ok { margin: 8px 0 0 !important; color: #6ee7c8; font-size: 12.5px; }
.n2t-dica-barra { margin: 0; padding: 12px 16px; border-top: 1px solid rgba(200, 190, 255, .10); color: var(--ink-3); font-size: 12.5px; }
.n2t-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(200, 190, 255, .10); }
.n2t-campo { flex: 1; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(200, 190, 255, .22); background: rgba(255, 255, 255, .05); color: #efecff; font: 14px Inter, var(--sans, system-ui); }
.n2t-bt { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(200, 190, 255, .22); background: rgba(255, 255, 255, .05); color: #efecff; font: 500 13px Inter, var(--sans, system-ui); cursor: pointer; }
.n2t-form .n2t-bt { height: 40px; }
.n2t-forte { background: #ab97ff; border-color: #ab97ff; color: #160f33; }
.n2t-bt:disabled { opacity: .5; cursor: default; }
.n2t-mente { border-radius: 16px; border: 1px solid rgba(200, 190, 255, .10); background: rgba(14, 11, 34, .55); padding: 16px; overflow-y: auto; min-height: 0; color: #d7d0f5; font-size: 13px; }
.n2t-mente h4 { margin: 0 0 12px; font: 600 15px Inter, var(--sans, system-ui); color: #efecff; }
.n2t-rot { margin: 10px 0 4px; color: var(--ink-3); font-size: 12px; }
.n2t-origem { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.n2t-origem[data-origem="conhecimento"] { color: #6ee7c8; } .n2t-origem[data-origem="nao-sabe"] { color: #f4c38a; }
.n2t-sabe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.n2t-sabe li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.n2t-sabe b { font-weight: 500; color: #efecff; } .n2t-sabe span { color: #b9b2df; }
.n2t-dica { color: var(--ink-3); margin: 0; }
.n2t-vazio { padding: 48px 24px; text-align: center; color: #b9b2df; } .n2t-vazio h3 { color: #efecff; font-weight: 600; }
@media (max-width: 900px) { .n2t-grade { grid-template-columns: 1fr; } .n2t-mente { max-height: 240px; } }

/* a aba Ensinar (treino.js) */
.n2e-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.n2e-resumo { margin: 0 0 12px; color: #d7d0f5; font-size: 14px; }
.n2e-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.n2e-lista li { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(200, 190, 255, .10); background: rgba(14, 11, 34, .55); }
.n2e-cab { display: flex; flex-direction: column; gap: 2px; } .n2e-cab b { color: #efecff; font-weight: 500; } .n2e-cab small { color: var(--ink-3); }
.n2e-novo { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid rgba(200, 190, 255, .10); background: rgba(14, 11, 34, .55); }
.n2e-novo h4 { margin: 0 0 4px; color: #efecff; font: 600 14px Inter, var(--sans, system-ui); }
@media (max-width: 900px) { .n2e-grade { grid-template-columns: 1fr; } }

/* ---- a Base (base.js, 11/10, o Theus: "fui na base e não mostra base"): o Mapa do saber de verdade — anéis, gavetas com os cartões e os buracos */
.n2b-grade { display: grid; grid-template-columns: 372px minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.n2b-anel { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.n2b-anel svg { width: 100%; max-width: 360px; height: auto; }
.n2b-anel svg text { font: 500 10.5px Inter, var(--sans, system-ui); fill: #efecff; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.n2b-anel svg .n2b-rotulo { paint-order: stroke; stroke: #08071a; stroke-width: 3px; stroke-linejoin: round; }
.n2b-anel svg .n2b-centro-n { font-size: 21px; font-weight: 500; }
.n2b-anel svg .n2b-centro-t { font-size: 12px; fill: var(--ink-3); }
.n2b-legenda { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--ink-3); }
.n2b-gavetas { display: flex; flex-direction: column; min-width: 0; }
.n2b-cab, .n2b-linha { display: grid; grid-template-columns: minmax(150px, 1.3fr) 72px 80px 48px minmax(110px, 1fr); gap: 10px; align-items: center; padding: 0 10px; }
.n2b-cab { height: 30px; font: 600 11px Inter, var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid rgba(200, 190, 255, .10); }
.n2b-linha { width: 100%; min-height: 46px; padding-top: 6px; padding-bottom: 6px; border: 0; border-bottom: 1px solid rgba(200, 190, 255, .10); border-radius: 0; background: transparent; color: #efecff; font: 400 13px Inter, var(--sans, system-ui); text-align: left; cursor: pointer; }
.n2b-linha:hover { background: rgba(255, 255, 255, .04); }
.n2b-linha:focus-visible { outline: 2px solid #ab97ff; outline-offset: -2px; }
.n2b-linha[aria-pressed="true"] { background: rgba(171, 151, 255, .12); }
.n2b-num { text-align: right; color: #bdb6e3; font-variant-numeric: tabular-nums; text-transform: none; /* conserto do Olheiro */}
.n2b-linha .n2b-seus { color: #efecff; font-weight: 500; }
.n2b-nota { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n2b-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.n2b-cartoes h4 { grid-column: 1 / -1; margin: 4px 0 0; font: 600 12px Inter, var(--sans, system-ui); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.n2b-cartao { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: #110e26; border: 1px solid rgba(200, 190, 255, .10); min-width: 0; }
.n2b-cartao[data-camada="seus"] { border-color: rgba(171, 151, 255, .45); }
.n2b-cartao b { font-weight: 500; font-size: 13px; color: #efecff; overflow-wrap: anywhere; }
.n2b-cartao p { margin: 0; font-size: 13px; color: #bdb6e3; overflow-wrap: anywhere; }
.n2b-chip { align-self: flex-start; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .065); color: #bdb6e3; }
.n2b-cartao[data-camada="seus"] .n2b-chip { background: rgba(171, 151, 255, .18); color: #cdbfff; }
.n2b-buracos { display: flex; flex-direction: column; gap: 2px; border-radius: 16px; background: #110e26; border: 1px solid rgba(128, 198, 255, .3); padding: 12px 14px; }
.n2b-buracos h4 { margin: 0 0 6px; font: 500 12px Inter, var(--sans, system-ui); color: var(--ink-3); }
.n2b-buracos ul { list-style: none; margin: 0; padding: 0; }
.n2b-buracos li { display: flex; flex-direction: column; gap: 4px; padding: 9px 0; border-top: 1px solid rgba(200, 190, 255, .10); font-size: 13px; color: #efecff; }
.n2b-buracos li .n2r-bt { height: 28px; padding: 0 10px; align-self: flex-start; font-size: 12px; color: #cdbfff; }
.n2b-vazio { padding: 18px 12px; text-align: center; color: #bdb6e3; font-size: 13px; border: 1px dashed rgba(200, 190, 255, .22); border-radius: 12px; }
.n2b-info { color: #80c6ff; font-weight: 500; }
.n2b-apagado { opacity: .5; cursor: not-allowed; }
.n2b-nota-bt { align-self: center; font-size: 12px; color: #f5d27d; max-width: 320px; }
.n2b-caixa { gap: 10px; }
.n2b-caixa .n2b-dica { margin: 0; font-size: 13px; color: #bdb6e3; }
@media (max-width: 1180px) { .n2b-grade { grid-template-columns: minmax(0, 1fr) 300px; } .n2b-anel { grid-column: 1 / -1; } }
@media (max-width: 860px) { .n2b-grade { grid-template-columns: 1fr; } .n2b-cartoes { grid-template-columns: 1fr; } }

/* o cartão da leitura do arquivo solto (12/10, E5 da máquina de estados): os destinos com o liga/desliga e "Ver os pedaços" (tela-toda.js, mostrarLeitura) */
.n2-leitura p { margin: 0 0 8px; }
.n2-leitura-destinos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.n2-leitura-destinos label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; }
.n2-leitura-destinos input { width: 16px; height: 16px; margin: 0; accent-color: #ab97ff; }
.n2-leitura-destinos b { min-width: 22px; padding: 0 7px; border-radius: 999px; background: rgba(171, 151, 255, .22); font-weight: 600; font-size: 12px; text-align: center; }
.n2-leitura-destinos small, .n2-leitura-resto, .n2-leitura-pedacos small { color: #bdb6e3; font-size: 12px; }
.n2-leitura-pedacos { max-height: min(40vh, 360px); overflow: auto; margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.n2-leitura-pedacos[hidden] { display: none; }
.n2-leitura-pedacos h4 { margin: 8px 0 4px; font: 600 12px Inter, var(--sans, system-ui); letter-spacing: .02em; color: #d9d2ff; }
.n2-leitura-pedacos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.n2-leitura-pedacos li { display: grid; gap: 1px; padding: 4px 0; border-bottom: 1px solid rgba(200, 190, 255, .08); overflow-wrap: anywhere; }
.n2-anexo-opcoes .n2-leitura-gravar { border-color: rgba(171, 151, 255, .6); background: rgba(171, 151, 255, .22); }
.n2-anexo-opcoes .n2-leitura-gravar[disabled] { opacity: .55; cursor: default; }
/* o eco da fala no celular (14/10, o Theus: "no mobile, lá no Converse, o por cima na tela principal só pra explicar"): até 760 px o fio
   da conversa já mostra a fala dela, e a mesma frase repetida acima do Converse ficava por cima dos atalhos ("o que é a babel-os?").
   O Olheiro mediu: tapava 92% e 100% de dois atalhos. Os avisos que não são a fala (resposta a uma pessoa, erro) continuam. */
@media (max-width: 760px) { html.nova-2 .n2-so-resposta[data-eco] { display: none; } }

/* Perfil do agente: formulário real no lugar do cartão sem seleção do desenho 10a. */
.n2-agente-perfil-lateral { min-height: 0; overflow: auto; }
.n2-agente-perfil { display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--ink); font-family: var(--font); }
.n2-agente-perfil h3 { margin: 0; font-size: 16px; }
.n2-ap-dica,.n2-ap-status { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.n2-ap-status[data-erro] { color: var(--bad); }
.n2-ap-form,.n2-ap-campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.n2-ap-form { gap: 12px; }
.n2-ap-campo { font-size: 12px; color: var(--ink-2); }
.n2-agente-perfil input,.n2-agente-perfil textarea,.n2-agente-perfil select { width: 100%; min-height: 44px; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-1); color: var(--ink); font: inherit; font-size: 14px; }
.n2-agente-perfil textarea { resize: vertical; }
.n2-agente-perfil summary { padding: 10px 0; min-height: 44px; box-sizing: border-box; cursor: pointer; font-size: 12px; }
.n2-agente-perfil button { min-height: 44px; }
.n2-agente-perfil :is(input,textarea,select,button,summary):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 600px) { .n2-agente-perfil input,.n2-agente-perfil textarea,.n2-agente-perfil select { font-size: 16px; } }
@media (max-width: 600px) {
  [data-quadro="10a"] > div:has(> .n2-agente-perfil-lateral) { grid-template-columns: minmax(0,1fr) !important; overflow: auto !important; }
  .n2-agente-perfil-lateral { overflow: visible; }
}

/* Papéis: conteúdo com tamanho próprio, sem coordenadas absolutas do antigo grafo. */
.n2-papeis { padding: 20px; color: var(--ink); font-family: var(--font); min-width: 0; }
.n2p-cab h2 { margin: 0 0 8px; font-size: 22px; }
.n2p-cab p,.n2p-nota,.n2p-status { color: var(--ink-2); font-size: 13px; line-height: 1.6; margin: 0; }
.n2p-status[data-erro] { color: var(--bad); }
.n2p-layout { display: grid; grid-template-columns: minmax(170px,220px) minmax(0,1fr); gap: 28px; margin-top: 20px; }
.n2p-lista { display: flex; flex-direction: column; gap: 6px; align-self: start; min-width: 0; }
.n2p-lista h3 { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; }
.n2p-lista button { white-space: normal; text-align: left; min-height: 44px; overflow-wrap: anywhere; }
.n2p-lista button[aria-pressed=true] { background: var(--brand-tint); border-color: var(--brand); color: var(--ink); font-weight: 600; }
.n2p-detalhe { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.n2p-nome { font-size: 22px; margin: 0; overflow-wrap: anywhere; }
.n2p-campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-2); }
.n2-papeis :is(input,select) { min-height: 44px; width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; }
.n2-papeis button { min-height: 44px; }
.n2-papeis :is(button,input,select,summary):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.n2p-grupos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 28px; }
.n2p-grupos h4,.n2p-teste h4,.n2p-resultado h4 { margin: 0 0 8px; font-size: 14px; }
.n2p-grupos ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.n2p-teste,.n2p-resultado { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.n2p-teste button { align-self: start; }
.n2p-editar { border-top: 1px solid var(--line-2); padding-top: 8px; }
.n2p-editar summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 14px; }
.n2p-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.n2p-definicoes { padding: 0; list-style: none; }
.n2p-definicoes li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
@media (max-width: 760px) { .n2-papeis { padding: 16px; } .n2p-layout { grid-template-columns: minmax(0,1fr); gap: 16px; } .n2p-lista { display: none; } .n2p-grupos { grid-template-columns: minmax(0,1fr); } .n2-papeis :is(input,select) { font-size: 16px; } .n2p-definicoes li { align-items: start; flex-direction: column; } }
.n2p-decisao { border: 1px solid var(--brand); border-radius: var(--r-md); padding: 16px; margin: 12px 0; background: var(--bg-1); color: var(--ink); }
.n2p-decisao[hidden] { display: none; }
.n2p-decisao button { margin: 8px 8px 0 0; }
.n2p-status:empty { display: none; }

/* Agente: conexão e retomada no mesmo conjunto de abas. */
.n2-agente-canais { display: grid; gap: 16px; align-content: start; }
.n2-agente-canais form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.n2-agente-canais select { min-height: 44px; font-size: 16px; }
.n2-agente-lead { padding: 12px 0; border-bottom: 1px solid var(--line); }
/* 17/10 (o buraco 4 da conversa): os recados do agente na Precisa de você, com a cor de "pede você" do cânone; o cliente espera a dona */
.n2r-recados { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--info) 45%, transparent); background: color-mix(in srgb, var(--info) 8%, transparent); }
.n2r-recados h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.n2r-recados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.n2r-recado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.n2r-recado-txt { display: grid; gap: 4px; min-width: 0; flex: 1 1 280px; }
.n2r-recado blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--info); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--glass); color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
/* 18/10 (o Olheiro: "lista que estica a tela" em 73 telas, P043): a tabela comprida e a fileira do desenho rolam na caixa delas, com o
   cabeçalho da tabela parado; o título, as abas e os filtros da janela ficam à vista. No celular, a tabela já rola sozinha (celular.css) */
@media (min-width: 761px) {
  html.nova-2 .nv-janela .nv-j-corpo :is(div, section):has(> table:only-child) { max-height: 70vh; overflow: auto; overscroll-behavior: contain; }
  html.nova-2 .nv-janela .nv-j-corpo :is(div, section):has(> table:only-child) > table > thead :is(th, td) { position: sticky; top: 0; z-index: 1; background: var(--bg-2); }
  html.nova-2 .nv-janela .nv-j-corpo :has(> [data-lista]) { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
}
/* 31/10 · o login no desenho da APN (theus/2026-10-31-1140-sala-menu-tres-prateleiras-e-criar.md, E4): a marca na cor do texto, a frase com a
   palavra na voz dela (itálico serifado, lilás claro) e o botão de enviar lilás em pílula, como os botões principais da página oficial */
html.nova-2 .login-marca h1 { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
html.nova-2 .login-marca p { font-size: 15px; letter-spacing: 0; color: var(--ink-2); }
html.nova-2 .login-marca p em { font-family: var(--serif); font-style: italic; font-size: 1.3em; color: var(--brand-2); }
html.nova-2 #formConta #contaEnviar { border-radius: var(--r-pill); background: var(--brand); color: var(--brand-ink); }
@media (max-width: 480px) { html.nova-2 .login-marca p { font-size: 14px; } }