/* ═══════════════════════════════════════════════════════════════════════════
   ArabyBot · Auth Pages — Mobile Performance Layer (Balanced)
   Loaded LAST → wins cascade.

   Strategy: kill the HEAVY effects (massive blurs, infinite-paint animations,
   100+ animated DOM nodes), but KEEP the cinematic feel — visible aurora,
   gradient text, badge pulses, button gradient, card glow.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ────────────────────────────────────────────────────────────────────
     1. KILL backdrop-filter — replace with solid color + soft border
     ──────────────────────────────────────────────────────────────────── */
  .abl-card, .abl-ghost, .abl-fl-card, .abl-su-feat,
  .abl-controls, .abl-ctl, .abl-lang-pill,
  .abl-mob-brand, .abl-mob-hero, .abl-mob-fl,
  .abl-live-strip, .abl-trust, .abl-floats,
  .abl-floats-row, .abl-soc-link, .abl-foot,
  .abl-head-emblem, .abl-help, .abl-or,
  .abl-stats, .abl-stats-card, .abl-bg, .abl-aurora,
  .abl-card-glow, .abl-spotlight {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .abl-card        { background: var(--abl-card-solid) !important; }
  .abl-ctl         { background: var(--abl-card-2) !important; }
  .abl-mob-fl      { background: var(--abl-card-solid) !important; }
  .abl-mob-hero    { background: var(--abl-card-solid) !important; }
  .abl-live-strip  { background: var(--abl-card-solid) !important; }
  .abl-head-emblem { background: var(--abl-card-2) !important; }

  /* ────────────────────────────────────────────────────────────────────
     2. AURORA — KEEP visible, but cheaper
     • Drop the wrapper blur (filter:blur on a huge container = ouch)
     • Apply ONE small blur to each child blob instead
     • Stop the drift animations (paint cost)
     • Keep all 4 blobs visible (they're cheap radial gradients)
     ──────────────────────────────────────────────────────────────────── */
  .abl-aurora {
    filter: none !important;        /* was: blur(90-110px) — killed parent blur */
    opacity: .55 !important;        /* was .32 — slightly bumped for visibility */
  }
  .abl-au {
    animation: none !important;     /* no drift — saves paint frames */
    transform: none !important;
    filter: blur(45px) !important;  /* small per-blob blur (cheap, GPU-accelerated) */
    mix-blend-mode: normal !important;
    opacity: .7 !important;
  }
  /* On tiny phones (<= 480px) only show 2 of 4 blobs */

  /* ────────────────────────────────────────────────────────────────────
     3. KILL the HEAVY decorative layers — many DOM nodes animating
     • Stars: ~80 spans, each animated
     • Particles: ~18 spans, each animated
     • Beams: 2 large rotating bars
     • Noise/spotlight: extra paint layers
     ──────────────────────────────────────────────────────────────────── */
  .abl-stars,
  .abl-particles,
  .abl-beams,
  .abl-noise,
  .abl-spotlight {
    display: none !important;
  }

  .abl-grid {
    -webkit-mask-image: none !important;
            mask-image: none !important;
    opacity: .3 !important;
  }

  /* ────────────────────────────────────────────────────────────────────
     4. KILL big rotating/conic animations + sparklines (showcase-only)
     ──────────────────────────────────────────────────────────────────── */
  .abl-card::before { animation: none !important; opacity: .55 !important; }
  .abl-card::after  { animation: none !important; }
  .abl-fborder      { animation: none !important; }
  .abl-card-shine   { animation: none !important; }
  .abl-ai-ant       { animation: none !important; }
  .abl-ai-bars span { animation: none !important; }
  .abl-fl-prog-bar  { animation: none !important; }
  .abl-mq-track     { animation: none !important; }
  .abl-spark-line, .abl-spark-area, .abl-spark-pt { animation: none !important; }

  /* ────────────────────────────────────────────────────────────────────
     5. KILL letter-by-letter reveal animations (showcase headlines)
        Showcase is display:none on mobile anyway, but defensive.
     ──────────────────────────────────────────────────────────────────── */
  .abl-rev,
  .abl-let {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ────────────────────────────────────────────────────────────────────
     6. LIVE STRIP — keep visible + pulse, but freeze the marquee track
        on very small phones. Tablets can still scroll the marquee.
     ──────────────────────────────────────────────────────────────────── */
  /* (handled in ≤480px block below) */

  /* ────────────────────────────────────────────────────────────────────
     7. KEPT EFFECTS — gradient text, pulses, button glow, card glow
        These are cheap (no infinite layout work) and visually important.
     ──────────────────────────────────────────────────────────────────── */
  /* h1 gradient stays — it's a single text-clip, GPU-cheap */
  .abl-h1-grad { animation: none !important; /* freeze gradient position, but visible */ }

  /* Pulse dots — small, single circle box-shadow animation. KEEP. */
  /* .abl-live-pulse / .abl-mob-hero-dot / .abl-fl-on-dot — NOT touched */

  /* Card glow (static) — keep visible */
  .abl-card-glow { opacity: .9 !important; }

  /* Primary button shine — make it ONE-SHOT on tap (not infinite) */
  .abl-btn-primary::before,
  .abl-btn-primary::after {
    /* keep visible but don't animate infinitely */
    animation: none !important;
  }
  .abl-btn-primary {
    /* Static gradient (no flow), but still visible */
    background: linear-gradient(135deg, var(--abl-mesh-1), var(--abl-mesh-3)) !important;
    background-size: 100% 100% !important;
    box-shadow: 0 10px 24px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  .abl-btn-primary:active {
    transform: scale(.98) !important;
    transition: transform .12s ease !important;
  }

  /* ────────────────────────────────────────────────────────────────────
     8. SHOWCASE memory hint — already display:none, free GPU
     ──────────────────────────────────────────────────────────────────── */
  .abl-showcase,
  .abl-floats,
  .abl-fl-card,
  .abl-stats,
  .abl-stats-card,
  .abl-su-feat,
  .abl-ai-card,
  .abl-spark {
    contain: strict;
  }

  /* ────────────────────────────────────────────────────────────────────
     9. content-visibility for offscreen sections (Chrome 85+, Safari 18+)
     ──────────────────────────────────────────────────────────────────── */
  .abl-foot, .abl-mob-trust {
    content-visibility: auto;
    contain-intrinsic-size: 1px 60px;
  }

  /* ────────────────────────────────────────────────────────────────────
     10. Disable hover transforms on touch — phantom-hover stuck states
     ──────────────────────────────────────────────────────────────────── */
  .abl-soc-link:hover,
  .abl-fl-card:hover,
  .abl-su-feat:hover,
  .abl-stats-card:hover {
    transform: none !important;
  }

  /* Free will-change memory */
  .abl-card, .abl-fl-card, .abl-su-feat, .abl-au, .abl-aurora {
    will-change: auto !important;
  }

  /* ────────────────────────────────────────────────────────────────────
     11. Card shadow — single layer, GPU-friendly
     ──────────────────────────────────────────────────────────────────── */
  .abl-card {
    box-shadow:
      0 24px 60px -16px rgba(0,0,0,.55),
      0 0 0 1px var(--abl-border) !important;
  }

}  /* /max-width 1024px */

/* ═══════════════════════════════════════════════════════════════════════════
   Tighter on very small phones (≤ 480px)
   Keep aurora, kill more decorative motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Drop to 2 aurora blobs */
  .abl-au-3, .abl-au-4 { display: none !important; }

  /* Freeze the live ticker marquee — keep the pulse + label visible */
  .abl-live-track { animation: none !important; }
  .abl-live-item:nth-child(n+3) { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   prefers-reduced-motion — full kill switch
   Aurora stays static-visible so the bg isn't empty.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .abl-stars, .abl-particles, .abl-beams,
  .abl-au, .abl-h1-grad, .abl-ai-ant, .abl-ai-bars span,
  .abl-fl-prog-bar, .abl-mq-track, .abl-live-track,
  .abl-spark-line, .abl-spark-area, .abl-spark-pt,
  .abl-card::before, .abl-card::after, .abl-fborder {
    animation: none !important;
  }
  /* Keep aurora visible as static color wash */
  .abl-au {
    opacity: .6 !important;
    transform: none !important;
    filter: blur(45px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hover-only effects gated to fine pointer (no phantom-hover on touch)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .abl-card:hover,
  .abl-soc-link:hover,
  .abl-fl-card:hover,
  .abl-su-feat:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FONT FIX — Force Zain across ALL auth elements on every viewport.
   Bootstrap's user-agent rules sometimes win on mobile inputs/buttons.
   Use !important on the root + every form element so Zain always renders.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Apply Zain only to TEXT-bearing elements. Critical: NEVER include i / FA. */
.abl-root,
.abl-root p, .abl-root h1, .abl-root h2, .abl-root h3, .abl-root h4, .abl-root h5, .abl-root h6,
.abl-root span:not([class*="fa"]):not(.abl-256),
.abl-root input, .abl-root select, .abl-root textarea,
.abl-root button:not([class*="fa"]),
.abl-root label, .abl-root li,
.abl-root strong, .abl-root b, .abl-root em, .abl-root small {
  font-family: "Zain", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Anchors + divs: Zain only when they don't carry FA classes */
.abl-root a:not([class*="fa"]),
.abl-root div:not([class*="fa"]) {
  font-family: "Zain", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ─── FORCE Font Awesome family on every icon variant ─────────────────────
   Higher specificity than the rules above. Nails the right family + weight
   regardless of FA version (5 or 6) so glyphs render instead of squares. */
.abl-root i.fas, .abl-root i.fa-solid,
.abl-root .fas, .abl-root .fa-solid {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}
.abl-root i.far, .abl-root i.fa-regular,
.abl-root .far, .abl-root .fa-regular {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
.abl-root i.fab, .abl-root i.fa-brands,
.abl-root .fab, .abl-root .fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
.abl-root i.fa, .abl-root .fa {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

/* Monospace stays where needed (e.g., 256 pill) */
.abl-root .abl-256,
.abl-root [class*="-mono"],
.abl-root code,
.abl-root kbd,
.abl-root pre {
  font-family: "Geist Mono", ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Snap font-weight: 600 → 700 (we don't have 600 locally, browser fallback can be inconsistent on mobile) */
.abl-root [style*="font-weight: 600"],
.abl-root [style*="font-weight:600"] {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN-ONLY (mobile): hide the "مباشر / LIVE" ticker.
   The hero pill ("47 AI agents online · 1.28M chats today") gets a touch
   of extra top spacing so it sits clear of the lang/theme controls.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .abl-root-login .abl-live-strip { display: none !important; }
  .abl-root-login .abl-mob-hero   { margin-top: 16px !important; }
}