@import "@xyflow/react/dist/style.css";
@import "./styles/theme-vars.css";
@import "./styles/app-shell.css";

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

@layer components {
  .react-flow__execution-map {
    --xy-background-pattern-color-props: var(--app-divider-soft);
    background:
      radial-gradient(circle at top, color-mix(in srgb, var(--app-surface-muted) 92%, transparent), transparent 62%),
      var(--app-surface-base);
  }

  .react-flow__execution-map .react-flow__renderer,
  .react-flow__execution-map .react-flow__pane {
    cursor: grab;
  }

  .react-flow__execution-map .react-flow__controls {
    overflow: hidden;
    border: 1px solid var(--app-divider-soft);
    border-radius: 18px;
    background: color-mix(in srgb, var(--app-surface-overlay) 92%, transparent);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
  }

  .react-flow__execution-map .react-flow__controls-button {
    border-bottom-color: var(--app-divider-soft);
    background: transparent;
    color: var(--app-text-muted);
  }

  .react-flow__execution-map .react-flow__controls-button:hover {
    background: color-mix(in srgb, var(--app-surface-muted) 88%, transparent);
  }

  .react-flow__execution-map .react-flow__edge-path,
  .react-flow__execution-map .react-flow__connection-path {
    stroke-linecap: round;
  }
}