/* ════════════════════════════════════════════════════════════════
   EHDarkMuse — alyx-v2.18-cells.css
   ────────────────────────────────────────────────────────────────
   Visual layer for alyx-v2.18-cells.js:
    · Action row (clear + lock) top-right of filled cells, hover-only
    · Legacy ⋮ menu hidden (right-click still gives the full menu)
    · Drag cursors (grab / grabbing)
    · Dragging-cell ghost + drag-over highlight refresh
    · Locked cells: clear disabled, lock pinned visible/golden, the
      ::before pseudo-lock from advanced-tools-modules.css suppressed
      so we don't show two padlocks at once
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Action row container ─────────────────────────────────── */
.alyx-cell-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 3px;
  z-index: 6;
  pointer-events: auto;
}

/* ── 2. Buttons (shared base) ────────────────────────────────── */
.alyx-cell-actions > button {
  width: 19px;
  height: 19px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .55);
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    opacity .12s ease,
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .1s ease;
  font-family: system-ui, -apple-system, "Segoe UI Emoji", sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
  /* Don't let the emoji glyph affect line layout */
  vertical-align: middle;
}

/* Show on hover anywhere in the cell */
.seq-cell:hover .alyx-cell-actions > button {
  opacity: .88;
}

/* ── 3. Clear button (✕) — red on hover ──────────────────────── */
.alyx-cell-clear:hover {
  background: rgba(239, 68, 68, .82);
  color: #fff;
  border-color: rgba(239, 68, 68, .9);
  opacity: 1;
  transform: scale(1.06);
}
.alyx-cell-clear:active { transform: scale(.94); }

/* ── 4. Lock button (🔒) — amber on hover, pinned-amber active ── */
.alyx-cell-lock:hover {
  background: rgba(245, 158, 11, .55);
  color: #fff;
  border-color: rgba(245, 158, 11, .75);
  opacity: 1;
  transform: scale(1.06);
}
.alyx-cell-lock:active { transform: scale(.94); }

/* When the cell is locked, the lock button stays visible and amber */
.seq-cell.atp-locked .alyx-cell-lock {
  opacity: 1;
  background: rgba(245, 158, 11, .25);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, .55);
}

/* When the cell is locked, suppress clear (it would be a no-op anyway) */
.seq-cell.atp-locked .alyx-cell-clear {
  opacity: .25 !important;
  cursor: not-allowed;
  pointer-events: auto;  /* allow the click → toast feedback */
}
.seq-cell.atp-locked .alyx-cell-clear:hover {
  background: rgba(239, 68, 68, .3);
  transform: none;
}

/* Suppress the existing top-left 🔒 pseudo from advanced-tools-modules.css
   so we don't show two locks. The amber outline ring on the cell stays. */
.seq-cell.atp-locked::before { display: none !important; }

/* ── 5. Hide legacy three-dot ⋮ menu button ───────────────────── */
/* Right-click on the cell still opens the same context menu with
   Edit / Copy / Paste / Delete — kept for power users. The visible
   dots were redundant once clear and lock got inline buttons. */
.seq-cell-menu {
  display: none !important;
}

/* ── 6. Drag affordances ─────────────────────────────────────── */

/* Filled cells: show grab cursor (but not on the action buttons or
   the intensity slider, which keep their own cursor). */
.seq-cell[draggable="true"] {
  cursor: grab;
}
.seq-cell[draggable="true"]:active {
  cursor: grabbing;
}

/* Action buttons override the grab cursor */
.alyx-cell-actions > button,
.alyx-cell-actions > button * {
  cursor: pointer;
}

/* Cell being dragged — ghost it */
.seq-cell.dragging {
  opacity: .35;
  cursor: grabbing !important;
}

/* Hover target — the destination cell during drag.
   styles.css already has a base .drag-over rule with a gold dashed
   outline. We make it more readable on the new lighter backgrounds
   by adding a soft inner glow without removing the original. */
.seq-cell.drag-over {
  outline-offset: -3px !important;
}
.seq-cell.drag-over::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
  background: rgba(167, 139, 250, .08);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .35);
}

/* Locked cells: visually communicate that they refuse drops */
.seq-cell.atp-locked.drag-over {
  outline-color: rgba(239, 68, 68, .6) !important;
}
.seq-cell.atp-locked.drag-over::after {
  background: rgba(239, 68, 68, .08);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .4);
}