/* Keep the native controls visible only while JamPoint is being used. */
[data-jampoint-controls-held] .pzp-pc__bottom,
[data-jampoint-controls-held] .pzp-pc__bottom-buttons,
[data-jampoint-controls-held] .pzp-pc__controls,
[data-jampoint-controls-held] .pzp-pc__toolbar {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
}
[data-jampoint-controls-held] .pzp-pc__bottom {
  display: block !important;
}
[data-jampoint-controls-held] .pzp-progress-slider {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
}

/* Keep native settings above JamPoint at every toolbar placement. */
.pzp-pc:has(> #chzzk-laugh-meter) > .pzp-pc__settings {
  z-index: 100 !important;
}

/* SOOP: the full multipart progress row is the graph's time axis. */
#player:has(> #chzzk-laugh-meter) .player_ctrlBox .multiple_progress {
  /* Reserve the largest native hover track (9px - 2px margin + 16px
     hit padding). Tracks keep their original bottom alignment and animation. */
  min-height: 23px;
  flex-shrink: 0;
}
#player[data-jampoint-controls-held] .player_ctrlBox {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
  display: flex !important;
  bottom: 0 !important;
}
/* Native menus are nested in the native control stacking context. */
#player:has(> #chzzk-laugh-meter) .player_ctrlBox:has(.setting_box.on, .quality_box.on, .statistics_list.on, .graph_wrap.on) {
  z-index: 100 !important;
}
#player:has(> #chzzk-laugh-meter) .setting_wrap,
#player:has(> #chzzk-laugh-meter) .setting_box {
  z-index: 100 !important;
}
/* SOOP uses transition:all on its controls. Do not interpolate z-index:
   menus must be above JamPoint on their very first opening frame. */
#player:has(> #chzzk-laugh-meter) .player_ctrlBox,
#player:has(> #chzzk-laugh-meter) .setting_box,
#player:has(> #chzzk-laugh-meter) .quality_box,
#player:has(> #chzzk-laugh-meter) .statistics_list,
#player:has(> #chzzk-laugh-meter) .graph_wrap,
#player:has(> #chzzk-laugh-meter) .statistics_section {
  transition-property: opacity, transform, top, bottom, left, right, width, height !important;
}
#player:has(> #chzzk-laugh-meter) .statistics_list.on,
#player:has(> #chzzk-laugh-meter) .graph_wrap.on,
#player:has(> #chzzk-laugh-meter) .statistics_section.on {
  z-index: 100 !important;
}