/*
 * CSS Variables (set these externally to customize):
 * --cc-audio-wavesurfer-top: #656666
 * --cc-audio-wavesurfer-separator: #ffffff
 * --cc-audio-wavesurfer-bottom: #B1B1B1
 * --cc-audio-wavesurfer-progress-top: #EE772F
 * --cc-audio-wavesurfer-progress-mid: #EB4926
 * --cc-audio-wavesurfer-progress-bottom: #F6B094
 * --cc-audio-wavesurfer-button-size: 80px
 * --cc-audio-wavesurfer-icon: #333333
 */

#player #pause {
  display: none; 
}

#player svg {
    width: var(--cc-audio-wavesurfer-button-size, 80px); 
    height: var(--cc-audio-wavesurfer-button-size, 80px); 
    color: var(--cc-audio-wavesurfer-icon, #333333);
  }

#player {
  display: flex;
  gap: 10px;
}

#player > :first-child {
  flex: 0 0 80px;
    align-self: center;
  cursor: pointer; 
}

#player > :not(:first-child) {
  flex: 1 1 auto;
}


#play, #pause {
  max-width: 80px;
  max-height: 80px;
}


    #waveform {
      cursor: pointer;
      position: relative;
    }
    #hover {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      pointer-events: none;
      height: 100%;
      width: 0;
      mix-blend-mode: overlay;
      background: rgba(255, 255, 255, 0.5);
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    #waveform:hover #hover {
      opacity: 1;
    }
    #time,
    #duration {
      position: absolute;
      z-index: 11;
      top: 50%;
      margin-top: -1px;
      transform: translateY(-50%);
      font-size: 11px;
      background: rgba(0, 0, 0, 0.75);
      padding: 2px;
      color: #ddd;
    }
    #time {
      left: 0;
    }
    #duration {
      right: 0;
    }

/* Designer Mode - Waveform Copy Button */
.waveform-copy-row {
  margin-top: 8px;
  text-align: right;
}

/* Blue - new/generated data (no existing waveformData) */
.waveform-copy-btn {
  background: #4A90D9;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.waveform-copy-btn:hover {
  background: #3A7BC8;
}

.waveform-copy-btn:active {
  background: #2A6BB8;
}

/* Gray - existing waveformData already set */
.waveform-copy-btn.has-data {
  background: #888888;
}

.waveform-copy-btn.has-data:hover {
  background: #777777;
}

.waveform-copy-btn.has-data:active {
  background: #666666;
}

/* Green - copied feedback state */
.waveform-copy-btn.copied {
  background: #4CAF50;
}

.waveform-copy-btn.copied:hover {
  background: #4CAF50;
}