/* =========================================
   ADVANCED PIPELINE ANIMATION (v3 - Responsive Grid)
   ========================================= */

/* --- Layout Adjustment --- */
.pipeline-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: 
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 90% at center, black 60%, transparent 100%);
    pointer-events: none;
    overflow: hidden;
}

.pipeline-canvas {
    position: relative;
    width: 900px;
    height: 600px;
    transform-origin: center right;
    margin-right: -50px;
    transform: scale(0.6);
}

@media (min-width: 768px) {
    .pipeline-canvas { transform: scale(0.7); margin-right: 0; }
}

@media (min-width: 1024px) {
    .pipeline-canvas { transform: scale(0.8); margin-right: 3%; }
}

@media (min-width: 1400px) {
    .pipeline-canvas { transform: scale(0.9); margin-right: 5%; }
}

@media (min-width: 1800px) {
    .pipeline-canvas { transform: scale(1.0); margin-right: 8%; }
}


/* --- SVG Connections --- */
.pipeline-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.conn-line {
    fill: none;
    stroke: var(--palette-grey-300);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.4;
    transition: stroke 0.6s ease, opacity 0.6s ease;
}

/* Animated path glow as dot travels */
.conn-line.path-1 {
    animation: line-glow-1 15s infinite;
}
.conn-line.path-2 {
    animation: line-glow-2 15s infinite;
}
.conn-line.path-3 {
    animation: line-glow-3 15s infinite;
}
.conn-line.path-4 {
    animation: line-glow-4 15s infinite;
}
.conn-line.path-5 {
    animation: line-glow-5 15s infinite;
}
.conn-line.path-6 {
    animation: line-glow-6 15s infinite;
}

@keyframes line-glow-1 {
    0%, 5% { stroke: #2196F3; opacity: 0.8; stroke-width: 3; }
    12%, 100% { stroke: var(--palette-grey-300); opacity: 0.4; stroke-width: 2.5; }
}
@keyframes line-glow-2 {
    0%, 19% { stroke: var(--palette-grey-300); opacity: 0.4; }
    20%, 25% { stroke: #9C27B0; opacity: 0.8; stroke-width: 3; }
    30%, 100% { stroke: var(--palette-grey-300); opacity: 0.4; stroke-width: 2.5; }
}
@keyframes line-glow-3 {
    0%, 39% { stroke: var(--palette-grey-300); opacity: 0.4; }
    40%, 43% { stroke: #7C4DFF; opacity: 0.8; stroke-width: 3; }
    48%, 100% { stroke: var(--palette-grey-300); opacity: 0.4; stroke-width: 2.5; }
}
@keyframes line-glow-4 {
    0%, 54% { stroke: var(--palette-grey-300); opacity: 0.4; }
    56%, 60% { stroke: #00BCD4; opacity: 0.8; stroke-width: 3; }
    65%, 100% { stroke: var(--palette-grey-300); opacity: 0.4; stroke-width: 2.5; }
}
@keyframes line-glow-5 {
    0%, 70% { stroke: var(--palette-grey-300); opacity: 0.4; }
    72%, 78% { stroke: #4CAF50; opacity: 0.8; stroke-width: 3; }
    82%, 100% { stroke: var(--palette-grey-300); opacity: 0.4; stroke-width: 2.5; }
}
@keyframes line-glow-6 {
    0%, 70% { stroke: var(--palette-grey-300); opacity: 0.4; }
    72%, 78% { stroke: #FF9800; opacity: 0.8; stroke-width: 3; }
    82%, 100% { stroke: var(--palette-grey-300); opacity: 0.4; stroke-width: 2.5; }
}

/* --- Moving Dot (Single Packet Visuals) --- */
.conn-dot {
    fill: var(--palette-blue-600);
    filter: drop-shadow(0 0 6px var(--palette-blue-400));
    r: 6;
    offset-rotate: auto;
    opacity: 0;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* 
   PATH COORDINATES (Based on 1000x600 Canvas):
*/

/* Dot 1: Webhook -> Code */
.dot-1 {
    offset-path: path("M 210 105 L 330 105");
    animation-name: seq-dot-1;
}
@keyframes seq-dot-1 {
    0% { offset-distance: 0%; opacity: 1; }
    12% { offset-distance: 100%; opacity: 1; }
    12.1% { opacity: 0; }
    100% { opacity: 0; }
}

/* Dot 2: Code -> AI */
.dot-2 {
    offset-path: path("M 510 105 L 630 105");
    animation-name: seq-dot-2;
}
@keyframes seq-dot-2 {
    0% { opacity: 0; }
    20% { offset-distance: 0%; opacity: 1; }
    30% { offset-distance: 100%; opacity: 1; }
    30.1% { opacity: 0; }
    100% { opacity: 0; }
}

/* Dot 3: AI -> API (Down) */
.dot-3 {
    offset-path: path("M 720 155 L 720 250");
    animation-name: seq-dot-3;
}
@keyframes seq-dot-3 {
    0% { opacity: 0; }
    40% { offset-distance: 0%; opacity: 1; }
    48% { offset-distance: 100%; opacity: 1; }
    48.1% { opacity: 0; }
    100% { opacity: 0; }
}

/* Dot 4: API -> Condition */
.dot-4 {
    offset-path: path("M 630 300 L 470 300");
    animation-name: seq-dot-4;
}
@keyframes seq-dot-4 {
    0% { opacity: 0; }
    56% { offset-distance: 0%; opacity: 1; }
    65% { offset-distance: 100%; opacity: 1; }
    65.1% { opacity: 0; }
    100% { opacity: 0; }
}

/* Dot 5: Condition -> CRM */
.dot-5 {
    offset-path: path("M 370 350 C 320 380, 240 420, 190 460");
    animation-name: seq-dot-5;
}
@keyframes seq-dot-5 {
    0% { opacity: 0; }
    72% { offset-distance: 0%; opacity: 1; }
    82% { offset-distance: 100%; opacity: 1; }
    82.1% { opacity: 0; }
    100% { opacity: 0; }
}

/* Dot 6: Condition -> SMS */
.dot-6 {
    offset-path: path("M 430 350 C 480 380, 580 420, 630 460");
    animation-name: seq-dot-6;
}
@keyframes seq-dot-6 {
    0% { opacity: 0; }
    72% { offset-distance: 0%; opacity: 1; }
    82% { offset-distance: 100%; opacity: 1; }
    82.1% { opacity: 0; }
    100% { opacity: 0; }
}


/* --- Nodes General --- */
.node {
    position: absolute;
    background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 100%);
    border: 2px solid var(--palette-grey-200);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.08),
        0 2px 4px rgba(0,0,0,0.04),
        inset 0 -1px 2px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Master Node Animation for "Active State" */
    animation-duration: 15s;
    animation-iteration-count: infinite;
    box-sizing: border-box;
    overflow: visible;
    pointer-events: auto;
    cursor: pointer;
}

/* Hover Effects for Interactivity */
.node:hover {
    box-shadow: 
        0 8px 20px rgba(0,0,0,0.12),
        0 4px 8px rgba(0,0,0,0.06);
    z-index: 10;
}

/* Popups (The "Fikuśne rzeczy") */
.node::after {
    content: attr(data-status); /* We will use this in HTML later, or hardcode below */
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #212121;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
}

/* Node Activity Animations */

/* 1. Webhook (Hits at 0s) */
.node-webhook { animation-name: node-active-1; }
.node-webhook::after { content: "Nowy żądanie!"; animation: pop-up-1 15s infinite; }
@keyframes node-active-1 {
    0% { 
        border-color: #FF6B00; 
        transform: scale(1.04); 
        box-shadow: 0 6px 20px rgba(255,107,0,0.35);
    }
    8% { 
        border-color: var(--palette-grey-200); 
        transform: scale(1); 
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
}
@keyframes pop-up-1 {
    0% { opacity: 1; transform: translateX(-50%) translateY(-5px); }
    8% { opacity: 0; }
    100% { opacity: 0; }
}

/* 2. Code (Hits at ~12%) */
.node-code { animation-name: node-active-2; }
.node-code::after { content: "Parsowanie JSON"; animation: pop-up-2 15s infinite; background: #E91E63; }
@keyframes node-active-2 {
    0%, 12% { 
        border-color: var(--palette-grey-200); 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    12.5% { 
        border-color: #E91E63; 
        transform: scale(1.04); 
        box-shadow: 0 6px 20px rgba(233,30,99,0.35);
    } 
    18% { 
        border-color: var(--palette-grey-200); 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
}
@keyframes pop-up-2 {
    0%, 12% { opacity: 0; }
    14% { opacity: 1; transform: translateX(-50%) translateY(-5px); }
    20% { opacity: 0; transform: translateX(-50%) translateY(-15px); }
    100% { opacity: 0; }
}

/* 3. AI (Hits at ~30%) */
.node-ai { animation-name: node-active-3; }
.node-ai::after { content: "Analiza"; animation: pop-up-3 15s infinite; background: #9C27B0; }
@keyframes node-active-3 {
    0%, 30% { 
        border-color: var(--palette-grey-200);
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    30.5% { 
        border-color: #9C27B0; 
        transform: scale(1.04); 
        box-shadow: 0 6px 20px rgba(156,39,176,0.35);
    } 
    38% { 
        border-color: var(--palette-grey-200); 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
}
@keyframes pop-up-3 {
    0%, 30% { opacity: 0; }
    32% { opacity: 1; transform: translateX(-50%) translateY(-5px); }
    40% { opacity: 0; transform: translateX(-50%) translateY(-15px); }
    100% { opacity: 0; }
}

/* 4. API (Hits at ~48%) */
.node-api { animation-name: node-active-4; }
.node-api::after { content: "+ Dane firmy"; animation: pop-up-4 15s infinite; background: #03A9F4; }
@keyframes node-active-4 {
    0%, 48% { 
        border-color: var(--palette-grey-200);
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    48.5% { 
        border-color: #03A9F4; 
        transform: scale(1.04); 
        box-shadow: 0 6px 20px rgba(3,169,244,0.35);
    } 
    54% { 
        border-color: var(--palette-grey-200); 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
}
@keyframes pop-up-4 {
    0%, 48% { opacity: 0; }
    50% { opacity: 1; transform: translateX(-50%) translateY(-5px); }
    56% { opacity: 0; transform: translateX(-50%) translateY(-15px); }
    100% { opacity: 0; }
}

/* 5. Condition (Hits at ~65%) */
.node-condition { animation-name: node-active-5; }
.node-condition::after { content: "TRUE"; animation: pop-up-5 15s infinite; background: #FFC107; color: #000; }
@keyframes node-active-5 {
    0%, 65% { 
        border-color: #FFC107; 
        transform: scale(1);
        background: #FFF8E1;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    65.5% { 
        border-color: #FF6F00; 
        transform: scale(1.04); 
        background: #FFF3E0;
        box-shadow: 0 6px 20px rgba(255,193,7,0.4);
    } 
    70% { 
        border-color: #FFC107; 
        transform: scale(1); 
        background: #FFF8E1;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
}
@keyframes pop-up-5 {
    0%, 65% { opacity: 0; }
    66% { opacity: 1; transform: translateX(-50%) translateY(-30px); }
    72% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
    100% { opacity: 0; }
}

/* 6. CRM (Hits at ~82%) */
.node-crm { animation-name: node-active-6; }
.node-crm::after { content: "Umowa stworzona"; animation: pop-up-6 15s infinite; background: #4CAF50; }
@keyframes node-active-6 {
    0%, 82% { 
        border-color: var(--palette-grey-200);
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    82.5% { 
        border-color: #4CAF50; 
        transform: scale(1.04); 
        box-shadow: 0 6px 20px rgba(76,175,80,0.35);
    } 
    88% { 
        border-color: var(--palette-grey-200); 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
}
@keyframes pop-up-6 {
    0%, 82% { opacity: 0; }
    83% { opacity: 1; transform: translateX(-50%) translateY(-5px); }
    90% { opacity: 0; transform: translateX(-50%) translateY(-15px); }
    100% { opacity: 0; }
}

/* 7. SMS (Hits at ~82% - parallel with CRM) */
.node-sms { animation-name: node-active-7; }
.node-sms::after { content: "Wysłano!"; animation: pop-up-7 15s infinite; background: #3F51B5; }
@keyframes node-active-7 {
    0%, 82% { 
        border-color: var(--palette-grey-200);
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    82.5% { 
        border-color: #3F51B5; 
        transform: scale(1.04); 
        box-shadow: 0 6px 20px rgba(63,81,181,0.35);
    } 
    88% { 
        border-color: var(--palette-grey-200); 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
}
@keyframes pop-up-7 {
    0%, 82% { opacity: 0; }
    83% { opacity: 1; transform: translateX(-50%) translateY(-5px); }
    90% { opacity: 0; transform: translateX(-50%) translateY(-15px); }
    100% { opacity: 0; }
}


/* --- Standard styles for node content (unchanged mostly) --- */
.node-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.node-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--palette-grey-900);
}
.node-body {
    font-size: 11px;
    color: var(--palette-grey-800);
    background: var(--palette-grey-100);
    padding: 6px;
    border-radius: 6px;
    font-family: 'Consolas', monospace;
    overflow: hidden;
    position: relative;
    min-height: 24px;
}

/* Icon sizing matching Material Symbols */
.node-header span[class^="material-symbols-"], 
.node-header span[class*=" material-symbols-"] {
    font-size: 20px;
}

/* Specific inner styling */
.node-webhook .node-header { border-left: 3px solid #FF6B00; padding-left: 8px; }
.node-webhook [class*="material-symbols"] { color: #FF6B00; }

.node-code .node-header { border-left: 3px solid #E91E63; padding-left: 8px; }
.node-code [class*="material-symbols"] { color: #E91E63; }

.node-ai .node-header { border-left: 3px solid #9C27B0; padding-left: 8px; }
.node-ai [class*="material-symbols"] { color: #9C27B0; }
.node-chip { font-size: 9px; background: #F3E5F5; color: #9C27B0; padding: 2px 6px; border-radius: 4px; margin-left: auto; }

.node-api .node-header { border-left: 3px solid #03A9F4; padding-left: 8px; }
.node-api [class*="material-symbols"] { color: #03A9F4; }

.node-condition {
    min-width: 100px;
    background: #FFF8E1;
    border: 1px dashed #FFC107;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.node-condition [class*="material-symbols"] { color: #FFC107; font-size: 24px; }
.node-condition .node-label { font-size: 11px; font-weight: bold; color: #FF8F00; margin-top: 4px; }

.node-crm .node-header { border-left: 3px solid #4CAF50; padding-left: 8px; }
.node-crm [class*="material-symbols"] { color: #4CAF50; }

.node-sms .node-header { border-left: 3px solid #3F51B5; padding-left: 8px; }
.node-sms [class*="material-symbols"] { color: #3F51B5; }

/* Typing animation for code */
.code-line:nth-child(2) {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #E91E63;
    animation: typing 4s steps(20) infinite;
    max-width: 0;
}
@keyframes typing {
    0%, 20% { max-width: 0; }
    50%, 80% { max-width: 100%; border-color: transparent; }
    100% { max-width: 100%; border-color: transparent;}
}

/* Pulsing Status Dot */
.status-dot {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    background: #4CAF50;
    border-radius: 50%;
    animation: pulse-dot 3s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* AI Pulse Effect */
.ai-pulse {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background: #9C27B0;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

/* Enhanced Code Snippet Styling */
.code-snippet {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.code-line {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 10px;
    color: #E91E63;
    line-height: 1.4;
}

/* AI Prompt Styling */
.ai-prompt {
    font-style: italic;
    color: #9C27B0;
    font-size: 10px;
}

/* Diamond Shape for Condition Node */
.node-diamond-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

/* Smooth drag transitions */
.node {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.node:active {
    cursor: grabbing !important;
}