.fp-veterinary-heart-rate-monitor-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #fcfbfb; 
    --fp-secondary-color: rgba(255, 255, 255, 0.45); 
    --fp-muted-color: #8f7c81; 
    --fp-soft-color: #f2e6e8; 
    --fp-background-color: transparent;

    --fp-info-color: #dcb8c4; 
    --fp-warning-color: #cf94a6; 
    --fp-danger-color: #2a2426; 
    --fp-accent-color: #b76e79; 
    --fp-text-color: #2a2426; 

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    background: var(--fp-background-color);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    position: relative;
}

.fp-veterinary-heart-rate-monitor-ui * {
    box-sizing: inherit;
}

.fp-veterinary-heart-rate-monitor-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--fp-soft-color);
    box-shadow: 0 24px 48px -12px rgba(183, 110, 121, 0.08);
}

.fp-veterinary-heart-rate-monitor-ui-grid {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 20px 20px;
    background-image: 
        linear-gradient(to right, rgba(183, 110, 121, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(183, 110, 121, 0.05) 1px, transparent 1px);
    z-index: 0;
}

.fp-veterinary-heart-rate-monitor-ui-ambient {
    position: absolute;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle at center, rgba(183, 110, 121, 0.15) 0%, transparent 60%);
    animation: fp-veterinary-heart-rate-monitor-ui-breathe 5s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

@keyframes fp-veterinary-heart-rate-monitor-ui-breathe {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.1); opacity: 1; }
}

.fp-veterinary-heart-rate-monitor-ui-radial-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 360px; height: 360px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.fp-veterinary-heart-rate-monitor-ui-ring-dashed {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px dashed rgba(183, 110, 121, 0.2);
    animation: fp-veterinary-heart-rate-monitor-ui-spin 25s linear infinite;
}

.fp-veterinary-heart-rate-monitor-ui-ring-dotted {
    position: absolute;
    width: 70%; height: 70%;
    border-radius: 50%;
    border: 2px dotted rgba(183, 110, 121, 0.25);
    animation: fp-veterinary-heart-rate-monitor-ui-spin-rev 15s linear infinite;
}

@keyframes fp-veterinary-heart-rate-monitor-ui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fp-veterinary-heart-rate-monitor-ui-spin-rev {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.fp-veterinary-heart-rate-monitor-ui-panel {
    position: relative;
    z-index: 10;
    width: 82%;
    height: 82%;
    background: var(--fp-secondary-color);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    box-shadow: 
        0 16px 40px rgba(183, 110, 121, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 2px 8px rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.fp-veterinary-heart-rate-monitor-ui-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fp-soft-color);
}

.fp-veterinary-heart-rate-monitor-ui-icon-wrap {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-accent-color);
    box-shadow: inset 0 2px 4px rgba(183, 110, 121, 0.05);
    border: 1px solid #fff;
}

.fp-veterinary-heart-rate-monitor-ui-patient-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-veterinary-heart-rate-monitor-ui-patient-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--fp-danger-color);
    margin: 0;
    letter-spacing: -0.01em;
}

.fp-veterinary-heart-rate-monitor-ui-patient-type {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--fp-muted-color);
}

.fp-veterinary-heart-rate-monitor-ui-status-dot {
    width: 10px; height: 10px;
    background: var(--fp-accent-color);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--fp-accent-color);
    animation: fp-veterinary-heart-rate-monitor-ui-pulse-dot 2s infinite;
}

@keyframes fp-veterinary-heart-rate-monitor-ui-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

.fp-veterinary-heart-rate-monitor-ui-vital-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    position: relative;
}

.fp-veterinary-heart-rate-monitor-ui-heart-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px; height: 80px;
}

.fp-veterinary-heart-rate-monitor-ui-heart-svg {
    width: 56px; height: 56px;
    color: var(--fp-accent-color);
    z-index: 5;
    transition: transform 0.15s cubic-bezier(0.2, 1.5, 0.8, 1);
    filter: drop-shadow(0 8px 12px rgba(183, 110, 121, 0.3));
}

.fp-veterinary-heart-rate-monitor-ui-pulse-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(183, 110, 121, 0.4);
    opacity: 0;
    pointer-events: none;
}

.fp-veterinary-heart-rate-monitor-ui-bpm-display {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--fp-danger-color);
}

.fp-veterinary-heart-rate-monitor-ui-bpm-val {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.fp-veterinary-heart-rate-monitor-ui-bpm-lbl {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fp-muted-color);
    margin-bottom: 6px;
}

.fp-veterinary-heart-rate-monitor-ui-ecg-wrap {
    height: 60px;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 2px 8px rgba(183, 110, 121, 0.05);
    padding: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.fp-veterinary-heart-rate-monitor-ui-ecg-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fp-veterinary-heart-rate-monitor-ui-ecg-path {
    fill: none;
    stroke: var(--fp-accent-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 4px rgba(183, 110, 121, 0.4));
}

.fp-veterinary-heart-rate-monitor-ui-stage.is-beating .fp-veterinary-heart-rate-monitor-ui-heart-svg {
    transform: scale(1.15);
}

.fp-veterinary-heart-rate-monitor-ui-stage.is-beating .fp-veterinary-heart-rate-monitor-ui-pulse-ring {
    animation: fp-veterinary-heart-rate-monitor-ui-ping 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fp-veterinary-heart-rate-monitor-ui-ping {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

@media (max-width: 480px) {
    .fp-veterinary-heart-rate-monitor-ui-panel { width: 90%; height: 90%; padding: 20px; }
    .fp-veterinary-heart-rate-monitor-ui-vital-center { flex-direction: column; gap: 8px; }
    .fp-veterinary-heart-rate-monitor-ui-bpm-val { font-size: 3rem; }
}

(function() {
    document.querySelectorAll('.fp-veterinary-heart-rate-monitor-ui').forEach(root => {
        const stage = root.querySelector('#fp-veterinary-heart-rate-monitor-ui-stage');
        const bpmEl = root.querySelector('#fp-veterinary-heart-rate-monitor-ui-bpm');
        const pathEl = root.querySelector('#fp-veterinary-heart-rate-monitor-ui-ecg-path');

        if (!stage || !bpmEl || !pathEl) return;

        let animationFrameId;
        let lastUpdate = 0;
        
        let targetBpm = 115;
        let currentBpm = 115;
        let nextBeatTime = 0;
        
        const numPoints = 80;
        const pointsY = new Array(numPoints).fill(30); 
        const W = 300;
        const stepX = W / (numPoints - 1);
        
        const ecgSpike = [0, 4, -20, 30, -5, 2, 0];
        let spikeQueue = [];

        function fp_veterinary_heart_rate_monitor_ui_drawWave() {
            let d = `M 0 ${pointsY[0]}`;
            for (let i = 1; i < numPoints; i++) {
                d += ` L ${i * stepX} ${pointsY[i]}`;
            }
            if (pathEl) pathEl.setAttribute('d', d);
        }

        function fp_veterinary_heart_rate_monitor_ui_loop(timestamp) {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(animationFrameId);
                if (typeof observer !== 'undefined') observer.disconnect();
                document.removeEventListener('visibilitychange', fp_veterinary_heart_rate_monitor_ui_handleVisibilityChange);
                return;
            }

            if (document.visibilityState === 'visible') {
                if (!lastUpdate) lastUpdate = timestamp;
                const delta = timestamp - lastUpdate;
                
                if (delta >= 16) {
                    lastUpdate = timestamp;

                    pointsY.shift();

                    let nextY = 30 + (Math.random() * 2 - 1);

                    if (spikeQueue.length > 0) {
                        nextY = 30 + spikeQueue.shift();
                    }
                    
                    pointsY.push(nextY);
                    fp_veterinary_heart_rate_monitor_ui_drawWave();

                    if (timestamp >= nextBeatTime) {
                        stage.classList.remove('is-beating');
                        void stage.offsetWidth; 
                        stage.classList.add('is-beating');

                        spikeQueue = [...ecgSpike];

                        targetBpm = 110 + Math.floor(Math.random() * 15);
                        
                        let interval = (60000 / targetBpm) + (Math.random() * 50 - 25);
                        nextBeatTime = timestamp + interval;

                        currentBpm += (targetBpm - currentBpm) * 0.1;
                        if (bpmEl) bpmEl.textContent = Math.round(currentBpm);
                    }
                }
            }

            animationFrameId = requestAnimationFrame(fp_veterinary_heart_rate_monitor_ui_loop);
        }

        function fp_veterinary_heart_rate_monitor_ui_handleVisibilityChange() {
            if (document.visibilityState === 'hidden') {
                if (animationFrameId) {
                    cancelAnimationFrame(animationFrameId);
                    animationFrameId = null;
                    lastUpdate = 0;
                }
            } else {
                if (!animationFrameId) {
                    lastUpdate = performance.now();
                    nextBeatTime = performance.now(); 
                    animationFrameId = requestAnimationFrame(fp_veterinary_heart_rate_monitor_ui_loop);
                }
            }
        }

        document.addEventListener('visibilitychange', fp_veterinary_heart_rate_monitor_ui_handleVisibilityChange);

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (!animationFrameId && document.visibilityState === 'visible') {
                        lastUpdate = performance.now();
                        nextBeatTime = performance.now();
                        animationFrameId = requestAnimationFrame(fp_veterinary_heart_rate_monitor_ui_loop);
                    }
                } else {
                    if (animationFrameId) {
                        cancelAnimationFrame(animationFrameId);
                        animationFrameId = null;
                    }
                }
            });
        }, { threshold: 0.1 });

        observer.observe(root);
        
        fp_veterinary_heart_rate_monitor_ui_drawWave();
    });
})();