/* ================================================================
   Conductor — floating, draggable, light-themed workflow canvas
   ================================================================ */

#conductor-content { padding: 0; }

.conductor-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 120px);
    background: #ffffff;
    color: #0f172a;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.conductor-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    user-select: none;
}

.conductor-topbar h3 { margin: 0; font-size: 1rem; color: #0f172a; font-weight: 600; letter-spacing: 0.02em; }
.conductor-topbar .spacer { flex: 1; }
.conductor-topbar select, .conductor-topbar input {
    background: #ffffff; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 10px; font-size: 0.82rem;
}
.conductor-btn {
    background: #ffffff; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 12px; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; transition: all 0.15s;
}
.conductor-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.conductor-btn.primary { background: #4f46e5; border-color: #6366f1; color: #fff; }
.conductor-btn.primary:hover { background: #6366f1; }
.conductor-btn.danger { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.conductor-btn.danger:hover { background: #fee2e2; }
.conductor-btn.success { background: #ecfdf5; border-color: #86efac; color: #065f46; }
.conductor-btn.success:hover { background: #d1fae5; }

.conductor-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Palette (left) */
.conductor-palette {
    width: 180px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}
.conductor-palette .label {
    font-size: 0.68rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; margin: 6px 0 2px;
}
.palette-node {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 8px; cursor: grab;
    border: 1px solid transparent;
    font-size: 0.82rem; font-weight: 600;
    transition: transform 0.1s, box-shadow 0.15s;
    background: #ffffff;
}
.palette-node:hover { transform: translateX(2px); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1); }
.palette-node.chat       { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.palette-node.agent      { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.palette-node.controller { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.palette-node.vibe       { background: #faf5ff; color: #6b21a8; border-color: #e9d5ff; }
.palette-node.database   { background: #fef2f2; color: #991b1b; border-color: #fecaca; cursor: pointer; }

/* Canvas (center) — scroll container + inner 8000px-wide surface.
   Users can scroll horizontally through the whole working area. */
.conductor-canvas-scroll {
    flex: 1;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.conductor-canvas {
    position: relative;
    width: 8000px;
    height: 100%;
    background-image:
      radial-gradient(circle, #e2e8f0 1px, transparent 1px);
    background-size: 24px 24px;
    cursor: grab;
}
.conductor-canvas.panning { cursor: grabbing; }
.conductor-canvas svg.edges { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.conductor-canvas svg.edges path {
    fill: none; stroke: #cbd5e1; stroke-width: 2; stroke-linecap: round;
    transition: stroke 0.2s;
}
.conductor-canvas svg.edges path.active {
    stroke: url(#edge-active-gradient);
    stroke-width: 3;
    animation: edgeFlow 2s linear infinite;
}
@keyframes edgeFlow {
    0%   { stroke-dashoffset: 20; }
    100% { stroke-dashoffset: 0; }
}

.c-node {
    position: absolute; min-width: 180px; padding: 10px 12px;
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 10px;
    cursor: move; user-select: none; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    transition: border-color 0.15s, box-shadow 0.15s;
    color: #0f172a;
}
.c-node:hover { border-color: #94a3b8; }
.c-node.selected { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.2), 0 4px 14px rgba(15, 23, 42, 0.12); }
.c-node.running {
    animation: nodePulse 1.6s ease-in-out infinite;
}
.c-node.completed { border-color: #10b981; animation: nodeFlash 1.4s ease-out; }
.c-node.failed    { border-color: #dc2626; animation: nodeFlashFail 1.4s ease-out; }
@keyframes nodeFlash {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70%  { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes nodeFlashFail {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    70%  { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

@keyframes nodePulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
    50%      { box-shadow: 0 0 0 4px rgba(99,102,241,0.2), 0 4px 14px rgba(15, 23, 42, 0.12); }
}

.c-node.type-chat       { border-top: 3px solid #6366f1; }
.c-node.type-agent      { border-top: 3px solid #10b981; }
.c-node.type-controller { border-top: 3px solid #f59e0b; }
.c-node.type-vibe       { border-top: 3px solid #a855f7; }
.c-node.type-database   { border-top: 3px solid #ef4444; }

.c-node .title {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; font-weight: 700; color: #0f172a;
    margin-bottom: 4px;
}
.c-node .title .chip {
    font-size: 0.6rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; text-transform: uppercase;
    letter-spacing: 0.08em;
}
.c-node.type-chat       .chip { background: #eef2ff; color: #4338ca; }
.c-node.type-agent      .chip { background: #ecfdf5; color: #065f46; }
.c-node.type-controller .chip { background: #fffbeb; color: #92400e; }
.c-node.type-vibe       .chip { background: #faf5ff; color: #6b21a8; }
.c-node.type-database   .chip { background: #fef2f2; color: #991b1b; }
.c-node .subtitle { font-size: 0.7rem; color: #64748b; }
.c-node .spark { margin-top: 6px; height: 20px; }
.c-node .port {
    position: absolute; width: 12px; height: 12px; border-radius: 50%;
    background: #cbd5e1; border: 2px solid #ffffff; cursor: crosshair;
}
.c-node .port.left   { left:   -7px; top: 50%; transform: translateY(-50%); }
.c-node .port.right  { right:  -7px; top: 50%; transform: translateY(-50%); }
.c-node .port.top    { top:    -7px; left: 50%; transform: translateX(-50%); }
.c-node .port.bottom { bottom: -7px; left: 50%; transform: translateX(-50%); }
.c-node .port:hover { background: #6366f1; }
/* Visual differentiation: top/bottom are data-I/O (purple),
   left/right are order/control (slate default on hover). */
.c-node .port.top, .c-node .port.bottom { background: #d8b4fe; }
.c-node .port.top:hover, .c-node .port.bottom:hover { background: #a855f7; }

/* Chat-bubble toggle — built-in command chat on every Controller node.
   Fixed-size circle in the bottom-right corner. */
.c-node .cwf-node-chat-btn {
    position: absolute; bottom: 8px; right: 10px;
    width: 28px; height: 28px; border-radius: 50%; padding: 0;
    background: #6366f1; border: 1px solid #4f46e5; color: #ffffff;
    cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(15,23,42,0.2);
}
.c-node .cwf-node-chat-btn:hover { background: #4f46e5; }
.c-node .cwf-node-chat-btn i { font-size: 0.95rem; }

/* Chat modal — opens during a run for each Chat node on the canvas. */
.cwf-chat-modal {
    position: fixed; width: 420px; height: 520px;
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.2);
    display: flex; flex-direction: column; z-index: 10000;
    font-size: 0.85rem; color: #0f172a;
}
/* Regular data chats (scoped Q&A about the connected agent/vibe) are smaller
   than the Controller's command chat. */
.cwf-chat-modal.cwf-chat-compact {
    width: 300px; height: 380px;
    font-size: 0.78rem;
}
.cwf-chat-modal.cwf-chat-compact .cwf-chat-title { font-size: 0.82rem; }
.cwf-chat-modal.cwf-chat-compact .cwf-chat-compose textarea { font-size: 0.75rem; }
.cwf-chat-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid #e2e8f0;
    background: #f8fafc; border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
}
.cwf-chat-drag    { color: #94a3b8; cursor: move; user-select: none; }
.cwf-chat-title   { font-size: 0.9rem; }
.cwf-chat-badge   {
    display: inline-block; font-size: 0.6rem; font-weight: 700;
    padding: 1px 6px; border-radius: 8px; background: #fef3c7; color: #92400e;
    margin-left: 4px; letter-spacing: 0.08em;
}
.cwf-chat-modal.cwf-chat-command .cwf-chat-log { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.78rem; }
.cwf-chat-run     { font-size: 0.7rem; color: #64748b; }
.cwf-chat-mode    { display: flex; gap: 8px; font-size: 0.72rem; margin-left: auto; }
.cwf-chat-mode label { display: inline-flex; align-items: center; gap: 3px; }
.cwf-chat-model   { font-size: 0.75rem; }
.cwf-chat-close   {
    background: transparent; border: 0; font-size: 1.2rem; color: #64748b;
    cursor: pointer; padding: 0 4px; line-height: 1;
}
.cwf-chat-log     {
    flex: 1; overflow-y: auto; padding: 10px; background: #f8fafc;
    display: flex; flex-direction: column; gap: 8px;
}
.cwf-chat-msg {
    max-width: 85%; padding: 6px 10px; border-radius: 8px;
    background: #ffffff; border: 1px solid #e2e8f0;
}
.cwf-chat-msg.sender-user   { align-self: flex-end; background: #eef2ff; border-color: #c7d2fe; }
.cwf-chat-msg.sender-agent  { align-self: flex-start; background: #ecfdf5; border-color: #a7f3d0; }
.cwf-chat-msg.sender-ai     { align-self: flex-start; background: #faf5ff; border-color: #e9d5ff; }
.cwf-chat-msg.sender-system { align-self: center; background: #fff7ed; border-color: #fed7aa; font-size: 0.75rem; }
.cwf-chat-sender { font-size: 0.7rem; color: #64748b; margin-bottom: 2px; font-weight: 600; }
.cwf-chat-body   { font-size: 0.82rem; line-height: 1.35; white-space: pre-wrap; word-wrap: break-word; }
.cwf-chat-compose {
    display: flex; gap: 6px; padding: 8px; border-top: 1px solid #e2e8f0;
}
.cwf-chat-compose textarea {
    flex: 1; resize: none; padding: 6px 8px; border: 1px solid #cbd5e1;
    border-radius: 6px; font-family: inherit; font-size: 0.82rem;
}
.cwf-chat-send {
    padding: 0 14px; background: #6366f1; color: white; border: 0;
    border-radius: 6px; cursor: pointer; font-weight: 600;
}
.cwf-chat-send:hover { background: #4f46e5; }

/* Inspector (right) */
.conductor-inspector {
    width: 280px; background: #f8fafc; border-left: 1px solid #e2e8f0;
    padding: 14px; overflow-y: auto; font-size: 0.82rem;
}
.conductor-inspector h4 { margin: 0 0 10px; font-size: 0.85rem; color: #0f172a; }
.conductor-inspector label { display: block; font-size: 0.7rem; color: #64748b; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.conductor-inspector input, .conductor-inspector select, .conductor-inspector textarea {
    width: 100%; background: #ffffff; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 8px;
    font-size: 0.82rem; font-family: inherit;
}
.conductor-inspector textarea { min-height: 70px; resize: vertical; }

.conductor-inspector .params-hint {
    font-size: 0.68rem; color: #64748b; margin-top: 4px; line-height: 1.35;
}

/* Run banner */
.conductor-run-banner.just-completed {
    animation: bannerFlash 2s ease-out;
}
@keyframes bannerFlash {
    0%   { background: #d1fae5; }
    100% { background: #f8fafc; }
}
.conductor-run-banner {
    padding: 8px 14px; background: #f8fafc; border-top: 1px solid #e2e8f0;
    font-size: 0.78rem; color: #475569; display: flex; align-items: center; gap: 10px;
}
.conductor-run-banner .dot {
    width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1;
}
.conductor-run-banner.running .dot { background: #10b981; animation: dotPulse 1.2s ease-in-out infinite; }
.conductor-run-banner.failed  .dot { background: #dc2626; }
@keyframes dotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }