/* ============================================================
   WAVES — Bottom Player Component
   ============================================================ */

/* ============================================================
   Player Layout (3 columns)
   ============================================================ */
   .player-left {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-width: 0;
    flex: 1;
  }
  
  .player-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 2;
  }
  
  .player-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-lg);
    min-width: 200px;
    flex: 1;
  }
  
  /* ============================================================
     Now Playing Info (Left)
     ============================================================ */
  .now-playing {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-width: 0;
    flex: 1;
  }
  
  .track-cover {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
  }
  
  .track-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .cover-placeholder {
    color: var(--text-muted);
    opacity: 0.5;
  }
  
  .cover-placeholder svg {
    width: 24px;
    height: 24px;
  }
  
  .track-info {
    min-width: 0;
    flex: 1;
  }
  
  .track-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }
  
  .track-artist {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .track-favorite {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    flex-shrink: 0;
  }
  
  .track-favorite:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
  
  .track-favorite.active {
    color: var(--spx-violet);
  }
  
  .track-favorite svg {
    width: 18px;
    height: 18px;
  }
  
  /* ============================================================
     Player Controls (Center)
     ============================================================ */
  .player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
  }
  
  .control-btn {
    width: var(--control-size-md);
    height: var(--control-size-md);
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    position: relative;
  }
  
  .control-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
  }
  
  .control-btn:active {
    transform: scale(0.95);
  }
  
  .control-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  
  .control-btn:disabled:hover {
    background: none;
    color: var(--text-secondary);
  }
  
  .control-btn svg {
    width: 20px;
    height: 20px;
  }
  
  /* Primary Play Button */
  .control-btn.primary {
    width: var(--control-size-lg);
    height: var(--control-size-lg);
    background: var(--spx-violet);
    color: white;
  }
  
  .control-btn.primary:hover {
    background: var(--spx-violet-dark);
    box-shadow: 0 0 0 4px var(--spx-violet-glow);
  }
  
  .control-btn.primary svg {
    width: 24px;
    height: 24px;
  }
  
  .control-btn .pause-icon {
    display: none;
  }
  
  .control-btn.playing .play-icon {
    display: none;
  }
  
  .control-btn.playing .pause-icon {
    display: block;
  }
  
  /* Progress Bar */
  .progress-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    
  }
  
  .time-display {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-medium);
    min-width: 40px;
  }
  
  .progress-wrapper {
    flex: 1;
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .progress-bar {
    width: 100%;
    height: var(--progress-height);
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-elevated);
    cursor: pointer;
    outline: none;
  }
  
  /* WebKit (Chrome, Safari) */
  .progress-bar::-webkit-slider-track {
    width: 100%;
    height: var(--progress-height);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
  }
  
  .progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--progress-thumb);
    height: var(--progress-thumb);
    border-radius: var(--radius-full);
    background: var(--spx-violet);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  
  .progress-bar:hover::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px var(--spx-violet-glow);
  }
  
  .progress-bar:active::-webkit-slider-thumb {
    transform: scale(1.1);
  }
  
  /* Firefox */
  .progress-bar::-moz-range-track {
    width: 100%;
    height: var(--progress-height);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
  }
  
  .progress-bar::-moz-range-thumb {
    width: var(--progress-thumb);
    height: var(--progress-thumb);
    border: none;
    border-radius: var(--radius-full);
    background: var(--spx-violet);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  
  .progress-bar:hover::-moz-range-thumb {
    transform: scale(1.2);
  }
  
  /* ============================================================
     Volume & Additional Controls (Right)
     ============================================================ */
  .volume-control {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 120px;
    max-width: 150px;
  }
  
  .volume-icon {
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-base);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .volume-icon:hover {
    color: var(--text-primary);
  }
  
  .volume-icon i {
    font-size: 16px;
  }
  
  .volume-icon svg {
    width: 20px;
    height: 20px;
  }
  
  .volume-bar {
    flex: 1;
    height: var(--progress-height);
    -webkit-appearance: none;
    appearance: none;
    background: var(--spx-violet-dark);
    cursor: pointer;
    outline: none;
  }
  
  .volume-bar::-webkit-slider-track {
    width: 100%;
    height: var(--progress-height);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
  }
  
  .volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
  }
  
  .volume-bar:hover::-webkit-slider-thumb {
    background: var(--text-primary);
    transform: scale(1.3);
  }
  
  .volume-bar::-moz-range-track {
    width: 100%;
    height: var(--progress-height);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
  }
  
  .volume-bar::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--text-secondary);
    cursor: pointer;
  }
  
  /* ============================================================
     Player State Indicator
     ============================================================ */
  .player-state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-muted);
  }
  
  .state-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--text-muted);
  }
  
  .player-state[data-state="playing"] .state-dot {
    background: var(--success);
    animation: pulse 2s ease-in-out infinite;
  }
  
  .player-state[data-state="loading"] .state-dot {
    background: var(--info);
    animation: pulse 1.5s ease-in-out infinite;
  }
  
  .player-state[data-state="paused"] .state-dot {
    background: var(--warning);
  }
  
  @keyframes pulse {
    0%, 100% { 
      opacity: 1; 
      transform: scale(1);
    }
    50% { 
      opacity: 0.5;
      transform: scale(1.3);
    }
  }
  
  /* ============================================================
     Responsive Player
     ============================================================ */
  @media (max-width: 1024px) {
    .player-right {
      display: none;
    }
  
    .waves-player {
      grid-template-columns: 1fr auto;
    }
  }
  
  @media (max-width: 640px) {
    .waves-player {
      grid-template-columns: 1fr;
      padding: var(--space-md) var(--space-lg);
    }
  
    .player-left {
      order: 2;
      margin-top: var(--space-md);
    }
  
    .player-center {
      order: 1;
    }
  
    .player-right {
      display: none;
    }
  
    .track-cover {
      width: 48px;
      height: 48px;
    }
  
    .control-btn {
      width: var(--control-size-sm);
      height: var(--control-size-sm);
    }
  
    .control-btn svg {
      width: 16px;
      height: 16px;
    }
  
    .control-btn.primary {
      width: var(--control-size-md);
      height: var(--control-size-md);
    }
  
    .control-btn.primary svg {
      width: 20px;
      height: 20px;
    }
  }