/* =========================================================
   AUDIO WIDGET
   ========================================================= */

.audio-widget-container {
  position: fixed;

  left: 50%;
  bottom: 24px;

  z-index: 9999;

  width: min(
    760px,
    calc(100vw - 32px)
  );

  transform:
    translateX(-50%);

  pointer-events: none;

  /* centers the inner .audio-widget horizontally,
     so when it shrinks (is-minimized) it stays
     centered instead of sticking to the left edge */
  display: flex;
  justify-content: center;

  transition:
    opacity 550ms cubic-bezier(.16, 1, .3, 1),
    transform 700ms cubic-bezier(.16, 1, .3, 1);
}


.audio-widget-hidden {
  opacity: 0;

  transform:
    translateX(-50%)
    translateY(20px)
    scale(.96);
}


.audio-widget-visible {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0)
    scale(1);

  pointer-events: auto;
}


/* =========================================================
   MAIN HUD
   ========================================================= */

.audio-widget {
  position: relative;

  display: flex;
  align-items: center;

  gap: 8px;

  width: 100%;

  min-height: 66px;

  padding:
    9px 11px;

  border:
    1px solid #ffffff12;

  border-radius:
    15px;

  /* clip children (progress bar) exactly to this
     rounded shape so square corners can't poke out */
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #11131ce8,
      #0b0d14ed
    );

  box-shadow:
    0 18px 50px #00000045,
    inset 0 1px 0 #ffffff0a;

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);

  isolation: isolate;

  transition:
    border-color 450ms ease,
    box-shadow 500ms ease,
    width 550ms cubic-bezier(.16, 1, .3, 1),
    min-height 550ms cubic-bezier(.16, 1, .3, 1),
    padding 550ms cubic-bezier(.16, 1, .3, 1),
    gap 450ms cubic-bezier(.16, 1, .3, 1);
}


.audio-widget::before {
  content: "";

  position: absolute;

  inset: 0;

  border-radius:
    inherit;

  background:
    radial-gradient(
      circle at 18% 50%,
      #7284ff0b,
      transparent 35%
    );

  pointer-events: none;

  z-index: -1;
}


.audio-widget::after {
  content: "";

  position: absolute;

  top: 0;
  left: 15%;

  width: 70%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #8794ff25,
      transparent
    );

  opacity: .7;
}


.audio-widget.is-playing {
  border-color:
    #8994ff24;

  box-shadow:
    0 18px 50px #00000045,
    0 0 40px #6677ff0b,
    inset 0 1px 0 #ffffff0c;
}


/* =========================================================
   ALBUM COVER
   ========================================================= */

.audio-cover-wrap {
  position: relative;

  flex: 0 0 auto;

  width: 46px;
  height: 46px;

  margin-right: 2px;
}


.audio-cover {
  position: relative;

  width: 46px;
  height: 46px;

  overflow: hidden;

  border:
    1px solid #ffffff15;

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      #191d2b,
      #0d0f17
    );

  box-shadow:
    0 5px 18px #00000035;

  transform:
    translateZ(0);

  transition:
    transform 700ms cubic-bezier(.16, 1, .3, 1),
    border-color 400ms ease,
    box-shadow 500ms ease;
}


.audio-cover::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 4;

  border:
    1px solid #ffffff08;

  border-radius:
    inherit;

  pointer-events: none;
}


.audio-cover-placeholder {
  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  color:
    #8995ff;

  font-size:
    18px;

  background:
    radial-gradient(
      circle at 50% 40%,
      #7585ff20,
      transparent 65%
    );
}


.audio-cover-placeholder span {
  filter:
    drop-shadow(
      0 0 8px
      #7d8cff88
    );
}


.audio-cover-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;

  transform:
    scale(1.08);

  transition:
    opacity 500ms ease,
    transform 900ms cubic-bezier(.16, 1, .3, 1);
}


.audio-cover-image.is-loaded {
  opacity: 1;

  transform:
    scale(1);
}


.audio-cover-overlay {
  position: absolute;

  inset: 0;

  z-index: 3;

  background:
    linear-gradient(
      135deg,
      #ffffff08,
      transparent 45%,
      #00000020
    );

  pointer-events: none;
}


.audio-widget.is-playing
.audio-cover {
  border-color:
    #8b97ff40;

  box-shadow:
    0 7px 22px #00000045,
    0 0 22px #7284ff15;

  transform:
    translateY(-1px)
    scale(1.025);
}


.audio-widget.is-playing
.audio-cover-image {
  animation:
    audioCoverBreath
    5s
    ease-in-out
    infinite
    alternate;
}


@keyframes audioCoverBreath {

  from {
    transform:
      scale(1);
  }

  to {
    transform:
      scale(1.045);
  }

}


/* =========================================================
   COVER STATUS
   ========================================================= */

.audio-cover-status {
  position: absolute;

  left: 50%;
  bottom: -7px;

  transform:
    translateX(-50%);

  padding:
    2px 5px;

  border:
    1px solid #ffffff10;

  border-radius:
    4px;

  background:
    #10121ae8;

  color:
    #747c96;

  font:
    6px
    var(--font-mono, "DM Mono", monospace);

  letter-spacing:
    .12em;

  white-space:
    nowrap;

  opacity: 0;

  transition:
    opacity 350ms ease,
    color 350ms ease;
}


.audio-widget.is-playing
.audio-cover-status {
  opacity: 1;

  color:
    #94a1ff;
}


/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

.audio-prev,
.audio-next {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 26px;
  height: 34px;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    #737b93;

  font:
    22px
    var(--font-main, Manrope, sans-serif);

  cursor: pointer;

  transition:
    color 300ms ease,
    transform 400ms cubic-bezier(.16, 1, .3, 1);
}


.audio-prev:hover {
  color:
    #d9ddf2;

  transform:
    translateX(-2px);
}


.audio-next:hover {
  color:
    #d9ddf2;

  transform:
    translateX(2px);
}


.audio-prev:active,
.audio-next:active {
  transform:
    scale(.88);
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

.audio-toggle {
  position: relative;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 36px;
  height: 36px;

  padding: 0;

  border:
    1px solid #ffffff18;

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      #1d2130,
      #141722
    );

  color:
    #e9ebff;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 #ffffff08;

  transition:
    background 350ms ease,
    border-color 350ms ease,
    color 300ms ease,
    transform 450ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 450ms ease;
}


.audio-toggle:hover {
  border-color:
    #8996ff42;

  background:
    linear-gradient(
      135deg,
      #667eff,
      #8268d2
    );

  color:
    #fff;

  box-shadow:
    0 8px 24px #6f7cff2c;

  transform:
    translateY(-2px)
    scale(1.03);
}


.audio-toggle:active {
  transform:
    translateY(0)
    scale(.94);
}


.audio-icon {
  display: block;

  font-size:
    9px;

  transform:
    translateX(1px);

  transition:
    transform 300ms ease;
}


.audio-widget.is-playing
.audio-icon {
  transform:
    translateX(0);
}


/* =========================================================
   INFO
   ========================================================= */

.audio-info {
  min-width: 0;

  flex: 1;

  padding:
    0 6px;
}


/* Wraps: [ topline (label + time), title, artist ].
   topline is forced to take the full row (flex-basis:100%),
   which pushes title + artist onto the next line, sitting
   next to each other. */
.audio-title-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 3px;

  min-width: 0;
}


.audio-topline {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  flex: 1 1 100%;
}


.audio-label {
  color:
    #707891;

  font:
    7.5px
    var(--font-mono, "DM Mono", monospace);

  font-weight:
    500;

  letter-spacing:
    .13em;
}


.audio-time {
  color:
    #60687c;

  font:
    8px
    var(--font-mono, "DM Mono", monospace);

  white-space:
    nowrap;
}


.audio-time-divider {
  margin:
    0 2px;

  color:
    #3d4354;
}


.audio-current {
  color:
    #8992aa;
}


.audio-title {
  display: block;

  overflow: hidden;

  flex: 0 1 auto;

  color:
    #e3e6f2;

  font-size:
    12px;

  font-weight:
    650;

  letter-spacing:
    -.02em;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  transition:
    color 350ms ease;
}


.audio-widget.is-playing
.audio-title {
  color:
    #f0f1fa;
}


/* =========================================================
   ARTIST
   ========================================================= */

.audio-artist {
  display: flex;
  align-items: baseline;

  flex: 1 1 auto;
  min-width: 0;

  overflow: hidden;

  color:
    #656d83;

  font:
    9px
    var(--font-mono, "DM Mono", monospace);

  letter-spacing:
    .025em;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  transition:
    color 300ms ease;
}


.audio-artist::before {
  content: "•";

  margin: 0 6px;

  color: #454b60;

  flex: 0 0 auto;
}


.audio-widget.is-playing
.audio-artist {
  color:
    #737d99;
}


/* =========================================================
   TRACK CHANGE
   ========================================================= */

.audio-widget.track-changing
.audio-title {
  animation:
    audioTitleChange
    500ms
    cubic-bezier(.16, 1, .3, 1);
}


.audio-widget.track-changing
.audio-artist {
  animation:
    audioArtistChange
    550ms
    cubic-bezier(.16, 1, .3, 1);
}


@keyframes audioTitleChange {

  0% {
    opacity: .25;

    transform:
      translateY(5px);

    filter:
      blur(3px);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0);

    filter:
      blur(0);
  }

}


@keyframes audioArtistChange {

  0% {
    opacity: 0;

    transform:
      translateY(4px);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   WAVEFORM
   ========================================================= */

.audio-wave {
  display: flex;

  align-items:
    center;

  gap:
    2px;

  height:
    10px;

  margin-top:
    7px;
}


.audio-wave i {
  display: block;

  width:
    2px;

  height:
    3px;

  border-radius:
    2px;

  background:
    #6874a0;

  opacity:
    .35;

  transform-origin:
    center;

  transition:
    opacity 300ms ease,
    background 300ms ease;
}


.audio-wave i:nth-child(1) {
  height: 5px;
}

.audio-wave i:nth-child(2) {
  height: 8px;
}

.audio-wave i:nth-child(3) {
  height: 4px;
}

.audio-wave i:nth-child(4) {
  height: 9px;
}

.audio-wave i:nth-child(5) {
  height: 6px;
}

.audio-wave i:nth-child(6) {
  height: 10px;
}

.audio-wave i:nth-child(7) {
  height: 5px;
}

.audio-wave i:nth-child(8) {
  height: 8px;
}

.audio-wave i:nth-child(9) {
  height: 4px;
}

.audio-wave i:nth-child(10) {
  height: 7px;
}

.audio-wave i:nth-child(11) {
  height: 5px;
}

.audio-wave i:nth-child(12) {
  height: 9px;
}


.audio-widget.is-playing
.audio-wave i {
  opacity:
    .8;

  animation:
    audioWave
    800ms
    ease-in-out
    infinite
    alternate;
}


.audio-widget.is-playing
.audio-wave i:nth-child(2n) {
  animation-duration:
    600ms;
}


.audio-widget.is-playing
.audio-wave i:nth-child(3n) {
  animation-duration:
    950ms;
}


.audio-widget.is-playing
.audio-wave i:nth-child(4n) {
  animation-duration:
    700ms;
}


@keyframes audioWave {

  from {
    transform:
      scaleY(.45);
  }

  to {
    transform:
      scaleY(1.45);
  }

}


/* =========================================================
   VOLUME
   ========================================================= */

.audio-volume-control {
  display: flex;

  align-items:
    center;

  gap:
    2px;

  padding-left:
    5px;

  border-left:
    1px solid #ffffff0b;
}


.audio-volume-down,
.audio-volume-up {
  display: grid;

  place-items:
    center;

  width:
    22px;

  height:
    28px;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    #686f83;

  font:
    15px
    var(--font-mono, "DM Mono", monospace);

  cursor:
    pointer;

  transition:
    color 250ms ease,
    transform 300ms cubic-bezier(.16, 1, .3, 1);
}


.audio-volume-down:hover,
.audio-volume-up:hover {
  color:
    #dce0f0;

  transform:
    scale(1.15);
}


.audio-volume-down:active,
.audio-volume-up:active {
  transform:
    scale(.88);
}


.audio-volume-down:disabled,
.audio-volume-up:disabled {
  opacity:
    .2;

  cursor:
    default;

  transform:
    none;
}


.audio-volume {
  min-width:
    31px;

  height:
    28px;

  padding:
    0 4px;

  border:
    1px solid #ffffff10;

  border-radius:
    6px;

  background:
    #ffffff04;

  color:
    #8189a0;

  font:
    7px
    var(--font-mono, "DM Mono", monospace);

  letter-spacing:
    .08em;

  cursor:
    pointer;

  transition:
    color 300ms ease,
    background 300ms ease,
    border-color 300ms ease;
}


.audio-volume:hover {
  border-color:
    #8996ff30;

  background:
    #8996ff0d;

  color:
    #dce0f4;
}


.audio-volume-value {
  min-width:
    30px;

  color:
    #596074;

  font:
    7px
    var(--font-mono, "DM Mono", monospace);

  text-align:
    right;
}


/* =========================================================
   MINIMIZE BUTTON
   ========================================================= */

.audio-minimize {
  position:
    absolute;

  top:
    7px;

  right:
    8px;

  display:
    grid;

  place-items:
    center;

  width:
    18px;

  height:
    18px;

  padding: 0;

  border: 0;

  border-radius:
    5px;

  background:
    transparent;

  color:
    #596176;

  font:
    12px
    var(--font-mono, "DM Mono", monospace);

  line-height:
    1;

  cursor:
    pointer;

  opacity:
    .65;

  transition:
    opacity 250ms ease,
    color 250ms ease,
    background 250ms ease,
    transform 350ms cubic-bezier(.16, 1, .3, 1);
}


.audio-minimize:hover {
  opacity:
    1;

  color:
    #dce1f5;

  background:
    #ffffff0a;

  transform:
    scale(1.08);
}


.audio-minimize:active {
  transform:
    scale(.88);
}


/* =========================================================
   PROGRESS
   ========================================================= */

.audio-progress {
  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  width:
    100%;

  height:
    3px;

  overflow:
    hidden;

  border-radius:
    0 0 15px 15px;

  background:
    #ffffff0a;

  cursor:
    pointer;

  z-index:
    10;
}


.audio-progress-fill {
  position:
    absolute;

  left:
    0;

  top:
    0;

  width:
    0;

  height:
    100%;

  border-radius:
    0 99px 99px 0;

  background:
    linear-gradient(
      90deg,
      #7188ff,
      #a47ee6
    );

  box-shadow:
    0 0 8px #7f8eff44;

  transition:
    width 100ms linear;
}


.audio-progress-glow {
  position:
    absolute;

  top:
    50%;

  left:
    0;

  width:
    7px;

  height:
    7px;

  margin-left:
    -3px;

  margin-top:
    -3px;

  border-radius:
    50%;

  background:
    #a5b0ff;

  box-shadow:
    0 0 8px #8e9cff66;

  opacity:
    0;

  transition:
    opacity 300ms ease;
}


.audio-progress:hover
.audio-progress-glow {
  opacity:
    1;
}


/* =========================================================
   ERROR
   ========================================================= */

.audio-widget.is-error {
  border-color:
    #ff687522;
}


.audio-widget.is-error
.audio-title {
  color:
    #e58b98;
}


/* =========================================================
   MINIMIZED
   ========================================================= */

.audio-widget.is-minimized {
  width:
    max-content;

  min-width:
    210px;

  min-height:
    52px;

  padding:
    7px 10px;

  gap:
    7px;

  border-radius:
    13px;

  justify-content:
    center;

  animation:
    audioMinimize
    450ms
    cubic-bezier(.16, 1, .3, 1);
}


@keyframes audioMinimize {

  0% {
    transform:
      scale(1);
  }

  45% {
    transform:
      scale(.96)
      translateY(2px);
  }

  100% {
    transform:
      scale(1);
  }

}


/* =========================================================
   MINIMIZED — HIDE SECONDARY CONTROLS
   ========================================================= */

.audio-widget.is-minimized
.audio-prev,

.audio-widget.is-minimized
.audio-next,

.audio-widget.is-minimized
.audio-volume-control,

.audio-widget.is-minimized
.audio-wave,

.audio-widget.is-minimized
.audio-topline,

.audio-widget.is-minimized
.audio-artist {
  display:
    none;
}


/* =========================================================
   MINIMIZED — COMPACT INFO
   ========================================================= */

.audio-widget.is-minimized
.audio-info {
  flex:
    0 1 130px;

  padding:
    0 3px;
}


.audio-widget.is-minimized
.audio-title {
  max-width:
    130px;

  font-size:
    10px;
}


/* =========================================================
   MINIMIZED — COVER
   ========================================================= */

.audio-widget.is-minimized
.audio-cover-wrap,

.audio-widget.is-minimized
.audio-cover {
  width:
    36px;

  height:
    36px;
}


.audio-widget.is-minimized
.audio-cover-wrap {
  margin-right:
    0;
}


/* =========================================================
   MINIMIZED — PLAY BUTTON
   ========================================================= */

.audio-widget.is-minimized
.audio-toggle {
  width:
    32px;

  height:
    32px;
}


/* =========================================================
   MINIMIZED — EXPAND BUTTON
   ========================================================= */

.audio-widget.is-minimized
.audio-minimize {
  position:
    relative;

  top:
    auto;

  right:
    auto;

  margin-left:
    1px;
}


/* =========================================================
   MINIMIZED — PROGRESS
   ========================================================= */

.audio-widget.is-minimized
.audio-progress {
  left:
    0;

  right:
    0;

  bottom:
    0;

  width:
    100%;

  height:
    3px;

  border-radius:
    0 0 13px 13px;
}


.audio-widget.is-minimized
.audio-progress-fill {
  border-radius:
    0 99px 99px 0;
}


.audio-widget.is-minimized
.audio-progress-glow {
  top:
    50%;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .audio-widget-container {
    bottom:
      15px;

    width:
      calc(100vw - 24px);
  }


  .audio-widget {
    min-height:
      62px;

    padding:
      8px 9px;

    gap:
      5px;

    border-radius:
      13px;
  }


  .audio-cover-wrap,
  .audio-cover {
    width:
      40px;

    height:
      40px;
  }


  .audio-prev,
  .audio-next {
    width:
      22px;
  }


  .audio-toggle {
    width:
      34px;

    height:
      34px;
  }


  .audio-info {
    padding:
      0 3px;
  }


  .audio-volume-value {
    display:
      none;
  }


  .audio-volume-control {
    padding-left:
      3px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 460px) {

  .audio-widget {
    gap:
      3px;
  }


  .audio-cover-wrap,
  .audio-cover {
    width:
      36px;

    height:
      36px;
  }


  .audio-prev,
  .audio-next {
    width:
      19px;
  }


  .audio-toggle {
    width:
      32px;

    height:
      32px;
  }


  .audio-label {
    font-size:
      6.5px;
  }


  .audio-title {
    font-size:
      11px;
  }


  .audio-artist {
    font-size:
      8px;
  }


  .audio-time {
    font-size:
      7px;
  }


  .audio-volume-down,
  .audio-volume-up {
    width:
      19px;
  }


  .audio-volume {
    min-width:
      29px;
  }


  /*
   * On very small screens,
   * keep minimize hidden to avoid
   * overcrowding.
   */

  .audio-minimize {
    display:
      none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .audio-widget-container,
  .audio-widget,
  .audio-cover,
  .audio-cover-image,
  .audio-title,
  .audio-artist,
  .audio-icon,
  .audio-wave i,
  .audio-toggle,
  .audio-prev,
  .audio-next,
  .audio-volume-down,
  .audio-volume-up,
  .audio-minimize {

    animation:
      none !important;

    transition:
      opacity 200ms ease,
      color 200ms ease,
      background 200ms ease,
      border-color 200ms ease;
  }

}