/* Custom Dark Theme for Drawflow */
:root {
  --dfBackgroundColor: #050505;
  --dfBackgroundSize: 20px;
  --dfBackgroundImage: radial-gradient(#222 1px, transparent 1px);
  --dfNodeType: #111;
  --dfNodeTypeHover: #1a1a1a;
  --dfNodeTextColor: #fff;
  --dfNodeBorderColor: #333;
  --dfNodeRadius: 12px;
  --dfNodeShadow: 0 10px 25px rgba(0,0,0,0.5);
  --dfOutputBackground: #0095f6;
  --dfInputBackground: #0095f6;
  --dfOutputHover: #fff;
  --dfInputHover: #fff;
  --dfLineWidth: 3px;
  --dfLineColor: #555;
  --dfLineHoverColor: #0095f6;
  --dfDeleteColor: #ff4a4a;
}

#drawflow {
  width: 100%;
  height: 100%;
  background: var(--dfBackgroundColor);
  background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
  background-image: var(--dfBackgroundImage);
}

.drawflow .drawflow-node {
  background: var(--dfNodeType);
  border: 1px solid var(--dfNodeBorderColor);
  border-radius: var(--dfNodeRadius);
  box-shadow: var(--dfNodeShadow);
  color: var(--dfNodeTextColor);
  padding: 0;
  width: 280px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.drawflow .drawflow-node:hover {
  border-color: #555;
}

.drawflow .drawflow-node.selected {
  border-color: #0095f6;
  box-shadow: 0 0 0 2px rgba(0, 149, 246, 0.3), var(--dfNodeShadow);
}

/* Specific Node Colors based on Type */
.drawflow .drawflow-node.chat_input, .drawflow .drawflow-node.chat_output { border-top: 4px solid #fff; }
.drawflow .drawflow-node.llm { border-top: 4px solid #6366f1; } /* Indigo */
.drawflow .drawflow-node.memory { border-top: 4px solid #f59e0b; } /* Amber */
.drawflow .drawflow-node.rag { border-top: 4px solid #10b981; } /* Emerald */
.drawflow .drawflow-node.action { border-top: 4px solid #ec4899; } /* Pink */
.drawflow .drawflow-node.router { border-top: 4px solid #8b5cf6; } /* Violet */

.drawflow .drawflow-node .title-box {
  padding: 12px 16px;
  border-bottom: 1px solid #222;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawflow .drawflow-node .box {
  padding: 16px;
}

/* Form Elements inside Nodes */
.drawflow .drawflow-node input, 
.drawflow .drawflow-node select, 
.drawflow .drawflow-node textarea {
  width: 100%;
  background: #000;
  border: 1px solid #333;
  border-radius: 6px;
  color: #fff;
  padding: 8px;
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 10px;
  outline: none;
}

.drawflow .drawflow-node input:focus, 
.drawflow .drawflow-node select:focus, 
.drawflow .drawflow-node textarea:focus {
  border-color: #0095f6;
}

/* Ports (Inputs/Outputs) */
.drawflow .drawflow-node .inputs .input,
.drawflow .drawflow-node .outputs .output {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #000;
  background: var(--dfInputBackground);
  transition: transform 0.1s, background 0.1s;
}

.drawflow .drawflow-node .inputs .input:hover,
.drawflow .drawflow-node .outputs .output:hover {
  background: var(--dfInputHover);
  transform: scale(1.2);
}

/* Connection Lines */
.drawflow .connection .main-path {
  stroke: var(--dfLineColor);
  stroke-width: var(--dfLineWidth);
  transition: stroke 0.2s;
}

.drawflow .connection .main-path:hover,
.drawflow .connection.selected .main-path {
  stroke: var(--dfLineHoverColor);
}

/* Delete button */
.drawflow .drawflow-delete {
  border: 2px solid #fff;
  background: var(--dfDeleteColor);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  font-weight: bold;
}

/* Chat & Debug Overlays */
.overlay-panel {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.overlay-panel.hidden-right { transform: translateX(110%); }
.overlay-panel.hidden-bottom { transform: translateY(110%); }

/* Blinking effect for running nodes */
@keyframes nodePulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 149, 246, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(0, 149, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 149, 246, 0); }
}
.node-running {
  animation: nodePulse 1.5s infinite;
  border-color: #0095f6 !important;
}

.log-entry {
  animation: slideIn 0.2s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}