/* ══════════════════════════════════════════════════════════════════════════
   Orkan Cloud — tema de marca para o LibreChat (chat.orkan.cloud)
   Carregado via <link> injetado no index.html (bind-mount; ADR-007 white-label).
   Foco: telas de autenticação (login/registro) na MESMA linguagem da landing
   (dark premium, deep ink + brilho, acento verde Orkan, logo branco).
   Escopo por :has() para não interferir no app autenticado.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --orkan-ink: #070a10;
  --orkan-surface: #0d1119;
  --orkan-surface-2: #131926;
  --orkan-line: rgba(150, 182, 220, 0.14);
  --orkan-line-2: rgba(150, 182, 220, 0.24);
  --orkan-fg: #e9f0f7;
  --orkan-mist: #9db0c5;
  --orkan-green: #7ac143;
  --orkan-green-bright: #93d654;
  --orkan-blue: #35b5ff;
}

/* Botão de envio verde Orkan em todo o produto (mata o teal padrão) */
:root {
  --surface-submit: var(--orkan-green);
  --surface-submit-hover: var(--orkan-green-bright);
  --brand-purple: var(--orkan-blue);
}

/* ── Página de autenticação ──────────────────────────────────────────────── */
body:has(form[aria-label="Login form"]),
body:has(form[aria-label="Registration form"]) {
  /* redefine tokens do LibreChat para a paleta Orkan, independente de light/dark */
  --surface-primary: var(--orkan-surface);
  --surface-secondary: var(--orkan-surface-2);
  --surface-primary-alt: var(--orkan-surface-2);
  --surface-tertiary: var(--orkan-surface-2);
  --surface-dialog: var(--orkan-surface);
  --text-primary: var(--orkan-fg);
  --text-secondary: var(--orkan-mist);
  --border-light: var(--orkan-line);
  --border-medium: var(--orkan-line-2);
  --border-heavy: var(--orkan-line-2);
  --ring-primary: var(--orkan-blue);
  background: var(--orkan-ink) !important;
}

/* Brilho ambiente da marca (igual à landing) */
body:has(form[aria-label="Login form"])::before,
body:has(form[aria-label="Registration form"])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 560px at 78% -10%, rgba(0, 150, 214, 0.22), transparent 60%),
    radial-gradient(720px 480px at 8% 6%, rgba(122, 193, 67, 0.14), transparent 58%),
    radial-gradient(1000px 640px at 50% 108%, rgba(2, 100, 182, 0.16), transparent 60%);
}

/* Regrupar logo + formulário como um bloco único, centrado na vertical.
   Mata o "barbell" (logo colado no topo, form flutuando no meio). O alternador
   de tema é `position:absolute` (fora do fluxo), então permanece no canto. */
body:has(form[aria-label="Login form"]) .min-h-screen,
body:has(form[aria-label="Registration form"]) .min-h-screen {
  justify-content: center !important;
}
body:has(form[aria-label="Login form"]) main,
body:has(form[aria-label="Registration form"]) main {
  flex-grow: 0 !important;
}
body:has(form[aria-label="Login form"]) .min-h-screen > div:has(> img[src*="logo"]),
body:has(form[aria-label="Registration form"]) .min-h-screen > div:has(> img[src*="logo"]) {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}

/* Deixa transparentes os fundos brancos/cinza do layout de auth (o ink do body aparece) */
body:has(form[aria-label="Login form"]) #root > div,
body:has(form[aria-label="Registration form"]) #root > div,
body:has(form[aria-label="Login form"]) .bg-white,
body:has(form[aria-label="Registration form"]) .bg-white,
body:has(form[aria-label="Login form"]) [class*="bg-gray-9"],
body:has(form[aria-label="Registration form"]) [class*="bg-gray-9"] {
  background-color: transparent !important;
}

/* Conteúdo acima do fundo */
body:has(form[aria-label="Login form"]) #root,
body:has(form[aria-label="Registration form"]) #root {
  position: relative;
  z-index: 1;
}

/* Logo Orkan (já branco/transparente — sem filtro), generoso e centralizado */
body:has(form[aria-label="Login form"]) img[src*="logo"],
body:has(form[aria-label="Registration form"]) img[src*="logo"] {
  /* Serve o logo por URL versionada (o logo.svg tem max-age de 2 dias e a URL
     original não é versionável — vem do bundle do LibreChat). Assim visitantes
     recorrentes que cachearam o logo antigo (colorido/fundo branco) recebem o
     novo (branco/transparente). Subir o ?v junto com o do index.html. */
  content: url("/assets/logo.svg?v=20260708c") !important;
  height: auto !important;
  max-height: 48px;
  width: auto !important;
  max-width: 240px;
  margin: 0 auto;
  object-fit: contain;
}

/* Título ("Bem-vindo de volta") — display confiante, na voz da landing */
body:has(form[aria-label="Login form"]) .text-black,
body:has(form[aria-label="Registration form"]) .text-black,
body:has(form[aria-label="Login form"]) h1,
body:has(form[aria-label="Registration form"]) h1 {
  color: var(--orkan-fg) !important;
  font-size: clamp(2rem, 5vw, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 6px !important;
}

/* Subtítulo de marca (voz da landing) — enche o respiro com propósito.
   Só na tela de login (o :has protege telas de recuperação/2FA). */
body:has(form[aria-label="Login form"]) h1::after {
  content: "Converse com os dados da sua planta.";
  display: block;
  margin-top: 10px;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--orkan-mist);
}

/* O formulário vira um cartão "vidro" premium */
body:has(form[aria-label="Login form"]) form[aria-label="Login form"],
body:has(form[aria-label="Registration form"]) form[aria-label="Registration form"] {
  background: linear-gradient(180deg, rgba(19, 25, 38, 0.82), rgba(13, 17, 25, 0.72));
  border: 1px solid var(--orkan-line-2);
  border-radius: 20px;
  padding: 26px 24px 28px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 60px -24px rgba(0, 0, 0, 0.9),
    0 0 48px -12px rgba(53, 181, 255, 0.08);
}

/* Inputs escuros, borda sutil, foco azul, generosos */
body:has(form[aria-label="Login form"]) input,
body:has(form[aria-label="Registration form"]) input {
  background: var(--orkan-surface-2) !important;
  color: var(--orkan-fg) !important;
  border-color: var(--orkan-line-2) !important;
  border-radius: 12px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
body:has(form[aria-label="Login form"]) input:focus,
body:has(form[aria-label="Registration form"]) input:focus {
  border-color: var(--orkan-blue) !important;
  box-shadow: 0 0 0 3px rgba(53, 181, 255, 0.18) !important;
}

/* Autofill do Chrome/Safari: manter fundo escuro e texto claro
   (senão as credenciais salvas pintam o input de branco no dark mode) */
body:has(form[aria-label="Login form"]) input:-webkit-autofill,
body:has(form[aria-label="Login form"]) input:-webkit-autofill:hover,
body:has(form[aria-label="Login form"]) input:-webkit-autofill:focus,
body:has(form[aria-label="Registration form"]) input:-webkit-autofill,
body:has(form[aria-label="Registration form"]) input:-webkit-autofill:hover,
body:has(form[aria-label="Registration form"]) input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--orkan-fg) !important;
  caret-color: var(--orkan-fg) !important;
  transition: background-color 100000s ease-in-out 0s !important;
  box-shadow: 0 0 0 1000px var(--orkan-surface-2) inset !important;
}

/* Rótulos flutuantes e textos auxiliares em tom secundário */
body:has(form[aria-label="Login form"]) label,
body:has(form[aria-label="Registration form"]) label {
  color: var(--orkan-mist) !important;
}
/* Ao focar, o rótulo assume o azul da marca (mesma cor do anel de foco) */
body:has(form[aria-label="Login form"]) input:focus ~ label,
body:has(form[aria-label="Registration form"]) input:focus ~ label {
  color: var(--orkan-blue) !important;
}

/* Botão primário: verde Orkan, sólido, alto contraste */
body:has(form[aria-label="Login form"]) button[type="submit"],
body:has(form[aria-label="Registration form"]) button[type="submit"] {
  background: var(--orkan-green) !important;
  color: #052b0a !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 999px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  box-shadow: 0 10px 26px -10px rgba(122, 193, 67, 0.5) !important;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}
body:has(form[aria-label="Login form"]) button[type="submit"]:hover,
body:has(form[aria-label="Registration form"]) button[type="submit"]:hover {
  background: var(--orkan-green-bright) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(122, 193, 67, 0.6) !important;
}

/* Links (ex.: "esqueci a senha") no azul da marca */
body:has(form[aria-label="Login form"]) a,
body:has(form[aria-label="Registration form"]) a {
  color: var(--orkan-blue) !important;
}

/* Rodapé/termos em tom discreto */
body:has(form[aria-label="Login form"]) footer,
body:has(form[aria-label="Registration form"]) footer {
  color: var(--orkan-mist) !important;
}

/* Alternador de tema (lua, canto inferior): utilitário discreto, não protagonista */
body:has(form[aria-label="Login form"]) button[aria-label="Alternar tema"],
body:has(form[aria-label="Registration form"]) button[aria-label="Alternar tema"] {
  color: var(--orkan-mist) !important;
  opacity: 0.45;
  transition: opacity 0.18s ease;
}
body:has(form[aria-label="Login form"]) button[aria-label="Alternar tema"]:hover,
body:has(form[aria-label="Registration form"]) button[aria-label="Alternar tema"]:hover {
  opacity: 0.9;
  background: transparent !important;
}