/*
 * DREAMMAKER FLOATING KALSHI HELP V1.1
 *
 * Compact floating Help control for the beta Kalshi setup flow.
 * It reuses the existing Help instructions and does not add a
 * MutationObserver.
 */

/*
 * Keep the older floating Help control hidden.
 */
#dm-beta-help-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/*
 * Hide the unsuccessful inline connection-help placement.
 */
#dm-kalshi-connection-help-container,
#dm-kalshi-connection-help-button,
#dm-kalshi-connection-help-status {
  display: none !important;
}

/*
 * Compact floating button, similar to Beta Administration.
 */
#dm-floating-kalshi-help-button {
  position: fixed;
  right:
    max(
      12px,
      env(safe-area-inset-right)
    );
  bottom:
    calc(
      92px +
      env(safe-area-inset-bottom)
    );

  z-index: 2147482500;

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

  width: min(250px, calc(100vw - 32px));
  min-height: 52px;

  padding: 11px 18px;

  border: 1px solid rgba(87, 179, 255, 0.82);
  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(37, 106, 211, 0.98),
      rgba(38, 174, 198, 0.98)
    );

  box-shadow:
    0 14px 30px rgba(5, 49, 120, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);

  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#dm-floating-kalshi-help-button.dm-visible {
  display: flex;
}

#dm-floating-kalshi-help-button:active {
  transform: translateY(1px);
}

@media (max-width: 420px) {
  #dm-floating-kalshi-help-button {
    right:
      max(
        10px,
        env(safe-area-inset-right)
      );

    bottom:
      calc(
        88px +
        env(safe-area-inset-bottom)
      );

    width: min(225px, calc(100vw - 28px));
    min-height: 48px;

    padding: 10px 14px;

    border-radius: 25px;

    font-size: 14px;
  }
}