.jnwf, .jnwf * { box-sizing: border-box; }
.jnwf {
  position: fixed; right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom)); z-index: 99990;
  display: block; width: 60px; height: 60px; margin: 0; padding: 0;
  border: 0; background: transparent; text-decoration: none !important;
}
.jnwf-label {
  position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%);
  width: max-content; max-width: min(280px, calc(100vw - 120px));
  padding: 12px; border: 1px solid #e8e8e8; border-radius: 11px;
  background: #fff; color: #151515; box-shadow: 0 6px 24px #0003;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  font: 600 12px/1.4 "Poppins", sans-serif; letter-spacing: .025em;
  text-transform: none; overflow-wrap: anywhere;
}
.jnwf-circle {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; background: #25d366; box-shadow: 0 8px 22px #0008;
}
.jnwf-circle img { display: block; width: 28px; height: 28px; max-width: none; margin: 0; padding: 0; border: 0; filter: brightness(0) invert(1); }
.jnwf-circle::before {
  content: ""; position: absolute; inset: 0; border: 1px solid #25d366;
  border-radius: 50%; pointer-events: none; animation: jnwf-pulse 6s ease-out infinite;
}
@keyframes jnwf-pulse {
  0%, 27% { transform: scale(1); opacity: .7; }
  26%, 53%, 100% { transform: scale(1.6); opacity: 0; }
}
.jnwf:focus-visible { outline: 2px solid #25d366; outline-offset: 8px; border-radius: 50%; }
.jnwf:focus-visible .jnwf-label { opacity: 1; visibility: visible; }
@media (hover: hover) { .jnwf:hover .jnwf-label { opacity: 1; visibility: visible; } }
@media (max-width: 620px) {
  .jnwf { right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .jnwf-circle::before { animation: none; opacity: 0; }
  .jnwf-label { transition: none; }
}