<div class="dashboard-container">
 <div class="heart-rate-card">
  <div class="card-header">
   <div class="title-group">
    <h2>
     Heart Rate
    </h2>
   </div>
   <div class="date-selector">
    <span>
     Dates
     <strong style="font-weight: 500;">
      2026
     </strong>
    </span>
    <i class="fa-solid fa-chevron-down">
    </i>
   </div>
  </div>
  <div class="months-grid">
   <div class="month-col">
    <span>
     Jun
    </span>
   </div>
   <div class="month-col">
    <span>
     Sep
    </span>
   </div>
   <div class="month-col">
    <span>
     Dec
    </span>
   </div>
  </div>
  <div class="chart-wrapper">
   <canvas id="heartRateChart">
   </canvas>
   <div class="glow-indicator" id="glowIndicator" style="position: absolute; left: 0; top: 0; transform: translate3d(0, 0, 0); will-change: transform;">
    <div class="pulse-dot">
    </div>
    <div class="light-cone">
    </div>
    <div class="matrix-value-wrapper">
     <svg class="matrix-num" height="32" viewbox="0 0 70 32" width="70">
      <defs>
       <pattern height="3" id="dotPattern" patternunits="userSpaceOnUse" width="3" x="0" y="0">
        <circle cx="1.5" cy="1.5" fill="#111" r="1.1">
        </circle>
       </pattern>
      </defs>
      <text fill="url(#dotPattern)" font-family="'Geist', sans-serif" font-size="32" font-weight="600" id="dynamicMatrixNumber" letter-spacing="1" x="0" y="26">
       60
      </text>
     </svg>
     <span class="percentage">
      +103%
     </span>
    </div>
   </div>
   <div class="y-axis-label label-top">
    60
   </div>
   <div class="y-axis-label label-bottom">
    60
   </div>
   <div class="x-axis-label">
    12
   </div>
  </div>
  <div class="card-tabs">
   <button class="tab-btn">
    Total
   </button>
   <button class="tab-btn active">
    Focus
   </button>
   <button class="tab-btn">
    Sleep
   </button>
   <button class="tab-btn">
    Mood
   </button>
  </div>
 </div>
 <div class="bottom-nav-container">
  <div class="bottom-nav">
   <button class="nav-item">
    <i class="fa-solid fa-house">
    </i>
   </button>
   <button class="nav-item">
    <i class="fa-solid fa-chart-line">
    </i>
   </button>
   <button class="nav-item style-circle">
    <div class="dashed-circle">
    </div>
   </button>
   <button class="nav-item">
    <i class="fa-regular fa-calendar">
    </i>
   </button>
   <button class="nav-item action-btn active">
    <i class="fa-solid fa-chart-bar">
    </i>
   </button>
  </div>
 </div>
</div>

/* Reset and Base Layout Normalization */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #e5e5e5;
  font-family: 'Geist', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

/* Fluid layout container ensuring responsiveness across desktops and mobile screens */
.dashboard-container {
  width: 100%;
  max-width: 410px;
  /* Exact mobile viewport wrapper dimension centered on desktop screens */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Skeuomorphic Glassmorphism Card Frame */
.heart-rate-card {
  background: linear-gradient(145deg, rgba(245, 245, 245, 0.9) 0%, rgba(238, 238, 238, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 36px;
  width: 100%;
  padding: 32px 28px 24px 28px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.04),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

/* Header Layout Mechanics */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.card-header h2 {
  font-size: 17px;
  font-weight: 500;
  color: #444;
}

.date-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #999;
  cursor: pointer;
}

.date-selector i {
  font-size: 10px;
  color: #bbb;
}

/* Background Metrics Grid Guidelines */
.months-grid {
  position: absolute;
  top: 90px;
  left: 28px;
  right: 28px;
  bottom: 110px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
}

.month-col {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(200, 200, 200, 0.15) 0%, rgba(200, 200, 200, 0.03) 100%);
  position: relative;
}

.month-col span {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #aaa;
}

/* Chart Canvas Wrapper Element */
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 240px;
  z-index: 2;
  margin-bottom: 25px;
}

canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Static Y-Axis Guide Labels */
.y-axis-label {
  position: absolute;
  right: 0;
  font-size: 11px;
  color: #999;
  pointer-events: none;
  padding-bottom: 2px;
}

.label-top {
  top: 38%;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  left: 0;
  text-align: right;
}

.label-bottom {
  top: 67%;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  left: 0;
  text-align: right;
}

.x-axis-label {
  position: absolute;
  bottom: 15px;
  left: 0;
  font-size: 11px;
  color: #aaa;
}

/* Telemetry indicator absolute parent context wrapper */
.glow-indicator {
  position: absolute;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}

/* Central anchor point mapping directly on top of the line vector */
.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: #111;
  border-radius: 50%;
  position: absolute;
  left: -3px;
  /* Centering mathematical offset on X-axis */
  top: -3px;
  /* Centering mathematical offset on Y-axis */
  z-index: 3;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Volumetric light cone centered vertically with the chart path line */
.light-cone {
  position: absolute;
  left: -2px;
  top: -25px;
  /* Offset half of height (50px) to lock horizontal baseline symmetry */
  width: 55px;
  height: 50px;
  background: radial-gradient(circle at left, rgba(255, 230, 110, 0.8) 0%, rgba(255, 230, 110, 0) 75%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
  z-index: 1;
  transform-origin: left center;
  animation: lightPulse 2s infinite ease-in-out;
}

/* Numeric text metrics layout aligned perfectly into the center point baseline */
.matrix-value-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  left: 38px;
  /* Safe clearing distance from the active line edge */
  top: -16px;
  /* Offset half of the layout element boundaries for absolute vertical snap */
  z-index: 2;
}

.matrix-num {
  display: block;
}

.percentage {
  font-size: 10px;
  color: #aaa;
  margin-top: -2px;
  font-weight: 500;
  padding-left: 2px;
}

/* Card Navigation Link Selection Elements */
.card-tabs {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding-top: 18px;
}

.tab-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: #aaa;
  cursor: pointer;
  padding: 6px 12px;
  transition: color 0.2s ease;
  font-weight: 400;
  position: relative;
}

.tab-btn.active {
  color: #111;
  font-weight: 500;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  background-color: #111;
  border-radius: 50%;
}

/* Dock Shell Bottom Navigation Bar Layout Setup */
.bottom-nav-container {
  width: 100%;
  padding: 0 6px;
}

.bottom-nav {
  background-color: rgba(230, 230, 230, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}

.nav-item {
  background: none;
  border: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #777;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.nav-item.active {
  background-color: rgba(255, 255, 255, 0.9);
  color: #111;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 3px;
  height: 3px;
  background-color: #111;
  border-radius: 50%;
}

.nav-item.style-circle .dashed-circle {
  width: 22px;
  height: 22px;
  border: 1.5px dashed #888;
  border-radius: 50%;
}

.nav-item.action-btn {
  background-color: #222;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.nav-item.action-btn:hover {
  background-color: #111;
}

/* Pulsing Glow Animation Frame Calculations */
@keyframes lightPulse {

  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

(function() {
  // Isolated initialization block to avoid runtime parsing or global scope collisions
  const init = () => {
    const ctx = document.getElementById('heartRateChart');
    const glowIndicator = document.getElementById('glowIndicator');
    const dynamicNumber = document.getElementById('dynamicMatrixNumber');

    // Safeguard clause if elements are missing from the current layout context
    if (!ctx || !glowIndicator || !dynamicNumber) return;

    const chartCtx = ctx.getContext('2d');

    /* Static reference datasets to form subtle geometric background waves */
    const baseline1 = [25, 42, 38, 48, 45, 42, 35, 30, 32, 28];
    const baseline2 = [18, 30, 26, 32, 28, 35, 24, 20, 22, 18];

    /* Shortened to 8 coordinates so that the line ends perfectly right after the Sep grid column line */
    let mainData = [12, 35, 58, 52, 48, 64, 52, 56];

    /* Keep 12 full categories representing months to lock the exact total viewport spacing grid */
    let labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    const heartRateChart = new Chart(chartCtx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: 'Heart Rate',
          data: mainData,
          borderColor: '#222222',
          borderWidth: 1.75,
          pointRadius: 0,
          pointHoverRadius: 0,
          tension: 0.43,
          fill: false
        }, {
          label: 'Base 1',
          data: baseline1,
          borderColor: 'rgba(0, 0, 0, 0.06)',
          borderWidth: 1.2,
          pointRadius: 0,
          tension: 0.4,
          fill: false
        }, {
          label: 'Base 2',
          data: baseline2,
          borderColor: 'rgba(0, 0, 0, 0.04)',
          borderWidth: 1,
          pointRadius: 0,
          tension: 0.45,
          fill: false
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        /* Suppress default multi-frame render interpolation behaviors */
        animation: false,
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            enabled: false
          }
        },
        scales: {
          x: {
            display: false,
            /* Bounds management strategy: restrict rendering grid space up to Index 11 (December) */
            min: 'Jan',
            max: 'Dec'
          },
          y: {
            display: false,
            min: 0,
            max: 90
          }
        }
      }
    });

    let cycle = 0;

    function animateHeartbeat() {
      cycle += 0.04; /* Controls the frequency speed coefficient of the waveforms */

      /* 1. Calculate structural micro-oscillations across midsection coordinates */
      for (let i = 1; i < 5; i++) {
        if (i === 3 || i === 4) {
          mainData[i] = mainData[i] + Math.sin(cycle + i) * 0.2;
        }
      }

      /* 2. Physics calibration: Lock base pulse and amplitude to strictly iterate within [40, 80] range */
      const basePulseHeight = 60;
      const amplitude = 12; // 60 - 12 = 48 min, 60 + 12 = 72 max (adds safety threshold within 40-80)

      for (let i = 5; i < mainData.length; i++) {
        mainData[i] = basePulseHeight + Math.sin(cycle + i * 0.5) * amplitude;
      }

      /* 3. Recompute vectors and update vector canvas engine context */
      heartRateChart.update();

      /* 4. Trace absolute target pixel dimensional properties of the ultimate dataset coordinate */
      const meta = heartRateChart.getDatasetMeta(0);
      if (meta.data && meta.data.length > 0) {
        const lastPointIndex = mainData.length - 1;
        const lastPoint = meta.data[lastPointIndex];

        if (lastPoint) {
          /* Shift UI overlay via hardware acceleration mapping coordinates on top of the vector point */
          glowIndicator.style.transform = `translate3d(${lastPoint.x}px, ${lastPoint.y}px, 0)`;

          /* Mutate the SVG text string dynamically matching the active numeric coordinate array state */
          const currentLiveValue = mainData[lastPointIndex];
          dynamicNumber.textContent = Math.round(currentLiveValue);
        }
      }

      requestAnimationFrame(animateHeartbeat);
    }

    /* Execute loop lifecycle processing sequence */
    animateHeartbeat();

    /* App capsule panel nav tab toggle interactions */
    const navItems = document.querySelectorAll('.nav-item:not(.action-btn):not(.style-circle)');
    navItems.forEach(item => {
      item.addEventListener('click', () => {
        const activeItem = document.querySelector('.nav-item.active');
        if (activeItem) activeItem.classList.remove('active');
        item.classList.add('active');
      });
    });
  };

  // Safely verify DOM status rules before parsing the script threadanimateHeartbeat
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();