.player-dock {
  /* Values sampled from the live theme. Swap for sherbet tokens if they exist. */
  --pd-ink: oklch(0.24 0.02 75);
  --pd-muted: oklch(0.46 0.02 75);
  --pd-line: oklch(0.905 0.013 80);
  --pd-card: oklch(0.994 0.004 85);
  --pd-track: oklch(0.93 0.02 85);
  --pd-yellow: oklch(0.8 0.17 88);
  --pd-yellow-ink: oklch(0.38 0.09 75);
  --pd-yellow-tint: oklch(0.96 0.06 88);
  --pd-coral: oklch(0.66 0.19 28);
  --pd-coral-tint: oklch(0.945 0.03 28);
  --pd-sidebar: 272px;
  --pd-gutter: 32px;

  position: fixed;
  left: calc(var(--pd-sidebar) + var(--pd-gutter));
  right: var(--pd-gutter);
  bottom: 16px;
  z-index: 1030; /* above page content, below Bootstrap modals */
  height: 72px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 16px 0 14px;
  background: var(--pd-card);
  border: 1px solid var(--pd-line);
  border-radius: 20px;
  box-shadow: 0 14px 34px -14px oklch(0.38 0.09 75 / 0.35), 0 2px 6px oklch(0.24 0.02 75 / 0.06);
  font-family: Poppins, system-ui, sans-serif;
  color: var(--pd-ink);
}
.player-dock[hidden] { display: none; }
.player-dock button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.player-dock button:focus-visible,
.player-dock input:focus-visible { outline: 2px solid var(--pd-yellow-ink); outline-offset: 2px; }

/* Stop the dock covering the end of the page. Adjust the selector to the real content wrapper. */
body:has(.player-dock:not([hidden])) main { padding-bottom: 120px; }

/* Track info */
.player-dock__info { display: flex; align-items: center; gap: 12px; flex: 0 1 300px; min-width: 0; }
.player-dock__tile { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-weight: 700; font-size: 18px; background: var(--pd-yellow-tint); color: var(--pd-yellow-ink); }
.player-dock[data-mode="live"] .player-dock__tile { background: var(--pd-coral); color: #fff; }
.player-dock[data-mode="live"] .player-dock__tile-icon,
.player-dock[data-mode="clip"] .player-dock__tile-letter { display: none; }
.player-dock__text { min-width: 0; }
.player-dock__title { font-family: "Baloo 2", Poppins, system-ui, sans-serif; font-weight: 700; font-size: 16.5px; line-height: 1.2; }
.player-dock__subtitle { font-size: 12.5px; color: var(--pd-muted); }
.player-dock__title, .player-dock__subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-dock[data-state="error"] .player-dock__subtitle { color: var(--pd-coral); }

/* Transport */
.player-dock__controls { display: flex; align-items: center; gap: 6px; flex: none; }
.player-dock__icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--pd-muted) !important; font-size: 18px; }
.player-dock__icon-btn:hover { background: var(--pd-yellow-tint) !important; color: var(--pd-ink) !important; }
.player-dock__icon-btn:disabled { opacity: 0.35; cursor: default; }
.player-dock__play { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  background: var(--pd-yellow) !important; color: var(--pd-yellow-ink) !important; }

/* Progress */
.player-dock__progress { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 120px; }
.player-dock__time { font-size: 12.5px; color: var(--pd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.player-dock__range { --pd-fill: 0%; --pd-range: var(--pd-ink);
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 14px; margin: 0; background: transparent; cursor: pointer; }
.player-dock__range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px;
  background: linear-gradient(to right, var(--pd-range) var(--pd-fill), var(--pd-track) var(--pd-fill)); }
.player-dock__range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -4px;
  border-radius: 50%; background: var(--pd-card); border: 3px solid var(--pd-range); }
.player-dock__range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--pd-track); }
.player-dock__range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--pd-range); }
.player-dock__range::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--pd-card); border: 3px solid var(--pd-range); }
.player-dock__range--volume { --pd-range: var(--pd-muted); --pd-fill: 100%; flex: none; width: 72px; }

.player-dock__live-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px;
  background: var(--pd-coral-tint); color: var(--pd-coral); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.player-dock__live-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.player-dock__live-bar { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 6px; border: 0; border-radius: 6px;
  overflow: hidden; background: var(--pd-track); }
.player-dock__live-bar::-webkit-progress-bar { background: var(--pd-track); }
.player-dock__live-bar::-webkit-progress-value { background: var(--pd-coral); border-radius: 6px; }
.player-dock__live-bar::-moz-progress-bar { background: var(--pd-coral); border-radius: 6px; }

/* Right-hand actions */
.player-dock__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.player-dock__chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px !important; margin-right: 6px;
  border: 1px solid var(--pd-line) !important; border-radius: 13px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.player-dock__chip:hover { background: var(--pd-yellow-tint) !important; }
.player-dock__chip[hidden] { display: none; }
.player-dock__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pd-coral); }
.player-dock__volume { display: flex; align-items: center; gap: 2px; margin-right: 4px; }

/* Mode switching */
.player-dock[data-mode="live"] .player-dock__skip,
.player-dock[data-mode="live"] .player-dock__progress--clip,
.player-dock[data-mode="live"] .player-dock__back,
.player-dock[data-mode="clip"] .player-dock__progress--live,
.player-dock[data-mode="clip"] .player-dock__stations { display: none; }

/* Narrow screens: sidebar is an overlay, so span the viewport and shed secondary controls */
@media (max-width: 991.98px) {
  .player-dock { left: 12px; right: 12px; bottom: 12px; gap: 12px; }
  .player-dock__info { flex-basis: 180px; }
  .player-dock__volume { display: none; }
}
@media (max-width: 575.98px) {
  .player-dock__info { flex: 1 1 0; }
  .player-dock__progress, .player-dock__skip, .player-dock__chip { display: none !important; }
}
/* The dock lives outside the shell so it remains permanent during visits. */
body:has(.sherbet-shell.is-nav-collapsed) .player-dock { --pd-sidebar: 0px; }
body:not(.design-sherbet) .player-dock { --pd-sidebar: 250px; }
body.sidebar-collapse .player-dock { --pd-sidebar: 0px; }
.player-dock .dropdown-menu {max-height:min(55vh,400px);overflow-y:auto;max-width:calc(100vw - 24px);}
@media (min-width:992px) and (max-width:1350px) {
  .player-dock {gap:12px;}
  .player-dock__info {flex-basis:190px;}
  .player-dock__volume {display:none;}
  .player-dock__chip {max-width:170px;overflow:hidden;text-overflow:ellipsis;}
}
@media (max-width:575.98px) {
  .player-dock {height:auto;min-height:72px;flex-wrap:wrap;padding:12px;gap:8px;}
  .player-dock__info {flex:1 1 120px;}
  .player-dock__controls {order:2;}
  .player-dock__actions {order:3;}
  .player-dock__actions .player-dock__chip {display:inline-flex !important;padding:0 8px !important;max-width:105px;}
  .player-dock__actions .player-dock__chip[hidden] {display:none !important;}
  .player-dock__actions .player-dock__chip span {overflow:hidden;text-overflow:ellipsis;}
  .player-dock__back {font-size:11px;}
  .player-dock__tile {width:36px;height:36px;}
  .player-dock__info {gap:8px;}
  .player-dock__title {font-size:15px;}
  .player-dock__progress--clip {display:flex !important;order:4;flex-basis:100%;}
  .player-dock__skip {display:grid !important;width:24px;}
  .player-dock[data-mode=live] .player-dock__skip,
  .player-dock[data-mode=live] .player-dock__progress--clip {display:none !important;}
}

.player-dock__stations .dropdown-menu {bottom:calc(100% + 8px);top:auto;right:0;left:auto;min-width:240px;}
@media(max-width:575.98px){
  .player-dock[data-mode=live] .player-dock__progress--live {display:flex !important;order:4;flex-basis:100%;}
  body:has(.player-dock:not([hidden])) main {padding-bottom:160px;}
}