/* Animated drop placeholder that appears between checklist rows */
.dropPlaceholder {
  height: 0;
  margin: 0;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px dashed transparent;
  border-radius: 6px;
  overflow: hidden;
  background-color: transparent;
}

.dropPlaceholder.visible {
  height: 32px;
  margin: 4px 0;
  opacity: 1;
  border-color: rgb(var(--color-primary-500));
  background-color: rgb(var(--color-primary-500) / 0.08);
}

/* The checklist row itself */
.row {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-out;
}

.row.dragging {
  opacity: 0.4;
  transform: scale(0.97);
}

/* Bouncy entry animation for the just-dropped row */
@keyframes checklistItemEntry {
  0% {
    opacity: 0.6;
    transform: scale(0.92) translateY(-4px);
  }
  60% {
    transform: scale(1.02) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.row.entering {
  animation: checklistItemEntry 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Drag handle hover affordance */
.dragHandle {
  transition: color 0.15s ease-out, transform 0.15s ease-out;
  touch-action: none;
}

.dragHandle:hover {
  color: rgb(75, 85, 99);
  transform: scale(1.1);
}

.dragHandle:active {
  cursor: grabbing;
  transform: scale(0.95);
}

/* Hover-reveal insert zone between rows.
 * Fixed height — never animate height on hover, since layout shift
 * disrupts cursor-aimed actions like grabbing the drag handle below. */
.insertZone {
  position: relative;
  height: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.insertZone:hover {
  opacity: 1;
}

/* While a drag is in progress, hide the insert zone *without* unmounting it.
 * Conditionally removing it from the DOM at dragstart time mutates the
 * dragged wrapper's children and the browser silently cancels the drag
 * (only first few items appear draggable). Keep it in the tree but inert. */
.insertZoneHidden {
  opacity: 0;
  pointer-events: none;
}

/* Position the line/button above the zone center so they sit visually
 * between the two rows (in the space-y-2 gap area), not glued to the row below. */
.insertZoneLine {
  position: absolute;
  left: 24px;
  right: 24px;
  top: -4px;
  height: 1px;
  background-color: rgb(var(--color-primary-300));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.insertZone:hover .insertZoneLine {
  transform: scaleX(1);
}

.insertZoneButton {
  position: absolute;
  left: 50%;
  top: -4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgb(var(--color-primary-200));
  color: rgb(var(--color-primary-700));
  pointer-events: none; /* purely visual; the parent zone handles clicks */
  transform: translate(-50%, -50%) scale(0.6);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.15s ease-out;
}

.insertZone:hover .insertZoneButton {
  transform: translate(-50%, -50%) scale(1);
  background-color: rgb(var(--color-primary-300));
}

:global(.dark) .insertZoneButton {
  background-color: rgb(var(--color-primary-400) / 0.30);
  color: rgb(var(--color-primary-800));
}

:global(.dark) .insertZone:hover .insertZoneButton {
  background-color: rgb(var(--color-primary-400) / 0.40);
}
