/* chopedit.css — chop editor modal (chopedit.js). Mirrors the native
 * jam-desktop ChopEditorSheet look: dark surface1 card, 16 px radius,
 * waveform strip on a near-black well, thick accent handles spanning the
 * full strip height, region tinted accent at 0.18. All colors ride the
 * shared --jamn-* custom properties with hard fallbacks so the modal
 * renders correctly even on a page that missed jam.css. */

.chopedit-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 16px;
}

.chopedit-modal {
  width: min(640px, 100%);
  background: var(--jamn-surface1, #14141a);
  border: 1px solid var(--jamn-border, #2a2a36);
  border-radius: var(--jamn-radius-lg, 16px);
  padding: 16px;
  color: var(--jamn-text, #fff);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  outline: none;
}

.chopedit-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.chopedit-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--jamn-text2, #a1a1aa);
}

/* Waveform strip: near-black well (desktop uses black at 0.4 on the dark
 * sheet), rounded, with the canvas underneath and region/handles above. */
.chopedit-wave {
  position: relative;
  height: 140px;
  border-radius: var(--jamn-radius-sm, 8px);
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  touch-action: none; /* pointer drags own the gesture, no scroll steal */
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}

.chopedit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Selected region: accent at 0.18 (native selectionOverlay opacity). The
 * rgba line is the fallback; color-mix picks up a themed --jamn-accent. */
.chopedit-region {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(139, 92, 246, 0.18);
  background: color-mix(in srgb, var(--jamn-accent, #8b5cf6) 18%, transparent);
  pointer-events: none;
}

/* Thick accent handles spanning the full strip height. Visual only — hit
 * testing is nearest-handle on the whole strip, so no fat hit shims. */
.chopedit-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--jamn-accent, #8b5cf6);
  pointer-events: none;
}

.chopedit-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--jamn-text2, #a1a1aa);
  pointer-events: none;
}

/* Time labels: region start left, "Xs long" center, region end right. */
.chopedit-times {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.chopedit-time--edge {
  color: var(--jamn-text, #fff);
}

.chopedit-time--len {
  color: var(--jamn-text2, #a1a1aa);
}

.chopedit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chopedit-spacer {
  flex: 1;
}

.chopedit-btn {
  appearance: none;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--jamn-radius-sm, 8px);
  border: 1px solid var(--jamn-border, #2a2a36);
  background: var(--jamn-surface2, #1c1c24);
  color: var(--jamn-text, #fff);
  cursor: pointer;
}

.chopedit-btn:hover:not(:disabled) {
  border-color: var(--jamn-accent, #8b5cf6);
}

.chopedit-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.chopedit-btn--accent {
  background: var(--jamn-accent, #8b5cf6);
  border-color: var(--jamn-accent, #8b5cf6);
}

.chopedit-btn--accent:hover:not(:disabled) {
  filter: brightness(1.1);
}

/* "Keep timing" toggle — mobile SampleTrimmerSheet parity. */
.chopedit-preserve {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jamn-text, #fff);
  cursor: pointer;
  user-select: none;
}
.chopedit-preserve input {
  accent-color: var(--jamn-success, #22C55E);
  width: 16px;
  height: 16px;
}
.chopedit-preserve-hint {
  margin-top: 3px;
  font-size: 11px;
  color: var(--jamn-text2, #A1A1AA);
}