/* Saberes Terra branding for LibreChat: green (Terra) and blue (Saberes). Injected at container start. */
:root, .light {
  --green-500: 126 196 90; --green-600: 104 170 70; --green-700: 37 90 148; --green-800: 28 72 120;
}
.dark {
  --green-500: 126 196 90; --green-600: 104 170 70; --green-700: 37 90 148; --green-800: 28 72 120;
}

/* Login screen animation (only the page that has a password field). */
@keyframes st-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes st-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes st-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(126,196,90,0)); } 50% { filter: drop-shadow(0 0 14px rgba(126,196,90,.55)); } }
@keyframes st-drift { 0% { background-position: 0% 0%, 100% 100%; } 50% { background-position: 30% 20%, 70% 80%; } 100% { background-position: 0% 0%, 100% 100%; } }

body:has(input[type="password"]) {
  background-image:
    radial-gradient(60% 50% at 20% 20%, rgba(126,196,90,.16), transparent 70%),
    radial-gradient(60% 50% at 80% 80%, rgba(37,90,148,.20), transparent 70%);
  background-size: 140% 140%, 140% 140%;
  animation: st-drift 18s ease-in-out infinite;
}
body:has(input[type="password"]) img[alt$="Logo"] {
  animation: st-fade-up .7s ease-out both, st-float 5s ease-in-out .8s infinite, st-glow 5s ease-in-out .8s infinite;
}
body:has(input[type="password"]) h1,
body:has(input[type="password"]) form {
  animation: st-fade-up .7s ease-out .15s both;
}
@media (prefers-reduced-motion: reduce) {
  body:has(input[type="password"]), body:has(input[type="password"]) * { animation: none !important; }
}