#unitSupportFloat {
  position: fixed;
  right: 32px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 11900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.52rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(37, 99, 235), rgb(79, 70, 229));
  box-shadow: 0 8px 22px rgba(67, 56, 202, 0.28), 0 2px 6px rgba(15, 23, 42, 0.12);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  animation: unit-public-support-pulse 2.4s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

@keyframes unit-public-support-pulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(67, 56, 202, 0.28), 0 2px 6px rgba(15, 23, 42, 0.12); }
  50% { box-shadow: 0 10px 29px rgba(67, 56, 202, 0.5), 0 2px 9px rgba(37, 99, 235, 0.22), 0 0 0 5px rgba(99, 102, 241, 0.14); }
}

#unitSupportFloat:hover,
#unitSupportFloat:focus-visible {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

#unitSupportFloat svg { width: 1rem; height: 1rem; flex: none; }

#unitSupportFloat.has-unread::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ef4444;
}

@media (prefers-reduced-motion: reduce) {
  #unitSupportFloat { animation: none; }
}
