/* ═══════════════════════════════════════════════
   NX-UI Design System — effects.css v2.0.0
   [data-fx] none / subtle / glass / neon
   [data-bg] cosmos / aurora / sunset / midnight
   ═══════════════════════════════════════════════ */

/* ── FX: None ──
   Flatten DECORATIVE chrome glass (topbar + expanded sidebar → solid bg).
   Functional overlay blur (search-modal, drawer) intentionally KEPT —
   separates floating panel from content underneath (legibility). */
[data-fx="none"] .nx-card:hover { /* static — no effects */ }
[data-fx="none"] .nx-topbar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-app);
}
[data-fx="none"] .nx-side.is-expanded {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-sidebar);
}

/* ── FX: Subtle ── */
[data-fx="subtle"] .nx-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--accent-glow);
}
[data-fx="subtle"] .nx-entry:hover {
  background: var(--accent-bg);
}

/* ── FX: Glass ── */
[data-fx="glass"] .nx-card {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}
[data-fx="glass"] .nx-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--accent-glow);
  border-color: var(--accent-border);
}

/* ── FX: Neon (DEFAULT) ── */
[data-fx="neon"] .nx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 30px var(--accent-glow), 0 0 60px rgba(0,212,255,.04);
}
[data-fx="neon"] .nx-badge[data-status="ok"]   { box-shadow: 0 0 8px rgba(0,255,136,.2); }
[data-fx="neon"] .nx-badge[data-status="warn"] { box-shadow: 0 0 8px rgba(255,179,0,.2); }
[data-fx="neon"] .nx-badge[data-status="err"]  { box-shadow: 0 0 8px rgba(255,77,77,.2); }
[data-fx="neon"] .nx-badge[data-status="info"] { box-shadow: 0 0 8px var(--accent-glow); }
[data-fx="neon"] .nx-progress-fill { box-shadow: 0 0 6px currentColor; }
[data-fx="neon"] details[open] .nx-card {
  box-shadow: 0 0 20px var(--accent-glow);
}

/* ── Background: Cosmos (default) ── */
[data-bg="cosmos"]::before,
.nx-app::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(0,80,120,.12), transparent),
    radial-gradient(ellipse 500px 500px at 80% 70%, rgba(100,0,180,.08), transparent),
    radial-gradient(ellipse 400px 300px at 50% 50%, rgba(0,212,255,.04), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ── Background: Aurora ── */
[data-bg="aurora"]::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 25% 25%, rgba(0,180,100,.10), transparent),
    radial-gradient(ellipse 500px 500px at 75% 65%, rgba(0,212,255,.08), transparent),
    radial-gradient(ellipse 400px 300px at 50% 50%, rgba(0,255,136,.04), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ── Background: Sunset ── */
[data-bg="sunset"]::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 30% 20%, rgba(255,100,50,.10), transparent),
    radial-gradient(ellipse 500px 500px at 70% 70%, rgba(200,0,120,.08), transparent),
    radial-gradient(ellipse 400px 300px at 50% 50%, rgba(255,179,0,.04), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ── Background: Midnight ── */
[data-bg="midnight"]::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 40%, rgba(30,30,120,.14), transparent),
    radial-gradient(ellipse 500px 500px at 80% 60%, rgba(50,0,100,.10), transparent),
    radial-gradient(ellipse 400px 300px at 50% 30%, rgba(0,50,180,.06), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Sidebar SLOT components — fx-conditional rules (promoted 2026-05-26).
   Mirrors what nx-chat-mesh had в cm-* fx rules, generalized to canonical `.nx-*` surface.
   ══════════════════════════════════════════════════════════════════════════ */

/* NEON — glow на active sidebar slot indicators
   removed extra 12px glow per user "iskam da mahnem pulsaciqta pri click".
   Only the basic 2px accent ring stays (from sidebar-slots feature.css).
   Neon FX still affects other elements (cards, badges, pulse dot), just not
   click ring on active sidebar item. */
[data-fx="neon"] .nx-side-pulse::before {
  box-shadow: 0 0 8px var(--ok), 0 0 16px rgba(0,255,136,.5);
}
[data-fx="neon"] .nx-side-pulse[data-pulse="accent"]::before {
  box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent-glow);
}

/* NONE — flat (no glows, no rings beyond border) */
[data-fx="none"] .nx-side-item.is-active .nx-side-avatar,
[data-fx="none"] .nx-side-item.is-active .nx-side-chip {
  box-shadow: none;
}
[data-fx="none"] .nx-side-pulse::before {
  box-shadow: none;
}

/* ── [data-fx] coverage for primary action buttons (7.3.2) ──────────────────
   Buttons previously didn't pick up the fx theme (only cards/badges did). The
   primary CTA now follows the active fx: soft shadow (subtle), glass-glow
   (glass), accent glow (neon). Keeps buttons consistent with the chosen theme
   instead of bespoke per-button effects. */
[data-fx="subtle"] .nx-btn[data-variant="primary"],
[data-fx="subtle"] .nx-lightbox-btn { box-shadow: 0 3px 12px var(--accent-glow); }
[data-fx="glass"]  .nx-btn[data-variant="primary"],
[data-fx="glass"]  .nx-lightbox-btn { box-shadow: 0 4px 18px var(--accent-glow); }
[data-fx="neon"]   .nx-btn[data-variant="primary"],
[data-fx="neon"]   .nx-lightbox-btn { box-shadow: 0 0 16px 1px var(--accent-glow); }
[data-fx="neon"]   .nx-btn[data-variant="primary"]:hover,
[data-fx="neon"]   .nx-lightbox-btn:hover { box-shadow: 0 0 24px 2px var(--accent-glow); }

/* ── [data-fx] nav-icon treatment (7.6.0) ──────────────────────────────────
   Icons carry state via color + glow, NOT border/shadow (those suit photo
   avatars, not line icons). Active nav icon glows under neon — consistent with
   the primary-button glow. subtle/glass keep it clean (color only). */
[data-fx="neon"] .nx-side-item.is-active svg { filter: drop-shadow(0 0 6px var(--accent-glow)); }

/* ── [data-fx] photo + avatar depth (9.0.0 base-layer pass) ─────────────────
   Content images (.nx-photo) and avatars (.nx-avatar) carry a baked drop shadow
   in components.css — that is the default / subtle / glass look. They previously
   stayed shadowed under EVERY fx including "none", so toggling Effects left
   image-heavy screens (feeds, profiles, chat media) visually unchanged. The
   shadow is now fx-conditional: FLAT under none, the baked depth under subtle /
   glass, and depth + a faint accent halo under neon (photos only — avatars are
   small and numerous, kept to plain depth to avoid noise). */
[data-fx="none"] .nx-photo,
[data-fx="none"] .nx-avatar { box-shadow: none; }
[data-fx="neon"] .nx-photo { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 24px -8px var(--accent-glow); }

/* ── Accessibility: prefers-reduced-transparency (native-feel pass) ───────────
   Honors the OS "Reduce Transparency" setting (iOS / macOS / Windows) — drops the
   Liquid-Glass backdrop blur on chrome + transient surfaces and falls back to solid
   backgrounds (legibility + perf). Driven by the system preference regardless of the
   chosen Effects; mirrors what [data-fx=none] does for the chrome glass. */
@media (prefers-reduced-transparency: reduce) {
  .nx-topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-app); }
  .nx-side.is-expanded { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-sidebar); }
  .nx-drawer-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* base bg already opaque */
  .nx-search-modal-box,
  .nx-dropdown-menu,
  .nx-info-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-card);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Motion keyframes — shared animation primitives (folded from chat-mesh
   runtime style-injection, P2.6/2.6a). Compositor-only (transform/opacity).
   nxFadeIn lives in components.css (base); the voice-record pulse (nxRecPulse) lives in its composer feature.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes nxSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes nxSpinRot { to { transform: rotate(360deg); } }
@keyframes nxNotifDown { from { transform: translateY(-130%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }