/* Final continuous-canvas rules shared by every main application page. */
html,
body,
body.layout-main,
body.layout-main .app-shell {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

body.layout-main,
body.layout-main .app-shell,
body.layout-main main,
body.layout-main .page {
  background-color: #141414;
}

body.layout-main .page.active {
  min-height: calc(100vh - 86px) !important;
  min-height: calc(100dvh - 86px) !important;
}

/* Wallet-family pages use their existing navy canvas from top to bottom. */
body.current-page-wallet,
body.current-page-walletTransactions,
body.current-page-redemptionHistory,
body.current-page-wallet .app-shell,
body.current-page-walletTransactions .app-shell,
body.current-page-redemptionHistory .app-shell,
body.current-page-wallet main,
body.current-page-walletTransactions main,
body.current-page-redemptionHistory main,
body.current-page-wallet .page,
body.current-page-walletTransactions .page,
body.current-page-redemptionHistory .page {
  background-color: #07101f !important;
}

/* Authentication is a full-height page, not a detached panel below the header. */
body.auth-open #authModal {
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-y: auto !important;
  background: #141414 !important;
}

body.auth-open #authModal .modal,
body.auth-open #authModal .modal.register,
body.auth-open #authModal .modal:not(.register) {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-bottom: 124px !important;
  background: #141414 !important;
}

/* Login and registration share one full-width brand header. */
body.auth-open .bottom-nav {
  display: none !important;
}

html body.auth-open:has(#authModal.open) .app-shell .bottom-nav {
  display: none !important;
}

.auth-bottom-brand {
  display: none;
}

body.auth-open .auth-bottom-brand {
  position: fixed;
  z-index: 1002;
  left: 50%;
  top: 0;
  bottom: auto;
  transform: translateX(-50%);
  width: min(100%, 810px);
  height: 100px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #f6cb68;
  background: #020814 url("assets/xiaoxiao-header-bg.png?v=clean3") center/cover no-repeat;
  border-bottom: 3px solid #d8a22f;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
}

body.auth-open #authModal .modal,
body.auth-open #authModal .modal.register,
body.auth-open #authModal .modal:not(.register) {
  padding-top: 124px !important;
  padding-bottom: 32px !important;
}

.auth-bottom-brand-logo {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  display: grid;
  place-items: center;
}

.auth-bottom-brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-bottom-brand strong {
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Logged-out home only shows the two authentication actions. */
body:not(.logged-in) .home-contact-actions {
  display: none !important;
}

@media (max-width: 767px) {
  body.layout-main .page.active {
    min-height: calc(100vh - 72px) !important;
    min-height: calc(100dvh - 72px) !important;
  }

  body.auth-open #authModal {
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  body.auth-open #authModal .modal,
  body.auth-open #authModal .modal.register,
  body.auth-open #authModal .modal:not(.register) {
    padding-top: calc(102px + env(safe-area-inset-top)) !important;
    padding-bottom: 28px !important;
  }

  body.auth-open .auth-bottom-brand {
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    height: calc(82px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    gap: 12px;
  }

  .auth-bottom-brand-logo {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .auth-bottom-brand strong {
    font-size: clamp(19px, 5.3vw, 24px);
  }
}