@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --radius: 0.75rem;
  }
}

@layer base {
  * {
    @apply border-border;
    scrollbar-width: none;
  }

  *::-webkit-scrollbar {
    display: none;
  }

  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .safe-area-top {
    padding-top: env(safe-area-inset-top, 0px);
  }
  
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  
  .safe-area-inset-top {
    top: env(safe-area-inset-top, 0px);
  }
  
  .safe-area-inset-bottom {
    bottom: env(safe-area-inset-bottom, 0px);
  }
  
  /* FAB bottom offset: clears the mobile bottom nav + safe area inset */
  .bottom-fab {
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Mobile top bar height (48px) + safe area inset for sticky elements */
  .top-mobile-bar {
    top: calc(3rem + env(safe-area-inset-top, 0px));
  }
}



@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 3-burst ping: pulses 3 times then stops */
@keyframes ping-3 {
  0%  { transform: scale(1); opacity: 0.6; }
  11% { transform: scale(2); opacity: 0; }
  22% { transform: scale(1); opacity: 0; }
  33% { transform: scale(1); opacity: 0.6; }
  44% { transform: scale(2); opacity: 0; }
  55% { transform: scale(1); opacity: 0; }
  66% { transform: scale(1); opacity: 0.6; }
  77% { transform: scale(2); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

.animate-ping-3 {
  animation: ping-3 4s ease-out forwards;
}

/* Slow continuous pulse for nagging buttons */
@keyframes pulse-slow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.8); opacity: 0; }
}

.animate-pulse-slow {
  animation: pulse-slow 2.5s ease-in-out infinite;
}