.orbi-widget {
  position: fixed !important;
  right: 22px;
  bottom: 22px;
  width: 190px;
  height: 190px;
  z-index: 2147483647;
  pointer-events: auto;
}

.orbi-widget__button {
  position: relative;

  width: 190px;
  height: 190px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  border: 0;
  outline: none;

  overflow: visible;

  cursor: pointer;

  background: transparent;

  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.orbi-widget__button:hover {
  transform: translateY(-4px) scale(1.04);
}

#orbiCanvas {
  position: relative;
  z-index: 3;

  width: 190px !important;
  height: 190px !important;

  display: block !important;

  background: transparent !important;

  filter:
    drop-shadow(0 18px 40px rgba(0,0,0,0.35))
    drop-shadow(0 0 24px rgba(228,5,20,0.22));
}

/*
========================================
GLOW ENERGÉTICO
========================================
*/

.orbi-widget__button::before {
  content: "";

  position: absolute;

  inset: 20%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(228,5,20,0.22) 0%,
      rgba(228,5,20,0.08) 45%,
      transparent 72%
    );

  filter: blur(24px);

  z-index: 1;

  animation: orbiPulse 4s ease-in-out infinite;
}

/*
========================================
SOMBRA BASE
========================================
*/

.orbi-widget__button::after {
  content: "";

  position: absolute;

  bottom: 8px;
  left: 50%;

  width: 55%;
  height: 18px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: rgba(0,0,0,0.28);

  filter: blur(16px);

  z-index: 0;
}

/*
========================================
LABEL
========================================
*/

.orbi-widget__label {
  position: absolute;

  right: 0;
  bottom: calc(100% + 10px);

  padding: 9px 14px;

  border-radius: 999px;

  white-space: nowrap;

  font-size: 0.76rem;
  font-weight: 800;

  color: #111;

  background: rgba(255,255,255,0.92);

  border: 1px solid rgba(0,0,0,0.06);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.12);

  backdrop-filter: blur(14px);

  pointer-events: none;

  z-index: 20;
}

.orbi-widget__sphere{
    width:96px;
    height:96px;
}

.orbi-widget__sphere canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

/*
========================================
FALLBACK
========================================
*/

.orbi-widget__fallback {
  display: none;
}

/*
========================================
ANIMACIÓN
========================================
*/

@keyframes orbiPulse {

  0% {
    transform: scale(1);
    opacity: 0.7;
  }

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

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

/*
========================================
MOBILE
========================================
*/

@media (max-width: 640px) {

  .orbi-widget {
    right: 12px;
    bottom: 12px;

    width: 145px;
    height: 145px;
  }

  .orbi-widget__button {
    width: 145px;
    height: 145px;
  }

  #orbiCanvas {
    width: 145px !important;
    height: 145px !important;
  }

  .orbi-widget__label {
    font-size: 0.7rem;
    padding: 7px 11px;
  }
}

/*
========================================
DARK MODE
========================================
*/

@media (prefers-color-scheme: dark) {

  .orbi-widget__label {

    color: #fff;

    background: rgba(10,10,10,0.84);

    border-color: rgba(255,255,255,0.08);
  }
}