/* ==========================================================================
   VadeAudio AI - Player Bar, Equalizer & Commute Overlay Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Persistent Audio Player Bottom Bar (Refined & Sober)
   -------------------------------------------------------------------------- */
.persistent-player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--player-height);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 500;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* Left: Equalizer & Track Info */
.player-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  max-width: 320px;
}

/* Equalizer Bars Animation */
.equalizer-waves {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  width: 16px;
}

.equalizer-waves .bar {
  width: 2px;
  height: 3px;
  background: var(--accent-gold);
  border-radius: 1px;
  transition: height 0.2s ease;
}

/* Playing animation */
.equalizer-waves.playing .bar:nth-child(1) { animation: eqBar 0.8s ease-in-out infinite alternate; }
.equalizer-waves.playing .bar:nth-child(2) { animation: eqBar 1.1s ease-in-out 0.2s infinite alternate; }
.equalizer-waves.playing .bar:nth-child(3) { animation: eqBar 0.7s ease-in-out 0.4s infinite alternate; }
.equalizer-waves.playing .bar:nth-child(4) { animation: eqBar 0.9s ease-in-out 0.1s infinite alternate; }

@keyframes eqBar {
  0% { height: 3px; }
  100% { height: 14px; }
}

.now-playing-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.now-playing-title {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-playing-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center: Controls & Progress */
.player-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  max-width: 520px;
}

.player-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-ctrl {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.88rem;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.btn-ctrl:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.btn-ctrl-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: none;
  color: #0b0d12;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.btn-ctrl-play:hover {
  background: #d8a847;
  transform: scale(1.05);
}

.player-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.progress-bar-container {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: height 0.15s ease;
}

.progress-bar-container:hover {
  height: 6px;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-gold);
  border-radius: 100px;
  transition: width 0.1s linear;
}

/* Right: Speed, Voice & Sleep Controls */
.player-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 240px;
  justify-content: flex-end;
}

.speed-selector-wrapper {
  position: relative;
}

.speed-pill {
  padding: 4px 10px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.speed-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.speed-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-md);
  min-width: 160px;
  z-index: 99999;
}

.speed-dropdown button {
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.speed-dropdown button:hover, .speed-dropdown button.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent-gold);
  font-weight: 600;
}

.btn-ctrl-sm {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  position: relative;
  font-size: 0.82rem;
}

.btn-ctrl-sm:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.voice-dropdown-select {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  max-width: 120px;
  outline: none;
}

.voice-dropdown-select:focus {
  border-color: var(--accent-gold);
}

.badge-mini {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.58rem;
  background: var(--accent-gold);
  color: #0b0d12;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Commute Mode (Modo Trânsito & Academia) Fullscreen Overlay
   -------------------------------------------------------------------------- */
.commute-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #1e1b4b 0%, #090b10 80%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.commute-content {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  position: relative;
}

.btn-close-overlay {
  position: absolute;
  top: -20px;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-main);
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 0.9rem;
  cursor: pointer;
}

.badge-commute {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.15);
  padding: 6px 16px;
  border-radius: 100px;
}

.commute-header h2 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  margin-top: 12px;
}

.commute-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
}

.commute-karaoke-box {
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid var(--border-amber);
  border-radius: 20px;
  padding: 28px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.commute-karaoke-box p {
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
}

/* Ultra-Large Controls for Commute Mode */
.commute-big-controls {
  display: flex;
  align-items: center;
  gap: 28px;
}

.btn-big-ctrl {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--border-light);
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.btn-big-play {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-amber), #d97706);
  border: none;
  color: #000;
  font-size: 2.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 32px rgba(245, 158, 11, 0.5);
  transition: var(--transition-fast);
}

.btn-big-play:hover {
  transform: scale(1.06);
}

.commute-bottom-row {
  display: flex;
  gap: 16px;
}

.btn-commute-pill {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  color: var(--text-main);
  font-size: 1rem;
  cursor: pointer;
}

.btn-mobile-settings-btn {
  display: none;
}

.btn-modal-speed.active,
.btn-modal-sleep.active {
  background: var(--accent-amber) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-color: var(--accent-amber) !important;
}

.player-left {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Mobile Audio Player Bar Responsiveness
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .persistent-player-bar {
    padding: 0 10px !important;
    height: 60px !important;
    gap: 6px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .player-left {
    min-width: 0 !important;
    max-width: 52% !important;
    flex: 1 1 auto !important;
    gap: 6px !important;
    cursor: pointer !important;
  }

  .equalizer-waves {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

  .now-playing-title {
    font-size: 0.76rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .now-playing-sub {
    font-size: 0.64rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--accent-amber) !important;
  }

  .player-center {
    flex: 0 0 auto !important;
    max-width: none !important;
  }

  .player-controls-row {
    gap: 4px !important;
  }

  #btn-repeat-mode,
  #btn-skip-back,
  #btn-skip-forward {
    display: none !important;
  }

  .btn-ctrl {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.8rem !important;
  }

  .btn-mobile-settings-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--accent-amber) !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
  }

  .btn-ctrl-play {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.88rem !important;
  }

  .player-progress-row {
    display: none !important;
  }

  .player-right {
    display: none !important;
  }
}