.drawflow {
    background-color: var(--user-defined-binombg) !important;
    background-image: radial-gradient(var(--user-defined-binomborder) 1px, transparent 0) !important;
    background-size: 24px 24px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 600px !important;
    border-radius: 12px !important;
    position: relative !important;
}

.drawflow .drawflow-node {
    background: var(--user-defined-binomsurface) !important;
    border: 1px solid var(--user-defined-binomborder) !important;
    border-radius: 12px !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    padding: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    width: 240px !important;
    z-index: 2 !important;
    overflow: visible !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    /* MUST preserve flex layout for inputs/outputs to work */
    display: flex !important;
    align-items: center !important;
    position: absolute !important;
}

.drawflow .drawflow-node:hover {
    cursor: move !important;
}

.drawflow .drawflow-node.selected {
    border: 2px solid rgb(var(--m-theme-primary)) !important;
    box-shadow: 0 0 15px rgba(var(--m-theme-primary), 0.4) !important;
}

.drawflow .drawflow-node .drawflow_content_node {
    overflow: visible !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

.drawflow .drawflow-node .node-header {
    padding: 12px 14px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.drawflow .drawflow-node .node-header.start {
    background: color-mix(in srgb, rgb(var(--m-theme-success)) 20%, var(--user-defined-binomsurface)) !important;
    border-bottom: 2px solid rgb(var(--m-theme-success)) !important;
}
.drawflow .drawflow-node .node-header.strategy {
    background: color-mix(in srgb, rgb(var(--m-theme-primary)) 20%, var(--user-defined-binomsurface)) !important;
    border-bottom: 2px solid rgb(var(--m-theme-primary)) !important;
}
.drawflow .drawflow-node .node-header.condition {
    background: color-mix(in srgb, rgb(var(--m-theme-info)) 20%, var(--user-defined-binomsurface)) !important;
    border-bottom: 2px solid rgb(var(--m-theme-info)) !important;
}
.drawflow .drawflow-node .node-header.exit {
    background: color-mix(in srgb, rgb(var(--m-theme-error)) 20%, var(--user-defined-binomsurface)) !important;
    border-bottom: 2px solid rgb(var(--m-theme-error)) !important;
}

.drawflow .drawflow-node .node-body {
    padding: 16px 40px !important; /* Увеличил padding слева и справа с 14px до 40px */
    background-color: var(--user-defined-binomsurface) !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    font-size: 13px !important;
    color: rgb(var(--m-theme-on-surface)) !important;
}

.drawflow .drawflow-node .node-body label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    opacity: 0.6 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* ---- Inputs & Outputs Containers ----
   Keep width:0 so they sit at edges without taking space.
   DO NOT use position:absolute — it breaks flex layout inside node.
---- */
.drawflow .drawflow-node .inputs,
.drawflow .drawflow-node .outputs {
    width: 0px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.drawflow .drawflow-node .inputs {
    order: -1 !important;
}
.drawflow .drawflow-node .outputs {
    order: 1 !important;
}

/* ---- Input / Output Ports ---- */
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
    position: relative !important;
    width: 14px !important;
    height: 14px !important;
    background: var(--user-defined-binomsurface) !important;
    border: 3px solid rgb(var(--m-theme-primary)) !important;
    border-radius: 50% !important;
    cursor: crosshair !important;
    z-index: 10 !important;
    margin-bottom: 22px !important; /* Увеличено расстояние по умолчанию, чтобы порты раздвинулись */
}

/* Port positioning — must stick outside the node bounds */
.drawflow .drawflow-node .input {
    left: -24px !important;
    top: 2px !important;
}

.drawflow .drawflow-node .output {
    right: -10px !important;
    top: 2px !important;
}

.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover {
    background: rgb(var(--m-theme-primary)) !important;
    border-color: rgb(var(--m-theme-on-primary)) !important;
    transform: scale(1.2) !important;
    transition: transform 0.1s ease !important;
}

/* Порты-лейблы */
/* ВХОДЫ (Inputs) - СЛЕВА */
.drawflow .drawflow-node .input::before {
    position: absolute !important;
    left: 20px !important; /* Сдвигаем внутрь ноды */
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}
/* Подписи входов по типам нод */
.drawflow .drawflow-node.singleroute .inputs .input_1::before { content: 'Trigger' !important; }
.drawflow .drawflow-node.singleroute .inputs .input_2::before { content: 'Cond' !important; }

.drawflow .drawflow-node.multiroute .inputs .input_1::before { content: 'Trigger' !important; }
.drawflow .drawflow-node.multiroute .inputs .input_2::before { content: 'Strategy' !important; }
.drawflow .drawflow-node.multiroute .inputs .input_3::before { content: 'Cond' !important; }

.drawflow .drawflow-node.exit .inputs .input_1::before { content: 'Trigger' !important; }

/* ВЫХОДЫ (Outputs) - СПРАВА */
.drawflow .drawflow-node .output::before {
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}
.drawflow .drawflow-node.singleroute .outputs .output_1::before { content: 'Success' !important; color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.singleroute .outputs .output_2::before { content: 'False' !important; color: rgb(var(--m-theme-warning)) !important; }
.drawflow .drawflow-node.singleroute .outputs .output_3::before { content: 'Error' !important; color: rgb(var(--m-theme-error)) !important; }

.drawflow .drawflow-node.multiroute .outputs .output_1::before { content: 'Success' !important; color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.multiroute .outputs .output_2::before { content: 'Exhausted' !important; color: rgb(var(--m-theme-warning)) !important; }
.drawflow .drawflow-node.multiroute .outputs .output_3::before { content: 'Error' !important; color: rgb(var(--m-theme-error)) !important; }

.drawflow .drawflow-node.start .outputs .output_1::before { content: 'Next' !important; color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.strategy .outputs .output_1::before { content: 'Success' !important; color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.strategy .outputs .output_2::before { content: 'Failed' !important; color: rgb(var(--m-theme-error)) !important; }
.drawflow .drawflow-node.condition .outputs .output_1::before { content: 'True' !important; color: rgb(var(--m-theme-success)) !important; }
.drawflow .drawflow-node.condition .outputs .output_2::before { content: 'False' !important; color: rgb(var(--m-theme-error)) !important; }

/* ---- SVG & Connections ---- */
.drawflow svg {
    z-index: 0 !important;
    position: absolute !important;
    overflow: visible !important;
}

.drawflow .connection {
    position: absolute !important;
    pointer-events: none !important;
    aspect-ratio: 1 / 1 !important;
}

.drawflow .connection .main-path {
    fill: none !important;
    stroke: rgb(var(--m-theme-primary)) !important;
    stroke-width: 3px !important;
    pointer-events: all !important;
}

.drawflow .connection .main-path:hover {
    stroke: rgb(var(--m-theme-info)) !important;
    cursor: pointer !important;
}

.drawflow .connection .main-path.selected {
    stroke: rgb(var(--m-theme-success)) !important;
}

.drawflow .connection .point {
    cursor: move !important;
    stroke: rgb(var(--m-theme-primary)) !important;
    stroke-width: 2 !important;
    fill: var(--user-defined-binomsurface) !important;
    pointer-events: all !important;
}

.drawflow .connection .point.selected,
.drawflow .connection .point:hover {
    fill: rgb(var(--m-theme-info)) !important;
}

/* Линии связей — old selector kept for compatibility */
.drawflow .connection .main-path {
    stroke: rgb(var(--m-theme-primary)) !important;
    stroke-width: 3px !important;
}
.drawflow .connection .main-path:hover {
    stroke: rgb(var(--m-theme-info)) !important;
}
.drawflow .connection .main-path.selected {
    stroke: rgb(var(--m-theme-success)) !important;
}

.drawflow-node .df-select, .drawflow-node .df-input {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.2) !important;
    color: rgb(var(--m-theme-on-surface)) !important;
    border: 1px solid rgb(var(--m-theme-on-surface), 0.3) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    font-size: 12px !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

.drawflow-node .df-select:focus, .drawflow-node .df-input:focus {
    border-color: rgb(var(--m-theme-primary)) !important;
}

.drawflow-node select,
.drawflow-node input[type="number"],
.drawflow-node input[type="text"] {
    border: 1px solid rgb(var(--m-theme-on-surface), 0.3) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px;
    padding: 2px 4px;
    color: inherit;
    outline: none;
}
.drawflow-node select:focus,
.drawflow-node input:focus {
    border-color: rgb(var(--m-theme-primary)) !important;
}

/* Кнопка удаления ноды */
.drawflow .drawflow-delete {
    position: absolute !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: rgb(var(--m-theme-error)) !important;
    color: rgb(var(--m-theme-on-error)) !important;
    z-index: 100 !important;
    border: 2px solid var(--user-defined-binomborder) !important;
    line-height: 20px !important;
    font-weight: bold !important;
    text-align: center !important;
    border-radius: 50% !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    cursor: pointer !important;
    top: -10px !important;
    right: -10px !important;
    font-size: 14px !important;
}

.drawflow > .drawflow-delete {
    margin-left: -15px !important;
    margin-top: 15px !important;
}

.parent-node .drawflow-delete {
    right: -10px !important;
    top: -10px !important;
    display: block !important;
}

.drawflow .parent-node .drawflow-delete {
    display: block !important;
}