/* nodoWA - Custom Styling System (White & Purple Light Theme) */

:root {
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* ── Backgrounds ────────────────────────────────────────────── */
  --bg-base:         #e2e8f0;
  --bg-workspace:    #f1f5f9;
  --bg-sidebar:      rgba(255, 255, 255, 0.92);
  --bg-card:         rgba(255, 255, 255, 0.75);
  --bg-card-hover:   rgba(255, 255, 255, 0.85);
  --bg-input:        #ffffff;
  --bg-input-focus:  #ffffff;

  /* Derived surface tints — used for headers, panels, overlays */
  --bg-header:          rgba(255, 255, 255, 0.97);
  --bg-header-alt:      rgba(255, 255, 255, 0.45);
  --bg-node-header:     rgba(255, 255, 255, 0.65);
  --bg-node-body:       rgba(255, 255, 255, 0.50);
  --bg-overlay:         rgba(15, 23, 42, 0.30);
  --bg-overlay-heavy:   rgba(0, 0, 0, 0.45);
  --bg-console:         rgba(15, 23, 42, 0.95);
  --bg-console-header:  #0f172a;
  --bg-shortcut-key:    rgba(0, 0, 0, 0.05);
  --bg-dialog:          #ffffff;
  --bg-modal:           #ffffff;
  --bg-footer:          #fafafa;
  --bg-danger-zone:     rgba(244, 63, 94, 0.04);
  --bg-webhook-token:   rgba(124, 58, 237, 0.04);
  --bg-whs-header:      linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  --bg-scrollbar:       rgba(0, 0, 0, 0.08);
  --bg-scrollbar-hover: rgba(0, 0, 0, 0.15);

  /* ── Borders ────────────────────────────────────────────────── */
  --border-color:   rgba(15, 23, 42, 0.14);
  --border-hover:   rgba(124, 58, 237, 0.3);
  --border-focus:   #7c3aed;
  --border-node:    rgba(0, 0, 0, 0.04);
  --border-port:    #ffffff;

  /* ── Text ───────────────────────────────────────────────────── */
  --text-main:       #0f172a;
  --text-muted:      #475569;
  --text-dimmed:     #64748b;
  --text-heading:    #1e1b4b;
  --text-logo:       linear-gradient(135deg, #1e1b4b 20%, #7c3aed 100%);
  --text-console:    #e2e8f0;
  --text-console-time:    #64748b;
  --text-console-muted:   #94a3b8;
  --text-whs-title:  #92400e;
  --text-whs-sub:    #b45309;

  /* ── Accents ────────────────────────────────────────────────── */
  --accent-purple:        #7c3aed;
  --accent-purple-glow:   rgba(124, 58, 237, 0.12);
  --accent-cyan:          #06b6d4;
  --accent-cyan-glow:     rgba(6, 182, 212, 0.12);
  --accent-emerald:       #10b981;
  --accent-emerald-glow:  rgba(16, 185, 129, 0.12);
  --accent-amber:         #f59e0b;
  --accent-amber-glow:    rgba(245, 158, 11, 0.12);
  --accent-rose:          #f43f5e;
  --accent-rose-glow:     rgba(244, 63, 94, 0.12);

  /* Node execution colors (not theme-dependent, but switchable) */
  --accent-blue:          #3b82f6;
  --accent-blue-glow:     rgba(59, 130, 246, 0.2);

  /* ── Layout ─────────────────────────────────────────────────── */
  --header-height:   48px;
  --sidebar-width:   220px;
  --inspector-width: 260px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast:   0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Canvas dot grid ─────────────────────────────────────────── */
  --dot-color: rgba(15, 23, 42, 0.28);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-base);
  color: var(--text-main);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
}

/* App Container */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

/* Header */
.app-header {
  height: var(--header-height);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-header);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}

.logo-text {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  background: var(--text-logo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-sub {
  color: var(--accent-purple);
  -webkit-text-fill-color: var(--accent-purple);
}

.flow-selector-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.control-select {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-family);
  font-size: 0.8rem;
  cursor: pointer;
  max-width: 140px;
  outline: none;
  transition: var(--transition-fast);
}

.control-select:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

/* Header Center */
.header-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Inline rename input (hidden by default, shown on pencil click) */
.flow-rename-input {
  background: var(--bg-input);
  border: 1px solid var(--border-focus);
  color: var(--text-main);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
  width: 160px;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-purple-glow);
  margin-left: 8px;
}

.flow-rename-input.hidden {
  display: none;
}

.save-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 12px;
  background: var(--bg-card);
}

.save-status .status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transition: background var(--transition-fast);
}

.save-status.saved .status-dot {
  background: var(--accent-emerald);
  box-shadow: 0 0 4px var(--accent-emerald);
}

.save-status.unsaved .status-dot {
  background: var(--accent-amber);
  box-shadow: 0 0 4px var(--accent-amber);
}

.save-status.saving .status-dot {
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
}

.save-status .status-text {
  color: var(--text-muted);
}

/* Buttons */
.icon-button {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.icon-button:hover:not(:disabled) {
  background: var(--accent-purple-glow);
  color: var(--accent-purple);
  border-color: var(--border-hover);
}

.icon-button:active:not(:disabled) {
  transform: scale(0.95);
}

.icon-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.action-button {
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.action-button.primary {
  background: var(--accent-purple);
  color: white;
}

.action-button.primary:hover {
  background: color-mix(in srgb, var(--accent-purple) 80%, black);
  box-shadow: 0 2px 8px var(--accent-purple-glow);
}

.action-button.run {
  background: var(--accent-emerald);
  color: white;
}

.action-button.run:hover {
  background: color-mix(in srgb, var(--accent-emerald) 80%, black);
  box-shadow: 0 2px 8px var(--accent-emerald-glow);
}

.action-button.secondary {
  background: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-muted);
}

.action-button.secondary:hover {
  background: var(--bg-workspace);
  color: var(--text-main);
  border-color: var(--border-hover);
}

.action-button.danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--accent-rose) 30%, transparent);
  color: var(--accent-rose);
  padding: 6px;
}

.action-button.danger:hover {
  background: var(--accent-rose);
  color: white;
}

.action-button.deploy {
  background: var(--bg-base);
  border-color: var(--border-color);
  color: var(--text-muted);
}

.action-button.deploy:hover {
  background: var(--bg-base);
  color: var(--text-main);
}

.action-button.deploy.deployed {
  background: var(--accent-emerald) !important;
  color: white !important;
  border-color: transparent;
}

.action-button.deploy.deployed:hover {
  background: color-mix(in srgb, var(--accent-emerald) 80%, black) !important;
  box-shadow: 0 2px 8px var(--accent-emerald-glow);
}

.action-button:active {
  transform: scale(0.97);
}

.divider {
  width: 1px;
  height: 16px;
  background: var(--border-color);
}

.zoom-value {
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 32px;
  text-align: center;
}

/* Workspace Layout */
.app-workspace {
  display: flex;
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Sidebar Palette */
.sidebar-palette {
  width: var(--sidebar-width);
  border-right: 1px solid var(--border-color);
  background: var(--bg-header);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.sidebar-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-header-alt);
}

.sidebar-header h3 {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.015em;
  color: var(--text-heading);
}

.sidebar-header .subtitle {
  font-size: 0.72rem;
  color: var(--text-dimmed);
  margin-top: 2px;
}

.palette-groups {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.palette-group-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding-left: 6px;
}

.palette-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Draggable Node Item in Palette */
.palette-node-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
  transition: all var(--transition-fast);
}

.palette-node-item:hover {
  background: var(--bg-modal);
  border-color: var(--border-focus);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px var(--accent-purple-glow);
}

.palette-node-item:active {
  cursor: grabbing;
}

.palette-node-item .node-icon-wrapper {
  width: 22px;
  height: 22px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.palette-node-item .node-label {
  font-size: 0.78rem;
  font-weight: 500;
}

/* Canvas Container */
.canvas-container {
  flex: 1;
  position: relative;
  background-color: var(--bg-workspace);
  overflow: hidden;
  /* Crisp and defined dot grid modeled after n8n */
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  cursor: grab;
  touch-action: none; /* let JS handle all touch events — prevents browser scroll/zoom conflicts */
}

.canvas-container:active {
  cursor: grabbing;
}

/* Canvas Content Workspace */
.canvas-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  pointer-events: none;
}

/* SVGs & Connections */
.connection-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

/* Animated flowing connectors */
.connection-line {
  stroke-width: 2.5px;
  stroke-dasharray: 8 4;
  animation: connection-flow 1.2s linear infinite;
  cursor: pointer;
  pointer-events: auto;
  will-change: stroke-dashoffset;
}

.connection-line:hover {
  stroke-width: 4px;
}

.connection-line.selected {
  stroke-width: 4px;
  stroke: var(--accent-purple) !important;
  filter: drop-shadow(0 0 3px var(--accent-purple));
}

@keyframes connection-flow {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

.connection-line-back {
  fill: none;
  stroke: transparent;
  stroke-width: 12px;
  cursor: pointer;
  pointer-events: auto;
}

.temp-connection-path {
  stroke: var(--accent-purple);
  stroke-width: 2.5px;
  stroke-dasharray: 6 4;
  visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(0 0 3px var(--accent-purple));
}

/* Nodes Wrapper */
.nodes-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Node Card (transparent wrapper — visuals live on header+body) */
.node-card {
  position: absolute;
  width: 200px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  cursor: move;
  overflow: visible;
  z-index: 2;
  transition: z-index var(--transition-fast);
  touch-action: none; /* allow JS to handle touch drag without browser interference */
  -webkit-user-select: none;
  user-select: none;
}

.node-card:hover {
  z-index: 4;
}

.node-card.selected {
  z-index: 5;
}

.node-card:hover .node-card-header,
.node-card:hover .node-card-body {
  border-color: var(--node-color);
  box-shadow: 0 4px 10px var(--node-glow);
}
.node-card:hover .node-card-header {
  border-bottom-color: var(--border-node);
}

.node-card.selected .node-card-header,
.node-card.selected .node-card-body {
  border-color: var(--node-color);
}
.node-card.selected .node-card-header {
  border-bottom-color: var(--border-node);
}
.node-card.selected .node-card-body {
  box-shadow: 0 0 0 1px var(--node-color), 0 4px 14px var(--node-glow);
}

/* Node Header */
.node-card-header {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-node-header);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-node);
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.node-card-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.node-card-title-area {
  flex: 1;
  min-width: 0;
}

.node-card-title {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-heading);
}

.node-card-type {
  font-size: 0.65rem;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Node Body */
.node-card-body {
  padding: 8px 10px;
  font-size: 0.72rem;
  color: var(--text-muted);
  word-break: break-word;
  background: var(--bg-node-body);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.node-card-description {
  max-height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Code node body expands to show a preview of the actual code */
.node-card-description.code-preview {
  max-height: 72px;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.65rem;
  color: var(--text-dimmed);
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(0,0,0,0.03);
  border-radius: 4px;
  padding: 4px 6px;
}

/* Node Ports at the Bottom of Card */
.node-card-ports {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  margin-top: auto;
  background: transparent;
  border: none;
  border-top: none;
}

.ports-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ports-section.inputs {
  align-items: flex-start;
}

.ports-section.outputs {
  align-items: flex-end;
  margin-left: auto;
}

.port-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  overflow: visible;
}

.port-wrapper.input-port-wrapper {
  flex-direction: row;
}

.port-wrapper.output-port-wrapper {
  flex-direction: row;
}

.port-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  pointer-events: none;
  white-space: nowrap;
}

/* Colorful Port Dots with Thick White Outline */
.port {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--node-color);
  border: 2px solid var(--border-port);
  box-shadow: 0 0 0 1px var(--border-color), 0 2px 4px rgba(0, 0, 0, 0.15);
  cursor: crosshair;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  pointer-events: auto;
  z-index: 10;
  flex-shrink: 0;
  /* Invisible hit-area expansion via pseudo-element */
  position: relative;
}

/* Large invisible hit-target around each port — makes connecting much easier */
.port::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
}

.port:hover {
  transform: scale(1.4);
  background: var(--node-color);
  border-color: var(--border-port);
  box-shadow: 0 0 8px var(--node-glow);
}

.port.connected {
  background: var(--node-color);
  border-color: rgba(255,255,255,0.7);
}

/* Node Types Theming */
.node-trigger {
  --node-color: var(--accent-amber);
  --node-glow: var(--accent-amber-glow);
}

.node-action {
  --node-color: var(--accent-purple);
  --node-glow: var(--accent-purple-glow);
}

.node-logic {
  --node-color: var(--accent-cyan);
  --node-glow: var(--accent-cyan-glow);
}

.node-ai {
  --node-color: var(--accent-emerald);
  --node-glow: var(--accent-emerald-glow);
}

.node-utility {
  --node-color: var(--accent-rose);
  --node-glow: var(--accent-rose-glow);
}

/* Right Config Inspector Sidebar */
.sidebar-config {
  width: var(--inspector-width);
  border-left: 1px solid var(--border-color);
  background: var(--bg-header);
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: transform var(--transition-normal);
}

/* Allow text selection inside the config panel */
.sidebar-config,
.sidebar-config * {
  user-select: text;
  -webkit-user-select: text;
}
/* Re-disable on interactive controls that shouldn't be selectable */
.sidebar-config button,
.sidebar-config label,
.sidebar-config select,
.sidebar-config .config-section-label,
.sidebar-config .form-label {
  user-select: none;
  -webkit-user-select: none;
}

.sidebar-config.collapsed {
  transform: translateX(100%);
  position: absolute;
  right: 0;
  height: calc(100vh - var(--header-height));
}

.header-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-button {
  background: transparent;
  border: none;
  color: var(--text-dimmed);
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px;
  transition: var(--transition-fast);
}

.close-button:hover {
  color: var(--text-main);
}

.config-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160px;
  text-align: center;
  color: var(--text-dimmed);
  gap: 8px;
}

.empty-state p {
  font-size: 0.72rem;
  max-width: 160px;
}

/* Reactive Forms in Inspector */
.form-group {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-control {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-main);
  padding: 6px 10px;
  font-family: var(--font-family);
  font-size: 0.78rem;
  outline: none;
  transition: var(--transition-fast);
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.form-control:hover {
  border-color: rgba(124, 58, 237, 0.4);
}

.form-control:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px var(--accent-purple-glow);
}

textarea.form-control {
  resize: none; /* disable native tiny handle — we use a custom one */
  min-height: 72px;
  padding-bottom: 18px; /* room for custom resize handle */
}

/* Make the native resize handle bigger and more visible */
textarea.form-control::-webkit-resizer {
  width: 16px;
  height: 16px;
  background: transparent;
  cursor: se-resize;
}

/* Custom resize handle — a visible draggable strip at the bottom */
.textarea-resize-wrapper {
  position: relative;
  width: 100%;
}

.textarea-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.04));
  transition: background var(--transition-fast);
  user-select: none;
}

.textarea-resize-handle:hover {
  background: linear-gradient(to bottom, transparent, var(--accent-purple-glow));
}

.textarea-resize-handle::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--border-color);
  transition: background var(--transition-fast);
}

.textarea-resize-handle:hover::after {
  background: var(--accent-purple);
}

/* Floating Shortcuts Overlay */
.canvas-shortcuts-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-shortcut);
  backdrop-filter: blur(6px);
  padding: 8px 10px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.shortcut-item {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.shortcut-item span {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: monospace;
  font-weight: bold;
}

/* Context Menu */
.context-menu {
  position: fixed;
  background: var(--bg-card-hover);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  min-width: 140px;
  padding: 4px 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.context-menu.hidden {
  display: none;
}

.context-menu-item {
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.context-menu-item:hover {
  background: var(--accent-purple-glow);
  color: var(--accent-purple);
}

.context-menu-item.danger {
  color: var(--accent-rose);
}

.context-menu-item.danger:hover {
  background: rgba(244, 63, 94, 0.06);
  color: var(--accent-rose);
}

.context-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 3px 0;
}

/* Dialog Overlay */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  transition: opacity var(--transition-fast);
}

.dialog-overlay.hidden {
  display: none;
}

.dialog-card {
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  width: 360px;
  max-width: 90%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.dialog-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-heading);
}

.dialog-body {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.4;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dialog-button {
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}

.dialog-button.secondary {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-muted);
}

.dialog-button.secondary:hover {
  background: var(--bg-card);
  color: var(--text-main);
}

.dialog-button.primary {
  background: var(--accent-purple);
  color: white;
}

.dialog-button.primary:hover {
  background: color-mix(in srgb, var(--accent-purple) 80%, black);
}

/* Toast Notification */
.toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3000;
  pointer-events: none;
}

.toast {
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  padding: 10px 16px;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  max-width: 320px;
  animation: toast-slide-in var(--transition-normal);
  pointer-events: auto;
}

.toast-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-success {
  border-left: 4px solid var(--accent-emerald);
}
.toast-success .toast-icon {
  color: var(--accent-emerald);
}

.toast-error {
  border-left: 4px solid var(--accent-rose);
}
.toast-error .toast-icon {
  color: var(--accent-rose);
}

.toast-info {
  border-left: 4px solid var(--accent-purple);
}
.toast-info .toast-icon {
  color: var(--accent-purple);
}

.toast-message {
  font-size: 0.78rem;
  color: var(--text-main);
  font-weight: 500;
  flex: 1;
}

.toast-close {
  color: var(--text-dimmed);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  background: none;
  border: none;
}

.toast-close:hover {
  color: var(--text-main);
}

/* Animations */
@keyframes pulse-glow {
  from {
    box-shadow: 0 0 3px var(--accent-cyan);
  }
  to {
    box-shadow: 0 0 9px var(--accent-cyan);
  }
}


@keyframes toast-slide-in {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-scrollbar);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bg-scrollbar-hover);
}

/* Node Execution Visuals */
.node-card.node-running {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.35);
}

.node-card.node-success {
  border-color: var(--accent-emerald) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.node-card.node-error {
  border-color: var(--accent-rose) !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.4);
  animation: node-shake 0.4s ease-in-out;
}

@keyframes node-pulse-blue {
  0% { box-shadow: 0 0 4px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 14px rgba(59, 130, 246, 0.6); }
  100% { box-shadow: 0 0 4px rgba(59, 130, 246, 0.2); }
}

@keyframes node-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* Floating Console Tray */
.execution-console {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  width: 580px;
  max-width: 90%;
  height: 180px;
  background: var(--bg-console);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  font-family: 'Courier New', Courier, monospace;
  opacity: 0;
  pointer-events: none;
}

.execution-console.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.console-header {
  height: 34px;
  background: var(--bg-console-header);
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
  border-bottom: 1px solid var(--border-color);
}

.console-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-console-muted);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-family);
}

.console-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.console-icon-button {
  background: transparent;
  border: none;
  color: var(--text-dimmed);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 3px;
  transition: var(--transition-fast);
}

.console-icon-button:hover {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
}

.console-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  color: var(--text-console);
  font-size: 0.75rem;
  line-height: 1.4;
}

.console-body .log-row {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
  align-items: flex-start;
  animation: toast-slide-in 0.15s ease-out;
}

.console-body .log-time {
  color: var(--text-dimmed);
  flex-shrink: 0;
}

.console-body .log-msg {
  word-break: break-all;
  white-space: pre-wrap;
}

.console-body .log-row.success .log-msg {
  color: #34d399;
}

.console-body .log-row.error .log-msg {
  color: #f87171;
}

.console-body .log-row.info .log-msg {
  color: #38bdf8;
}

.console-empty-state {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmed);
  font-style: italic;
  font-family: var(--font-family);
  font-size: 0.75rem;
  text-align: center;
}

/* ═══════════════════════════════════════
   WEBHOOK SIMULATOR MODAL
   ═══════════════════════════════════════ */
.whs-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay-heavy);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2500;
  animation: toast-slide-in 0.2s ease-out;
}

.whs-overlay.hidden {
  display: none;
}

.whs-modal {
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.2), 0 8px 16px -8px rgba(0, 0, 0, 0.1);
  width: 520px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.whs-header {
  background: var(--bg-whs-header);
  border-bottom: 1px solid var(--border-color);
  padding: 16px 20px 14px;
}

.whs-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-whs-title);
  margin-bottom: 4px;
}

.whs-subtitle {
  font-size: 0.72rem;
  color: var(--text-whs-sub);
  font-family: 'Courier New', monospace;
  background: var(--accent-amber-glow);
  border: 1px solid color-mix(in srgb, var(--accent-amber) 35%, transparent);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
  margin-top: 2px;
}

.whs-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.whs-row {
  display: flex;
  gap: 12px;
}

.whs-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.whs-field.half {
  flex: 1;
}

.whs-label-hint {
  font-size: 0.65rem;
  color: var(--accent-amber);
  font-weight: 400;
}

.whs-textarea {
  min-height: 120px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  resize: vertical;
}

.whs-textarea-sm {
  min-height: 52px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  resize: vertical;
}

.whs-footer {
  border-top: 1px solid var(--border-color);
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg-footer);
}

/* ═══════════════════════════════════════
   CONFIG SEPARATORS & WEBHOOK ELEMENTS STYLE
   ═══════════════════════════════════════ */

/* Section separators in config-panel */
.config-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-purple);
  margin: 18px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-hover);
  display: flex;
  align-items: center;
}

/* Webhook token & URL display styles */
.wh-token-row, .wh-url-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 6px 8px;
  margin-top: 4px;
}

.wh-token-row {
  background: var(--bg-webhook-token);
  border-color: rgba(124, 58, 237, 0.15);
}

.wh-token-input {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--accent-purple);
  background: transparent;
  border: none;
  flex: 1;
  width: 100%;
  outline: none;
  cursor: text;
}

.wh-url-row {
  margin-top: 6px;
}

.wh-url-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-dimmed);
  user-select: none;
}

.wh-url-input {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  flex: 1;
  width: 100%;
  outline: none;
  cursor: text;
}

.wh-copy-btn, .wh-regen-btn {
  background: transparent;
  border: none;
  color: var(--text-dimmed);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.wh-copy-btn:hover, .wh-regen-btn:hover {
  background: var(--accent-purple-glow);
  color: var(--accent-purple);
}

.wh-copy-btn:active {
  transform: scale(0.9);
}

.wh-regen-btn:active {
  transform: rotate(45deg) scale(0.9);
}

/* ═══════════════════════════════════════
   WHATSAPP CONNECTIONS MODAL
   ═══════════════════════════════════════ */
.wa-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay-heavy);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2400;
  animation: toast-slide-in 0.2s ease-out;
}
.wa-overlay.hidden {
  display: none;
}
.wa-modal {
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.2), 0 8px 16px -8px rgba(0, 0, 0, 0.1);
  width: 780px;
  max-width: 95vw;
  height: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-family);
}
.wa-header {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wa-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-purple);
}
.wa-close-btn {
  background: transparent;
  border: none;
  color: var(--text-dimmed);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.wa-close-btn:hover {
  background: var(--bg-card);
  color: var(--text-main);
}
.wa-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.wa-sidebar {
  width: 220px;
  border-right: 1px solid var(--border-color);
  background: var(--bg-footer);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.wa-sidebar-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}
.wa-sidebar-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dimmed);
  letter-spacing: 0.05em;
}
.wa-session-list {
  list-style: none;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wa-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}
.wa-session-item:hover {
  background: var(--bg-webhook-token);
  color: var(--accent-purple);
}
.wa-session-item.active {
  background: var(--accent-purple-glow);
  color: var(--accent-purple);
  font-weight: 600;
}
.wa-status-badge {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.wa-status-badge.connected {
  background: var(--accent-emerald-glow);
  color: var(--accent-emerald);
}
.wa-status-badge.disconnected {
  background: var(--accent-rose-glow);
  color: var(--accent-rose);
}
.wa-status-badge.connecting {
  background: var(--accent-cyan-glow);
  color: var(--accent-cyan);
}
.wa-status-badge.qr {
  background: var(--accent-amber-glow);
  color: var(--accent-amber);
}

/* Orphan session countdown shown in sidebar */
.wa-orphan-countdown {
  font-size: 0.58rem;
  color: var(--accent-amber);
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.wa-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-modal);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  /* Allow text selection inside the WA modal content */
  user-select: text;
  -webkit-user-select: text;
}
/* Re-disable on interactive controls */
.wa-content button,
.wa-content label,
.wa-content select,
.wa-content .wa-pane-title,
.wa-content .wa-pane-subtitle,
.wa-content h4 {
  user-select: none;
  -webkit-user-select: none;
}
/* Explicitly allow monospace variable names to be selectable */
.wa-content .wa-mapper-var,
.wa-content td,
.wa-content code {
  user-select: text;
  -webkit-user-select: text;
}
.wa-pane {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wa-pane-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 8px;
}
.wa-pane-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-pane-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.wa-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}
.wa-info-label {
  color: var(--text-dimmed);
  min-width: 80px;
}
.wa-info-value {
  font-weight: 600;
}
.wa-setup-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  text-align: center;
  gap: 12px;
}
.wa-qr-container {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 12px;
  background: var(--bg-modal);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.wa-qr-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wa-pairing-code-display {
  font-family: monospace;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 4px;
  color: var(--accent-purple);
  background: rgba(124, 58, 237, 0.05);
  border: 1px dashed rgba(124, 58, 237, 0.25);
  padding: 10px 20px;
  border-radius: var(--border-radius-md);
  margin-top: 8px;
  text-transform: uppercase;
}

.wa-groups-list {
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-footer);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wa-group-item {
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
}
.wa-group-item:nth-child(even) {
  background: var(--bg-card);
}
.wa-group-id {
  font-family: monospace;
  color: var(--text-dimmed);
}

.wa-mapper-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}
.wa-mapper-table th, .wa-mapper-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.wa-mapper-table th {
  font-weight: 700;
  color: var(--text-dimmed);
  background: var(--bg-footer);
}
.wa-mapper-var {
  font-family: monospace;
  background: rgba(0,0,0,0.04);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--text-main);
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.wa-mapper-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 0.72rem;
  outline: none;
  font-family: monospace;
}
.wa-mapper-input:focus {
  border-color: var(--accent-purple);
}

/* ── HTTP KV Table (query params) ──────────────────────────── */
.http-kv-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.http-kv-row .form-control {
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  padding: 4px 7px;
  height: 28px;
}
.http-kv-eq {
  font-size: 0.75rem;
  color: var(--text-dimmed);
  flex-shrink: 0;
}
.http-kv-del {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-dimmed);
  border-radius: var(--border-radius-sm);
  transition: color 0.15s, background 0.15s;
}
.http-kv-del:hover {
  color: var(--accent-rose);
  background: rgba(239,68,68,0.08);
}

.wa-action-btn-group {
  display: flex;
  gap: 8px;
}

/* Config Panel Section Label */
.config-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-purple);
  margin-top: 18px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-color);
  opacity: 0.85;
}

/* Switch Case Editor Styles */
.switch-case-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  animation: panel-fade-in 0.2s ease-out;
}

.switch-case-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent-cyan);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--border-radius-sm);
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(6, 182, 212, 0.2);
}

.switch-case-input {
  flex: 1;
}

.switch-case-delete {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-dimmed);
  width: 26px;
  height: 26px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.switch-case-delete:hover {
  background: rgba(244, 63, 94, 0.05);
  border-color: color-mix(in srgb, var(--accent-rose) 30%, transparent);
  color: var(--accent-rose);
}

.switch-add-case-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--accent-cyan);
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  margin-top: 8px;
  transition: all var(--transition-fast);
}

.switch-add-case-btn:hover {
  background: rgba(6, 182, 212, 0.05);
  transform: translateY(-1px);
}

.switch-add-case-btn:active {
  transform: translateY(0);
}

/* Webhook Token/URL Layouts (Premium styling) */
.wh-token-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.wh-token-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-main);
  padding: 6px 10px;
  font-family: monospace;
  font-size: 0.75rem;
  outline: none;
  transition: var(--transition-fast);
}

.wh-token-input:hover {
  border-color: rgba(124, 58, 237, 0.4);
}

.wh-token-input:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px var(--accent-purple-glow);
}

.wh-regen-btn, .wh-copy-btn {
  background: white;
  border: 1px solid var(--border-color);
  color: var(--text-dimmed);
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.wh-regen-btn:hover, .wh-copy-btn:hover {
  border-color: rgba(124, 58, 237, 0.4);
  color: var(--accent-purple);
  background: rgba(124, 58, 237, 0.02);
}

.wh-url-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  padding: 4px 6px;
  border-radius: var(--border-radius-sm);
  margin-top: 4px;
}

.wh-url-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dimmed);
  text-transform: uppercase;
}

.wh-url-input {
  flex: 1;
  background: transparent;
  border: none;
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  outline: none;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes panel-fade-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════
   TRANSFORMER (ASSEMBLER) PROPERTIES EDITOR
   ═══════════════════════════════════════ */
.asm-instruction-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 8px;
  margin-bottom: 8px;
  animation: panel-fade-in 0.15s ease-out;
}

.asm-instruction-row:hover {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.01);
}

.asm-row-header {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: space-between;
  width: 100%;
}

.asm-row-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}

.asm-index-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dimmed);
  background: var(--bg-card);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Op select dropdown styling and categories */
.asm-op-select {
  font-weight: 700;
  font-size: 0.72rem;
  padding: 2px 4px;
  height: 24px;
  border-radius: 3px;
  width: 95px; /* Widened to fit Spanish translated labels */
  cursor: pointer;
  border: 1px solid transparent;
  outline: none;
  transition: var(--transition-fast);
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-shrink: 0;
}

.asm-op-select:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Operation colors */
.asm-op-set {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}
.asm-op-add {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}
.asm-op-sub {
  background: rgba(244, 63, 94, 0.08) !important;
  color: #e11d48 !important;
  border-color: rgba(244, 63, 94, 0.25) !important;
}
.asm-op-mul {
  background: rgba(245, 158, 11, 0.08) !important;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}
.asm-op-div {
  background: rgba(6, 182, 212, 0.08) !important;
  color: #0891b2 !important;
  border-color: rgba(6, 182, 212, 0.25) !important;
}
.asm-op-mod {
  background: rgba(124, 58, 237, 0.08) !important;
  color: #7c3aed !important;
  border-color: rgba(124, 58, 237, 0.25) !important;
}
.asm-op-len {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #2563eb !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}
.asm-op-slice {
  background: rgba(249, 115, 22, 0.08) !important;
  color: #ea580c !important;
  border-color: rgba(249, 115, 22, 0.25) !important;
}
.asm-op-upper, .asm-op-lower {
  background: rgba(59, 130, 246, 0.08) !important;
  color: #2563eb !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}
.asm-op-trim {
  background: rgba(107, 114, 128, 0.08) !important;
  color: #4b5563 !important;
  border-color: rgba(107, 114, 128, 0.25) !important;
}
.asm-op-round {
  background: rgba(236, 72, 153, 0.08) !important;
  color: #db2777 !important;
  border-color: rgba(236, 72, 153, 0.25) !important;
}
.asm-op-rand {
  background: rgba(251, 191, 36, 0.10) !important;
  color: #b45309 !important;
  border-color: rgba(251, 191, 36, 0.30) !important;
}
.asm-op-rotate {
  background: rgba(20, 184, 166, 0.10) !important;
  color: #0d9488 !important;
  border-color: rgba(20, 184, 166, 0.30) !important;
}

/* Textarea for ROTATE text template */
.asm-valB-textarea {
  display: none;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 3px;
  outline: none;
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  width: 100%;
  min-height: 48px;
  max-height: 120px;
  resize: vertical;
  color: var(--text-main);
  margin-top: 4px;
  line-height: 1.4;
}
.asm-valB-textarea:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}

/* noNewline toggle for ROTATE */
.asm-no-newline-row {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  margin-top: 4px;
  padding: 2px 0;
}
.asm-no-newline-check {
  width: 13px;
  height: 13px;
  cursor: pointer;
  accent-color: #0d9488;
}

/* Monospaced inputs for assembly registers style */
.asm-dest-input, .asm-valA-input, .asm-valB-input {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 6px;
  height: 24px;
  border-radius: 3px;
  outline: none;
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  width: 100%;
}

.asm-dest-input {
  width: 75px; /* Widened slightly */
  flex-shrink: 0;
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.02);
}

.asm-dest-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.asm-valA-input, .asm-valB-input {
  flex: 1;
  color: var(--text-main);
}

.asm-valA-input:focus, .asm-valB-input:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}

.asm-eq-sign {
  font-weight: 700;
  color: var(--text-dimmed);
  font-size: 0.75rem;
  margin: 0 2px;
  user-select: none;
}

.asm-operator-sign {
  font-weight: 700;
  color: var(--text-dimmed);
  font-size: 0.72rem;
  margin: 0 2px;
  user-select: none;
  min-width: 10px;
  text-align: center;
}

.asm-delete-btn {
  background: transparent;
  border: none;
  color: var(--text-dimmed);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.asm-delete-btn:hover {
  background: rgba(244, 63, 94, 0.08);
  color: var(--accent-rose);
}

.asm-delete-btn:active {
  transform: scale(0.9);
}

.asm-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-top: 4px;
}

.asm-add-btn:hover {
  background: var(--bg-webhook-token);
  border-color: var(--border-hover);
  color: var(--accent-purple);
}

.asm-add-btn:active {
  transform: scale(0.98);
}

/* Variables Toolbox (Caja de Variables) styles */
.variables-toolbox {
  margin-top: 24px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all var(--transition-fast);
}

.variables-toolbox:hover {
  border-color: var(--border-hover);
}

.toolbox-header {
  padding: 10px 12px;
  background: rgba(124, 58, 237, 0.03);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-heading);
}

.toolbox-header svg {
  color: var(--accent-purple);
}

.toolbox-chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
  color: var(--text-dimmed) !important;
}

.toolbox-body {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  transition: max-height var(--transition-normal) ease-in-out, padding var(--transition-normal);
}

.toolbox-body.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
  overflow: hidden;
  gap: 0;
}

.toolbox-help-text {
  font-size: 0.68rem;
  color: var(--text-dimmed);
  line-height: 1.3;
  margin: 0;
}

.toolbox-category {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toolbox-category-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.toolbox-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.toolbox-badge {
  background: var(--accent-purple-glow);
  border: 1px solid rgba(124, 58, 237, 0.15);
  color: var(--accent-purple);
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-family: monospace;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-fast);
}

.toolbox-badge:hover {
  background: var(--accent-purple);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.2);
}

.toolbox-badge.accent-green {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
}

.toolbox-badge.accent-green:hover {
  background: var(--accent-emerald);
  color: white;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

.toolbox-badge.accent-cyan {
  background: rgba(6, 182, 212, 0.06);
  border-color: rgba(6, 182, 212, 0.15);
  color: var(--accent-cyan);
}

.toolbox-badge.accent-cyan:hover {
  background: var(--accent-cyan);
  color: white;
  box-shadow: 0 2px 6px rgba(6, 182, 212, 0.2);
}

.toolbox-badge.copied {
  background: var(--accent-emerald) !important;
  color: white !important;
  border-color: transparent !important;
  animation: badge-copied-pulse 0.4s ease;
}

@keyframes badge-copied-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}





/* ── Profile Widget ────────────────────────────────────────────────────────── */
#profile-widget-container {
  position: relative;
}

.profile-widget {
  position: relative;
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 3px 8px 3px 4px;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-main);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  height: 30px;
}
.profile-trigger:hover {
  background: var(--accent-purple-glow);
  border-color: var(--border-hover);
}

.profile-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.profile-avatar-fallback {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-purple);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-name {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown */
.profile-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  box-shadow: 0 8px 24px var(--bg-overlay);
  min-width: 220px;
  z-index: 9999;
  overflow: hidden;
}
.profile-dropdown.hidden { display: none; }

.profile-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--accent-purple-glow);
}
.profile-dd-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.profile-dd-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-purple);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-dd-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.profile-dd-email {
  font-size: 0.7rem;
  color: var(--text-dimmed);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.profile-dropdown-divider {
  height: 1px;
  background: var(--border-color);
}

.profile-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.8rem;
  color: var(--text-main);
  text-align: left;
  transition: background var(--transition-fast);
}
.profile-dd-item:hover { background: var(--bg-card-hover); }
.profile-dd-item.danger { color: var(--accent-rose); }
.profile-dd-item.danger:hover { background: var(--bg-danger-zone); }


/* ── Settings Modal ──────────────────────────────────────────────────────────── */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay-heavy);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  animation: toast-slide-in 0.18s ease-out;
}

.settings-modal {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.25);
  width: 540px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  flex-shrink: 0;
}

.settings-header-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-close-btn {
  background: transparent;
  border: none;
  color: var(--text-dimmed);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  transition: var(--transition-fast);
}
.settings-close-btn:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text-main);
}

.settings-body {
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Section */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dimmed);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.settings-section-label.danger {
  color: var(--accent-rose);
}

/* Profile row */
.settings-profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 12px 14px;
}
.settings-profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.settings-profile-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-purple);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-profile-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-profile-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-profile-email {
  font-size: 0.72rem;
  color: var(--text-dimmed);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Theme grid */
.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}

.settings-theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 8px 6px 10px;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: var(--font-family);
}
.settings-theme-card:hover {
  border-color: var(--accent-purple);
}
.settings-theme-card.active {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px var(--accent-purple-glow);
}

/* Mini preview inside each theme card */
.settings-theme-preview {
  width: 72px;
  height: 46px;
  border-radius: 5px;
  border: 1px solid;
  overflow: hidden;
  display: flex;
  position: relative;
}
.stp-sidebar {
  width: 22px;
  height: 100%;
  border-right: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.stp-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px;
}
.stp-node {
  width: 80%;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.08);
  opacity: 0.9;
}
.stp-node-2 {
  width: 55%;
}

.settings-theme-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

/* Danger zone */

.settings-danger-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.settings-delete-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent-rose) 50%, transparent);
  color: var(--accent-rose);
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  align-self: flex-start;
}
.settings-delete-account-btn:hover {
  background: var(--accent-rose);
  color: white;
  border-color: var(--accent-rose);
}

/* ═══════════════════════════════════════════════════════════════
   AI NODE — SLIDER & ADVANCED ACCORDION
   ═══════════════════════════════════════════════════════════════ */

/* Slider track */
.ai-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border-color);
  outline: none;
  cursor: pointer;
  margin-top: 6px;
  accent-color: var(--accent-purple);
}

.ai-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-purple);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
  transition: box-shadow 0.15s ease;
}

.ai-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.25);
}

.ai-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--accent-purple);
  cursor: pointer;
}

/* Value badge next to label */
.ai-slider-value {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-purple);
  background: rgba(124, 58, 237, 0.1);
  border-radius: 4px;
  padding: 1px 6px;
  min-width: 28px;
  text-align: center;
}

/* Advanced accordion */
.ai-advanced-accordion {
  margin-top: 4px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.ai-advanced-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: none;
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease, background 0.15s ease;
}

.ai-advanced-toggle:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

.ai-advanced-toggle svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ai-advanced-toggle.open svg {
  transform: rotate(180deg);
}

.ai-advanced-body {
  padding: 10px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-modal);
}

.ai-advanced-body .form-group {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CODE EDITOR NODE
   ═══════════════════════════════════════════════════════════════ */

.code-editor-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.code-editor-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code-editor-copy-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  color: var(--text-dimmed);
  cursor: pointer;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  transition: var(--transition-fast);
}
.code-editor-copy-btn:hover {
  color: var(--accent-emerald);
  border-color: var(--accent-emerald);
}

/* The actual textarea — tall, monospace, dark background */
.code-editor-textarea {
  font-family: 'Courier New', 'Consolas', 'Monaco', monospace !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  min-height: 240px !important;
  max-height: 520px !important;
  resize: vertical !important;
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,0.08) !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 10px 12px !important;
  tab-size: 2 !important;
  white-space: pre !important;
  overflow-x: auto !important;
  word-break: normal !important;
  word-wrap: normal !important;
  caret-color: #7c3aed;
}

.code-editor-textarea:focus {
  border-color: rgba(124, 58, 237, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15) !important;
}

.code-editor-textarea::selection {
  background: rgba(124, 58, 237, 0.35);
}

/* Quick reference accordion */
.code-editor-ref {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.code-editor-ref-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: none;
  padding: 6px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}
.code-editor-ref-toggle:hover { color: var(--text-main); }
.code-editor-ref-toggle svg { flex-shrink: 0; }
.code-editor-ref-toggle.open svg { color: var(--accent-purple); }

.code-editor-ref-body {
  background: #0f172a;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.code-ref-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.code-ref-title {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c3aed;
}

.code-ref-pre {
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  color: #94a3b8;
  white-space: pre;
  overflow-x: auto;
  line-height: 1.5;
  margin: 0;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 3px;
  border-left: 2px solid rgba(124,58,237,0.3);
  cursor: pointer;
  transition: border-color 0.15s;
}
.code-ref-pre:hover {
  border-left-color: var(--accent-purple);
  color: #cbd5e1;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR RESIZE HANDLES
   ═══════════════════════════════════════════════════════════════ */

.sidebar-resize-handle {
  position: absolute;
  top: 0;
  width: 5px;
  height: 100%;
  z-index: 50;
  cursor: col-resize;
  transition: background 0.15s ease;
  /* Invisible by default, shows on hover */
  background: transparent;
}

.sidebar-resize-handle--right {
  right: 0;
  border-right: 2px solid transparent;
}

.sidebar-resize-handle--left {
  left: 0;
  border-left: 2px solid transparent;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
  background: rgba(124, 58, 237, 0.15);
}

.sidebar-resize-handle--right:hover,
.sidebar-resize-handle--right.dragging {
  border-right-color: var(--accent-purple);
}

.sidebar-resize-handle--left:hover,
.sidebar-resize-handle--left.dragging {
  border-left-color: var(--accent-purple);
}

/* Make sidebars position:relative so the handle positions correctly */
.sidebar-palette,
.sidebar-config {
  position: relative;
  /* Override fixed widths — now controlled by JS inline style */
  min-width: 160px;
  max-width: 480px;
  /* Smooth resize */
  transition: width 0s; /* no transition during drag, instant */
}

/* Prevent text selection while dragging */
body.sidebar-resizing {
  user-select: none !important;
  cursor: col-resize !important;
}
body.sidebar-resizing * {
  cursor: col-resize !important;
}

/* ── Code editor: copy AI context button ── */
.code-editor-ctx-btn {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 3px;
  color: var(--accent-purple);
  cursor: pointer;
  padding: 3px 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.63rem;
  font-weight: 600;
  font-family: var(--font-family);
  transition: var(--transition-fast);
  white-space: nowrap;
}
.code-editor-ctx-btn:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: var(--accent-purple);
}

/* ── Flow Execution Console ─────────────────────────────────────────────────── */

/* Toggle button */
.console-toggle-btn {
  position: fixed; bottom: 20px; right: 20px; z-index: 1000;
  width: 42px; height: 42px; border-radius: 50%;
  background: #10b981; color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(16,185,129,0.45);
  transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
  font-family: monospace; font-size: 0.8rem; font-weight: 700;
}
.console-toggle-btn:hover { transform: scale(1.1); }
.console-toggle-btn.has-error    { background: #ef4444; box-shadow: 0 4px 14px rgba(239,68,68,0.5); animation: console-pulse-err 1s infinite; }
.console-toggle-btn.has-activity { background: #38bdf8; box-shadow: 0 4px 14px rgba(56,189,248,0.5); }

@keyframes console-pulse-err {
  0%,100% { box-shadow: 0 4px 14px rgba(239,68,68,0.5); }
  50%      { box-shadow: 0 4px 24px rgba(239,68,68,0.8); }
}

/* Panel */
.flow-console {
  position: fixed; bottom: 74px; right: 20px;
  width: 560px; height: 380px; z-index: 999;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.15);
  display: flex; flex-direction: column; overflow: hidden;
  min-width: 320px; min-height: 160px;
}
.flow-console.hidden { display: none; }

/* Custom resize handles */
.console-resize-handle {
  position: absolute;
  z-index: 10;
}
/* Top edge */
.console-resize-handle.n  { top: 0; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
/* Left edge */
.console-resize-handle.w  { left: 0; top: 8px; bottom: 8px; width: 6px; cursor: w-resize; }
/* Top-left corner */
.console-resize-handle.nw { top: 0; left: 0; width: 14px; height: 14px; cursor: nw-resize; border-radius: 12px 0 0 0; }
/* Top-right corner */
.console-resize-handle.ne { top: 0; right: 0; width: 14px; height: 14px; cursor: ne-resize; border-radius: 0 12px 0 0; }
/* Bottom-left corner */
.console-resize-handle.sw { bottom: 0; left: 0; width: 14px; height: 14px; cursor: sw-resize; border-radius: 0 0 0 12px; }
/* Bottom-right corner — most common, make it bigger */
.console-resize-handle.se {
  bottom: 0; right: 0; width: 18px; height: 18px; cursor: se-resize;
  border-radius: 0 0 12px 0;
}
/* Visible grip dots on the SE corner */
.console-resize-handle.se::after {
  content: '';
  position: absolute;
  bottom: 4px; right: 4px;
  width: 8px; height: 8px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.25) 1.5px, transparent 1.5px);
  background-size: 4px 4px;
}

/* Header */
.flow-console-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: move; user-select: none; flex-shrink: 0;
  border-radius: 12px 12px 0 0;
}
.flow-console-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.76rem; font-weight: 700;
  color: var(--text-heading);
  letter-spacing: 0.03em;
}
.console-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.console-status-dot.connected    { background: #10b981; box-shadow: 0 0 7px #10b981; }
.console-status-dot.disconnected { background: #475569; }
.console-status-dot.error        { background: #ef4444; box-shadow: 0 0 7px #ef4444; }

.flow-console-actions { display: flex; gap: 3px; }
.console-btn {
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  padding: 3px 6px; border-radius: 5px;
  display: flex; align-items: center;
  transition: color 0.1s, background 0.1s;
}
.console-btn:hover { color: var(--text-main); background: rgba(0,0,0,0.06); }
.console-btn:hover { color: #e2e8f0; background: rgba(255,255,255,0.07); }

/* Body */
.flow-console-body {
  flex: 1; overflow-y: auto; padding: 6px 8px;
  font-family: 'Outfit', ui-monospace, monospace;
  font-size: 0.72rem; line-height: 1.65;
  color: var(--text-main);
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.flow-console-body::-webkit-scrollbar { width: 4px; }
.flow-console-body::-webkit-scrollbar-track { background: transparent; }
.flow-console-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }

/* Separator */
.cl-separator {
  height: 1px; background: rgba(255,255,255,0.06);
  margin: 6px 0;
}

/* Base line */
.cl-line {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 5px; padding: 2px 4px; border-radius: 4px;
  transition: background 0.1s;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.cl-line:hover { background: rgba(0,0,0,0.04); }
.cl-line.err   { background: rgba(239,68,68,0.08); }
.cl-line.var   { }
.cl-line.sys   { opacity: 0.6; }

/* Timestamp */
.cl-time {
  color: var(--text-dimmed); font-size: 0.63rem; flex-shrink: 0;
  min-width: 78px; letter-spacing: 0.02em;
}

/* Flow start/end badges */
.cl-badge {
  font-size: 0.62rem; font-weight: 800; padding: 1px 6px;
  border-radius: 4px; flex-shrink: 0; letter-spacing: 0.06em;
}
.flow-start-badge   { background: rgba(6,182,212,0.12);  color: #0369a1; }
.flow-end-ok-badge  { background: rgba(16,185,129,0.12); color: #065f46; }
.flow-end-err-badge { background: rgba(239,68,68,0.12);  color: #b91c1c; }
.cl-flow-label { color: #0369a1; font-weight: 600; }
.cl-flow-ok    { color: #065f46; font-weight: 600; }
.cl-flow-err   { color: #b91c1c; font-weight: 600; flex: 1; }

/* Node lines */
.cl-node-icon  { font-size: 0.82rem; flex-shrink: 0; }
.cl-node-type  { font-weight: 700; font-size: 0.68rem; flex-shrink: 0; }
.cl-node-label { color: var(--text-muted); flex-shrink: 0; }
.cl-running    { color: var(--text-dimmed); font-style: italic; font-size: 0.66rem; }
.cl-err-msg    { color: #b91c1c; font-weight: 600; flex: 1; }

/* Port */
.cl-port { font-size: 0.68rem; font-weight: 700; flex-shrink: 0; }
.cl-port.ok { color: var(--text-muted); }

/* Output data preview */
.cl-preview {
  display: inline-flex; flex-wrap: wrap; gap: 3px;
  color: var(--text-muted); font-size: 0.65rem;
  background: rgba(0,0,0,0.04);
  padding: 1px 6px; border-radius: 4px;
  max-width: 100%;
}
.cl-preview-key  { color: #0369a1; }
.cl-preview-colon{ color: var(--text-dimmed); }
.cl-preview-val  { color: #065f46; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-preview-more { color: var(--text-dimmed); font-style: italic; }

/* Variable lines */
.cl-var-icon  { color: #c2410c; flex-shrink: 0; font-weight: 800; }
.cl-var-scope { font-size: 0.63rem; font-weight: 700; flex-shrink: 0; border-radius: 3px; padding: 0 4px; background: rgba(0,0,0,0.06); color: var(--text-muted); }
.cl-var-name  { color: var(--text-heading); font-weight: 600; flex-shrink: 0; }
.cl-var-eq    { color: var(--text-dimmed); flex-shrink: 0; }
.cl-var-val   { flex: 1; word-break: break-all; color: var(--text-main); }
.cl-str  { color: #065f46; }
.cl-num  { color: #7c3aed; }
.cl-bool { color: #c2410c; }
.cl-obj  { color: #0369a1; }
.cl-null { color: var(--text-dimmed); font-style: italic; }

/* Info / system lines */
.cl-info-dot { color: var(--text-dimmed); flex-shrink: 0; }
.cl-info-msg { color: var(--text-muted); flex: 1; }
.cl-sys-msg  { color: var(--text-dimmed); flex: 1; }
.cl-sys-msg b { color: var(--text-muted); }


/* ═══════════════════════════════════════════════════════════════
   CANVAS EXECUTION VISUALIZER — node & connection live animation
   ═══════════════════════════════════════════════════════════════ */

/* ── Visualizer toggle button in console header ── */
.console-viz-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
  display: flex; align-items: center; gap: 5px;
  font-size: 0.67rem; font-weight: 700;
  font-family: var(--font-family);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.console-viz-btn:hover { color: var(--text-main); background: rgba(0,0,0,0.05); border-color: var(--border-hover); }
.console-viz-btn.active {
  color: var(--accent-purple);
  border-color: var(--accent-purple);
  background: var(--accent-purple-glow);
  box-shadow: 0 0 6px var(--accent-purple-glow);
}
.console-viz-btn svg { flex-shrink: 0; }

/* ── Node card execution states (live, from visualizer) ── */

/* Running — sustained blue pulse */
.node-card.viz-running .node-card-header,
.node-card.viz-running .node-card-body {
  border-color: #3b82f6 !important;
  transition: border-color 0.2s;
}
.node-card.viz-running {
  animation: viz-pulse-running 1s ease-in-out infinite;
  z-index: 6 !important;
}
@keyframes viz-pulse-running {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(59,130,246,0.7)) drop-shadow(0 0 2px rgba(59,130,246,0.5)); }
  50%       { filter: drop-shadow(0 0 14px rgba(59,130,246,1))  drop-shadow(0 0 6px rgba(59,130,246,0.8)); }
}

/* Success — burst then slow fade over full duration */
.node-card.viz-success .node-card-header,
.node-card.viz-success .node-card-body {
  border-color: #10b981 !important;
  transition: border-color 0.25s;
}
.node-card.viz-success {
  animation: viz-flash-success 2.8s ease-out forwards;
}
@keyframes viz-flash-success {
  0%   { filter: drop-shadow(0 0 20px rgba(16,185,129,1))   drop-shadow(0 0 8px rgba(16,185,129,0.9)); }
  15%  { filter: drop-shadow(0 0 24px rgba(16,185,129,0.95)) drop-shadow(0 0 10px rgba(16,185,129,1)); }
  60%  { filter: drop-shadow(0 0 10px rgba(16,185,129,0.6)) drop-shadow(0 0 4px rgba(16,185,129,0.5)); }
  100% { filter: drop-shadow(0 0 3px rgba(16,185,129,0.15)); }
}

/* Error — shake + glow fade */
.node-card.viz-error .node-card-header,
.node-card.viz-error .node-card-body {
  border-color: #ef4444 !important;
  transition: border-color 0.2s;
}
.node-card.viz-error {
  animation: viz-shake-error 0.45s ease-in-out, viz-glow-error 4s ease-out forwards;
}
@keyframes viz-shake-error {
  0%,100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@keyframes viz-glow-error {
  0%   { filter: drop-shadow(0 0 20px rgba(239,68,68,1))   drop-shadow(0 0 8px rgba(239,68,68,0.9)); }
  30%  { filter: drop-shadow(0 0 14px rgba(239,68,68,0.8)) drop-shadow(0 0 6px rgba(239,68,68,0.7)); }
  100% { filter: drop-shadow(0 0 3px rgba(239,68,68,0.15)); }
}

/* Dim — nodes not yet touched */
.node-card.viz-dim {
  opacity: 0.38;
  filter: saturate(0.2) brightness(1.05);
  transition: opacity 0.35s ease, filter 0.35s ease;
}
/* Smooth undim when class removed */
.node-card {
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* ── Port pulse when node has no outgoing connection ── */
.port.viz-port-success {
  animation: viz-port-success 2.8s ease-out forwards;
  transform: scale(1.6) !important;
}
.port.viz-port-error {
  animation: viz-port-error 4s ease-out forwards;
  transform: scale(1.6) !important;
}
@keyframes viz-port-success {
  0%   { box-shadow: 0 0 0 4px rgba(16,185,129,0.9), 0 0 16px rgba(16,185,129,0.8); }
  50%  { box-shadow: 0 0 0 6px rgba(16,185,129,0.7), 0 0 20px rgba(16,185,129,0.6); }
  100% { box-shadow: 0 0 0 1px rgba(16,185,129,0.1); transform: scale(1) !important; }
}
@keyframes viz-port-error {
  0%   { box-shadow: 0 0 0 4px rgba(239,68,68,0.9), 0 0 16px rgba(239,68,68,0.8); background: #ef4444 !important; }
  50%  { box-shadow: 0 0 0 6px rgba(239,68,68,0.7), 0 0 20px rgba(239,68,68,0.6); }
  100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.1); transform: scale(1) !important; }
}

/* ── SVG connection animation states ── */

/* Active connection — bright traveling pulse */
.connection-line.viz-active {
  stroke: #a78bfa !important;
  stroke-width: 3px !important;
  stroke-dasharray: 12 6;
  filter: drop-shadow(0 0 6px rgba(167,139,250,0.9));
  animation: viz-conn-flow 0.5s linear infinite;
}

/* Port-colored connections — fade out over their full duration */
.connection-line.viz-output  { stroke: #10b981 !important; stroke-width: 2.5px !important; filter: drop-shadow(0 0 5px rgba(16,185,129,0.7));  animation: viz-conn-settle 2.4s ease-out forwards; }
.connection-line.viz-true    { stroke: #10b981 !important; stroke-width: 2.5px !important; filter: drop-shadow(0 0 5px rgba(16,185,129,0.7));  animation: viz-conn-settle 2.4s ease-out forwards; }
.connection-line.viz-false   { stroke: #ef4444 !important; stroke-width: 2.5px !important; filter: drop-shadow(0 0 5px rgba(239,68,68,0.7));   animation: viz-conn-settle 2.4s ease-out forwards; }
.connection-line.viz-error   { stroke: #f87171 !important; stroke-width: 2.5px !important; filter: drop-shadow(0 0 6px rgba(248,113,113,0.8)); animation: viz-conn-settle 2.4s ease-out forwards; stroke-dasharray: 6 4; }
.connection-line.viz-match   { stroke: #34d399 !important; stroke-width: 2.5px !important; filter: drop-shadow(0 0 5px rgba(52,211,153,0.7));  animation: viz-conn-settle 2.4s ease-out forwards; }
.connection-line.viz-no_match{ stroke: #f87171 !important; stroke-width: 2.5px !important; filter: drop-shadow(0 0 4px rgba(248,113,113,0.6)); animation: viz-conn-settle 2.4s ease-out forwards; }
.connection-line.viz-timeout { stroke: #facc15 !important; stroke-width: 2.5px !important; filter: drop-shadow(0 0 5px rgba(250,204,21,0.7));  animation: viz-conn-settle 2.4s ease-out forwards; }

/* Faded connections not part of this execution path */
.connection-line.viz-idle {
  opacity: 0.15;
  stroke: #94a3b8 !important;
  filter: none !important;
  animation: none !important;
  stroke-dasharray: 8 4;
  transition: opacity 0.3s;
}

@keyframes viz-conn-flow {
  from { stroke-dashoffset: 30; }
  to   { stroke-dashoffset: 0; }
}

/* Connection fades from bright to transparent over its duration */
@keyframes viz-conn-settle {
  0%   { opacity: 1; stroke-width: 3px; }
  35%  { opacity: 1; stroke-width: 2.5px; }
  100% { opacity: 0; }
}

/* ── Traveling dot along active connection ── */
.viz-travel-dot {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px currentColor;
  will-change: transform, opacity;
}