/**
 * Manic Pixels Web OS — Media Player CSS
 * Player de áudio (WaveSurfer v7) + vídeo (<video>). Playlist lateral.
 */

/* ── Container principal ─────────────────────────────────────────────────── */

.mp-mediaplayer {
  display:        flex;
  flex-direction: column;
  height:         100%;
  background:     #0a0a12;
  font-family:    var(--mp-font-ui, system-ui, sans-serif);
  overflow:       hidden;
  user-select:    none;
  -webkit-user-select: none;
}

/* ── Área de vídeo / visualizador ───────────────────────────────────────── */

.mp-mp-stage {
  flex:        1;
  position:    relative;
  overflow:    hidden;
  display:     flex;
  align-items: center;
  justify-content: center;
  background:  #000;
  min-height:  0;
}

.mp-mp-video {
  max-width:   100%;
  max-height:  100%;
  outline:     none;
  display:     block;
}

.mp-mp-video.hidden { display: none; }

/* Waveform (áudio) */
.mp-mp-waveform {
  width:   100%;
  padding: 0 16px;
}

.mp-mp-waveform.hidden { display: none; }

/* Placeholder de álbum */
.mp-mp-cover {
  display:     flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:         12px;
  color:       rgba(255,255,255,0.18);
  width:       100%;
  height:      100%;
  position:    absolute;
  inset:       0;
  pointer-events: none;
}

.mp-mp-cover-art {
  width:         120px;
  height:        120px;
  border-radius: 12px;
  background:    rgba(255,255,255,0.06);
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 8px 32px rgba(0,0,0,0.60);
  font-size:     48px;
  overflow:      hidden;
  flex-shrink:   0;
}

.mp-mp-cover-art img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  border-radius: 12px;
}

.mp-mp-cover-title {
  font-size:   14px;
  font-weight: 600;
  color:       rgba(255,255,255,0.75);
  max-width:   240px;
  text-align:  center;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-mp-cover-artist {
  font-size:   12px;
  color:       rgba(255,255,255,0.35);
}

/* ── Painel inferior: controles ─────────────────────────────────────────── */

.mp-mp-controls {
  flex-shrink: 0;
  background:  rgba(0,0,0,0.45);
  border-top:  1px solid rgba(255,255,255,0.07);
  padding:     10px 14px 12px;
  display:     flex;
  flex-direction: column;
  gap:         8px;
}

/* Progress bar */
.mp-mp-progress {
  width:       100%;
  display:     flex;
  align-items: center;
  gap:         8px;
}

.mp-mp-time {
  font-size:   11px;
  color:       rgba(255,255,255,0.35);
  min-width:   36px;
  font-variant-numeric: tabular-nums;
}

.mp-mp-seek {
  flex:        1;
  height:      4px;
  appearance:  none;
  -webkit-appearance: none;
  background:  rgba(255,255,255,0.12);
  border-radius: 4px;
  outline:     none;
  cursor:      pointer;
}
.mp-mp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:       12px;
  height:      12px;
  background:  var(--mp-accent, #3daee9);
  border-radius: 50%;
  cursor:      pointer;
  transition:  transform 0.08s;
}
.mp-mp-seek::-webkit-slider-thumb:hover { transform: scale(1.3); }
.mp-mp-seek::-moz-range-thumb {
  width:       12px;
  height:      12px;
  background:  var(--mp-accent, #3daee9);
  border-radius: 50%;
  border:      none;
  cursor:      pointer;
}

/* Botões de controle */
.mp-mp-btn-row {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         8px;
}

.mp-mp-btn {
  display:     flex;
  align-items: center;
  justify-content: center;
  border:      none;
  border-radius: 8px;
  background:  transparent;
  color:       rgba(255,255,255,0.55);
  cursor:      pointer;
  transition:  background 0.10s, color 0.10s, transform 0.08s;
  padding:     0;
  flex-shrink: 0;
}
.mp-mp-btn:hover  { color: rgba(255,255,255,0.90); background: rgba(255,255,255,0.08); }
.mp-mp-btn:active { transform: scale(0.90); }
.mp-mp-btn.active { color: var(--mp-accent, #3daee9); }
.mp-mp-btn svg    { pointer-events: none; }

.mp-mp-btn--sm { width: 32px; height: 32px; }
.mp-mp-btn--sm svg { width: 16px; height: 16px; }

.mp-mp-btn--md { width: 40px; height: 40px; }
.mp-mp-btn--md svg { width: 20px; height: 20px; }

.mp-mp-btn--play {
  width:       48px;
  height:      48px;
  background:  var(--mp-accent, #3daee9);
  color:       #fff;
  border-radius: 50%;
}
.mp-mp-btn--play:hover { background: var(--mp-accent-hover, #5cb8f0); color: #fff; }

/* Volume */
.mp-mp-volume-row {
  display:     flex;
  align-items: center;
  justify-content: flex-end;
  gap:         6px;
  position:    absolute;
  right:       14px;
  bottom:      22px;
}

.mp-mp-vol-slider {
  width:       72px;
  height:      3px;
  appearance:  none;
  -webkit-appearance: none;
  background:  rgba(255,255,255,0.12);
  border-radius: 3px;
  outline:     none;
  cursor:      pointer;
}
.mp-mp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:       10px; height: 10px;
  background:  var(--mp-accent, #3daee9);
  border-radius: 50%; cursor: pointer;
}
.mp-mp-vol-slider::-moz-range-thumb {
  width: 10px; height: 10px;
  background: var(--mp-accent, #3daee9);
  border-radius: 50%; border: none; cursor: pointer;
}

/* ── Playlist lateral ───────────────────────────────────────────────────── */

.mp-mp-layout {
  flex:        1;
  display:     flex;
  min-height:  0;
  overflow:    hidden;
}

.mp-mp-playlist {
  width:       200px;
  flex-shrink: 0;
  background:  rgba(0,0,0,0.30);
  border-right: 1px solid rgba(255,255,255,0.06);
  display:     flex;
  flex-direction: column;
  overflow:    hidden;
}

.mp-mp-playlist.hidden { display: none; }

.mp-mp-pl-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     8px 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.mp-mp-pl-title {
  font-size:   11px;
  font-weight: 600;
  color:       rgba(255,255,255,0.40);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mp-mp-pl-list {
  flex:        1;
  overflow-y:  auto;
  overflow-x:  hidden;
  padding:     4px 0;
}

.mp-mp-pl-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     6px 10px;
  cursor:      pointer;
  border-radius: 0;
  transition:  background 0.08s;
  min-height:  38px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.mp-mp-pl-item:last-child { border-bottom: none; }
.mp-mp-pl-item:hover  { background: rgba(255,255,255,0.05); }
.mp-mp-pl-item.active {
  background: rgba(var(--mp-accent-rgb,61,174,233), 0.12);
}

.mp-mp-pl-icon {
  width:       20px;
  height:      20px;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   16px;
  flex-shrink: 0;
}

.mp-mp-pl-info {
  flex:        1;
  min-width:   0;
}

.mp-mp-pl-name {
  font-size:   11px;
  color:       rgba(255,255,255,0.70);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-mp-pl-item.active .mp-mp-pl-name { color: var(--mp-accent, #3daee9); }

.mp-mp-pl-dur {
  font-size:   10px;
  color:       rgba(255,255,255,0.25);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Equalizer animado no item ativo */
.mp-mp-pl-item.active.playing .mp-mp-pl-icon::after {
  content: '▶';
  color:   var(--mp-accent, #3daee9);
  font-size: 10px;
}