:root {
    --bg-main: #0f172a;
    --panel-bg: #1e293b;
    --border: #334155;
    --accent: #38bdf8;
    --active-green: #22c55e;
    --text: #f8fafc;
    --text-muted: #94a3b8;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', sans-serif; background: #0b0f19; color: var(--text); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

  header { height: 55px; background: var(--panel-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 10; }
  .project-bar { display: flex; align-items: center; gap: 8px; }
  select, input, button { background: #0f172a; border: 1px solid var(--border); color: white; padding: 6px 12px; border-radius: 6px; font-size: 13px; outline: none; }
  button { cursor: pointer; transition: all 0.2s; font-weight: 500; }
  button.primary { background: var(--accent); color: #0f172a; font-weight: bold; border: none; }
  button.danger { background: #ef4444; border: none; color: white; }

  .layout { display: grid; grid-template-columns: 1fr 340px; height: calc(100vh - 55px); }

  /*#canvas-container { position: relative; overflow: auto; background-color: #0b1120; background-image: radial-gradient(#1e293b 1px, transparent 1px); background-size: 24px 24px; }
  #flow-svg { position: absolute; top: 0; left: 0; width: 4000px; height: 4000px; pointer-events: none; }*/
  
  #canvas-container {
      position: relative;
      overflow: hidden; /* Menggantikan overflow: auto agar Pan manual bekerja mulus */
      background-color: #0b1120;
      background-image: radial-gradient(#1e293b 1px, transparent 1px);
      background-size: 24px 24px;
      user-select: none;
      cursor: grab;
    }
    
    #canvas-container.panning {
      cursor: grabbing;
    }
    
    /* Transform Target untuk Zoom & Pan */
    #canvas-workspace {
      position: absolute;
      top: 0;
      left: 0;
      width: 5000px;
      height: 5000px;
      transform-origin: 0 0;
    }
    
    #flow-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    
    /* Floating Zoom Buttons */
    .zoom-controls {
      position: absolute;
      bottom: 20px;
      left: 20px;
      z-index: 100;
      display: flex;
      gap: 6px;
      background: rgba(30, 41, 59, 0.9);
      padding: 6px;
      border-radius: 8px;
      border: 1px solid var(--border);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
    
    .zoom-controls button {
      min-width: 32px;
      height: 32px;
      padding: 0 8px;
      font-weight: bold;
    }
  
  /* =========================================================
   FLOWCHART NODE
   ========================================================= */

.canvas-node {
  position: absolute;
  width: max-content;
  min-width: 100px;
  height: auto;
  min-height: 50px;
  padding: 7px 10px;
  color: white;
  cursor: move;
  user-select: none;
  z-index: 2;
  font-size: 13px;
  text-align: center;

  /* Flexbox untuk memastikan Label di atas dan ID di bawah */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px; 

  /* ================================== */
  /* EFEK 3D GLASSMORPHISM DIMULAI      */
  /* ================================== */
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.85); /* Dibuat transparan agar blur bekerja */
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15); /* Border mengkilap tipis */
  
  /* Rahasia Bevel 3D */
  box-shadow: 
    0 10px 20px -5px rgba(0, 0, 0, 0.8),       /* Drop Shadow Luar */
    inset 0 2px 3px rgba(255, 255, 255, 0.25), /* Pantulan Cahaya Atas */
    inset 0 -4px 6px rgba(0, 0, 0, 0.5);       /* Bayangan Gelap Bawah */
    
  transition: transform 0.2s ease, border-color 0.15s, box-shadow 0.15s, filter 0.15s;
}

/* Efek Terangkat (Hover) saat disentuh mouse */
.canvas-node:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 25px -5px rgba(0, 0, 0, 0.95), 
    inset 0 2px 3px rgba(255, 255, 255, 0.35), 
    inset 0 -4px 6px rgba(0, 0, 0, 0.6);
}

/* Card Utama Node */
.ivr-node {
  position: absolute;
  width: 260px;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  color: #f8fafc;
  font-family: inherit;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  user-select: none;
  cursor: move;
}

/* Header Spesifik Per Tipe Node */
.ivr-node .node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.node-type-announce .node-header { background: #3b1f13; } /* Cokelat/Orange */
.node-type-menu .node-header     { background: #0c2a4a; } /* Biru Navy */
.node-type-start .node-header    { background: #064e3b; } /* Hijau */
.node-type-end .node-header      { background: #4c0519; } /* Merah Tua */

/* Badge ID Node (#id_node) */
.node-id-badge {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 8px;
  border-radius: 12px;
  color: #94a3b8;
  font-family: monospace;
}

/* Isi Body Node */
.node-body {
  padding: 10px 12px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Badge Preview File Audio */
.audio-badge {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Deretan Tombol DTMF (Tipe Menu) */
.dtmf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
}

.dtmf-key {
  background: #0f172a;
  border: 1px solid #475569;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}

/* Socket / Output Port (Titik Garis) */
.output-port {
  width: 10px;
  height: 10px;
  background: #38bdf8;
  border: 2px solid #0f172a;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

/* ---------------------------------------------------------
   TEXT DI DALAM NODE
   --------------------------------------------------------- */

.canvas-node .node-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  pointer-events: none;
  white-space: nowrap; /* Mencegah teks turun ke bawah (opsional, hapus jika ingin teks panjang otomatis enter) */
}

.canvas-node .node-id {
  font-size: 9px;
  color: #94a3b8;
  pointer-events: none;
  white-space: nowrap;
}

.node-anchor {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #38bdf8;
  border: 1px solid rgba(255,255,255,0.8); /* Border putih agar mengkilap */
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px #38bdf8, inset 0 1px 2px rgba(255,255,255,0.5); /* Efek Port 3D */
  transition: opacity 0.2s, transform 0.2s, background-color 0.2s, box-shadow 0.2s;
  z-index: 10;
  cursor: crosshair;
}

/* Tampilkan anchor saat Node di-hover atau dipilih */
.canvas-node:hover .node-anchor,
.canvas-node.selected .node-anchor,
.canvas-node.connecting .node-anchor {
  opacity: 1;
}

.node-anchor:hover {
  transform: scale(1.4);
  background-color: #22c55e;
}

/* Posisi 4 Anchor */
.node-anchor.port-top    { top: -6px; left: calc(50% - 6px); }
.node-anchor.port-bottom { bottom: -6px; left: calc(50% - 6px); }
.node-anchor.port-left   { left: -6px; top: calc(50% - 6px); }
.node-anchor.port-right  { right: -6px; top: calc(50% - 6px); }

/* Anchor Endpoint untuk Garis yang Sudah Terhubung */
.edge-handle {
  cursor: pointer;
  fill: #38bdf8;
  stroke: #ffffff;
  stroke-width: 1.5px;
  transition: r 0.2s, fill 0.2s;
}

.edge-handle:hover {
  r: 7;
  fill: #ef4444; /* Merah saat di-hover/siap dipindah */
}

/* ---------------------------------------------------------
   ACTIVE / SELECTED
   --------------------------------------------------------- */
.canvas-node.selected {
  border-color: #f59e0b !important;
  box-shadow: 
    0 10px 20px -5px rgba(0, 0, 0, 0.8),
    inset 0 2px 3px rgba(255, 255, 255, 0.25),
    inset 0 -4px 6px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(245,158,11,.4) !important; /* Glow Oranye */
}

.canvas-node.active {
  border-color: #22c55e !important;
  box-shadow:
    0 10px 20px -5px rgba(0, 0, 0, 0.8),
    inset 0 2px 3px rgba(255, 255, 255, 0.25),
    inset 0 -4px 6px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(34,197,94,.5),
    0 0 18px rgba(34,197,94,.75) !important; /* Glow Hijau */
}


/* =========================================================
   1. START / END
   Lingkaran
   ========================================================= */

.canvas-node.type-start,
.canvas-node.type-end {
  width: max-content;
  min-width: 80px;
  height: auto;
  min-height: 80px;
  border-radius: 50px; /* Diubah menjadi pill/kapsul agar tidak rusak jika teks panjang */
  padding: 15px 25px;
  justify-content: center;
}


/* =========================================================
   2. VALIDASI (Diamond Fleksibel Auto-Width)
   ========================================================= */

.canvas-node.type-validation {
  width: max-content;
  min-width: 120px;
  height: auto;
  min-height: 80px;
  border-radius: 0;
  border: none;
  transform: none; /* Hapus rotasi miring agar koordinat garis akurat */
  
  /* Warna border dasar */
  background: #64748b; 
  /* Bentuk belah ketupat */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  
  /* Padding yang lebar agar teks aman dari potongan sudut diamond */
  padding: 30px 45px; 
}

/* Layer untuk Fill (warna dalam diamond) */
.canvas-node.type-validation::before {
  content: "";
  position: absolute;
  /* Jarak 2px untuk memberi efek ketebalan border */
  inset: 2px; 
  background: #2e1a47; 
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  z-index: 0;
}

/* Pastikan teks berada di atas fill */
.canvas-node.type-validation .node-title,
.canvas-node.type-validation .node-id {
  transform: none; /* Hapus rotasi terbalik */
  position: relative;
  z-index: 1; 
}

/* Efek saat dipilih / simulasi menyala */
.canvas-node.type-validation.selected {
  background: #f59e0b; /* Warna border oranye */
  box-shadow: none; 
}
.canvas-node.type-validation.active {
  background: #22c55e; /* Warna border hijau */
  box-shadow: none;
}

/* =========================================================
   3. ANNOUNCE
   Rounded Rectangle
   ========================================================= */

.canvas-node.type-announce {
  width: max-content;
  min-width: 100px;
  height: auto;
  min-height: 45px;

  border-radius: 12px;

  background: #2c2719;
  border-color: #eab308;
}


/* =========================================================
   4. INPUT DATA
   Double Rectangle
   ========================================================= */

.canvas-node.type-input {
  width: max-content;
  min-width: 100px;
  height: auto;
  min-height: 45px;
  border-radius: 0;

  background-color: #152e3d !important;
  border: 1.5px solid #06b6d4;

  /* Layer 1: Menutup celah dengan warna background, Layer 2: Garis cyan luar */
  box-shadow: 
    -6px -6px 0 -1.5px #152e3d,
    -6px -6px 0 0px #06b6d4;
}

/* =========================================================
   5. DTMF / MENU
   Rectangle + tanda kecil di sudut
   ========================================================= */

.canvas-node.type-menu {
  width: max-content;
  min-width: 100px;
  height: auto;
  min-height: 45px;

  border-radius: 0;

  background: #1e2538;
  border-color: #3b82f6;
}


/* Kotak kecil di empat sudut */
.canvas-node.type-menu::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(#3b82f6, #3b82f6) left top / 9px 9px no-repeat,
    linear-gradient(#3b82f6, #3b82f6) right top / 9px 9px no-repeat,
    linear-gradient(#3b82f6, #3b82f6) left bottom / 9px 9px no-repeat,
    linear-gradient(#3b82f6, #3b82f6) right bottom / 9px 9px no-repeat;
}


/* =========================================================
   6. SCHEDULE
   Rectangle biasa
   ========================================================= */

.canvas-node.type-schedule {
  width: max-content;
  min-width: 100px;
  height: auto;
  min-height: 45px;

  border-radius: 0;

  background: #2a1b2d;
  border-color: #ec4899;
}


/* =========================================================
   7. QUEUE
   Rectangle biasa
   ========================================================= */

.canvas-node.type-queue {
  width: max-content;
  min-width: 100px;
  height: auto;
  min-height: 45px;

  border-radius: 0;

  background: #3b1d11;
  border-color: #f97316;
}


/* =========================================================
   8. CUSTOM DESTINATION
   Parallelogram
   ========================================================= */
   
.canvas-node.type-custom {
  width: max-content;
  min-width: 100px;
  height: auto;
  min-height: 45px;

  border-radius: 0;

  background: #064e3b;
  border-color: #10b981;

  clip-path: polygon(
    12% 0%,
    100% 0%,
    88% 100%,
    0% 100%
  );
}

/* =========================================================
   SUPAYA TEKS CUSTOM TETAP TERBACA
   ========================================================= */

.canvas-node.type-custom .node-title,
.canvas-node.type-custom .node-id {
  transform: none;
}


  aside { background: var(--panel-bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
  .tabs { display: flex; border-bottom: 1px solid var(--border); }
  .tab-btn { flex: 1; padding: 10px; text-align: center; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); }
  .tab-btn.active { color: var(--accent); border-bottom: 2px solid var(--accent); background: rgba(56, 189, 248, 0.05); }
  .tab-content { padding: 14px; display: none; }
  .tab-content.active { display: block; }

  .form-group { margin-bottom: 12px; }
  .form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; }
  .form-group input, .form-group select { width: 100%; }

  .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }
  .keypad button { font-size: 18px; padding: 12px; background: #334155; font-weight: bold; }
  .log-box { background: #000; color: #4ade80; font-family: monospace; font-size: 11px; padding: 8px; border-radius: 6px; height: 160px; overflow-y: auto; border: 1px solid #1e293b; }
  .status-box { background: #0f172a; padding: 10px; border-radius: 6px; border: 1px solid var(--border); margin-bottom: 10px; }

  #login-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 999; }
  .login-card { background: var(--panel-bg); border: 1px solid var(--border); border-radius: 12px; width: 340px; padding: 24px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5); }
  
  
  
  
/* Kotak Multiple Selection */
.selection-box {
  position: absolute;
  border: 1px dashed #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  z-index: 9999;
  pointer-events: none;
}


/* =========================================================
   PENYESUAIAN 3D UNTUK BENTUK KHUSUS (CLIP-PATH) & INPUT
   ========================================================= */

/* Node Validasi & Custom tidak bisa pakai box-shadow biasa karena bentuknya dipotong */
.canvas-node.type-validation,
.canvas-node.type-custom {
  box-shadow: none !important;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.6));
}

.canvas-node.type-validation:hover,
.canvas-node.type-custom:hover {
  filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.9));
}

/* Node Input (Double Rectangle) agar tidak kehilangan 3D-nya */
.canvas-node.type-input {
  box-shadow: 
    0 10px 20px -5px rgba(0, 0, 0, 0.8),
    inset 0 2px 3px rgba(255, 255, 255, 0.25),
    inset 0 -4px 6px rgba(0, 0, 0, 0.5),
    -6px -6px 0 -1.5px #152e3d,
    -6px -6px 0 0px #06b6d4 !important;
}


/* =========================================================
       MINIMAP NAVIGATOR (V2.0)
       ========================================================= */
    #minimap-container {
      position: absolute;
      bottom: 20px;
      right: 20px;
      width: 200px;
      height: 170px;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid var(--border);
      border-radius: 8px;
      z-index: 100;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
    }
    
    #minimap-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    #minimap-viewbox {
      position: absolute;
      border: 1.5px solid #38bdf8;
      background: rgba(56, 189, 248, 0.15);
      cursor: grab;
      box-sizing: border-box;
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.4); /* Efek gelap di luar layar aktif */
    }
    
    #minimap-viewbox:active {
      cursor: grabbing;
    }