/* Custom Styles & Animation Helpers */

body {
  font-family: 'Tajawal', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Safe Area Padding for notch devices */
.safe-padding {
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
}

/* Slow spin animation for dashboard elements */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 12s linear infinite;
}

/* Glassmorphism utility */
.glass-panel {
  background: rgba(10, 10, 12, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Music Visualizer Animation */
@keyframes bounce-bar {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}

.visualizer-playing .bar-1 {
  animation: bounce-bar 0.6s ease-in-out infinite;
}
.visualizer-playing .bar-2 {
  animation: bounce-bar 0.8s ease-in-out infinite;
  animation-delay: 0.15s;
}
.visualizer-playing .bar-3 {
  animation: bounce-bar 0.7s ease-in-out infinite;
  animation-delay: 0.3s;
}

/* Hide default scrollbars */
::-webkit-scrollbar {
  display: none;
}

/* Custom button states */
button:focus {
  outline: none;
}

/* Prevent text selection on touch targets */
button, span, div, h1, h2, i {
  user-select: none;
  -webkit-user-select: none;
}