CRM_Montzar/apps/web/src/components/automations/AutomationCanvas.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, type Component } from 'vue';
import AutomationNode from '@/components/automations/AutomationNode.vue';
import {
  AUTOMATION_ACTION_LABELS,
  AUTOMATION_ACTIONS,
  AUTOMATION_CONDITION_FIELD_LABELS,
  AUTOMATION_CONDITION_OP_LABELS,
  AUTOMATION_NOTIFY_CHANNEL_LABELS,
  AUTOMATION_TRIGGER_LABELS,
  MAX_AUTOMATION_STEPS,
  formConditionValues,
  isAutomationCondition,
  splitAutomationBranches,
  type AutomationAction,
  type AutomationChainMode,
  type AutomationStep,
  type AutomationTrigger,
  type LeadFormDto,
  type OrgUserDto,
  type TeamDto,
} from '@mento/shared';
import { toFaDigits } from '@/lib/jalali';
import { Button as AButton, Divider as ADivider, Space as ASpace, Tooltip as ATooltip } from 'ant-design-vue';
import {
  BellOutlined,
  DeleteOutlined,
  DragOutlined,
  ExpandOutlined,
  FilterOutlined,
  FlagOutlined,
  FullscreenExitOutlined,
  FullscreenOutlined,
  GiftOutlined,
  PlusOutlined,
  SelectOutlined,
  ThunderboltOutlined,
  ZoomInOutlined,
  ZoomOutOutlined,
} from '@ant-design/icons-vue';

export type AutomationAddPayload =
  | { kind: 'action'; action: AutomationAction }
  | { kind: 'condition' };

type AddAllow = 'both' | 'action' | 'condition';
type LaneItem =
  | { kind: 'wire'; key: string; index: number; allow: AddAllow; end?: boolean }
  | { kind: 'node'; key: string; index: number };
type BranchLane = { key: string; start: number; end: number; items: LaneItem[] };

const props = withDefaults(
  defineProps<{
    trigger: AutomationTrigger;
    steps: AutomationStep[];
    selected: 'trigger' | string;
    chainMode?: AutomationChainMode;
    form?: LeadFormDto | null;
    users?: OrgUserDto[];
    teams?: TeamDto[];
    fullscreen?: boolean;
  }>(),
  {
    chainMode: 'stop',
    form: null,
    users: () => [],
    teams: () => [],
    fullscreen: false,
  },
);

const emit = defineEmits<{
  select: [id: 'trigger' | string];
  add: [payload: AutomationAddPayload, index: number];
  remove: [id: string];
  removeRange: [start: number, end: number];
  addBranch: [];
  'update:fullscreen': [value: boolean];
}>();

const addAt = ref<{ key: string; index: number; allow: AddAllow } | null>(null);
const canAdd = computed(() => props.steps.length < MAX_AUTOMATION_STEPS);
const actionCount = computed(
  () => props.steps.filter((s) => !isAutomationCondition(s)).length,
);

type CanvasTool = 'select' | 'hand';
const Z_MIN = 0.4;
const Z_MAX = 2;
const Z_STEP = 0.1;

const tool = ref<CanvasTool>('select');
const zoom = ref(1);
const pan = ref({ x: 0, y: 0 });
const viewportRef = ref<HTMLElement | null>(null);
const panning = ref(false);
const panOrigin = ref({ x: 0, y: 0, panX: 0, panY: 0 });
const didPan = ref(false);

const zoomLabel = computed(() => `${toFaDigits(Math.round(zoom.value * 100))}٪`);
const worldStyle = computed(() => ({
  transform: `translate(${pan.value.x}px, ${pan.value.y}px) scale(${zoom.value})`,
}));

function clampZoom(v: number) {
  return Math.min(Z_MAX, Math.max(Z_MIN, Math.round(v * 100) / 100));
}

function setTool(next: CanvasTool) {
  tool.value = next;
  addAt.value = null;
}

function zoomBy(delta: number) {
  zoom.value = clampZoom(zoom.value + delta);
}

function resetView() {
  zoom.value = 1;
  pan.value = { x: 0, y: 0 };
}

function onWheel(e: WheelEvent) {
  const el = viewportRef.value;
  if (!el) return;
  const rect = el.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  const prev = zoom.value;
  const next = clampZoom(prev * (e.deltaY > 0 ? 0.9 : 1.1));
  if (next === prev) return;
  const wx = (mx - pan.value.x) / prev;
  const wy = (my - pan.value.y) / prev;
  pan.value = { x: mx - wx * next, y: my - wy * next };
  zoom.value = next;
}

function onPointerDown(e: PointerEvent) {
  const hand = tool.value === 'hand' || e.button === 1 || e.altKey;
  if (!hand || e.button === 2) return;
  e.preventDefault();
  panning.value = true;
  didPan.value = false;
  panOrigin.value = {
    x: e.clientX,
    y: e.clientY,
    panX: pan.value.x,
    panY: pan.value.y,
  };
  (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
}

function onPointerMove(e: PointerEvent) {
  if (!panning.value) return;
  const dx = e.clientX - panOrigin.value.x;
  const dy = e.clientY - panOrigin.value.y;
  if (Math.abs(dx) + Math.abs(dy) > 3) didPan.value = true;
  pan.value = {
    x: panOrigin.value.panX + dx,
    y: panOrigin.value.panY + dy,
  };
}

function onPointerUp(e: PointerEvent) {
  if (!panning.value) return;
  panning.value = false;
  try {
    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
  } catch {
    /* ignore */
  }
}

function onViewportClick() {
  if (didPan.value) {
    didPan.value = false;
    return;
  }
  addAt.value = null;
}

function onDocPointerDown(e: PointerEvent) {
  if (!addAt.value) return;
  const target = e.target;
  if (!(target instanceof Element)) return;
  if (target.closest('.picker') || target.closest('.plus')) return;
  addAt.value = null;
}

onMounted(() => {
  document.addEventListener('pointerdown', onDocPointerDown, true);
});
onBeforeUnmount(() => {
  document.removeEventListener('pointerdown', onDocPointerDown, true);
});

const layout = computed((): { main: LaneItem[]; branches: BranchLane[] } => {
  const steps = props.steps;
  const { prefixEnd, branches } = splitAutomationBranches(steps);
  if (props.chainMode !== 'branches' || !branches.length) {
    const main: LaneItem[] = [];
    steps.forEach((s, i) => {
      main.push({ kind: 'wire', key: `w-${s.id}`, index: i, allow: 'both' });
      main.push({ kind: 'node', key: s.id, index: i });
    });
    main.push({ kind: 'wire', key: 'w-end', index: steps.length, allow: 'both', end: true });
    return { main, branches: [] };
  }

  const main: LaneItem[] = [];
  for (let i = 0; i < prefixEnd; i++) {
    main.push({ kind: 'wire', key: `w-${steps[i].id}`, index: i, allow: 'action' });
    main.push({ kind: 'node', key: steps[i].id, index: i });
  }
  const lanes = branches.map((b): BranchLane => {
    const items: LaneItem[] = [];
    for (let j = b.start; j < b.end; j++) {
      const allow: AddAllow =
        j === b.start || isAutomationCondition(steps[j])
          ? 'condition'
          : isAutomationCondition(steps[j - 1])
            ? 'both'
            : 'action';
      items.push({ kind: 'wire', key: `w-${steps[j].id}`, index: j, allow });
      items.push({ kind: 'node', key: steps[j].id, index: j });
    }
    const last = steps[b.end - 1];
    items.push({
      kind: 'wire',
      key: `w-end-${steps[b.start].id}`,
      index: b.end,
      allow: isAutomationCondition(last) ? 'both' : 'action',
      end: true,
    });
    return { key: steps[b.start].id, start: b.start, end: b.end, items };
  });
  return { main, branches: lanes };
});

const forked = computed(() => layout.value.branches.length > 0);

const canAddBranch = computed(() => {
  if (props.steps.length + 2 > MAX_AUTOMATION_STEPS) return false;
  const last = props.steps[props.steps.length - 1];
  return !last || !isAutomationCondition(last);
});

function branchActionCount(lane: BranchLane) {
  return props.steps
    .slice(lane.start, lane.end)
    .filter((s) => !isAutomationCondition(s)).length;
}

function canRemoveBranch(lane: BranchLane) {
  return actionCount.value - branchActionCount(lane) >= 1;
}

function canRemove(index: number) {
  const step = props.steps[index];
  if (!step || props.steps.length <= 1) return false;
  if (!isAutomationCondition(step)) return actionCount.value > 1;
  if (!forked.value) return true;
  const lane = layout.value.branches.find((b) => index >= b.start && index < b.end);
  if (!lane) return true;
  const conds = props.steps
    .slice(lane.start, lane.end)
    .filter((s) => isAutomationCondition(s)).length;
  return conds > 1;
}

function userName(id?: string | null) {
  return props.users.find((u) => u.id === id)?.fullName ?? 'کاربر';
}

function assignHint(step: AutomationStep) {
  const mode = step.assignMode ?? (step.assigneeId ? 'user' : 'owner');
  if (mode === 'user') return userName(step.assigneeId);
  if (mode === 'team_round_robin') {
    const t = props.teams.find((x) => x.id === step.assigneeTeamId);
    return `نوبتی: ${t?.name ?? 'تیم'}`;
  }
  if (mode === 'users_round_robin') {
    return `نوبتی بین ${toFaDigits((step.assigneeUserIds ?? []).length)} نفر`;
  }
  return 'مسئول پرونده';
}

function actionIcon(action: AutomationAction): Component {
  if (action === 'create_notification') return BellOutlined;
  if (action === 'add_loyalty_points') return GiftOutlined;
  return FlagOutlined;
}

function stepTitle(step: AutomationStep) {
  if (isAutomationCondition(step)) {
    const field = step.conditionField ?? 'has_person';
    if (field === 'form_field') {
      const f = props.form?.fields.find((x) => x.key === step.conditionKey);
      return f?.label ?? AUTOMATION_CONDITION_FIELD_LABELS[field];
    }
    return AUTOMATION_CONDITION_FIELD_LABELS[field];
  }
  return AUTOMATION_ACTION_LABELS[step.action ?? 'create_activity'];
}

function stepHint(step: AutomationStep) {
  if (isAutomationCondition(step)) {
    const op = step.conditionOp ?? 'is_set';
    const opLabel = AUTOMATION_CONDITION_OP_LABELS[op];
    if (step.conditionField === 'form_field') {
      if (op === 'is_set' || op === 'is_empty') return opLabel;
      const joiner = op === 'contains_any' || op === 'not_contains' ? ' یا ' : ' و ';
      return `${opLabel} ${formConditionValues(step).map((v) => `«${v}»`).join(joiner) || '«»'}`;
    }
    if (step.conditionField === 'deal_amount' && step.conditionValue != null) {
      return `${opLabel} ${toFaDigits(Number(step.conditionValue))}`;
    }
    if (step.conditionField === 'ticket_priority' && step.conditionValue) {
      const pri: Record<string, string> = {
        low: 'کم',
        normal: 'عادی',
        high: 'بالا',
        urgent: 'فوری',
      };
      return `${opLabel} ${pri[String(step.conditionValue)] ?? step.conditionValue}`;
    }
    return opLabel;
  }
  if (step.action === 'add_loyalty_points') {
    return `${toFaDigits(step.points ?? 100)} امتیاز`;
  }
  if (step.action === 'create_notification') {
    return AUTOMATION_NOTIFY_CHANNEL_LABELS[step.notifyChannel ?? 'app'];
  }
  const types: Record<string, string> = {
    call: 'تماس',
    meeting: 'جلسه',
    task: 'وظیفه',
    note: 'یادداشت',
  };
  return `${types[step.activityType ?? 'task'] ?? 'وظیفه'} — ${assignHint(step)}`;
}

function openAdd(item: { key: string; index: number; allow: AddAllow }) {
  if (!canAdd.value || tool.value === 'hand') return;
  addAt.value =
    addAt.value?.key === item.key
      ? null
      : { key: item.key, index: item.index, allow: item.allow };
}

function actionShort(action: AutomationAction) {
  if (action === 'create_activity') return 'فعالیت';
  if (action === 'create_notification') return 'اعلان / پیامک';
  if (action === 'add_loyalty_points') return 'امتیاز باشگاه';
  return AUTOMATION_ACTION_LABELS[action];
}

function pickAction(action: AutomationAction) {
  if (!addAt.value) return;
  emit('add', { kind: 'action', action }, addAt.value.index);
  addAt.value = null;
}

function pickCondition() {
  if (!addAt.value) return;
  emit('add', { kind: 'condition' }, addAt.value.index);
  addAt.value = null;
}

function removeBranch(lane: BranchLane) {
  addAt.value = null;
  emit('removeRange', lane.start, lane.end);
}
</script>

<template>
  <div class="canvas-shell">
    <div
      ref="viewportRef"
      class="canvas"
      :class="{ hand: tool === 'hand', panning }"
      @wheel.prevent="onWheel"
      @pointerdown="onPointerDown"
      @pointermove="onPointerMove"
      @pointerup="onPointerUp"
      @pointercancel="onPointerUp"
      @click.self="onViewportClick"
    >
      <div class="world" :style="worldStyle" :class="{ locked: tool === 'hand' }">
    <div class="flow">
      <button
        class="node trigger"
        type="button"
        :class="{ on: selected === 'trigger' }"
        @click="emit('select', 'trigger')"
      >
        <span class="icon">
          <ThunderboltOutlined />
        </span>
        <span class="copy">
          <span class="kind">اگر</span>
          <strong>{{ AUTOMATION_TRIGGER_LABELS[trigger] }}</strong>
        </span>
      </button>

      <template v-for="item in layout.main" :key="item.key">
        <div
          v-if="item.kind === 'wire'"
          class="wire"
          :class="{ open: addAt?.key === item.key, end: item.end }"
        >
          <button
            v-if="canAdd"
            class="plus"
            :class="{ big: item.end }"
            type="button"
            title="افزودن گره"
            @click.stop="openAdd(item)"
          >
            <PlusOutlined :style="{ fontSize: item.end ? '16px' : '14px' }" />
          </button>
          <Transition name="auto-picker">
            <div
              v-if="addAt?.key === item.key"
              class="picker"
              @click.stop
              @pointerdown.stop
            >
              <div class="picker-head">افزودن گره</div>
              <button
                v-if="addAt.allow !== 'action'"
                type="button"
                class="pick condition"
                @click="pickCondition"
              >
                <span class="pick-ico"><FilterOutlined /></span>
                <span class="pick-copy">
                  <strong>شرط</strong>
                  <small>اگر … آنگاه</small>
                </span>
              </button>
              <template v-if="addAt.allow !== 'condition'">
                <button
                  v-for="action in AUTOMATION_ACTIONS"
                  :key="action"
                  type="button"
                  class="pick"
                  :class="action"
                  @click="pickAction(action)"
                >
                  <span class="pick-ico"><component :is="actionIcon(action)" /></span>
                  <span class="pick-copy">
                    <strong>{{ actionShort(action) }}</strong>
                    <small>{{ AUTOMATION_ACTION_LABELS[action] }}</small>
                  </span>
                </button>
              </template>
            </div>
          </Transition>
        </div>
        <AutomationNode
          v-else
          :step="steps[item.index]"
          :title="stepTitle(steps[item.index])"
          :hint="stepHint(steps[item.index])"
          :selected="selected === steps[item.index].id"
          :removable="canRemove(item.index)"
          @select="emit('select', steps[item.index].id)"
          @remove="emit('remove', steps[item.index].id)"
        />
      </template>

      <template v-if="forked">
        <div class="wire stub" />
        <div class="branches">
          <div v-for="(lane, bi) in layout.branches" :key="lane.key" class="branch">
            <div class="branch-tag">
              <span>شاخه {{ toFaDigits(bi + 1) }}</span>
              <button
                v-if="canRemoveBranch(lane)"
                type="button"
                title="حذف این شاخه"
                @click.stop="removeBranch(lane)"
              >
                <DeleteOutlined :style="{ fontSize: '12px' }" />
              </button>
            </div>
            <template v-for="item in lane.items" :key="item.key">
              <div
                v-if="item.kind === 'wire'"
                class="wire"
                :class="{ open: addAt?.key === item.key, end: item.end }"
              >
                <button
                  v-if="canAdd"
                  class="plus"
                  type="button"
                  :title="item.allow === 'condition' ? 'افزودن شرط («و»)' : 'افزودن گره'"
                  @click.stop="openAdd(item)"
                >
                  <PlusOutlined :style="{ fontSize: '14px' }" />
                </button>
                <Transition name="auto-picker">
                  <div
                    v-if="addAt?.key === item.key"
                    class="picker"
                    @click.stop
                    @pointerdown.stop
                  >
                    <div class="picker-head">افزودن گره</div>
                    <button
                      v-if="addAt.allow !== 'action'"
                      type="button"
                      class="pick condition"
                      @click="pickCondition"
                    >
                      <span class="pick-ico"><FilterOutlined /></span>
                      <span class="pick-copy">
                        <strong>شرط</strong>
                        <small>اگر … آنگاه</small>
                      </span>
                    </button>
                    <template v-if="addAt.allow !== 'condition'">
                      <button
                        v-for="action in AUTOMATION_ACTIONS"
                        :key="action"
                        type="button"
                        class="pick"
                        :class="action"
                        @click="pickAction(action)"
                      >
                        <span class="pick-ico"><component :is="actionIcon(action)" /></span>
                        <span class="pick-copy">
                          <strong>{{ actionShort(action) }}</strong>
                          <small>{{ AUTOMATION_ACTION_LABELS[action] }}</small>
                        </span>
                      </button>
                    </template>
                  </div>
                </Transition>
              </div>
              <AutomationNode
                v-else
                :step="steps[item.index]"
                :title="stepTitle(steps[item.index])"
                :hint="stepHint(steps[item.index])"
                :selected="selected === steps[item.index].id"
                :removable="canRemove(item.index)"
                @select="emit('select', steps[item.index].id)"
                @remove="emit('remove', steps[item.index].id)"
              />
            </template>
          </div>
          <button
            class="add-branch"
            type="button"
            :disabled="!canAddBranch"
            :title="canAddBranch ? '' : 'ابتدا برای شاخهٔ آخر یک عمل بگذارید'"
            @click.stop="emit('addBranch')"
          >
            <PlusOutlined :style="{ fontSize: '14px' }" />
            شاخهٔ جدید
          </button>
        </div>
      </template>
    </div>

    <p v-if="!canAdd" class="cap">
      حداکثر {{ toFaDigits(MAX_AUTOMATION_STEPS) }} گره در یک قانون
    </p>
      </div>
    </div>

    <div class="island" @pointerdown.stop @click.stop>
      <a-space :size="4">
        <a-tooltip title="انتخاب">
          <a-button
            type="text"
            :class="{ on: tool === 'select' }"
            @click="setTool('select')"
          >
            <template #icon><SelectOutlined /></template>
          </a-button>
        </a-tooltip>
        <a-tooltip title="جابه‌جایی (دست)">
          <a-button
            type="text"
            :class="{ on: tool === 'hand' }"
            @click="setTool('hand')"
          >
            <template #icon><DragOutlined /></template>
          </a-button>
        </a-tooltip>
        <a-divider type="vertical" :style="{ height: '20px', margin: 0 }" />
        <a-tooltip title="کوچک‌نمایی">
          <a-button type="text" :disabled="zoom <= Z_MIN" @click="zoomBy(-Z_STEP)">
            <template #icon><ZoomOutOutlined /></template>
          </a-button>
        </a-tooltip>
        <a-button type="text" class="zoom-label" @click="resetView">
          {{ zoomLabel }}
        </a-button>
        <a-tooltip title="بزرگ‌نمایی">
          <a-button type="text" :disabled="zoom >= Z_MAX" @click="zoomBy(Z_STEP)">
            <template #icon><ZoomInOutlined /></template>
          </a-button>
        </a-tooltip>
        <a-tooltip title="بازنشانی نما">
          <a-button type="text" @click="resetView">
            <template #icon><ExpandOutlined /></template>
          </a-button>
        </a-tooltip>
        <a-divider type="vertical" :style="{ height: '20px', margin: 0 }" />
        <a-tooltip :title="fullscreen ? 'خروج از تمام‌صفحه' : 'تمام‌صفحه'">
          <a-button
            type="text"
            :class="{ on: fullscreen }"
            @click="emit('update:fullscreen', !fullscreen)"
          >
            <template #icon>
              <FullscreenExitOutlined v-if="fullscreen" />
              <FullscreenOutlined v-else />
            </template>
          </a-button>
        </a-tooltip>
      </a-space>
    </div>
  </div>
</template>

<style scoped>
.canvas-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 14rem;
  flex: 1 1 auto;
}

.canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: #f3f6f5;
  background-image: radial-gradient(#c9d4cf 1.1px, transparent 1.2px);
  background-size: 16px 16px;
  touch-action: none;
}

.canvas.hand {
  cursor: grab;
}

.canvas.hand.panning {
  cursor: grabbing;
}

.world {
  transform-origin: 0 0;
  width: max-content;
  min-height: 100%;
  padding: 1.1rem 1rem 4rem;
  will-change: transform;
}

.world.locked {
  pointer-events: none;
}

.island {
  position: absolute;
  z-index: 6;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d5ddd8;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.island :deep(.ant-btn.on) {
  color: #0f766e;
  background: #ecfdf8;
}

.island :deep(.zoom-label) {
  min-width: 3.2rem;
  padding-inline: 4px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.flow {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: max-content;
  min-height: calc(100% - 2rem);
}

.node.trigger {
  width: 14.2rem;
  min-height: 4.35rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: start;
  border-radius: 999px;
  padding: 0.72rem 1rem;
  border: 1px solid #fdba74;
  background: #fff7ed;
  box-shadow: 0 10px 24px rgba(23, 33, 28, 0.06);
  cursor: pointer;
  color: inherit;
  font: inherit;
  flex-shrink: 0;
}

.node.trigger.on {
  border-color: #ea580c;
  box-shadow:
    0 0 0 3px rgba(234, 88, 12, 0.2),
    0 12px 24px rgba(15, 23, 42, 0.08);
}

.icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #c2410c;
  background: #ffedd5;
  font-size: 18px;
}

.copy {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.kind {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
}

strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
}

.wire {
  position: relative;
  width: 3.4rem;
  height: 2px;
  background: #cbd5e1;
  flex-shrink: 0;
}

.wire::after {
  content: '';
  position: absolute;
  inset-inline-end: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-block: 5px solid transparent;
  border-inline-start: 7px solid #cbd5e1;
  border-inline-end: 0;
}

.wire.stub {
  width: 1.6rem;
}

.wire.stub::after {
  display: none;
}

.plus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 1px solid #99f6e4;
  background: #fff;
  color: #0f766e;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.plus.big {
  width: 2rem;
  height: 2rem;
}

.wire.open .plus,
.plus:hover {
  background: #14b8a6;
  color: #fff;
  border-color: #14b8a6;
}

.wire.end {
  width: 3.8rem;
  background: repeating-linear-gradient(90deg, #cbd5e1 0 6px, transparent 6px 10px);
}

.wire.end::after {
  display: none;
}

/* انشعاب: یک خط عمودی که از وسط اولین شاخه تا وسط آخرین شاخه کشیده می‌شود */
.flow:has(.branches) {
  padding-bottom: 2.6rem;
}

.branches {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.branch {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: 0.7rem;
}

.branch::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  width: 2px;
  top: 0;
  bottom: 0;
  background: #cbd5e1;
}

.branch:first-of-type::before {
  top: 50%;
}

.branch:last-of-type::before {
  bottom: 50%;
}

.branch-tag {
  position: absolute;
  top: 0.05rem;
  inset-inline-start: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}

.branch-tag button {
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  padding: 0;
  color: #b91c1c;
  cursor: pointer;
}

.add-branch {
  position: absolute;
  top: 100%;
  inset-inline-start: 0.9rem;
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.35rem;
  border: 1px dashed #f59e0b;
  background: #fffbeb;
  color: #b45309;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.add-branch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.picker {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: 220px;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: #fff;
  border: 1px solid #d5ddd8;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.auto-picker-enter-active,
.auto-picker-leave-active {
  transition:
    opacity 0.16s ease,
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
  will-change: opacity, transform;
  pointer-events: none;
}

.auto-picker-enter-from,
.auto-picker-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(6px) scale(0.97);
}

.auto-picker-enter-to,
.auto-picker-leave-from {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.picker-head {
  padding: 6px 8px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.pick {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 6px 8px;
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.pick:hover {
  background: #f1f5f9;
}

.pick-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: #ecfdf8;
  color: #0f766e;
}

.pick.condition .pick-ico {
  background: #fff7ed;
  color: #b45309;
}

.pick.create_notification .pick-ico {
  background: #eff6ff;
  color: #1d4ed8;
}

.pick.add_loyalty_points .pick-ico {
  background: #f5f3ff;
  color: #7c3aed;
}

.pick-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.pick-copy strong {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.pick-copy small {
  font-size: 11px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cap {
  margin: 0.85rem 0 0;
  color: #94a3b8;
  font-size: 0.78rem;
}

/* موبایل: چیدمان عمودی؛ هر شاخه یک کارت زیر کارت قبلی */
@media (max-width: 700px) {
  .canvas {
    min-height: 0;
  }

  .world {
    padding: 1rem 0.75rem 4rem;
  }

  .flow,
  .flow:has(.branches) {
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding-bottom: 0;
  }

  .node.trigger {
    width: min(100%, 15rem);
  }

  .wire,
  .wire.stub {
    width: 2px;
    height: 2.1rem;
  }

  .wire::after {
    inset-inline-end: auto;
    top: auto;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    border-block: 0;
    border-inline: 5px solid transparent;
    border-top: 7px solid #cbd5e1;
  }

  .wire.end {
    width: 2px;
    height: 2.4rem;
    background: repeating-linear-gradient(180deg, #cbd5e1 0 6px, transparent 6px 10px);
  }

  .branches {
    align-items: stretch;
    width: 100%;
    gap: 0.75rem;
  }

  .branch {
    flex-direction: column;
    align-items: center;
    padding: 1.9rem 0.5rem 0.5rem;
    border: 1px dashed #fed7aa;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.55);
  }

  .branch::before {
    display: none;
  }

  .branch-tag {
    top: 0.45rem;
    inset-inline-start: 0.6rem;
  }

  .add-branch {
    position: static;
    align-self: center;
  }

  .picker {
    width: min(220px, 70vw);
  }
}
</style>