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

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;

    --card: 0 0% 7%;
    --card-foreground: 0 0% 100%;

    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 100%;

    --primary: 142 72% 29%;
    --primary-foreground: 0 0% 100%;

    --secondary: 0 0% 15%;
    --secondary-foreground: 0 0% 100%;

    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 65%;

    --accent: 0 0% 20%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 85% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 20%;
    --input: 0 0% 20%;
    --ring: 142 72% 29%;

    --radius: 0.5rem;

    /* Safe area insets - will be updated by JS */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Player progress bar styling */
.progress-bar {
  @apply h-1 bg-muted rounded-full overflow-hidden relative cursor-pointer;
}

.progress-bar-fill {
  @apply h-full bg-primary transition-all duration-100 ease-out;
}

.progress-bar:hover .progress-bar-fill {
  @apply bg-green-400;
}

.progress-bar:hover .progress-bar-handle {
  @apply opacity-100;
}

.progress-bar-handle {
  @apply absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-white opacity-0 transition-opacity duration-200;
  transform: translateY(-50%) translateX(-50%);
}

/* Album art spinning animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.album-spinning {
  animation: spin 20s linear infinite;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: relative;
}

.album-spinning::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  height: 20%;
  background-color: #333;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #222;
  z-index: 2;
}

.album-paused {
  animation-play-state: paused;
}

/* Dynamic viewport height utility */
.h-dvh {
  height: 100vh; /* Fallback */
  height: 100dvh; /* Dynamic viewport height where supported */
}

/* Safe area utilities */
.pt-safe {
  padding-top: var(--safe-area-top);
}

.pb-safe {
  padding-bottom: var(--safe-area-bottom);
}

.pl-safe {
  padding-left: var(--safe-area-left);
}

.pr-safe {
  padding-right: var(--safe-area-right);
}

/* Add this at the end of the file */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Toast notification */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(20px) translateX(-50%);
  }
  10% {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
  90% {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) translateX(-50%);
  }
}

.toast-notification {
  animation: fadeInOut 2.5s ease-in-out forwards;
}

