/* ═══════════════════════════════════════════════════════════════
   COMPONENT: audio-dock
   A self-contained sticky audio player with scroll-aware mini widget.
   Include audio-dock.css + audio-dock.js, then markup an element with
   class="audio-dock" and child buttons with data-dock-src.
   ═══════════════════════════════════════════════════════════════ */

.audio-dock {
  --dock-accent: #d4af37;
  --dock-surface: #111;
  --dock-border: #2a2a2a;
  --dock-text: #e5e3df;
  --dock-muted: #777;
  width: 100%;
  background: var(--dock-surface);
  border: 1px solid var(--dock-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .25s ease;
}
.audio-dock:hover { border-color: rgba(212,175,55,.25); }

/* ── Pills ── */
.dock-pills {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--dock-border);
  flex-wrap: wrap;
}
.dock-pill {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem .5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dock-muted);
  transition: all .2s ease;
  position: relative;
  min-height: 38px;
}
.dock-pill::after {
  content: '';
  position: absolute;
  bottom: 0; left: 15%; right: 15%;
  height: 2px; border-radius: 1px;
  background: transparent;
  transition: all .2s ease;
}
.dock-pill:hover { color: var(--dock-text); background: rgba(255,255,255,.03); }
.dock-pill.active { color: var(--dock-accent); background: rgba(255,255,255,.02); }
.dock-pill.active::after { background: var(--dock-accent); box-shadow: 0 0 8px rgba(212,175,55,.35); }
.dock-pill.unavailable { opacity: .35; cursor: default; pointer-events: none; }
.dock-pill .pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; transition: opacity .2s; }
.dock-pill.active .pill-dot { opacity: 1; }

/* ── Body ── */
.dock-body {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .9rem;
}
.dock-body.hidden { display: none; }

.dock-play {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--dock-accent); background: transparent;
  color: var(--dock-accent); font-size: .72rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s ease;
}
.dock-play:hover { background: rgba(212,175,55,.1); transform: scale(1.05); }
.dock-play.playing { animation: dock-pulse 2s ease-in-out infinite; }
@keyframes dock-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,.2); }
  50% { box-shadow: 0 0 0 5px rgba(212,175,55,.05); }
}

.dock-track-wrap { flex: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.dock-track { width: 100%; height: 5px; background: #222; border-radius: 3px; cursor: pointer; overflow: hidden; position: relative; }
.dock-fill { height: 100%; width: 0%; border-radius: 3px; background: var(--dock-accent); transition: width .15s linear; }
.dock-times { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .58rem; color: var(--dock-muted); }

.dock-vol {
  background: none; border: none; color: var(--dock-muted); cursor: pointer;
  font-size: .8rem; flex-shrink: 0; padding: 4px; transition: color .2s;
}
.dock-vol:hover { color: var(--dock-text); }

.dock-speed {
  flex-shrink: 0;
  height: 30px;
  min-width: 66px;
  border: 1px solid var(--dock-border);
  border-radius: 5px;
  background: #0a0a0a;
  color: var(--dock-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  padding: 0 .35rem;
  transition: border-color .2s, color .2s, background .2s;
}
.dock-speed:hover,
.dock-speed:focus {
  border-color: rgba(212,175,55,.35);
  color: var(--dock-text);
  background: #111;
}

.dock-empty {
  display: none; align-items: center; justify-content: center;
  padding: 1rem; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dock-muted); opacity: .6; font-style: italic;
}
.dock-empty.visible { display: flex; }

/* ── Mini widget ── */
.dock-mini {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(212,175,55,.3);
  border-radius: 8px;
  background: rgba(10,10,10,.96);
  box-shadow: 0 16px 45px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  max-width: min(360px, calc(100vw - 2rem));
}
.dock-mini.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mini-play {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--dock-accent); background: transparent;
  color: var(--dock-accent); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: transform .2s, background .2s;
}
.mini-play:hover { transform: scale(1.05); background: rgba(212,175,55,.1); }
.mini-label { min-width: 0; }
.mini-label .mini-mode {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .52rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dock-accent); line-height: 1.2;
}
.mini-label .mini-title {
  display: block; font-size: .78rem; color: var(--dock-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 520px) {
  .dock-pill { flex-basis: 50%; }
  .dock-body { flex-wrap: wrap; }
  .dock-track-wrap { flex-basis: calc(100% - 50px); }
  .dock-speed { margin-left: 50px; }
  .dock-mini { right: .75rem; bottom: .75rem; }
}