/*
 * static/css/toast.css  (Step 0.2)
 *
 * Toast notification visual layer. Paired with static/js/toast.js,
 * which manages the DOM lifecycle. We deliberately use the shared
 * `cai-` prefix so this never collides with feature-specific class
 * spaces (.cal-*, .mat-*, .dash-*, .notif-*, .admin-*).
 *
 * Color tokens come from CardifyAI's design system slate base + the
 * standard success/warning/danger anchor colors.
 */

#cardifyai-toast-stack {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column-reverse;   /* newest on top of the stack */
  gap: 0.5rem;
  z-index: 10000;
  pointer-events: none;             /* the container is transparent */
  max-width: 360px;
}

@media (max-width: 600px) {
  #cardifyai-toast-stack {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
  }
}

.cai-toast {
  background: #0f172a;              /* slate-900 — info default */
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;

  pointer-events: auto;             /* individual toasts ARE clickable */
  cursor: pointer;                  /* click to dismiss */
  user-select: none;
  max-width: 100%;
  word-wrap: break-word;
}

.cai-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cai-toast--success { background: #047857; }   /* emerald-700 */
.cai-toast--warn    { background: #b45309; }   /* amber-700  */
.cai-toast--error   { background: #b91c1c; }   /* red-700    */

/* Reduced-motion: skip the slide-up; just fade. */
@media (prefers-reduced-motion: reduce) {
  .cai-toast {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* High-contrast border for visibility on busy backgrounds. */
@media (prefers-contrast: more) {
  .cai-toast {
    border: 1px solid #ffffff;
  }
}