/* ============================================================================
   Avanti Secure Chat — auth/login skin
   Injected into every page via the nginx sub_filter proxy, but only *activates*
   on auth routes (body.avanti-auth, toggled by avanti.js). LibreChat stays vanilla.
   Targets LibreChat v0.8.7 auth DOM:
     outer  = .relative.flex.min-h-screen.flex-col
     card   = .w-authPageWidth
     logo   = img[src$="logo.svg"]  (overridden to the Avanti mark by nginx)
   ============================================================================ */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/branding/fonts/SpaceGrotesk.woff2') format('woff2');
}

:root {
  --av-navy:       #0e1520;
  --av-navy-2:     #1c2329;
  --av-teal:       #4ac4b5;
  --av-teal-bright:#3fd4c1;
  --av-cyan:       #00c1cf;
  --av-text:       #f4f8f9;
}

/* ---- full-screen looping video background + legibility overlay (auth only) ---- */
#avanti-login-video,
#avanti-bg-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: none;
  pointer-events: none;
}
#avanti-login-video { object-fit: cover; }
#avanti-bg-overlay {
  background:
    radial-gradient(120% 95% at 50% 6%, rgba(14,21,32,0) 0%, rgba(14,21,32,.30) 55%, rgba(14,21,32,.82) 100%),
    linear-gradient(180deg, rgba(14,21,32,.35) 0%, rgba(14,21,32,.10) 42%, rgba(14,21,32,.70) 100%);
}
body.avanti-auth #avanti-login-video,
body.avanti-auth #avanti-bg-overlay { display: block; }

/* ---- let the video show through LibreChat's auth container ---- */
body.avanti-auth .relative.flex.min-h-screen.flex-col { background: transparent !important; }

/* ---- frosted glass auth card ---- */
body.avanti-auth .w-authPageWidth {
  position: relative;
  z-index: 1;
  background: rgba(16,23,34,.55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(74,196,181,.28);
  border-radius: 18px !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 46px rgba(74,196,181,.09);
  padding: 2rem 1.75rem !important;
}

/* ---- typography ---- */
body.avanti-auth,
body.avanti-auth input,
body.avanti-auth button,
body.avanti-auth h1 {
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
body.avanti-auth h1 { color: var(--av-text) !important; letter-spacing: .01em; }

/* logo drop shadow so the white mark reads over any frame */
body.avanti-auth img[src$="logo.svg"] { filter: drop-shadow(0 6px 20px rgba(0,0,0,.55)); }

/* ---- injected "SECURE CHAT" tagline under the logo ---- */
#avanti-tagline {
  text-align: center;
  color: var(--av-teal-bright);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  letter-spacing: .44em;
  text-transform: uppercase;
  font-size: .72rem;
  margin: .15rem 0 1.15rem;
  opacity: .92;
  text-indent: .44em; /* optical centering for the tracked text */
}

/* ---- inputs ---- */
body.avanti-auth input:not([type=checkbox]):not([type=radio]) {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--av-text) !important;
  border-radius: 10px !important;
}
body.avanti-auth input::placeholder { color: rgba(244,248,249,.4) !important; }
body.avanti-auth input:focus {
  border-color: var(--av-teal) !important;
  box-shadow: 0 0 0 3px rgba(74,196,181,.22) !important;
  outline: none !important;
}
body.avanti-auth label { color: rgba(244,248,249,.82) !important; }

/* ---- primary submit button -> Avanti teal gradient ---- */
body.avanti-auth button[type="submit"],
body.avanti-auth button[data-testid="login-button"],
body.avanti-auth button[type="submit"].btn {
  background: linear-gradient(135deg, var(--av-teal) 0%, var(--av-cyan) 100%) !important;
  border: none !important;
  color: #042420 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(74,196,181,.28);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
body.avanti-auth button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(74,196,181,.44) !important;
  filter: brightness(1.03);
}

/* ---- links + footer ---- */
body.avanti-auth a { color: var(--av-teal-bright) !important; }
body.avanti-auth a:hover { color: var(--av-teal) !important; }
body.avanti-auth footer,
body.avanti-auth footer a { color: rgba(244,248,249,.72) !important; }

/* keep social-login / error blocks readable on glass */
body.avanti-auth .text-gray-700,
body.avanti-auth .text-gray-600,
body.avanti-auth .text-black { color: rgba(244,248,249,.8) !important; }

/* ---------------------------------------------------------------------------
   Landing screen: replace LibreChat's Feather glyph with the Avanti mark.

   The greeting icon is an INLINE lucide <svg> rendered by React
   (client/src/hooks/Endpoint/Icons.tsx -> `import { Feather } from 'lucide-react'`),
   NOT an asset request — so the nginx /assets/logo.svg override cannot reach it.

   Approach: hide the feather's own strokes, then paint the Avanti mark into the
   same box using the PNG's alpha channel as a CSS mask filled with currentColor.
   Using a mask rather than background-image matters: the feather is styled
   `text-black dark:text-white`, so currentColor makes the mark inherit that same
   light/dark behaviour instead of being a fixed-colour image that would vanish
   against a white circle in light mode.

   Box size is untouched (h-2/3 w-2/3 of a size-10 wrapper = 32x32), so nothing
   in the layout shifts. Selector is the lucide class, which is emitted per-icon
   and does not collide with any other glyph.
--------------------------------------------------------------------------- */
svg.lucide-feather > * { display: none; }
svg.lucide-feather {
  -webkit-mask: url('/branding/avanti-mark-512.png') center / contain no-repeat;
          mask: url('/branding/avanti-mark-512.png') center / contain no-repeat;
  background-color: currentColor;
}