/* FAB stack rules — mobile-friendly positioning with safe-area and mobile-nav offset. */

:root {
  --fab-stack-bottom-desktop: 20px;
  --fab-stack-bottom-mobile: 84px;
  --mobile-nav-height: 64px;
}

/* DESKTOP: clean stack, 60px apart, starting 96px from bottom (existing) */
.bookmark-fab { right: 20px; bottom: 96px; z-index: 60; }
.note-fab     { right: 20px; bottom: 156px; z-index: 60; }
.qa-fab       { right: 20px; bottom: 216px; z-index: 60; }

/* Their drawers — open just above the FAB */
.bookmark-drawer { right: 20px; bottom: 160px; }
.note-drawer     { right: 20px; bottom: 220px; }
.qa-drawer       { right: 20px; bottom: 280px; }

/* Notification bell + spotlight in top-right (anchored separately) */
.notif-shell    { top: 16px; right: 76px; }
#spotlight-fab  { top: 20px; right: 20px; }

/* PWA install banner — anchor bottom-left/right on small screens, but avoid mobile-nav */
.pwa-install-banner { bottom: 16px; }

@media (max-width: 900px) {
  /* Shift all bottom-right FABs above the mobile-nav */
  .bookmark-fab,
  .note-fab,
  .qa-fab,
  #compare-bar,
  #mobile-cta-bar {
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 20px) !important;
  }
  /* Stack vertically: bookmark stays at base, note +60, qa +120 */
  .bookmark-fab { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 20px) !important; }
  .note-fab     { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 80px) !important; }
  .qa-fab       { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 140px) !important; }

  /* Drawers same, plus drawer-height offset */
  .bookmark-drawer { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 80px) !important; }
  .note-drawer     { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 140px) !important; }
  .qa-drawer       { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 200px) !important; }

  /* Smaller FAB on mobile for less obstruction */
  .bookmark-fab,
  .note-fab,
  .qa-fab {
    width: 48px !important;
    height: 48px !important;
  }
  .bookmark-fab svg,
  .note-fab svg,
  .qa-fab svg { width: 18px; height: 18px; }

  /* PWA install banner — above mobile-nav */
  .pwa-install-banner {
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  /* Notification panel on small screens — slide from top edge */
  .notif-panel {
    top: 56px;
    right: 4px;
    width: calc(100vw - 8px);
    max-width: 380px;
  }
}

/* iPhone safe-area for fixed bottom elements */
@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-nav { padding-bottom: env(safe-area-inset-bottom); }
  .app-main { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}

/* Mobile-nav active state — animated indicator */
@media (max-width: 900px) {
  .mobile-nav-item {
    position: relative;
    transition: color 150ms ease, background 150ms ease;
  }
  .mobile-nav-item::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 0; height: 3px;
    background: var(--c-primary, #4f46e5);
    transform: translateX(-50%);
    transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0 0 3px 3px;
  }
  .mobile-nav-item.active::before { width: 28px; }
  .mobile-nav-item.active { background: transparent !important; color: var(--c-primary, #4f46e5) !important; }
  .mobile-nav-item.active .mobile-nav-ico { transform: scale(1.1); transition: transform 200ms; }
}

/* Reduce motion: kill animations */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-item::before,
  .mobile-nav-item.active .mobile-nav-ico { transition: none; }
}