/* Aria Element — Mobile-Tweaks + 3D-Hintergrund (stabile Version)
   Wird via nginx sub_filter in jede HTML-Response injiziert (siehe sites-available/element).
   Greift NUR auf Welcome/Auth-Seiten, lässt eingeloggten Chat unangetastet.
*/

/* ── 1. 3D-Hintergrund auf Welcome/Auth (NICHT global, damit Chat unverändert bleibt) ── */
.mx_Welcome,
.mx_AuthPage,
body.mx_AuthPage,
body:has(.mx_Welcome),
body:has(.mx_AuthPage) {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(106, 76, 199, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(76, 121, 199, 0.25) 0%, transparent 55%),
    linear-gradient(135deg, #0a0d1a 0%, #14182a 50%, #1c1838 100%) !important;
  background-attachment: fixed !important;
  position: relative !important;
  min-height: 100vh !important;
}

/* Schwebende Polygon-Glows (3D-Tiefe) — nur auf Welcome-Routes */
.mx_Welcome::before,
.mx_AuthPage::before {
  content: '' !important;
  position: fixed !important;
  inset: -10% !important;
  background:
    radial-gradient(circle at 15% 25%, rgba(120, 80, 220, 0.18) 0%, transparent 12%),
    radial-gradient(circle at 85% 30%, rgba(80, 180, 220, 0.15) 0%, transparent 14%),
    radial-gradient(circle at 50% 75%, rgba(180, 80, 220, 0.13) 0%, transparent 16%),
    radial-gradient(circle at 25% 85%, rgba(80, 220, 180, 0.10) 0%, transparent 12%);
  animation: aria-float 18s ease-in-out infinite alternate;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(40px);
}

@keyframes aria-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(20px, -15px) scale(1.05); }
  100% { transform: translate(-15px, 10px) scale(0.98); }
}

/* Inhalt der Welcome-Seite VOR die Hintergrund-Layer schichten */
.mx_AuthBody,
.mx_Welcome_centered,
.mx_AuthHeader,
.mx_AuthPage_modal {
  position: relative !important;
  z-index: 1 !important;
}

/* ── 2. Hintergrund-Bild (welcome_background_url) kleiner skalieren ──────── */
/* Element-Web setzt manchmal background-image inline auf .mx_Welcome */
.mx_Welcome[style*="background"],
.mx_AuthPage[style*="background"] {
  background-size: contain !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
}

/* ── 3. Mobile-Layout-Fixes ────────────────────────────────────────── */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
  }

  .mx_AuthBody,
  .mx_AuthPage_modal,
  .mx_AuthPage_modalBlock {
    max-width: 100vw !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(20, 24, 42, 0.7) !important;
    backdrop-filter: blur(10px) !important;
  }

  .mx_AuthHeader,
  .mx_AuthHeader_logo,
  .mx_AuthHeader_logo img {
    max-width: 72px !important;
    max-height: 72px !important;
    margin: 12px auto !important;
  }

  .mx_Welcome h1,
  .mx_AuthBody h1,
  .mx_AuthHeader_title {
    font-size: 22px !important;
    margin: 8px 0 12px !important;
    line-height: 1.2 !important;
  }

  .mx_AccessibleButton,
  .mx_AccessibleButton_kind_primary,
  .mx_AccessibleButton_kind_secondary {
    font-size: 15px !important;
    padding: 10px 16px !important;
    margin: 4px 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* „Konto erstellen" + Sprache + Footer aus auf Mobile */
  .mx_Welcome_options .mx_AccessibleButton_kind_secondary,
  .mx_Welcome .mx_LanguageDropdown,
  .mx_AuthBody_language,
  .mx_LanguageDropdown,
  .mx_AuthFooter {
    display: none !important;
  }

  .mx_Field input,
  .mx_Login_form input {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
}