/* ──────────────────────────────────────────────────────────────────────────
 * Toast — host-level notification pill
 *
 * Top-center, fixed positioning so it sits above the editor's own canvas
 * UI without occluding the action it's commenting on. The editor module
 * has its own internal toast surface for editor concerns (rendered
 * inside the canvas area); this one is anchored to the viewport so
 * host-originated toasts are visually distinct from editor-originated
 * ones.
 *
 * Z-index sits just under the PWA install banner (1000) and above the
 * canvas. The offline indicator (z 9999) intentionally outranks toasts
 * — being offline is more important than transient feedback.
 * ────────────────────────────────────────────────────────────────────────── */

.app-toast-wrap {
  position: fixed;
  top: calc(var(--header-height) + 1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  pointer-events: none;
  /* Wrap is pointer-events:none so it doesn't intercept clicks on the
   * area behind it; the inner pill re-enables pointer events for its
   * own dismiss button. */
}

.app-toast {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem 0.65rem 1.1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  pointer-events: auto;
  max-width: min(560px, calc(100vw - 2rem));
  animation: app-toast-in 0.22s ease-out;
}

@keyframes app-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.app-toast__message {
  flex: 1;
  min-width: 0;
}

.app-toast__close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.app-toast__close:hover {
  background: var(--brand-pink-soft);
  color: var(--brand-pink-strong);
}

/* Variants — info is the default styling above; success and error tint
 * the border + add a subtle background wash so the kind reads at a
 * glance without leaning on color alone. */

.app-toast--success {
  border-color: rgba(34, 197, 94, 0.4);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.06), var(--bg-primary));
}

.app-toast--error {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.06), var(--bg-primary));
  color: var(--text-primary);
}

/* Mobile — the toast lives below the smaller mobile header. */
@media (max-width: 768px) {
  .app-toast-wrap {
    top: calc(var(--header-height-mobile) + 0.75rem);
  }
  .app-toast {
    font-size: 13px;
    padding: 0.55rem 0.75rem 0.55rem 0.95rem;
  }
}