/* =========================================================
   Minimal Audio Player — Full CSS
   - Matches the blue rounded button style
   - Play/Pause SVG-driven visuals
   - Progress bar with knob
   - Volume slider + mute/unmute button
   - Accessible focus states and responsive tweaks
   ========================================================= */

/* Root / container */
.minimal-audio-player {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  padding: 14px;
  max-width: 720px;
  box-shadow: 0 0px 10px rgba(0,0,0,.1);
  color: var(--grey);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 480px;
}

/* Track info row */
.track-info {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.track-title {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.time-display {
  font-size: 12px;
  color: #666;
  font-family: 'SF Mono', Monaco, 'Cascadia Mono', monospace;
  white-space: nowrap;
  text-align: right;
  padding-right: 20px;
}
.time-display .current-time { margin-right: 6px; color: #333; }
.time-display .duration { color: #999; }

/* Player controls container */
.player-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(26,150,255,0.03), rgba(30,140,229,0.02));
  border-radius: 16px;
  padding: 10px 12px;
}

/* ---------- Play / Pause button ---------- */
/* The SVG inside the button provides the visual (rounded blue with white icon) */
.play-pause-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: transform 140ms ease, box-shadow 140ms ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  margin-right: 10px;
}
.play-pause-btn:hover { transform: translateY(-2px); }
.play-pause-btn:active { transform: scale(0.98); }
.play-pause-btn:focus {
  box-shadow: 0 0 0 6px rgba(30,140,229,0.14);
}

/* SVG icons sizing inside the button */
.play-pause-btn svg { width: 36px; height: 36px; display: block; }

/* By default show play, hide pause; JS toggles aria-pressed */
.play-pause-btn .play-icon { display: block; }
.play-pause-btn .pause-icon { display: none; }

/* When aria-pressed true -> show pause */
.play-pause-btn[aria-pressed="true"] .play-icon { display: none; }
.play-pause-btn[aria-pressed="true"] .pause-icon { display: block; }

/* ---------- Progress bar ---------- */
.progress-container { flex: 1; min-width: 80px; }
.progress-bar {
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  overflow: visible;
}
.progress-bar .progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #39b0f7, #1e8be5);
  border-radius: 999px;
  transition: width 120ms linear;
  position: relative;
  overflow: visible;
}

/* draggable knob on progress fill */
.progress-bar .knob {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  left: 0%;
  pointer-events: auto;
  transition: left 60ms linear;
  border: 1px solid rgba(0,0,0,0.06);
}

/* enlarge clickable area */
.progress-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -8px; bottom: -8px;
}

/* ---------- Volume control and mute ---------- */
.volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
  max-width: 220px;
}

/* Mute/unmute button */
.mute-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #56606a;               /* icon color when unmuted */
  transition: background 120ms ease, transform 120ms ease, color 120ms ease;
  outline: none;
}
.mute-btn:hover { transform: translateY(-1px); color: #1e8be5; }
.mute-btn:focus { box-shadow: 0 0 0 6px rgba(30,140,229,0.14); }

/* volume icon show/hide logic: JS will toggle aria-pressed */
.volume-icon { display: block; width: 16px; height: 16px; }
.muted-icon { display: none; }

/* aria-pressed true => show muted icon */
.mute-btn[aria-pressed="true"] { color: #9aa3ad; }
.mute-btn[aria-pressed="true"] .unmuted-icon { display: none; }
.mute-btn[aria-pressed="true"] .muted-icon { display: block; }

/* Volume slider visuals */
.volume-slider {
  appearance: none;
  width: 100px;
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: white;
  border: 2px solid #1e8be5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.volume-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: white; border: 2px solid #1e8be5;
}

/* ---------- Hidden audio element utility ---------- */
.hidden-audio { display: none; }

/* ---------- Responsive adjustments ---------- */
@media (max-width: 640px) {
  .minimal-audio-player { padding: 10px; }
  .player-controls { gap: 8px; padding: 8px 10px; }
  .play-pause-btn { width: 44px; height: 44px; }
  .play-pause-btn svg { width: 32px; height: 32px; }
  .progress-bar { height: 6px; }
  .progress-bar .knob { width: 10px; height: 10px; }
  .volume-control { min-width: 90px; gap: 8px; }
  .volume-slider { width: 80px; }
}

/* Small utilities (optional but helpful) */
.flex-center { display: flex; align-items: center; justify-content: center; }
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}