/* DS Player - v0.2.5 */

/* IMPORTANT: Don't let the fixed player overlay steal clicks anywhere except its own UI */
#ds-player-root { pointer-events: none; }
#ds-player-root .ds-player__bar,
#ds-player-root .ds-player__panel { pointer-events: auto; }

#ds-player-root.ds-player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 99999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Avoid hiding common consent banners / popups behind the player */
:root { --ds-player-height: 64px; }

/* CookieYes (new + old selectors) */
.cky-consent-bar,
.cky-consent-container,
#cookie-law-info-bar,
#cookie_action_close_header,
.cookie-law-info-bar,
.cli-bar-container,
.cli-style-v2,
.cli-style-v3 {
  bottom: var(--ds-player-height) !important;
  z-index: 100000 !important; /* above player */
}

/* If CookieYes uses a floating button, keep it above too */
.cky-btn-revisit-wrapper,
.cky-revisit-bottom-left,
.cky-revisit-bottom-right {
  bottom: calc(var(--ds-player-height) + 10px) !important;
  z-index: 100000 !important;
}

.ds-player__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(18,18,20,0.96);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.12);
  min-height: var(--ds-player-height);
}

.ds-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.ds-btn:active { transform: translateY(1px); }

.ds-btn--primary {
  font-size: 16px;
  padding: 10px 12px;
}

.ds-player__art {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.ds-player__artImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-player__artImg.ds-is-empty {
  opacity: 0.15;
  filter: grayscale(1);
}

.ds-player__meta {
  min-width: 0;
  flex: 1 1 auto;
}

.ds-player__title {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-player__artist {
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-player__time {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 12px;
  opacity: 0.9;
}

.ds-player__seek { width: 160px; }

.ds-player__vol {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.9;
}

.ds-player__vol input[type="range"] { width: 110px; }

.ds-btn--queue {
  font-size: 16px;
  padding: 10px 12px;
}

/* Queue panel */
.ds-player__panel {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--ds-player-height);
  max-height: 55vh;
  overflow: auto;
  background: rgba(18,18,20,0.98);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 10px 12px;
  z-index: 100000;
}

.ds-player__panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 10px;
}

.ds-player__queue {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ds-qitem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ds-qitem__btn {
  text-align: left;
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 0;
  cursor: pointer;
}

.ds-qitem.is-active .ds-qitem__title { text-decoration: underline; }

.ds-qitem__title {
  display: block;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-qitem__artist {
  display: block;
  font-size: 12px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-qitem__rm {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  touch-action: manipulation;
}

/* Mobile: simplify bar so controls remain tappable */
@media (max-width: 820px) {
  .ds-player__seek { width: 110px; }
  .ds-player__vol input[type="range"] { width: 90px; }
}

@media (max-width: 560px) {
  .ds-player__time span:last-child { display: none; } /* hide duration */
  .ds-player__vol { display: none; } /* unclutter */
  .ds-player__seek { width: 120px; }
  .ds-player__art { display: none; } /* optional: hide cover on tiny */
}

/* prevent page content being hidden behind fixed bar */
body { padding-bottom: var(--ds-player-height); }