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

    --fp-primary-color: #f8fafc; 
    --fp-secondary-color: #e2e8f0; 
    --fp-muted-color: #94a3b8; 
    --fp-soft-color: #ffffff; 
    --fp-background-color: transparent;

    --fp-info-color: #bae6fd; 
    --fp-warning-color: #7dd3fc; 
    --fp-danger-color: #0284c7; 
    --fp-accent-color: #e0f2fe; 
    --fp-text-color: #0f172a; 

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

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

.fp-healthcare-heart-rate-monitor-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 
        20px 20px 60px rgba(203, 213, 225, 0.6),
        -20px -20px 60px rgba(255, 255, 255, 1);
}

.fp-healthcare-heart-rate-monitor-ui-ambient {
    position: absolute;
    width: 160%;
    height: 160%;
    background: radial-gradient(circle at center, rgba(186, 230, 253, 0.15) 0%, transparent 60%);
    animation: fp-healthcare-heart-rate-monitor-ui-breathe 4s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

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

.fp-healthcare-heart-rate-monitor-ui-wrapper {
    position: relative;
    z-index: 10;
    width: 85%;
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fp-healthcare-heart-rate-monitor-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
}

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

.fp-healthcare-heart-rate-monitor-ui-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fp-text-color);
    margin: 0;
    letter-spacing: -0.01em;
}

.fp-healthcare-heart-rate-monitor-ui-id {
    font-size: 0.7rem;
    color: var(--fp-muted-color);
    font-family: ui-monospace, monospace;
}

.fp-healthcare-heart-rate-monitor-ui-status-pill {
    background: var(--fp-primary-color);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--fp-danger-color);
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 
        4px 4px 10px rgba(203, 213, 225, 0.5),
        -4px -4px 10px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.fp-healthcare-heart-rate-monitor-ui-dot {
    width: 6px;
    height: 6px;
    background: var(--fp-warning-color);
    border-radius: 50%;
}

.fp-healthcare-heart-rate-monitor-ui-center {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-healthcare-heart-rate-monitor-ui-crater {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--fp-primary-color);
    box-shadow: 
        inset 12px 12px 24px rgba(203, 213, 225, 0.6),
        inset -12px -12px 24px rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    transition: box-shadow 0.3s ease;
}

.fp-healthcare-heart-rate-monitor-ui-pulse-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid var(--fp-warning-color);
    opacity: 0;
    z-index: 2;
}

.fp-healthcare-heart-rate-monitor-ui-heart-icon {
    width: 32px;
    height: 32px;
    color: var(--fp-warning-color);
    margin-bottom: 8px;
    transition: transform 0.1s ease, color 0.3s ease;
}

.fp-healthcare-heart-rate-monitor-ui-bpm-wrap {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.fp-healthcare-heart-rate-monitor-ui-bpm-val {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--fp-text-color);
    line-height: 0.8;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}

.fp-healthcare-heart-rate-monitor-ui-bpm-lbl {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--fp-muted-color);
    padding-bottom: 4px;
}

.fp-healthcare-heart-rate-monitor-ui-graph-wrap {
    position: absolute;
    bottom: 30px;
    width: 120px;
    height: 40px;
    overflow: hidden;
    opacity: 0.5;
}

.fp-healthcare-heart-rate-monitor-ui-graph-line {
    fill: none;
    stroke: var(--fp-warning-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateX(0);
}

.fp-healthcare-heart-rate-monitor-ui-footer {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    border-radius: 24px;
    background: var(--fp-primary-color);
    box-shadow: 
        8px 8px 16px rgba(203, 213, 225, 0.4),
        -8px -8px 16px rgba(255, 255, 255, 0.9);
}

.fp-healthcare-heart-rate-monitor-ui-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.fp-healthcare-heart-rate-monitor-ui-metric-lbl {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--fp-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fp-healthcare-heart-rate-monitor-ui-metric-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fp-text-color);
    font-variant-numeric: tabular-nums;
}

.fp-healthcare-heart-rate-monitor-ui-stage.is-beating .fp-healthcare-heart-rate-monitor-ui-heart-icon {
    transform: scale(1.2);
}

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

@keyframes fp-healthcare-heart-rate-monitor-ui-pulse-out {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.8; border-width: 4px; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; border-width: 1px; }
}

.fp-healthcare-heart-rate-monitor-ui-stage.is-elevated .fp-healthcare-heart-rate-monitor-ui-crater {
    box-shadow: 
        inset 12px 12px 24px rgba(2, 132, 199, 0.15),
        inset -12px -12px 24px rgba(255, 255, 255, 1);
}

.fp-healthcare-heart-rate-monitor-ui-stage.is-elevated .fp-healthcare-heart-rate-monitor-ui-bpm-val {
    color: var(--fp-danger-color);
}

.fp-healthcare-heart-rate-monitor-ui-stage.is-elevated .fp-healthcare-heart-rate-monitor-ui-heart-icon {
    color: var(--fp-danger-color);
}

.fp-healthcare-heart-rate-monitor-ui-stage.is-elevated .fp-healthcare-heart-rate-monitor-ui-pulse-ring {
    border-color: var(--fp-danger-color);
}

.fp-healthcare-heart-rate-monitor-ui-stage.is-elevated .fp-healthcare-heart-rate-monitor-ui-status-pill {
    color: var(--fp-danger-color);
    background: var(--fp-accent-color);
}

.fp-healthcare-heart-rate-monitor-ui-stage.is-elevated .fp-healthcare-heart-rate-monitor-ui-dot {
    background: var(--fp-danger-color);
}

@media (max-width: 480px) {
    .fp-healthcare-heart-rate-monitor-ui-wrapper { width: 90%; height: 90%; }
    .fp-healthcare-heart-rate-monitor-ui-crater { width: 180px; height: 180px; }
    .fp-healthcare-heart-rate-monitor-ui-bpm-val { font-size: 3rem; }
    .fp-healthcare-heart-rate-monitor-ui-graph-wrap { width: 100px; bottom: 20px; }
}

(function() {
    document.querySelectorAll('.fp-healthcare-heart-rate-monitor-ui').forEach(root => {
        const stage = root.querySelector('#fp-healthcare-heart-rate-monitor-ui-stage');
        const bpmVal = root.querySelector('#fp-healthcare-heart-rate-monitor-ui-bpm');
        const ring = root.querySelector('#fp-healthcare-heart-rate-monitor-ui-ring');
        const statusText = root.querySelector('#fp-healthcare-heart-rate-monitor-ui-status-text');
        const graphLine = root.querySelector('#fp-healthcare-heart-rate-monitor-ui-line');
        const bpVal = root.querySelector('#fp-healthcare-heart-rate-monitor-ui-bp');
        const spo2Val = root.querySelector('#fp-healthcare-heart-rate-monitor-ui-spo2');

        if (!stage || !bpmVal || !graphLine) return;

        let animationFrameId;
        let lastBeatTime = 0;
        let currentBPM = 72;
        let targetBPM = 72;
        let isElevated = false;
        let elevatedTimer = 0;
        let graphOffset = 0;

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

            if (document.visibilityState === 'visible') {
                if (!lastBeatTime) lastBeatTime = timestamp;

                const msPerBeat = (60 / currentBPM) * 1000;

                if (timestamp - lastBeatTime >= msPerBeat) {
                    lastBeatTime = timestamp;

                    stage.classList.remove('is-beating');
                    void stage.offsetWidth;
                    stage.classList.add('is-beating');

                    if (!isElevated) {
                        targetBPM = 65 + Math.floor(Math.random() * 15);
                        
                        if (Math.random() > 0.95) {
                            isElevated = true;
                            elevatedTimer = timestamp;
                            targetBPM = 105 + Math.floor(Math.random() * 15); 
                            stage.classList.add('is-elevated');
                            if (statusText) statusText.textContent = "ELEVATED";
                        }
                    } else {
                        targetBPM = 105 + Math.floor(Math.random() * 10);
                        
                        if (timestamp - elevatedTimer > 6000) {
                            isElevated = false;
                            targetBPM = 72;
                            stage.classList.remove('is-elevated');
                            if (statusText) statusText.textContent = "STABLE";
                        }
                    }

                    if (Math.random() > 0.7) {
                        let sys = isElevated ? 130 + Math.floor(Math.random()*15) : 115 + Math.floor(Math.random()*8);
                        let dia = isElevated ? 85 + Math.floor(Math.random()*10) : 75 + Math.floor(Math.random()*6);
                        if (bpVal) bpVal.textContent = `${sys}/${dia}`;
                        
                        let spo2 = isElevated ? 95 + Math.floor(Math.random()*3) : 98 + Math.floor(Math.random()*2);
                        if (spo2Val) spo2Val.textContent = `${spo2}%`;
                    }
                }

                if (Math.abs(currentBPM - targetBPM) > 0.5) {
                    currentBPM += (targetBPM - currentBPM) * 0.05;
                    if (bpmVal) bpmVal.textContent = Math.round(currentBPM);
                }

                const graphSpeed = (currentBPM / 60) * 1.5;
                graphOffset -= graphSpeed;
                
                if (graphOffset <= -60) {
                    graphOffset = 0;
                }
                if (graphLine) graphLine.style.transform = `translateX(${graphOffset}px)`;
            }

            animationFrameId = requestAnimationFrame(fp_healthcare_heart_rate_monitor_ui_loop);
        }

        function fp_healthcare_heart_rate_monitor_ui_handleVisibilityChange() {
            if (document.visibilityState === 'hidden') {
                if (animationFrameId) {
                    cancelAnimationFrame(animationFrameId);
                    animationFrameId = null;
                    lastBeatTime = 0;
                }
            } else {
                if (!animationFrameId) {
                    lastBeatTime = performance.now();
                    animationFrameId = requestAnimationFrame(fp_healthcare_heart_rate_monitor_ui_loop);
                }
            }
        }

        document.addEventListener('visibilitychange', fp_healthcare_heart_rate_monitor_ui_handleVisibilityChange);

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

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