/* Packs from the top so the transport controls sit right under the poster
   and stay on screen without scrolling; the poster shrinks on short
   viewports (see .player__art) instead of pushing the controls down. */
.player {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 0 var(--space-5) var(--space-6);
  background-color: var(--color-bg-base);
}

/* Native app: the header row lives in the navigation bar, so give the poster
   the same breathing room below the bar that the header gives it on the web. */
.hotwire-native .player {
  padding-top: var(--space-5);
}

.player__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.player__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: var(--space-2);
  color: var(--color-text-base);
  cursor: pointer;
  border-radius: var(--radius-circle);
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.player__icon-btn:hover {
  opacity: 0.85;
}

.player__header-spacer {
  flex: 1;
}

.player__details {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.player__details-empty {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}

.player__details-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-subtle);
  object-fit: cover;
  flex-shrink: 0;
}

.player__details-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player__details-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.player__details-share:hover {
  color: var(--color-text-base);
  background-color: rgba(255, 255, 255, 0.06);
}

.player__details > .share-button {
  margin-right: var(--space-2);
}

.player__details .share-button__tooltip {
  left: auto;
  right: 0;
  transform: none;
}

.player__details .share-button__tooltip::after {
  left: auto;
  right: 13px;
  transform: none;
}

.player__details-artist {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-base);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__details-album {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__art-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Extra room around the poster, on top of the section gap. */
  padding: 28px 0;
}

/* Square poster, capped by width and by what is left of the viewport once
   the header, track info, progress and controls (~456px) have their room. */
.player__art {
  width: clamp(160px, calc(100svh - 456px), 100%);
  max-width: 360px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-comfortable);
  box-shadow: var(--shadow-heavy);
}

/* Web only: 32px around the poster (20px section gap + 12px padding), and
   always full size; a short window scrolls to the controls. */
html:not(.hotwire-native) .player__art-wrap {
  padding: var(--space-3) 0;
}

html:not(.hotwire-native) .player__art {
  width: 100%;
}

/* Web desktop: fill the viewport above the fixed footer nav and let the
   poster area absorb the spare height, so the track info and transport
   controls sit near the bottom instead of floating mid-screen. */
@media (min-width: 896px) {
  html:not(.hotwire-native) .player {
    min-height: calc(100vh - 76px);
  }

  html:not(.hotwire-native) .player__art-wrap {
    flex: 1;
  }
}

.player__art--placeholder {
  background-color: var(--color-bg-elevated);
}

.player__bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.player__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.player__track-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player__track-name {
  display: block;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-base);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.player__track-name:hover {
  text-decoration: none;
  color: var(--color-text-base);
}

.player__track-artist {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__heart {
  color: var(--color-text-muted);
}

.player__heart:hover {
  color: var(--color-text-base);
}

.player__progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.player__times {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.player__slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background-color: var(--color-border);
  border-radius: var(--radius-full-pill);
  outline: none;
  cursor: pointer;
}

.player__slider::-webkit-slider-runnable-track {
  height: 4px;
  background-color: var(--color-border);
  border-radius: var(--radius-full-pill);
}

.player__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  background-color: var(--color-text-base);
  border-radius: var(--radius-circle);
  cursor: pointer;
}

.player__slider::-moz-range-track {
  height: 4px;
  background-color: var(--color-border);
  border-radius: var(--radius-full-pill);
}

.player__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background-color: var(--color-text-base);
  border: none;
  border-radius: var(--radius-circle);
  cursor: pointer;
}

.player__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.player__ctrl-form {
  display: inline-flex;
  margin: 0;
}

.player__ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: var(--space-2);
  color: var(--color-text-base);
  cursor: pointer;
  border-radius: var(--radius-circle);
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.player__ctrl:hover {
  opacity: 0.85;
}

.player__ctrl:active {
  transform: scale(0.96);
}

.player__ctrl.is-active {
  color: var(--color-accent);
}

.player__ctrl--primary {
  background-color: var(--color-text-base);
  color: var(--color-bg-base);
  width: 56px;
  height: 56px;
  padding: 0;
}

.player__ctrl--primary:hover {
  opacity: 1;
  transform: scale(1.04);
}

/* On desktop the full-width bar spreads the transport controls too far apart.
   Keep previous / play-pause / next grouped together with a 25px gap, while
   shuffle and repeat stay pinned to the edges via auto margins. */
@media (min-width: 896px) {
  .player__controls {
    justify-content: center;
    gap: 25px;
  }

  .player__controls > :first-child {
    margin-right: auto;
  }

  .player__controls > :last-child {
    margin-left: auto;
  }
}

.bellow_player__ctrls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.player__volume-btn {
  color: var(--color-text-muted);
}

.player__volume-btn:hover {
  color: var(--color-text-base);
}

.player__volume-slider {
  width: 160px;
  max-width: 60%;
}

@media (max-width: 575px) {
  .bellow_player__ctrls {
    display: none;
  }
}

.minimal-player {
  position: fixed;
  left: var(--space-2);
  right: var(--space-2);
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-comfortable);
  box-shadow: var(--shadow-medium);
}

/* Native app: the mini player is a native accessory above the tab bar. The
   element stays in the DOM (the now-playing controller lives on it and still
   drives the app's player) but is never shown. */
.hotwire-native .minimal-player {
  display: none;
}

.minimal-player[hidden] {
  display: none;
}

.minimal-player__link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.minimal-player__link:hover {
  text-decoration: none;
}

.minimal-player__art {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-subtle);
  object-fit: cover;
  flex-shrink: 0;
}

.minimal-player__art--placeholder {
  background-color: var(--color-bg-card);
}

.minimal-player__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.minimal-player__name {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-base);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.minimal-player__authors {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.minimal-player__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-text-base);
  color: var(--color-bg-base);
  border: 0;
  border-radius: var(--radius-circle);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s ease;
}

.minimal-player__play:hover {
  transform: scale(1.04);
}

.minimal-player__play:active {
  transform: scale(0.96);
}

body.is-big-player .minimal-player {
  display: none;
}

body.has-footer-nav.has-minimal-player {
  padding-bottom: calc(76px + 64px + env(safe-area-inset-bottom));
}

/* Native app: the tab bar and its mini player accessory are part of the
   safe area, which the web view's scroll view already insets for. */
.hotwire-native body.has-footer-nav.has-minimal-player {
  padding-bottom: 0;
}