/* ============================================================
   Toast Notifications -- .fx-toast-*
   ADR-0029 : canal flash exclusif, 4 variantes semantiques.
   Utilise uniquement des variables CSS de tokens.css.
   ============================================================ */

.fx-toast-container {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--toast-gap);
  pointer-events: none;
}

/* Desktop : top-right, largeur max 24rem */
@media (min-width: 768px) {
  .fx-toast-container {
    top: var(--space-4);
    right: var(--space-4);
    max-width: var(--toast-max-w);
    width: 100%;
  }
}

/* Mobile : bottom-full */
@media (max-width: 767px) {
  .fx-toast-container {
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    max-width: 100%;
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
}

.fx-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--toast-padding);
  border-radius: var(--toast-radius);
  border: 1px solid;
  background: var(--bg-surface);
  box-shadow: var(--toast-shadow);
  position: relative;
  overflow: hidden;
  transition: opacity var(--t-base),
              transform var(--t-base);
}

/* Variante success */
.fx-toast--success {
  border-color: var(--success-200);
  background: var(--success-50);
}

/* Variante info (accent bleu) */
.fx-toast--info {
  border-color: var(--primary-200);
  background: var(--primary-50);
}

/* Variante warning */
.fx-toast--warning {
  border-color: var(--warning-200);
  background: var(--warning-50);
}

/* Variante error */
.fx-toast--error {
  border-color: var(--danger-200);
  background: var(--danger-50);
}

.fx-toast__body {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fx-toast__close {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fg-2);
  border-radius: var(--r-xs);
  transition: background var(--t-base);
}
.fx-toast__close:hover {
  background: var(--bg-hover);
  color: var(--fg-1);
}

.fx-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--toast-progress-h);
  transition: width 50ms linear;
}
.fx-toast--success .fx-toast__progress { background: var(--success-500); }
.fx-toast--info    .fx-toast__progress { background: var(--primary-500); }
.fx-toast--warning .fx-toast__progress { background: var(--warning-500); }
.fx-toast--error   .fx-toast__progress { background: var(--danger-500); }

/* Transitions entree / sortie */
.fx-toast--enter {
  opacity: 0;
  transform: translateX(100%);
}
@media (max-width: 767px) {
  .fx-toast--enter { transform: translateY(100%); }
}

.fx-toast--leave {
  opacity: 0;
  transform: translateX(100%);
}
@media (max-width: 767px) {
  .fx-toast--leave { transform: translateY(100%); }
}