.fp-iot-smart-home-battery-charging-ui {
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

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

  --fp-info-color: #0f172a;
  --fp-warning-color: #ffb3d1;
  --fp-danger-color: #ff6b9e;
  --fp-accent-color: #e0f2fe;

  all: unset;
  display: block;
  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  color: var(--fp-info-color);
}

.fp-iot-smart-home-battery-charging-ui * {
  box-sizing: border-box;
}

.fp-iot-smart-home-battery-charging-ui-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fp-aspect-ratio);
  background: var(--fp-primary-color);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fp-secondary-color);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.05);
}

.fp-iot-smart-home-battery-charging-ui-ambient {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at center, rgba(224, 242, 254, 0.4) 0%, transparent 60%);
  animation: fp-iot-smart-home-battery-charging-ui-breathe 4s ease-in-out infinite alternate;
  pointer-events: none;
}

.fp-iot-smart-home-battery-charging-ui-orbit {
  position: absolute;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  border: 2px dashed var(--fp-accent-color);
  animation: fp-iot-smart-home-battery-charging-ui-spin 35s linear infinite;
  pointer-events: none;
}

.fp-iot-smart-home-battery-charging-ui-card {
  position: relative;
  z-index: 10;
  width: 80%;
  height: 85%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.fp-iot-smart-home-battery-charging-ui-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.fp-iot-smart-home-battery-charging-ui-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fp-info-color);
}

.fp-iot-smart-home-battery-charging-ui-status {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--fp-accent-color);
  color: var(--fp-info-color);
  padding: 4px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fp-iot-smart-home-battery-charging-ui-status-dot {
  width: 6px;
  height: 6px;
  background: var(--fp-danger-color);
  border-radius: 50%;
  animation: fp-iot-smart-home-battery-charging-ui-blink 1s infinite alternate;
}

.fp-iot-smart-home-battery-charging-ui-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fp-iot-smart-home-battery-charging-ui-device {
  position: relative;
  height: 90%;
  aspect-ratio: 0.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fp-iot-smart-home-battery-charging-ui-float 6s ease-in-out infinite alternate;
}

.fp-iot-smart-home-battery-charging-ui-terminal {
  width: 35%;
  height: 12px;
  background: var(--fp-secondary-color);
  border-radius: 6px 6px 0 0;
  border: 2px solid var(--fp-secondary-color);
  border-bottom: none;
  z-index: 2;
}

.fp-iot-smart-home-battery-charging-ui-battery {
  position: relative;
  flex: 1;
  width: 100%;
  border-radius: 16px;
  border: 4px solid var(--fp-secondary-color);
  background: var(--fp-soft-color);
  box-shadow: inset 0 0 16px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.fp-iot-smart-home-battery-charging-ui-canvas-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.fp-iot-smart-home-battery-charging-ui-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.fp-iot-smart-home-battery-charging-ui-glass {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
  z-index: 5;
}

.fp-iot-smart-home-battery-charging-ui-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 24px;
}

.fp-iot-smart-home-battery-charging-ui-percent {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--fp-info-color);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.fp-iot-smart-home-battery-charging-ui-time {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fp-muted-color);
  margin-bottom: 4px;
}

@keyframes fp-iot-smart-home-battery-charging-ui-breathe {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.1); opacity: 1; }
}

@keyframes fp-iot-smart-home-battery-charging-ui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fp-iot-smart-home-battery-charging-ui-float {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

@keyframes fp-iot-smart-home-battery-charging-ui-blink {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 8px var(--fp-danger-color); }
}

@media (max-width: 400px) {
  .fp-iot-smart-home-battery-charging-ui-card {
    width: 90%;
    padding: 16px;
  }
  .fp-iot-smart-home-battery-charging-ui-percent {
    font-size: 2rem;
  }
}

document.querySelectorAll('.fp-iot-smart-home-battery-charging-ui').forEach(root => {
  const canvas = root.querySelector('.fp-iot-smart-home-battery-charging-ui-canvas');
  const percentEl = root.querySelector('.fp-iot-smart-home-battery-charging-ui-percent');
  if (!canvas || !percentEl) return;

  const ctx = canvas.getContext('2d');
  let animationFrameId;
  let isVisible = true;
  
  let time = 0;
  let drops = [];
  let splashWaves = [];
  let currentFill = 45; 
  let targetFill = 45;

  const colors = {
    bubblegum: '#ff6b9e',
    lightPink: '#ffb3d1'
  };

  const resizeCanvas = () => {
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width = rect.width * window.devicePixelRatio;
    canvas.height = rect.height * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
  };

  const animate = () => {
    if (!isVisible) return;
    
    time += 0.05;
    
    const width = canvas.width / window.devicePixelRatio;
    const height = canvas.height / window.devicePixelRatio;
    
    ctx.clearRect(0, 0, width, height);

    if (targetFill > currentFill) {
      currentFill += 0.02;
      percentEl.innerText = `${Math.floor(currentFill)}%`;
    }

    if (Math.random() < 0.02 && targetFill < 100) {
      targetFill += Math.random() * 0.5;
    }

    const liquidHeight = height * (currentFill / 100);
    const liquidY = height - liquidHeight;

    if (Math.random() < 0.04 && drops.length < 3) {
      drops.push({
        x: width * 0.2 + (Math.random() * width * 0.6), 
        y: -10,
        vy: 0,
        radius: 4 + Math.random() * 3,
        bounces: 1 + Math.floor(Math.random() * 2), 
        active: true
      });
    }

    for (let i = drops.length - 1; i >= 0; i--) {
      let d = drops[i];
      if (!d.active) {
        drops.splice(i, 1);
        continue;
      }

      d.vy += 0.3; 
      d.y += d.vy;

      if (d.y + d.radius >= liquidY) {
        if (d.bounces > 0) {
          d.y = liquidY - d.radius;
          d.vy = -d.vy * 0.5; 
          d.bounces--;
          
          splashWaves.push({ x: d.x, intensity: d.vy * 1.5, age: 0 });
        } else {
          d.active = false;
          splashWaves.push({ x: d.x, intensity: Math.abs(d.vy) * 2.5, age: 0 });
          targetFill += 0.1; 
        }
      }

      ctx.beginPath();
      ctx.arc(d.x, d.y, d.radius, 0, Math.PI * 2);
      ctx.fillStyle = colors.bubblegum;
      ctx.fill();
    }

    for (let i = splashWaves.length - 1; i >= 0; i--) {
      splashWaves[i].age++;
      if (splashWaves[i].age > 30) {
        splashWaves.splice(i, 1);
      }
    }

    ctx.beginPath();
    ctx.moveTo(0, height);
    ctx.lineTo(0, liquidY);

    for (let x = 0; x <= width; x += 4) {
      let y = liquidY + Math.sin(x * 0.05 + time) * 3;
      
      splashWaves.forEach(sw => {
        let dist = Math.abs(x - sw.x);
        if (dist < 30) {
          let damp = Math.max(0, 1 - sw.age / 30) * Math.max(0, 1 - dist / 30);
          y -= Math.cos(dist * 0.15 - (sw.age * 0.2)) * sw.intensity * damp;
        }
      });
      
      ctx.lineTo(x, y);
    }

    ctx.lineTo(width, height);
    
    const gradient = ctx.createLinearGradient(0, liquidY, 0, height);
    gradient.addColorStop(0, colors.lightPink);
    gradient.addColorStop(0.2, colors.bubblegum);
    gradient.addColorStop(1, '#e83e8c');

    ctx.fillStyle = gradient;
    ctx.fill();

    animationFrameId = requestAnimationFrame(animate);
  };

  const handleVisibilityChange = () => {
    isVisible = document.visibilityState === 'visible';
    if (isVisible) {
      animate();
    } else {
      cancelAnimationFrame(animationFrameId);
    }
  };

  const observer = new MutationObserver(() => {
    if (!document.body.contains(root)) {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      observer.disconnect();
    }
  });

  window.addEventListener('resize', resizeCanvas);
  document.addEventListener('visibilitychange', handleVisibilityChange);
  observer.observe(document.body, { childList: true, subtree: true });

  resizeCanvas();
  animate();
});