/* 140 — Swipe Actions
   Items de liste glissables vers la gauche (pointer events). La rangée est
   translatée par --sa-x (px, écrit par anim.js) au-dessus d'un calque
   d'actions ; --sa-reveal (0→1) pilote l'apparition des boutons. La
   suppression replie la hauteur via grid-template-rows 1fr→0fr : les items
   du dessous remontent sans aucun saut de layout. */

.swipe-actions {
  --sa-actions: 132px; /* largeur de la zone d'actions — lue par anim.js */
  --sa-radius: 12px;
  --sa-danger: #ff6b7a;
  width: min(320px, 100%);
}

.swipe-actions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* — Item : la grille 1fr→0fr anime la hauteur au repli — */
.swipe-actions__item {
  display: grid;
  grid-template-rows: 1fr;
  margin: 0 0 8px;
  transition:
    grid-template-rows 0.38s cubic-bezier(0.3, 0.7, 0.2, 1),
    margin-bottom 0.38s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.swipe-actions__item.is-collapsed {
  grid-template-rows: 0fr;
  margin-bottom: 0;
}

.swipe-actions__clip {
  min-height: 0;
  overflow: hidden;
  position: relative;
  border-radius: var(--sa-radius);
}

/* — Calque d'actions, révélé sous la rangée — */
.swipe-actions__actions {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border-radius: inherit;
  visibility: hidden;
  transition: visibility 0s linear 0.34s, background-color 0.25s ease;
}

.swipe-actions__clip.is-open .swipe-actions__actions,
.swipe-actions__clip.is-dragging .swipe-actions__actions,
.swipe-actions__clip.is-leaving .swipe-actions__actions {
  visibility: visible;
  transition: visibility 0s, background-color 0.25s ease;
}

/* Teinte du fond pendant la sortie de l'item */
.swipe-actions__clip.is-removing-delete .swipe-actions__actions {
  background-color: rgba(255, 107, 122, 0.12);
}

.swipe-actions__clip.is-removing-archive .swipe-actions__actions {
  background-color: rgba(124, 140, 255, 0.12);
}

/* — Boutons : opacité / glissement pilotés par --sa-reveal — */
.swipe-actions__btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  width: 60px;
  padding: 0;
  border-radius: 9px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  opacity: var(--sa-reveal, 0);
  transform: translateX(calc((1 - var(--sa-reveal, 0)) * 16px))
    scale(calc(0.86 + 0.14 * var(--sa-reveal, 0)));
  transition: background-color 0.18s ease;
}

.swipe-actions__btn svg {
  width: 15px;
  height: 15px;
}

.swipe-actions__btn--archive {
  color: var(--ml-accent, #7c8cff);
  background: rgba(124, 140, 255, 0.14);
  border: 1px solid rgba(124, 140, 255, 0.35);
}

.swipe-actions__btn--archive:hover {
  background: rgba(124, 140, 255, 0.24);
}

.swipe-actions__btn--delete {
  color: var(--sa-danger, #ff6b7a);
  background: rgba(255, 107, 122, 0.12);
  border: 1px solid rgba(255, 107, 122, 0.32);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.swipe-actions__btn--delete:hover {
  background: rgba(255, 107, 122, 0.22);
}

.swipe-actions__btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--ml-bg, #0d1017),
    0 0 0 4px var(--ml-accent, #7c8cff);
}

/* Au-delà du seuil fort : le bouton supprimer s'affirme */
.swipe-actions__clip.is-past .swipe-actions__btn--delete {
  transform: scale(1.08);
  background: rgba(255, 107, 122, 0.3);
}

/* — Rangée glissante — */
.swipe-actions__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--ml-surface, #151a24);
  border: 1px solid rgba(139, 145, 163, 0.16);
  border-radius: inherit;
  transform: translateX(var(--sa-x, 0px));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  outline: none;
}

/* Les transitions ne s'activent qu'au snap (jamais pendant le drag) */
.swipe-actions__clip.is-settle .swipe-actions__row {
  transition:
    transform 0.34s cubic-bezier(0.25, 1, 0.35, 1),
    opacity 0.28s ease;
}

.swipe-actions__clip.is-settle .swipe-actions__btn {
  transition:
    transform 0.34s cubic-bezier(0.25, 1, 0.35, 1),
    opacity 0.28s ease,
    background-color 0.18s ease;
}

.swipe-actions__clip.is-dragging .swipe-actions__row {
  cursor: grabbing;
}

.swipe-actions__clip.is-leaving .swipe-actions__row {
  opacity: 0;
}

/* État de départ du retour en cascade (posé une frame par anim.js) */
.swipe-actions__clip.is-enter .swipe-actions__row {
  transition: none;
  opacity: 0;
}

.swipe-actions__row:focus-visible {
  border-color: rgba(124, 140, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(124, 140, 255, 0.22);
}

/* — Contenu de la rangée — */
.swipe-actions__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  color: var(--ml-accent, #7c8cff);
  background: rgba(124, 140, 255, 0.13);
}

.swipe-actions__icon svg {
  width: 15px;
  height: 15px;
}

.swipe-actions__icon--teal {
  color: var(--ml-accent-2, #2dd4bf);
  background: rgba(45, 212, 191, 0.12);
}

.swipe-actions__icon--warm {
  color: #f2a65a;
  background: rgba(242, 166, 90, 0.12);
}

.swipe-actions__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.swipe-actions__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ml-fg, #e8eaf2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swipe-actions__sub {
  font-size: 11px;
  color: var(--ml-muted, #8b91a3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* — Bouton réinitialiser — */
.swipe-actions__reset {
  margin-top: 4px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--ml-muted, #8b91a3);
  background: none;
  border: 1px dashed rgba(139, 145, 163, 0.35);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.swipe-actions__reset:hover:not(:disabled) {
  color: var(--ml-fg, #e8eaf2);
  border-color: rgba(124, 140, 255, 0.5);
}

.swipe-actions__reset:focus-visible {
  outline: none;
  border-style: solid;
  border-color: var(--ml-accent, #7c8cff);
  box-shadow: 0 0 0 3px rgba(124, 140, 255, 0.22);
}

.swipe-actions__reset:disabled {
  opacity: 0.4;
  cursor: default;
}

/* — Reduced motion : tous les états restent atteignables, sans mouvement — */
@media (prefers-reduced-motion: reduce) {
  .swipe-actions__item,
  .swipe-actions__clip.is-settle .swipe-actions__row,
  .swipe-actions__clip.is-settle .swipe-actions__btn,
  .swipe-actions__btn--delete,
  .swipe-actions__reset {
    transition: none;
  }
}