/* The space explorer, after four things it was getting wrong.

   1. A fifteen-second delete showed nothing at all, so the honest reading was
      that the click had missed — and the second click started a second delete
      over the first. It has a veil that says what it is doing and how far.
   2. A plain click replaced a selection of forty with the one thing under the
      pointer, and there is no undo for a selection.
   3. The tree could only say "go here", so nothing could act on a SET of
      folders. Each folder has a tick.
   4. Nothing could tell you which files were genuinely the same file. */

/* ── something is happening ──────────────────────────────────────────── */
.sx-busy {
  position: absolute; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(8, 10, 20, .45); backdrop-filter: blur(2px);
  animation: sxb-in .14s ease-out;
}
@keyframes sxb-in { from { opacity: 0; } to { opacity: 1; } }
.sx-busycard {
  min-width: 260px; max-width: 70vw; padding: 20px 24px; border-radius: 16px;
  background: var(--panel-solid, #181A2E); color: var(--text, #EDEDF7);
  border: 1px solid var(--border, rgba(255,255,255,.09));
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center;
}
.sx-busycard b {
  font-size: 13.5px; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.sx-busycard i {
  grid-column: 2; font-style: normal; font-size: 11.5px;
  color: var(--muted, #9C9CB8); font-variant-numeric: tabular-nums;
}
.sx-busyspin {
  grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(108, 92, 231, .22);
  border-top-color: var(--accent, #6C5CE7);
  animation: sxb-spin .75s linear infinite;
}
@keyframes sxb-spin { to { transform: rotate(360deg); } }
.sx-busybar {
  grid-column: 2; height: 4px; border-radius: 4px; margin-top: 6px;
  background: rgba(255, 255, 255, .10); overflow: hidden;
}
.sx-busybar u {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent, #6C5CE7), var(--accent-2, #00CEC9));
  transition: width .2s ease;
}

/* ── a tick per folder in the tree ───────────────────────────────────── */
.sx-ttick {
  width: 16px; height: 16px; flex: none; margin-inline-end: 2px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 4px; background: transparent;
  border: 1.4px solid var(--border, rgba(255,255,255,.18));
  color: transparent; opacity: 0; transition: opacity .14s, color .14s, background .14s;
}
.sx-ttick svg { width: 11px; height: 11px; }
.sx-tnode:hover .sx-ttick, .sx-ttick.on { opacity: 1; }
.sx-ttick:hover { border-color: var(--accent, #6C5CE7); }
.sx-ttick.on {
  background: var(--accent, #6C5CE7); border-color: var(--accent, #6C5CE7); color: #fff;
}
.sx-tnode.ticked { background: rgba(108, 92, 231, .10); }

/* ── the duplicates panel ────────────────────────────────────────────── */
.sx-dupdlg { width: 760px; max-width: 94vw; }
.sx-dupwrap {
  max-height: 52vh; overflow-y: auto; margin: 10px 0 4px;
  border-top: 1px solid var(--border, rgba(255,255,255,.09));
}
.sx-dupg {
  padding: 8px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
}
.sx-dupgh {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted, #9C9CB8); margin-bottom: 5px;
}
.sx-dupf {
  display: flex; align-items: center; gap: 9px; padding: 5px 8px;
  border-radius: 8px; font-size: 12.5px; cursor: pointer;
}
.sx-dupf:hover { background: var(--hover, rgba(255,255,255,.06)); }
.sx-dupf span {
  flex: 1; min-width: 0; overflow: hidden; direction: ltr; text-align: start;
  text-overflow: ellipsis; white-space: nowrap;
}
.sx-dupf i {
  font-style: normal; font-size: 10.5px; flex: none;
  padding: 2px 8px; border-radius: 999px;
  background: var(--hover, rgba(255,255,255,.07)); color: var(--muted, #9C9CB8);
}
.sx-dupf.keep i { color: #2FBF71; background: rgba(47, 191, 113, .12); }
.sx-dupf.keep span { opacity: .75; }
.sx-dupf input { accent-color: var(--danger, #E74C3C); width: 15px; height: 15px; flex: none; }