/* SOULYFE RENOVATION 02 · GOLD SIGNAL WAVEFORM
   A visual-only upgrade over the proven production seek/player system.
   Playback, seek, shuffle, repeat, queue, and Media Session wiring stay intact. */

.soulyfe-dock{
  --soulyfe-wave-gold: 232,189,127;
  --soulyfe-wave-cream: 255,232,184;
}

/* The full-width timeline is the one signal display. The old utility-cluster
   spectrum duplicated it and competed with the player controls. */
html body .soulyfe-dock .dk-spectrum-widget{
  display:none !important;
}

html body .soulyfe-dock .dk-timeline{
  gap:12px;
}

html body .soulyfe-dock .dk-seek-wrap{
  height:50px !important;
  isolation:isolate;
}

html body .soulyfe-dock .dk-spectrum{
  inset:0 !important;
  width:100%;
  height:50px !important;
  transform:none !important;
  display:flex;
  align-items:center !important;
  gap:2px !important;
  padding:2px 0;
  opacity:.96 !important;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 3.5%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 3.5%,#000 91%,transparent 100%);
}

html body .soulyfe-dock .dk-spectrum::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  transform:translateY(-.5px);
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--soulyfe-wave-gold),.10) 5%,
    rgba(var(--soulyfe-wave-gold),.22) 48%,
    rgba(var(--soulyfe-wave-gold),.08) 88%,
    transparent 100%);
  box-shadow:0 0 8px rgba(var(--soulyfe-wave-gold),.12);
  z-index:-1;
}

html body .soulyfe-dock .dk-spectrum i{
  flex:1 1 0;
  min-width:1px;
  height:46px !important;
  border-radius:999px !important;
  transform-origin:center !important;
  background:linear-gradient(180deg,
    rgba(var(--soulyfe-wave-cream),.94) 0%,
    rgba(var(--soulyfe-wave-gold),1) 35%,
    rgba(194,132,67,.88) 100%) !important;
  box-shadow:
    0 0 3px rgba(var(--soulyfe-wave-gold),.28),
    0 0 8px rgba(180,112,47,.10) !important;
  transition:transform .045s linear !important;
  will-change:transform;
}

/* Keep the seek control real and accessible, but let the waveform carry the
   visual weight. The rail becomes the fine gold centerline from the reference. */
html body .soulyfe-dock .dk-seek-wrap input[type=range]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  background:linear-gradient(90deg,
    rgba(var(--soulyfe-wave-cream),.72) 0%,
    rgba(var(--soulyfe-wave-gold),.72) var(--seek,0%),
    rgba(var(--soulyfe-wave-gold),.12) var(--seek,0%),
    rgba(var(--soulyfe-wave-gold),.12) 100%) center/100% 1px no-repeat !important;
  z-index:3;
}

html body .soulyfe-dock .dk-seek-wrap input[type=range]::-webkit-slider-thumb{
  width:9px !important;
  height:9px !important;
  margin-top:0 !important;
  border:1px solid rgba(4,6,10,.95) !important;
  background:radial-gradient(circle at 35% 30%,#fff1cb 0%,#e8bd7f 58%,#9f642f 100%) !important;
  box-shadow:0 0 9px rgba(var(--soulyfe-wave-gold),.60) !important;
  opacity:.92;
}

html body .soulyfe-dock .dk-seek-wrap input[type=range]::-moz-range-thumb{
  width:8px !important;
  height:8px !important;
  border:1px solid rgba(4,6,10,.95) !important;
  background:#e8bd7f !important;
  box-shadow:0 0 9px rgba(var(--soulyfe-wave-gold),.60) !important;
}

html body .soulyfe-dock .dk-time{
  color:rgba(235,226,210,.72);
}

@media (max-width:900px){
  html body .soulyfe-dock .dk-seek-wrap,
  html body .soulyfe-dock .dk-spectrum{
    height:28px !important;
  }
  html body .soulyfe-dock .dk-spectrum{
    gap:1px !important;
  }
  html body .soulyfe-dock .dk-spectrum i{
    height:24px !important;
    box-shadow:0 0 3px rgba(var(--soulyfe-wave-gold),.20) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  html body .soulyfe-dock .dk-spectrum i{
    transition:none !important;
    will-change:auto;
  }
}