veza/apps/web/src/features/playlists/styles/playlists.mobile.css

/**
 * Styles mobile pour les playlists
 * T0504: Create Playlist Mobile Responsive
 */

/* Touch optimization */
.touch-manipulation {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile-specific spacing */
@media (max-width: 640px) {
  /* Ensure minimum touch target size (44x44px) */
  button,
  a[role='button'],
  [role='button'] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Optimize card interactions */
  .playlist-card {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  /* Prevent text selection on tap */
  .playlist-card,
  .playlist-track-item {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Smooth scrolling */
  .playlist-list-container {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
}

/* Tablet and up - restore normal behavior */
@media (min-width: 640px) {
  button,
  a[role='button'],
  [role='button'] {
    min-height: auto;
    min-width: auto;
  }
}

/* Safe area insets for mobile devices with notches */
@supports (padding: max(0px)) {
  .playlist-container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}