/* RecarregaAi! 2.3.6 */

.floating-tools {
  --floating-tools-bottom: var(--floating-tools-gap, 24px);
  --floating-tools-gap: 24px;

  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: var(--floating-tools-bottom);
  z-index: 30;
  display: grid;
  gap: 14px;
  justify-items: center;
  transition: bottom 160ms ease;
}

.floating-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  gap: 0;
  color: #0f172a;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.97);
  border: 0;
  border-radius: 999px;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(203, 213, 225, 0.85);
  cursor: pointer;
  isolation: isolate;
  overflow: visible;
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.floating-action:hover,
.floating-action:focus-visible {
  width: 48px;
  min-width: 48px;
  gap: 0;
  background: #ffffff;
  box-shadow:
    0 20px 44px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(148, 163, 184, 0.85);
  transform: translateY(-2px);
}

.floating-action:focus-visible {
  outline: 3px solid rgba(45, 156, 255, 0.22);
  outline-offset: 4px;
}

.floating-action:active {
  transform: translateY(0);
}

.floating-action__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.floating-action__theme-icon {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #f5a524;
  background: currentColor;
  border-radius: 999px;
  box-shadow:
    0 0 0 5px #ffffff,
    0 0 0 9px rgba(245, 165, 36, 0.17),
    0 9px 18px rgba(245, 165, 36, 0.22);
}

.floating-action__theme-icon::after {
  position: absolute;
  inset: -7px;
  content: "";
  border: 1px solid rgba(245, 165, 36, 0.16);
  border-radius: inherit;
}

:root[data-theme="dark"] .floating-action__theme-icon {
  color: #0f172a;
  background: transparent;
  box-shadow:
    inset -6px -4px 0 0 currentColor,
    0 0 0 5px #ffffff,
    0 0 0 9px rgba(45, 156, 255, 0.15),
    0 9px 18px rgba(15, 23, 42, 0.12);
}

:root[data-theme="dark"] .floating-action__theme-icon::after {
  inset: 2px 0 0 8px;
  width: 4px;
  height: 4px;
  background: currentColor;
  border: 0;
  box-shadow:
    7px 2px 0 -1px currentColor,
    -2px 8px 0 -1px currentColor;
}

.floating-action__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  display: block;
  max-width: none;
  padding: 9px 13px;
  overflow: visible;
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 999px;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(203, 213, 225, 0.82);
  transform: translate(8px, -50%);
  transition:
    opacity 140ms ease,
    transform 160ms ease,
    visibility 140ms ease;
  visibility: hidden;
}

.floating-action:hover .floating-action__label,
.floating-action:focus-visible .floating-action__label {
  opacity: 1;
  transform: translate(0, -50%);
  visibility: visible;
}

@media (max-width: 720px) {
  .floating-tools {
    --floating-tools-gap: 18px;

    right: 14px;
    gap: 12px;
  }

  .floating-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .floating-action:hover,
  .floating-action:focus-visible {
    width: 44px;
    min-width: 44px;
  }

  .floating-action__label {
    right: calc(100% + 8px);
    max-width: min(58vw, 180px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}