.chp-playlist { list-style: none; padding: 0; }
.chp-playlist li { padding: 8px; border: 1px solid #ddd; margin-bottom: 6px; background: #fff; cursor: move; }
.chp-item .chp-remove { float: right; }
#chp_timeline_container {
    width: 100%;
    margin-top: 10px;
  }
  
  #chp_timeline {
    display: flex;
    width: 100%;
    height: 40px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
  }
  
  .chp-timeline-segment {
    transition: opacity 0.2s;
  }
  
  .chp-timeline-segment:hover {
    opacity: 0.8;
  }
  
  #chp_total_time {
    margin-top: 8px;
    font-weight: bold;
    text-align: right;
  }
  /* playlist list */
.chp-playlist { list-style: none; padding: 0; margin: 0; }
.chp-playlist li { padding: 8px; border: 1px solid #ddd; margin-bottom: 6px; background: #fff; cursor: move; }
.chp-item .chp-remove { float: right; }

/* timeline */
#chp_timeline_container {
  width: 100%;
  margin-top: 10px;
  position: relative;
}

#chp_timeline {
  display: flex;
  width: 100%;
  height: 40px;
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.chp-timeline-segment {
  transition: opacity 0.15s;
}

.chp-timeline-segment:hover {
  opacity: 0.85;
}

/* progress line (thin vertical indicator) */
#chp_progress_line {
  width: 2px;
  background: #111;
  top: 0;
  bottom: 18px; /* leave space for total-time label */
  position: absolute;
  transform: translateX(-50%);
  pointer-events: none; /* don't block clicks on segments */
}

/* total time label */
#chp_total_time {
  margin-top: 8px;
  font-weight: bold;
  text-align: right;
}