/* Demo dashboard — supplemental styles on top of Tailwind (loaded via CDN).
   Keeps the look identical to the production app: emerald accents, gray-50 canvas. */

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  background-color: #f9fafb;
  color: #111827;
}

* {
  box-sizing: border-box;
}

/* Preserve newlines in post bodies / replies (mirrors the production .draft-body) */
.draft-body {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Thin "this is a demo" ribbon pinned above the header */
.demo-ribbon {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Toast notifications for the interactive actions (approve / edit / reject) */
.toast-wrap {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 50;
  max-width: 22rem;
}
.toast {
  background: #111827;
  color: #f9fafb;
  font-size: 13px;
  line-height: 1.35;
  padding: 0.6rem 0.85rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  animation: toast-in 0.18s ease-out;
}
.toast.ok { background: #065f46; }
.toast.warn { background: #92400e; }
.toast.err { background: #991b1b; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Animated flow diagram glyphs on the landing page */
.flow-pulse { animation: flow-pulse 2.4s ease-in-out infinite; }
@keyframes flow-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}