/* =========================================================
   FamilyChat static app background
   Keeps the same soft background pinned behind every tab/page
   so switching sections does not create a background flash/shift.
   ========================================================= */

:root {
  --familychat-static-bg:
    radial-gradient(circle at 8% 6%, rgba(109, 93, 252, 0.15), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(88, 157, 255, 0.10), transparent 28%),
    radial-gradient(circle at 84% 92%, rgba(247, 84, 139, 0.08), transparent 30%),
    linear-gradient(180deg, #fbfbff 0%, #f4f6fb 100%);
}

html,
body {
  background: #f4f6fb !important;
}

body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--familychat-static-bg);
  background-attachment: fixed;
  transform: translateZ(0);
}

.app {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.main-layout,
.app-tab-panel {
  background: transparent !important;
}

@media (max-width: 820px) {
  html,
  body {
    background: #f4f6fb !important;
  }

  body::before {
    background: var(--familychat-static-bg) !important;
  }

  .app,
  .main-layout,
  .app-tab-panel {
    background: transparent !important;
  }

  /* Keep mobile tab pages from painting their own full-screen gradient.
     Cards and modals keep their own white surfaces. */
  .app-tab-panel.active,
  .full-page-panel,
  .message-list-panel,
  .friends-page-panel,
  .schedule-page-panel,
  .explore-page-panel,
  .settings-page-panel,
  .family-panel {
    background: transparent !important;
  }
}