molecule-core/canvas/src/app/globals.css

@import "xterm/css/xterm.css";
/* Theme tokens MUST load before any feature stylesheet that
   references them so custom properties are in scope. */
@import "../styles/theme-tokens.css";
@import "../styles/settings-panel.css";
@import "../styles/org-deploy.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #09090b;
  color: #e4e4e7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* React Flow overrides for dark theme */
.react-flow__edge-path {
  stroke: #3f3f46 !important;
  stroke-width: 1.5 !important;
}

.react-flow__edge.animated .react-flow__edge-path {
  stroke-dasharray: 5;
  animation: dashdraw 0.5s linear infinite;
}

@keyframes dashdraw {
  to {
    stroke-dashoffset: -10;
  }
}

.react-flow__handle {
  transition: all 0.15s ease;
}

.react-flow__node {
  /* Transform transition drives the "spawn from parent" motion —
     org-deploy sets the node's initial position to the parent's
     absolute coords, then repositions to the real slot, and this
     transition interpolates the translate() in between.
     Non-deploy workspace moves (drag, nest) get the same smoothing
     for free. */
  transition:
    box-shadow var(--mol-duration-fast) ease,
    transform var(--mol-duration-spawn) var(--mol-easing-bounce-out);
}
/* Drag events must feel instant — React Flow adds this class
   for the lifetime of the gesture. */
.react-flow__node.dragging {
  transition: box-shadow var(--mol-duration-fast) ease;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* Selection */
::selection {
  background: rgba(59, 130, 246, 0.3);
}

/* Panel slide animation */
@keyframes slide-in-from-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slide-in-from-bottom {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-in-from-bottom {
  animation-name: slide-in-from-bottom;
}

@keyframes slide-in-from-top {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-in-from-top {
  animation-name: slide-in-from-top;
}

.animate-in {
  animation-fill-mode: both;
}

.slide-in-from-right {
  animation-name: slide-in-from-right;
}

.duration-200 {
  animation-duration: 200ms;
}

/* Subtle node entrance */
@keyframes node-appear {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.react-flow__node {
  animation: node-appear 0.3s ease-out;
}

/* ============================================================
   REDUCED MOTION — WCAG 2.3.3
   Disable all animations/transitions for users who prefer it.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Custom slide-in / animate-in classes used by Toaster & ApprovalBanner */
  .animate-in,
  .slide-in-from-bottom,
  .slide-in-from-top,
  .slide-in-from-right {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* React Flow animated edges */
  .react-flow__edge.animated .react-flow__edge-path {
    animation: none !important;
    stroke-dasharray: none !important;
  }

  /* React Flow node appear animation */
  .react-flow__node {
    animation: none !important;
  }
}