html { scroll-padding-top: 80px; scroll-padding-bottom: var(--listening-dock-height, 16px); }
.player-pin-slot { min-width: 0; }
.pinnable-player { background: var(--surface, #fff); }
.pin-player { display: none !important; }
.listening-dock[hidden] { display: none !important; }
.listening-dock { display: none; }
@media (max-width: 720px) {
  .pin-player { display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; min-width: 7em; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface, #fff); color: var(--ink); font: inherit; white-space: nowrap; }
  .pin-player[aria-pressed="true"] { color: var(--blue); background: var(--soft, var(--blue-tint)); }
  html.has-listening-dock body { padding-bottom: var(--listening-dock-height); }
  html.has-listening-dock .toast { bottom: calc(var(--listening-dock-height) + 12px); }
  .listening-dock { display: block; position: fixed; left: 8px; right: 8px; bottom: 0; z-index: 45; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); border: 1px solid var(--line, #ddd); border-radius: 16px 16px 0 0; background: var(--surface, #fff); color: var(--ink, #222); box-shadow: 0 -4px 24px #0002; }
  .dock-actions { display: flex; gap: 4px; }
  .listening-dock .dock-actions button { flex: 1; min-width: 0; min-height: 48px; border: 0; border-radius: 9px; padding: 6px 2px; background: var(--blue-tint, #edf5ff); color: inherit; font: inherit; font-size: 14px; white-space: nowrap; }
  .dock-progress { display: flex; align-items: center; gap: 10px; }
  .dock-progress input { min-width: 0; flex: 1; height: 44px; accent-color: var(--blue, #0071e3); }
  .dock-progress span { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .viewer-large .listening-dock button, .large-text .listening-dock button { font-size: 17px; }
  .high-contrast .listening-dock { background: #111; color: #fff; border-color: #888; }
  .high-contrast .listening-dock button { background: #29384a; }
}