.mini-player {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: grid;
  gap: .5rem;
  width: min(23rem, calc(100vw - 2rem));
  padding: .7rem;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}

.mini-player[hidden] { display: none; }
.mini-player.is-floating { right: auto; bottom: auto; }
.mini-player.is-dragging { user-select: none; }

.mini-player__top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.mini-player__meta { flex: 1; min-width: 0; }

.mini-player__handle {
  padding: .2rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}

.mini-player.is-dragging .mini-player__handle { cursor: grabbing; }

.mini-player__title {
  overflow: hidden;
  margin: 0;
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-player__status { margin: 0; color: var(--muted); font-size: .7rem; }
.mini-player__link { color: var(--fg); font-size: .75rem; white-space: nowrap; }
.mini-player__row { display: flex; align-items: center; gap: .3rem; }

.mini-player__button {
  min-width: 2rem;
  padding: .2rem .35rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}

.mini-player__button:hover { border-color: var(--fg); }
.mini-player__button:focus-visible,
.mini-player__handle:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.mini-player__volume { display: flex; align-items: center; gap: .3rem; margin-left: auto; color: var(--muted); font-size: .7rem; }
.mini-player__volume input { width: 5.5rem; accent-color: var(--fg); }
.mini-player__volume.is-unavailable { opacity: .5; }
.mini-player__sources { display: flex; flex-wrap: wrap; gap: .3rem; }
.mini-player__sources:empty { display: none; }
.mini-player__sources button {
  padding: .15rem .45rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .68rem;
  cursor: pointer;
}
.mini-player__sources button[aria-pressed="true"] { border-color: var(--fg); color: var(--fg); }
.mini-player__sources button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.mini-player__stage { display: none; }
.mini-player__stage.is-active { display: block; }
.mini-player__embed iframe { display: block; border: 0; }

@media (max-width: 480px) {
  .mini-player { width: calc(100vw - 2rem); }
}