@charset "UTF-8";
/* Tela de login — botões de conta (Google) ACIMA do formulário, como no Manus.
 *
 * Servida e injetada por `nginx.conf`, como `mobmne-brand.css`. Nada dentro de
 * `backend/librechat/` — ADR-20/P15, degrau 2 (CSS injetado pelo proxy).
 *
 * POR QUE UM ARQUIVO SEPARADO, e não mais um bloco em `mobmne-brand.css`: a folha
 * de marca estava com edição em curso de OUTRA sessão (texto do slogan/descritor)
 * quando isto foi escrito, e dois escritores no mesmo arquivo é a regra de
 * trabalho que este repositório proíbe. Além disso o assunto é outro — layout
 * do login, não marca — e some sozinho no dia em que o login social sair.
 *
 * O QUE O UPSTREAM DESENHA (`client/src/components/Auth/AuthLayout.tsx` +
 * `Login.tsx` + `SocialLoginRender.tsx`), na ordem do DOM, todos filhos diretos
 * do cartão `div.w-authPageWidth`:
 *
 *   1. <h1>                       saudação ("Bem-vindo de volta")
 *   2. [Alert]                    erro de login, quando há
 *   3. <form class="mt-6">        e-mail + senha + "Continuar"
 *   4. [<p>]                      "Não tem uma conta?" (só com cadastro aberto)
 *   5. <div class="... border-t border-border-medium uppercase">  o divisor "Ou"
 *   6. <div class="mt-8">         espaçador
 *   7. <div class="mt-2">         os botões  (<a href="…/oauth/google">)
 *
 * A referência do operador (Manus) põe os botões PRIMEIRO, depois "Ou", depois o
 * e-mail. Reordenar sem tocar no componente é o caso clássico de `order` em flex:
 * o cartão vira coluna flex e cada filho recebe a posição. Só acontece quando há
 * pelo menos um botão de conta (`:has(a[href*='/oauth/'])`) — sem botão, o
 * cartão fica exatamente como o upstream o desenha.
 *
 * ÂNCORAS (registradas em `scripts/check-ancoras-injetadas.py`):
 *   - `w-authPageWidth`          o cartão (AuthLayout.tsx)
 *   - `/oauth/`                  a ROTA do botão (SocialButton.tsx) — contrato de
 *                                rota, não classe; mesma escolha do `mobmne-auth.js`
 *   - `border-border-medium uppercase`  o divisor (SocialLoginRender.tsx)
 *
 * MODO DE FALHA: visível e inofensivo. Se o cartão perder a classe ou o botão
 * mudar de rota, nada aqui casa e a tela volta à ordem do upstream — o login
 * continua funcionando, só a ordem muda. Nenhuma regra abaixo esconde um
 * elemento que a pessoa precise para entrar.
 */

/* --- 1. O cartão vira coluna flex quando há botão de conta ------------------ */
div.w-authPageWidth:has(a[href*='/oauth/']) {
  display: flex;
  flex-direction: column;
}

/* Tudo o que não for nomeado abaixo fica no fim, na ordem do DOM (o formulário e
 * o "Não tem uma conta?"). */
div.w-authPageWidth:has(a[href*='/oauth/']) > * {
  order: 10;
}

/* A saudação e o erro de login continuam no topo. */
div.w-authPageWidth:has(a[href*='/oauth/']) > h1,
div.w-authPageWidth:has(a[href*='/oauth/']) > [role='alert'] {
  order: 1;
}

/* Os botões sobem para logo abaixo da saudação. O `mt-2` do upstream supunha o
 * divisor logo acima; aqui o vizinho de cima é a saudação, que já tem margem. */
div.w-authPageWidth:has(a[href*='/oauth/']) > div:has(> div > a[href*='/oauth/']) {
  order: 2;
  margin-top: 0;
}

/* O divisor "Ou" e o seu espaçador vêm em seguida, entre botões e formulário.
 * O espaçador perde a margem: no desenho do upstream ele separava o divisor dos
 * botões (que têm `mt-2`, quase nada); aqui o vizinho de baixo é o formulário,
 * que já traz `mt-6`. Somados, divisor `mt-6` + espaçador `mt-8` + formulário
 * `mt-6` davam ~80px de vazio entre o "ou" e o campo de e-mail — medido na
 * primeira captura, 2026-09-09. */
div.w-authPageWidth:has(a[href*='/oauth/']) > div.border-t.border-border-medium.uppercase {
  order: 3;
}
div.w-authPageWidth:has(a[href*='/oauth/']) > div.mt-8 {
  order: 4;
  margin-top: 0;
}

/* --- 2. O botão: ícone à esquerda, rótulo centralizado (Manus) -------------- */
/* O upstream alinha ícone e texto à esquerda (`space-x-3`). Com um botão só,
 * centralizar o rótulo é o que faz a caixa parecer um botão e não uma linha de
 * lista. O `margin-right` compensa a largura do ícone (20px) + o espaço
 * (12px) para o texto ficar no centro ÓPTICO da caixa, não deslocado. */
a[href*='/oauth/'] > p {
  flex: 1;
  text-align: center;
  margin-right: 32px;
  font-weight: 500;
}

/* --- 3. O divisor diz "Ou", não "OR" ---------------------------------------- */
/* Duas coisas: o upstream escreve a palavra em `uppercase`, e o pacote pt-BR da
 * versão vendorizada NÃO tem a chave `com_auth_or` (conferido em
 * `client/src/locales/pt-BR/translation.json`), então a tela em português
 * mostra o inglês "Or". Mesma técnica do idioma em `mobmne-brand.css`: o
 * LibreChat escreve o idioma ativo em `<html lang>`, e `:lang()` resolve sem
 * script. O texto original fica no DOM (tamanho zero) — leitores de tela leem
 * o `::after`, que é conteúdo gerado acessível. */
div.w-authPageWidth > div.border-t.border-border-medium.uppercase {
  text-transform: none;
}
html:lang(pt) div.w-authPageWidth > div.border-t.border-border-medium.uppercase > div {
  font-size: 0;
}
html:lang(pt) div.w-authPageWidth > div.border-t.border-border-medium.uppercase > div::after {
  content: 'ou';
  font-size: 12px;
}

/* --- 4. Sem botão nenhum, nenhum divisor órfão ------------------------------ */
/* `ALLOW_SOCIAL_LOGIN=true` no compose liga o divisor mesmo sem provedor
 * configurado (`SocialLoginRender.tsx` desenha o "Ou" por `socialLoginEnabled`,
 * não pela lista de botões). Enquanto a credencial do Google não estiver no
 * `.env`, a tela mostraria "Ou" seguido de nada. Esconder é seguro: o divisor
 * não é ação, é separador — e só some quando não há o que separar. */
div.w-authPageWidth:not(:has(a[href*='/oauth/'])) > div.border-t.border-border-medium.uppercase,
div.w-authPageWidth:not(:has(a[href*='/oauth/'])) > div.border-t.border-border-medium.uppercase + div.mt-8 {
  display: none;
}