.fp-forgebar-status {
    /* Semantic Colors - Slate & Silver / Flat Design 2.0 */
    --fp-background-color: #1e293b; /* Dark Slate */
    --fp-secondary-color: #334155;  /* Slate Panel */
    --fp-primary-color: #f8fafc;    /* Pure Silver/White */
    --fp-muted-color: #94a3b8;      /* Muted Silver */
    --fp-soft-color: #475569;       /* Soft Slate Border */
    
    --fp-accent-color: #38bdf8;     /* Electric Silver-Blue / Forge Heat */
    --fp-info-color: #0ea5e9;       /* Deep Cyan */
    --fp-warning-color: #f59e0b;    /* Amber */
    --fp-danger-color: #ef4444;     /* Red */

    --fp-container-width: 100%;
    --fp-aspect-ratio: auto;
    
    /* Flat Design 2.0 specific properties */
    --fp-border-radius: 8px;
    --fp-shadow: 0 10px 25px rgba(15, 23, 42, 0.5);

    width: var(--fp-container-width);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--fp-primary-color);
}

.fp-forgebar-status * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.fp-forgebar-status-stage {
    position: relative;
    width: 100%;
    max-width: 700px;
    background-color: var(--fp-background-color);
    border: 1px solid var(--fp-soft-color);
    border-radius: var(--fp-border-radius);
    padding: 2.5rem;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--fp-shadow);
}

/* Layer 2/3 Canvas */
.fp-forgebar-status-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

.fp-forgebar-status-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Header */
.fp-forgebar-status-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.fp-forgebar-status-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fp-forgebar-status-title {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fp-primary-color);
    text-transform: uppercase;
}

.fp-forgebar-status-subtitle {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fp-muted-color);
}

.fp-forgebar-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--fp-secondary-color);
    border: 1px solid var(--fp-soft-color);
    padding: 6px 12px;
    border-radius: 4px;
}

/* Layer 1: Breathing Pulse */
.fp-forgebar-status-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--fp-accent-color);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--fp-accent-color);
    animation: fp-forgebar-breathe 1.5s infinite alternate ease-in-out;
}

@keyframes fp-forgebar-breathe {
    0% { transform: scale(0.8); opacity: 0.6; box-shadow: 0 0 2px var(--fp-accent-color); }
    100% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 10px var(--fp-accent-color); }
}

.fp-forgebar-status-badge-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--fp-primary-color);
}

/* Progress Tracker */
.fp-forgebar-status-tracker {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fp-forgebar-status-labels {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.fp-forgebar-status-step {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fp-primary-color);
}

.fp-forgebar-status-percent {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fp-accent-color);
    line-height: 1;
}

.fp-forgebar-status-bar-bg {
    width: 100%;
    height: 12px;
    background-color: var(--fp-secondary-color);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--fp-soft-color);
}

.fp-forgebar-status-bar-fill {
    height: 100%;
    width: 0%; /* JS will handle final width */
    background-color: var(--fp-accent-color);
    border-radius: 6px;
    position: relative;
    transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fp-forgebar-status-bar-glow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8));
    border-radius: 0 6px 6px 0;
    animation: fp-forgebar-scan 2s infinite linear;
}

@keyframes fp-forgebar-scan {
    0% { transform: translateX(-100px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(20px); opacity: 0; }
}

/* Footer */
.fp-forgebar-status-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--fp-soft-color);
    padding-top: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.fp-forgebar-status-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fp-muted-color);
    font-size: 0.85rem;
    font-weight: 500;
}

.fp-forgebar-status-meta svg {
    width: 16px;
    height: 16px;
    color: var(--fp-info-color);
}

/* Responsiveness */
@media (max-width: 600px) {
    .fp-forgebar-status-stage {
        padding: 1.5rem;
    }
    .fp-forgebar-status-header {
        flex-direction: column;
    }
    .fp-forgebar-status-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

(() => {
    const initForgeBar = (container) => {
        if (container.dataset.fpInitialized === 'true') return;
        container.dataset.fpInitialized = 'true';

        const stage = container.querySelector('.fp-forgebar-status-stage');
        const canvas = container.querySelector('.fp-forgebar-status-canvas');
        const percentEl = container.querySelector('.fp-forgebar-status-percent');
        const fillEl = container.querySelector('.fp-forgebar-status-bar-fill');
        
        if (!stage || !canvas) return;
        const ctx = canvas.getContext('2d');

        // Extract Styles
        const styles = getComputedStyle(container);
        const colorAccent = styles.getPropertyValue('--fp-accent-color').trim() || '#38bdf8';
        
        // --- 1. Progress Bar Logic ---
        const targetPercent = parseInt(percentEl.getAttribute('data-target'), 10) || 0;
        
        // Intersection Observer to trigger progress animation
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    fillEl.style.width = `${targetPercent}%`;
                    animateCounter(percentEl, targetPercent, 1500);
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });
        
        observer.observe(stage);

        const animateCounter = (el, target, duration) => {
            let start = null;
            const step = (timestamp) => {
                if (!start) start = timestamp;
                const progress = Math.min((timestamp - start) / duration, 1);
                // Ease out cubic
                const ease = 1 - Math.pow(1 - progress, 3);
                el.innerText = Math.floor(ease * target) + '%';
                if (progress < 1) {
                    requestAnimationFrame(step);
                } else {
                    el.innerText = target + '%';
                }
            };
            requestAnimationFrame(step);
        };

        // --- 2. Canvas Engine (Circuit Drawing) ---
        let width, height;
        let circuits = [];
        let isSurging = false;

        const resizeCanvas = () => {
            const rect = stage.getBoundingClientRect();
            if (rect.width === 0) return;
            const dpr = window.devicePixelRatio || 1;
            canvas.width = rect.width * dpr;
            canvas.height = rect.height * dpr;
            ctx.scale(dpr, dpr);
            width = rect.width;
            height = rect.height;
            initCircuits();
        };

        window.addEventListener('resize', resizeCanvas);

        class CircuitNode {
            constructor() {
                this.reset();
            }

            reset() {
                this.x = Math.random() * width;
                this.y = Math.random() * height;
                this.history = [{x: this.x, y: this.y}];
                this.maxLength = Math.floor(Math.random() * 20) + 10;
                this.dir = Math.floor(Math.random() * 4); // 0: right, 1: down, 2: left, 3: up
                this.baseSpeed = Math.random() * 1.5 + 0.5;
                this.speed = this.baseSpeed;
                this.active = true;
                this.color = colorAccent;
            }

            update() {
                if (!this.active) return;

                // Layer 3: Reactive Surge
                if (isSurging) {
                    this.speed = this.baseSpeed * 4;
                } else {
                    this.speed = this.baseSpeed;
                }

                let nextX = this.x;
                let nextY = this.y;

                if (this.dir === 0) nextX += this.speed;
                else if (this.dir === 1) nextY += this.speed;
                else if (this.dir === 2) nextX -= this.speed;
                else if (this.dir === 3) nextY -= this.speed;

                this.x = nextX;
                this.y = nextY;
                this.history.push({x: this.x, y: this.y});

                if (this.history.length > this.maxLength) {
                    this.history.shift();
                }

                // Randomly change direction (90 degrees)
                if (Math.random() > 0.95) {
                    if (this.dir % 2 === 0) {
                        this.dir = Math.random() > 0.5 ? 1 : 3;
                    } else {
                        this.dir = Math.random() > 0.5 ? 0 : 2;
                    }
                }

                // Die if off screen
                if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
                    if(Math.random() > 0.5) this.reset();
                    else this.active = false;
                }

                // Random death
                if (Math.random() > 0.99) {
                    this.active = false;
                }
            }

            draw() {
                if (this.history.length < 2) return;
                
                ctx.beginPath();
                ctx.moveTo(this.history[0].x, this.history[0].y);
                for (let i = 1; i < this.history.length; i++) {
                    ctx.lineTo(this.history[i].x, this.history[i].y);
                }
                
                ctx.strokeStyle = this.color;
                ctx.lineWidth = isSurging ? 2 : 1;
                ctx.lineCap = 'square';
                ctx.lineJoin = 'miter';
                
                // Fade trail
                ctx.globalAlpha = isSurging ? 0.8 : 0.4;
                ctx.stroke();
                
                // Draw head
                ctx.globalAlpha = isSurging ? 1.0 : 0.8;
                ctx.beginPath();
                ctx.arc(this.x, this.y, isSurging ? 2 : 1, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.globalAlpha = 1.0;
            }
        }

        const initCircuits = () => {
            circuits = [];
            if (!width || !height) return;
            const count = Math.floor((width * height) / 8000); 
            for (let i = 0; i < count; i++) {
                circuits.push(new CircuitNode());
            }
        };

        const renderLoop = () => {
            if (!ctx) return;
            
            // Fading trail effect using slate color background
            ctx.fillStyle = 'rgba(30, 41, 59, 0.15)'; // Equivalent to #1e293b with opacity
            ctx.fillRect(0, 0, width, height);

            let activeCount = 0;
            circuits.forEach(c => {
                if (c.active) {
                    activeCount++;
                    c.update();
                    c.draw();
                } else {
                    if (Math.random() > 0.98) c.reset();
                }
            });

            // Ensure there are always some circuits
            if (activeCount < circuits.length / 3) {
                circuits.find(c => !c.active)?.reset();
            }

            requestAnimationFrame(renderLoop);
        };

        // --- 3. Interaction (Surge) ---
        stage.addEventListener('mouseenter', () => { isSurging = true; });
        stage.addEventListener('mouseleave', () => { isSurging = false; });

        // Boot
        setTimeout(() => {
            resizeCanvas();
            // Fill background initially
            ctx.fillStyle = '#1e293b';
            ctx.fillRect(0, 0, width, height);
            requestAnimationFrame(renderLoop);
        }, 50);
    };

    const runInit = () => {
        document.querySelectorAll('.fp-forgebar-status').forEach(initForgeBar);
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', runInit);
    } else {
        runInit();
    }
    
    const observer = new MutationObserver((mutations) => {
        for (const mut of mutations) if (mut.addedNodes.length) runInit();
    });
    observer.observe(document.body, { childList: true, subtree: true });

})();