[x-cloak] { display: none !important; }
.msg-inbound  { background: #f3f4f6; border-radius: 0 12px 12px 12px; }
.msg-outbound { background: #ede9fe; border-radius: 12px 0 12px 12px; }
.chat-scroll  { scroll-behavior: smooth; }
.nav-item { display:flex; align-items:center; gap:0.75rem; padding:0.5rem 0.75rem; border-radius:0.5rem; font-size:0.875rem; font-weight:500; transition:background-color 0.15s,color 0.15s; width:100%; text-align:left; cursor:pointer; background:none; border:none; }
.nav-item-active { background-color:#f5f3ff; color:#6d28d9; }
.nav-item-inactive { color:#6b7280; }
.nav-item-inactive:hover { background-color:#f9fafb; color:#374151; }

/* ── DARK MODE ──────────────────────────────────────────────────────────── */
html.dark body                         { background-color:#18181b; color:#fafafa; }

/* backgrounds */
html.dark .bg-white                    { background-color:#27272a !important; }
html.dark .bg-gray-50                  { background-color:#18181b !important; }
html.dark .bg-gray-100                 { background-color:#3f3f46 !important; }
html.dark .bg-gray-200                 { background-color:#52525b !important; }

/* text */
html.dark .text-gray-900               { color:#fafafa !important; }
html.dark .text-gray-800               { color:#f4f4f5 !important; }
html.dark .text-gray-700               { color:#e4e4e7 !important; }
html.dark .text-gray-600               { color:#a1a1aa !important; }
html.dark .text-gray-500               { color:#71717a !important; }
html.dark .text-gray-400               { color:#52525b !important; }

/* borders */
html.dark .border-gray-100             { border-color:#3f3f46 !important; }
html.dark .border-gray-200             { border-color:#52525b !important; }
html.dark .border-gray-300             { border-color:#71717a !important; }
html.dark .divide-gray-200 > * + *     { border-color:#52525b !important; }

/* hover states */
html.dark .hover\:bg-gray-50:hover     { background-color:#3f3f46 !important; }
html.dark .hover\:bg-gray-100:hover    { background-color:#52525b !important; }
html.dark .hover\:text-gray-900:hover  { color:#fafafa !important; }
html.dark .hover\:text-gray-700:hover  { color:#e4e4e7 !important; }

/* inputs & textareas */
html.dark input:not([type=range]),
html.dark textarea,
html.dark select {
  background-color:#3f3f46 !important;
  border-color:#52525b !important;
  color:#fafafa !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder        { color:#71717a !important; }

/* chat area */
html.dark .msg-inbound                 { background:#ffffff !important; color:#1f2937 !important; }
html.dark .msg-outbound                { background:#f5f3ff !important; color:#6d28d9 !important; }
html.dark [style*="background:#efeae2"]{ background:#1c1c1e !important; }

/* sidebar nav */
html.dark .nav-item-inactive           { color:#a1a1aa; }
html.dark .nav-item-inactive:hover     { background-color:#3f3f46; color:#fafafa; }
html.dark .nav-item-active             { background-color:#4c1d95; color:#ede9fe; }

/* shadows */
html.dark .shadow-sm                   { box-shadow:0 1px 2px rgba(0,0,0,.6) !important; }
html.dark .shadow                      { box-shadow:0 1px 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4) !important; }
html.dark .shadow-lg                   { box-shadow:0 10px 20px rgba(0,0,0,.6),0 4px 6px rgba(0,0,0,.4) !important; }

/* striped table rows */
html.dark .even\:bg-gray-50:nth-child(even) { background-color:#27272a !important; }

/* simulator chat bg */
html.dark [style*="background:#efeae2"] { background:#1c1c1e !important; }

/* simulator message bubbles */
.sim-bubble-out { background:#ede9fe; }
html.dark .sim-bubble-out                        { background:#2d1a6e !important; }
html.dark .sim-bubble-out .text-gray-800         { color:#e9d5ff !important; }
html.dark .sim-bubble-out .text-gray-500         { color:#c4b5fd !important; }
html.dark .sim-bubble-out .text-brand-700        { color:#c4b5fd !important; }
html.dark .sim-bubble-out .text-gray-400         { color:#a78bfa !important; }
html.dark .sim-bubble-out .text-blue-600         { color:#93c5fd !important; }
html.dark .sim-bubble-out .border-blue-300       { border-color:#4b5fa8 !important; }
html.dark .sim-bubble-out .hover\:bg-blue-50:hover { background:#1e3a5f !important; }

/* ring focus */
html.dark .focus\:ring-brand-500:focus  { --tw-ring-color:rgba(139,92,246,.5); }

/* ── FLOW CANVAS ───────────────────────────────────────────────────────── */
.flow-canvas {
  position: relative;
  overflow: auto;
  background-color: #f9fafb;
  cursor: grab;
}
.flow-canvas.dragging-node { cursor: grabbing; }
.flow-canvas-inner {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

/* Grid background */
.flow-canvas-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}

/* SVG edges layer */
.flow-edges-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.flow-edges-svg path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.flow-edges-svg marker path {
  stroke-width: 1;
}

/* Flow nodes */
.flow-node {
  position: absolute;
  z-index: 2;
  width: 220px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  border: 2px solid #e5e7eb;
  cursor: pointer;
  transition: box-shadow 0.15s;
  user-select: none;
}
.flow-node:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.flow-node.selected {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.2), 0 4px 12px rgba(0,0,0,.1);
}
.flow-node.dragging {
  opacity: 0.85;
  box-shadow: 0 8px 25px rgba(0,0,0,.15);
  z-index: 10;
}

/* Node header */
.flow-node-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.flow-node-header .node-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.flow-node-header .node-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.flow-node-header .node-remove {
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.flow-node:hover .node-remove { opacity: 0.4; }
.flow-node:hover .node-remove:hover { opacity: 1; color: #ef4444; }

/* Node body */
.flow-node-body {
  padding: 8px 10px;
  font-size: 12px;
  color: #6b7280;
  min-height: 28px;
  line-height: 1.4;
}
.flow-node-body .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Node footer */
.flow-node-footer {
  padding: 5px 10px;
  border-top: 1px solid #f3f4f6;
  background: #f9fafb;
  border-radius: 0 0 10px 10px;
  font-size: 10px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 4px;
}
.flow-node-footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Node type colors */
.flow-node[data-type="SEND_MESSAGE"]   .flow-node-header { background:#eff6ff; color:#1d4ed8; border-color:#dbeafe; }
.flow-node[data-type="SEND_BUTTONS"]   .flow-node-header { background:#faf5ff; color:#7e22ce; border-color:#ede9fe; }
.flow-node[data-type="SEND_LIST"]      .flow-node-header { background:#eef2ff; color:#4338ca; border-color:#e0e7ff; }
.flow-node[data-type="COLLECT_INPUT"]  .flow-node-header { background:#fefce8; color:#a16207; border-color:#fef9c3; }
.flow-node[data-type="CONDITION"]      .flow-node-header { background:#fff7ed; color:#c2410c; border-color:#ffedd5; }
.flow-node[data-type="WEBHOOK"]        .flow-node-header { background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.flow-node[data-type="ASSIGN_QUEUE"]   .flow-node-header { background:#f0fdf4; color:#15803d; border-color:#dcfce7; }
.flow-node[data-type="ASSIGN_TAG"]     .flow-node-header { background:#fdf2f8; color:#be185d; border-color:#fce7f3; }
.flow-node[data-type="UPDATE_CONTACT"] .flow-node-header { background:#f0fdfa; color:#0f766e; border-color:#ccfbf1; }
.flow-node[data-type="WAIT"]           .flow-node-header { background:#fffbeb; color:#b45309; border-color:#fef3c7; }
.flow-node[data-type="END"]            .flow-node-header { background:#fef2f2; color:#dc2626; border-color:#fecaca; }

/* Edge colors by source type */
.edge-SEND_MESSAGE   { stroke:#3b82f6; }
.edge-SEND_BUTTONS   { stroke:#a855f7; }
.edge-SEND_LIST      { stroke:#6366f1; }
.edge-COLLECT_INPUT  { stroke:#eab308; }
.edge-CONDITION      { stroke:#f97316; }
.edge-WEBHOOK        { stroke:#6b7280; }
.edge-ASSIGN_QUEUE   { stroke:#22c55e; }
.edge-ASSIGN_TAG     { stroke:#ec4899; }
.edge-UPDATE_CONTACT { stroke:#14b8a6; }
.edge-WAIT           { stroke:#f59e0b; }
.edge-END            { stroke:#ef4444; }

/* Canvas drop zone highlight */
.flow-canvas.drop-highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed #a78bfa;
  border-radius: 8px;
  pointer-events: none;
  z-index: 20;
}

/* Palette categories */
.palette-category { margin-bottom: 4px; }
.palette-category-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  padding: 4px 8px 2px;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-bottom: 4px;
  cursor: grab;
  font-size: 12px;
  color: #374151;
  background: white;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  user-select: none;
}
.palette-item:hover {
  border-color: #c4b5fd;
  background: #f5f3ff;
  box-shadow: 0 1px 3px rgba(139,92,246,.1);
}
.palette-item:active { cursor: grabbing; }
.palette-item .pi-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.palette-item .pi-label { font-weight: 500; }

/* Zoom controls */
.zoom-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}
.zoom-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  color: #374151;
  transition: background 0.15s, border-color 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.zoom-btn:hover { background: #f5f3ff; border-color: #c4b5fd; }

/* Canvas stats */
.canvas-stats {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-size: 10px;
  color: #9ca3af;
  background: rgba(255,255,255,.9);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  z-index: 10;
}

/* Dark mode overrides for canvas */
html.dark .flow-canvas { background-color: #18181b; }
html.dark .flow-canvas-inner::before { background-image: radial-gradient(circle, #3f3f46 1px, transparent 1px); }
html.dark .flow-node { background: #27272a; border-color: #3f3f46; }
html.dark .flow-node.selected { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.2), 0 4px 12px rgba(0,0,0,.3); }
html.dark .flow-node-body { color: #a1a1aa; }
html.dark .flow-node-footer { background: #18181b; border-color: #3f3f46; color: #71717a; }
html.dark .palette-item { background: #27272a; border-color: #3f3f46; color: #e4e4e7; }
html.dark .palette-item:hover { background: #4c1d95; border-color: #7c3aed; }
html.dark .zoom-btn { background: #27272a; border-color: #3f3f46; color: #e4e4e7; }
html.dark .zoom-btn:hover { background: #4c1d95; }
html.dark .canvas-stats { background: rgba(24,24,27,.9); border-color: #3f3f46; }