/* ================================================================
   Resayil — Toast notifications (Phase 24.12 Plan 02)
   ----------------------------------------------------------------
   Production port of rs-ui-showcase.css §7. Sonner-style bottom-end
   stacking toasts with four variants, GSAP-friendly transform/opacity
   initial state, and RTL via logical properties.
   All tokens consumed from resayil-brand.css (--rs-*).
   ================================================================ */

#rs-toast-stack {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  left: auto !important;
  top: auto !important;
  z-index: 10000 !important;
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-3);
  pointer-events: none;
  max-width: min(360px, calc(100vw - 3rem));
}
[dir="rtl"] #rs-toast-stack {
  right: auto !important;
  left: 1.5rem !important;
}

.rs-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--rs-space-3);
  min-width: 280px;
  max-width: 360px;
  padding: var(--rs-space-4);
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-lg);
  box-shadow: var(--rs-shadow-lg);
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(120%);
  opacity: 0;
  font-family: var(--rs-font-sans);
  transition: transform 0.25s var(--rs-ease-brand), opacity 0.25s var(--rs-ease);
}
[dir="rtl"] .rs-toast {
  transform: translateX(-120%);
  font-family: var(--rs-font-arabic);
}

.rs-toast.rs-toast-visible {
  transform: translateX(0);
  opacity: 1;
}

.rs-toast-icon {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-toast-content {
  flex: 1;
  min-width: 0;
}
.rs-toast-title {
  font-size: var(--rs-text-sm);
  font-weight: 600;
  color: var(--rs-fg);
  margin-bottom: 2px;
}
.rs-toast-msg {
  font-size: var(--rs-text-sm);
  color: var(--rs-fg-muted);
  line-height: 1.45;
  word-break: break-word;
}
.rs-toast-close {
  background: none;
  border: none;
  color: var(--rs-fg-subtle);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--rs-radius-sm);
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-toast-close:hover {
  color: var(--rs-fg);
}

/* --- Variants -------------------------------------------------- */
.rs-toast-success { border-color: rgba(16, 185, 129, 0.4); }
.rs-toast-success .rs-toast-icon { color: #10b981; }

.rs-toast-error { border-color: rgba(239, 68, 68, 0.4); }
.rs-toast-error .rs-toast-icon { color: #ef4444; }

.rs-toast-info { border-color: rgba(59, 130, 246, 0.4); }
.rs-toast-info .rs-toast-icon { color: #3b82f6; }

.rs-toast-warning { border-color: rgba(245, 158, 11, 0.4); }
.rs-toast-warning .rs-toast-icon { color: #f59e0b; }

/* --- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rs-toast {
    transform: none;
    transition: opacity 0.1s linear;
  }
  .rs-toast.rs-toast-visible {
    transform: none;
    opacity: 1;
  }
}