/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* VoicyAgent — Liquid Glass theme.
   Translucent frosted panels floating over a soft, vibrant gradient.
   Light, airy, no dark mode. */

:root {
  --ink: #1b2338;
  --ink-soft: #55617d;
  --ink-faint: #8b96b0;

  --brand: #6d5efc;
  --brand-2: #22d3ee;
  --brand-grad: linear-gradient(120deg, #6d5efc 0%, #a855f7 45%, #22d3ee 100%);
  --danger: #f43f5e;
  --warn: #f59e0b;
  --ok: #10b981;

  /* Glass */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-soft: rgba(255, 255, 255, 0.38);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(56, 47, 120, 0.14);
  --hairline: rgba(120, 110, 190, 0.14);
  --radius: 18px;
  --blur: saturate(180%) blur(20px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Vibrant mesh backdrop the glass refracts. */
  background:
    radial-gradient(1100px 720px at 8% -10%, #c7d2fe 0%, rgba(199, 210, 254, 0) 60%),
    radial-gradient(1000px 680px at 105% 0%, #a7f3d0 0%, rgba(167, 243, 208, 0) 55%),
    radial-gradient(1200px 900px at 60% 120%, #fbcfe8 0%, rgba(251, 207, 232, 0) 55%),
    linear-gradient(160deg, #eef2ff 0%, #f5f3ff 40%, #ecfeff 100%);
  background-attachment: fixed;
}

a { color: var(--brand); text-decoration: none; }

.app-shell { display: flex; flex-direction: column; height: 100vh; padding: 14px; gap: 14px; }

/* ---- Glass primitive ---- */
.glass {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}

/* ---- Topbar ---- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}
.topbar .logo { font-weight: 800; letter-spacing: -0.03em; font-size: 19px; }
.topbar .logo span {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar .crumb { color: var(--ink-soft); font-size: 13px; }
.topbar .spacer { flex: 1 1; }

/* ---- Buttons ---- */
.btn {
  background: var(--glass-soft);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--ink);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 9px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(109, 94, 252, 0.18); }
.btn.primary {
  background: var(--brand-grad); border: none; color: #fff; font-weight: 600;
  box-shadow: 0 6px 20px rgba(109, 94, 252, 0.35);
}
.btn.primary:hover { filter: brightness(1.05); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.builder-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  flex: 1 1; min-height: 0; grid-gap: 14px; gap: 14px;
}

.pane { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane.left {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}

.section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); font-weight: 700; margin: 16px 18px 10px;
}

/* ---- Template picker ---- */
.templates {
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 9px; gap: 9px; padding: 0 16px;
  overflow-y: auto; max-height: 42%;
}
.tpl-card {
  border: 1px solid var(--hairline); border-radius: 14px; padding: 12px;
  cursor: pointer; background: var(--glass-soft);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.tpl-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(109, 94, 252, 0.16); }
.tpl-card.active { border-color: transparent; box-shadow: 0 0 0 2px var(--brand), 0 8px 22px rgba(109, 94, 252, 0.22); }
.tpl-card .ico { font-size: 18px; }
.tpl-card .t { font-weight: 650; font-size: 13.5px; margin-top: 4px; }
.tpl-card .d { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }

/* ---- Chat ---- */
.chat { flex: 1 1; display: flex; flex-direction: column; min-height: 0; }
.chat-log { flex: 1 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 90%; padding: 10px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--brand-grad); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 4px 14px rgba(109,94,252,.28); }
.msg.assistant { align-self: flex-start; background: var(--glass-strong); border: 1px solid var(--glass-border); border-bottom-left-radius: 5px; }
.msg.system { align-self: center; color: var(--ink-faint); font-size: 12px; }
.offline-hint {
  margin: 0 16px; padding: 9px 12px; font-size: 12px; line-height: 1.4;
  color: #92660c; background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 10px;
}
.offline-hint a { font-weight: 700; }
.chat-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hairline); }
.chat-input input {
  flex: 1 1; background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 12px; color: var(--ink); padding: 11px 13px; font-size: 14px;
}
.chat-input input::placeholder { color: var(--ink-faint); }
.chat-input input:focus { outline: none; box-shadow: 0 0 0 2px rgba(109,94,252,.4); }
.mic-btn { min-width: 42px; }
.mic-btn.recording { background: var(--danger); border-color: var(--danger); color: #fff; animation: pulse 1.2s infinite; }

/* ---- Right pane: flow + status ---- */
.pane.right {
  background: var(--glass-soft);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
  position: relative;
}
.flow-wrap { flex: 1 1; min-height: 0; position: relative; border-radius: var(--radius); overflow: hidden; }
.flow-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-soft); flex-direction: column; gap: 8px; text-align: center; padding: 40px; }

/* Workflow status bar (shown after build) */
.status-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; margin: 0;
  border-top: 1px solid var(--hairline);
  background: var(--glass-strong);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--glass-soft); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 5px 12px;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.dot-warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.dot-live { background: var(--brand); box-shadow: 0 0 0 3px rgba(109,94,252,.2); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.status-warnings { width: 100%; margin-top: 4px; }
.warn { font-size: 12px; color: #b45309; padding: 2px 0; }

/* ---- Flow nodes (glass) ---- */
.vnode {
  border-radius: 14px; padding: 11px 13px; font-size: 12px; min-width: 158px;
  border: 1px solid var(--glass-border);
  background: var(--glass-strong);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 6px 20px rgba(56, 47, 120, 0.12);
  color: var(--ink); position: relative;
}
.vnode .vhead { display: flex; align-items: center; gap: 6px; }
.vnode .vlabel { font-weight: 700; font-size: 13px; }
.vnode .vgoal { color: var(--ink-soft); font-size: 11px; margin-top: 5px; line-height: 1.35; }
.vnode.start { background: linear-gradient(135deg, rgba(34,211,238,.28), rgba(255,255,255,.6)); border-color: rgba(34,211,238,.5); }
.vnode.end { background: linear-gradient(135deg, rgba(244,63,94,.2), rgba(255,255,255,.6)); border-color: rgba(244,63,94,.4); }
.vnode.action { background: linear-gradient(135deg, rgba(168,85,247,.22), rgba(255,255,255,.6)); border-color: rgba(168,85,247,.45); }
.nstatus { width: 9px; height: 9px; border-radius: 50%; margin-left: auto; }
.vchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.vchip { font-size: 10px; background: rgba(109,94,252,.14); color: var(--brand); border: 1px solid rgba(109,94,252,.28); border-radius: 7px; padding: 1px 7px; font-weight: 600; }

/* ---- Settings page ---- */
.settings-wrap { flex: 1 1; overflow-y: auto; padding: 22px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; gap: 16px; max-width: 980px; margin: 0 auto; }
.setting-card { padding: 20px; }
.setting-card h3 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.setting-card .sub { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 16px; }
.mode-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.mode-opt {
  flex: 1 1; border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px;
  cursor: pointer; background: var(--glass-soft); transition: box-shadow .15s, transform .12s;
}
.mode-opt:hover { transform: translateY(-1px); }
.mode-opt.active { box-shadow: 0 0 0 2px var(--brand); }
.mode-opt .mt { font-weight: 650; font-size: 13.5px; }
.mode-opt .md { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.field input {
  width: 100%; background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 10px; color: var(--ink); padding: 10px 12px; font-size: 13.5px; font-family: ui-monospace, monospace;
}
.field input:focus { outline: none; box-shadow: 0 0 0 2px rgba(109,94,252,.4); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.badge.ok { background: rgba(16,185,129,.14); color: #047857; }
.badge.warn { background: rgba(245,158,11,.16); color: #b45309; }
.badge.info { background: rgba(109,94,252,.14); color: var(--brand); }
.nav-link { color: var(--ink-soft); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.nav-link:hover { background: var(--glass-soft); }
.nav-link.active { color: var(--brand); }

/* ---- Embed snippet ---- */
.embed-code {
  background: #0f1320; color: #d7def0; border-radius: 12px; padding: 14px 16px;
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-x: auto; white-space: pre; margin: 0; border: 1px solid var(--glass-border);
}
code { font-family: ui-monospace, monospace; font-size: 0.92em; background: rgba(109,94,252,.1); padding: 1px 5px; border-radius: 5px; }

/* ---- Voice test ---- */
.voice-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px 8px; }
.voice-orb {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--brand-grad);
  box-shadow: 0 0 0 8px rgba(109,94,252,.12), 0 8px 30px rgba(109,94,252,.35);
  transition: transform .18s ease;
}
.voice-orb.connecting { animation: pulse 1.2s infinite; opacity: .6; }
.voice-orb.speaking { animation: orb 0.9s ease-in-out infinite; }
.voice-orb.ended { filter: grayscale(1); opacity: .4; }
.voice-orb.error { background: linear-gradient(120deg, #f43f5e, #f59e0b); }
@keyframes orb { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.voice-status { font-size: 13px; color: var(--ink-soft); font-weight: 600; }

/* ---- Auth pages ---- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { width: 400px; max-width: 94vw; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.auth-card .logo span { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-sub { color: var(--ink-soft); font-size: 13px; margin-top: -8px; }
.auth-error { font-size: 12.5px; color: var(--danger); background: rgba(244,63,94,.1); border: 1px solid rgba(244,63,94,.3); border-radius: 8px; padding: 8px 10px; }
.auth-alt { font-size: 13px; color: var(--ink-soft); text-align: center; }
.auth-hint { font-size: 11.5px; color: var(--ink-faint); text-align: center; font-family: ui-monospace, monospace; }

/* ---- Test console drawer ---- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(27, 35, 56, 0.28);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  display: flex; justify-content: flex-end;
}
.drawer {
  width: 440px; max-width: 92vw; height: 100%;
  display: flex; flex-direction: column;
  border-radius: 0; border-right: none; border-top: none; border-bottom: none;
  animation: slideIn .22s ease;
}
@keyframes slideIn { from { transform: translateX(20px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--hairline); }
.drawer-title { font-weight: 700; font-size: 15px; }
.drawer-sub { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.drawer-log { flex: 1 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.drawer-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hairline); }
.drawer-input input { flex: 1 1; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 12px; color: var(--ink); padding: 11px 13px; font-size: 14px; }
.drawer-input input:focus { outline: none; box-shadow: 0 0 0 2px rgba(109,94,252,.4); }
.turn-phase { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); font-weight: 700; margin-bottom: 5px; opacity: .85; }
.turn-action { margin-top: 8px; font-size: 11.5px; display: flex; align-items: center; gap: 6px; background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.3); color: #7c3aed; border-radius: 8px; padding: 4px 8px; }
.turn-action code { font-size: 10.5px; opacity: .8; }
.turn-end { margin-top: 8px; font-size: 11.5px; color: var(--danger); font-weight: 600; }

/* React Flow surface transparent so the glass shows through */
.react-flow__attribution { display: none; }
.react-flow__controls { box-shadow: var(--glass-shadow); border-radius: 10px; overflow: hidden; }
.react-flow__controls-button { background: var(--glass-strong); border-bottom: 1px solid var(--hairline); color: var(--ink); }

/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../node_modules/@xyflow/react/dist/style.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #555;
  --xy-background-pattern-lines-color-default: #333;
  --xy-background-pattern-cross-color-default: #333;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  touch-action: none;
}
.react-flow__pane.draggable {
    cursor: -webkit-grab;
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: -webkit-grab;
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: -webkit-grabbing;
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: -webkit-grab;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}