Break editor into a module

src/styles/Toast.css

@@ -0,0 +1,98 @@
+/* ──────────────────────────────────────────────────────────────────────────
+ * 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;
+  }
+}