/* NexoPlay V32 — Mobile-only UX polish. Desktop is intentionally untouched. */
@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* Hamburger menu: fixed mobile sheet so it can never render outside the viewport. */
  .menu-wrap { position: static !important; }
  .side-menu {
    position: fixed !important;
    z-index: 190 !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(76px + env(safe-area-inset-top, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px !important;
    padding: 10px !important;
    transform-origin: top center;
  }
  .side-menu.open { display: block !important; }
  .side-menu .menu-user {
    position: sticky;
    top: -10px;
    z-index: 2;
    margin: -10px -10px 6px !important;
    padding: 15px 16px 13px !important;
    backdrop-filter: blur(12px);
  }
  .side-menu button {
    min-height: 46px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 14px !important;
    font-size: 12px !important;
    touch-action: manipulation;
  }

  body[data-nx-theme="light"] .side-menu {
    background: rgba(250,253,255,.98) !important;
    border-color: #d9e5f2 !important;
    box-shadow: 0 22px 70px rgba(21,48,82,.20) !important;
  }
  body[data-nx-theme="light"] .side-menu .menu-user {
    background: rgba(250,253,255,.96) !important;
  }
  body[data-nx-theme="dark"] .side-menu {
    background: rgba(8,18,34,.98) !important;
    border-color: rgba(126,153,207,.20) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.48) !important;
  }
  body[data-nx-theme="dark"] .side-menu .menu-user {
    background: rgba(8,18,34,.96) !important;
  }

  /* Profile/auth: the whole content now scrolls vertically instead of being clipped. */
  #authBg {
    align-items: flex-start !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }
  #authBg .auth-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px))) !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }
  #authBg .auth-head {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 5;
  }
  #authBg .auth-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #profileView { min-height: min-content; }
  #profileView .nx5-profile-footer,
  #profileView .profile-actions { padding-bottom: 4px; }

  /* Mobile bottom navigation: same visual language, but horizontally scrollable. */
  .mobile-bottom {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    gap: 8px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-bottom::-webkit-scrollbar { display: none; }
  .mobile-bottom button {
    flex: 0 0 auto !important;
    min-width: 104px;
    min-height: 46px;
    white-space: nowrap;
    scroll-snap-align: start;
    touch-action: manipulation;
    padding: 10px 12px !important;
  }
  .mobile-bottom button:first-child { min-width: 92px; }
  .mobile-bottom button[data-nx-mobile="cart"] { min-width: 112px; }

  /* Avoid content being hidden underneath the fixed nav. */
  footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 380px) {
  .mobile-bottom button { min-width: 96px; font-size: 10px !important; }
  .side-menu { left: 8px !important; right: 8px !important; }
}

/* V32.1 — Profile-only mobile scroll hotfix.
   Use one scroll container (the overlay) to avoid nested touch scrolling on Android. */
@media (max-width: 720px) {
  #authBg[data-nx8-profile="1"],
  #authBg[data-nx7-mode="profile"] {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  #authBg[data-nx8-profile="1"] .auth-modal,
  #authBg[data-nx7-mode="profile"] .auth-modal {
    flex: 0 0 auto !important;
    width: calc(100% - 16px) !important;
    max-width: 560px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 8px auto calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #authBg[data-nx8-profile="1"] .auth-head,
  #authBg[data-nx7-mode="profile"] .auth-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
  }

  #authBg[data-nx8-profile="1"] .auth-body,
  #authBg[data-nx7-mode="profile"] .auth-body {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #authBg[data-nx8-profile="1"] #profileView,
  #authBg[data-nx7-mode="profile"] #profileView {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  #authBg[data-nx8-profile="1"] .nx5-profile-footer,
  #authBg[data-nx7-mode="profile"] .nx5-profile-footer {
    position: static !important;
    margin-bottom: 8px !important;
  }
}


/* V32.2 — Profile-only mobile compact layout + always-visible logout action.
   No desktop or other panel behavior is changed. */
.nx-profile-head-actions{display:flex;align-items:center;gap:8px}
.nx-profile-top-logout{display:none}

@media (max-width: 720px) {
  #authBg[data-nx8-profile="1"] .nx-profile-top-logout,
  #authBg[data-nx7-mode="profile"] .nx-profile-top-logout {
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:8px 11px;
    border-radius:12px;
    border:1px solid rgba(220,70,92,.20);
    background:#fff2f4;
    color:#b6344c;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
    touch-action:manipulation;
  }
  body[data-nx-theme="dark"] #authBg[data-nx8-profile="1"] .nx-profile-top-logout,
  body[data-nx-theme="dark"] #authBg[data-nx7-mode="profile"] .nx-profile-top-logout {
    background:rgba(182,52,76,.14);
    color:#ffb9c5;
    border-color:rgba(255,150,170,.20);
  }

  #authBg[data-nx8-profile="1"] .auth-head,
  #authBg[data-nx7-mode="profile"] .auth-head {
    padding:12px 14px!important;
    gap:10px!important;
  }
  #authBg[data-nx8-profile="1"] .auth-head h2,
  #authBg[data-nx7-mode="profile"] .auth-head h2 {
    font-size:17px!important;
    line-height:1.1!important;
  }
  #authBg[data-nx8-profile="1"] .auth-head .close,
  #authBg[data-nx7-mode="profile"] .auth-head .close {
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }

  #authBg[data-nx8-profile="1"] .auth-body,
  #authBg[data-nx7-mode="profile"] .auth-body {
    padding:9px 10px 18px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-hero,
  #authBg[data-nx7-mode="profile"] .nx5-profile-hero {
    padding:10px!important;
    gap:9px!important;
    border-radius:18px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-orb,
  #authBg[data-nx7-mode="profile"] .nx5-profile-orb {
    width:48px!important;
    height:48px!important;
    border-radius:15px!important;
    font-size:22px!important;
    flex:0 0 48px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-main h3,
  #authBg[data-nx7-mode="profile"] .nx5-profile-main h3 {
    font-size:17px!important;
    margin:2px 0 1px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-main p,
  #authBg[data-nx7-mode="profile"] .nx5-profile-main p {
    font-size:9px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-pills,
  #authBg[data-nx7-mode="profile"] .nx5-profile-pills {
    gap:4px!important;
    margin-top:6px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-pills span,
  #authBg[data-nx7-mode="profile"] .nx5-profile-pills span {
    padding:4px 6px!important;
    font-size:7.5px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-refresh,
  #authBg[data-nx7-mode="profile"] .nx5-profile-refresh {
    width:32px!important;
    height:32px!important;
    border-radius:10px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-grid,
  #authBg[data-nx7-mode="profile"] .nx5-profile-grid {
    gap:6px!important;
    margin-top:7px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-stat,
  #authBg[data-nx7-mode="profile"] .nx5-stat {
    padding:9px!important;
    border-radius:14px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-stat b,
  #authBg[data-nx7-mode="profile"] .nx5-stat b {
    font-size:14px!important;
    margin:2px 0!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-stat span,
  #authBg[data-nx8-profile="1"] .nx5-stat small,
  #authBg[data-nx7-mode="profile"] .nx5-stat span,
  #authBg[data-nx7-mode="profile"] .nx5-stat small {
    font-size:7.5px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-actions,
  #authBg[data-nx7-mode="profile"] .nx5-profile-actions {
    gap:5px!important;
    margin-top:7px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-actions .nx5-action,
  #authBg[data-nx7-mode="profile"] .nx5-profile-actions .nx5-action {
    padding:7px 8px!important;
    min-height:34px!important;
    font-size:8px!important;
    border-radius:10px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-panels,
  #authBg[data-nx7-mode="profile"] .nx5-profile-panels {
    gap:6px!important;
    margin-top:7px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-info-card,
  #authBg[data-nx7-mode="profile"] .nx5-info-card {
    padding:10px!important;
    border-radius:14px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-card-head h4,
  #authBg[data-nx7-mode="profile"] .nx5-card-head h4 {
    font-size:13px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-info-card p,
  #authBg[data-nx7-mode="profile"] .nx5-info-card p {
    margin-top:6px!important;
    font-size:8.5px!important;
    line-height:1.4!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-progress,
  #authBg[data-nx7-mode="profile"] .nx5-progress {
    margin-top:7px!important;
    height:6px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-account-line,
  #authBg[data-nx7-mode="profile"] .nx5-account-line {
    margin-top:7px!important;
    padding:8px 9px!important;
  }
  #authBg[data-nx8-profile="1"] .nx5-profile-footer,
  #authBg[data-nx7-mode="profile"] .nx5-profile-footer {
    margin-top:7px!important;
    gap:5px!important;
  }

  /* The header action is the guaranteed logout route on phones. Keep the old footer action for compatibility. */
  #authBg[data-nx8-profile="1"] .nx5-profile-footer .danger,
  #authBg[data-nx7-mode="profile"] .nx5-profile-footer .danger {
    display:none!important;
  }
}

@media (max-width: 380px) {
  #authBg[data-nx8-profile="1"] .nx-profile-top-logout,
  #authBg[data-nx7-mode="profile"] .nx-profile-top-logout {
    padding:7px 9px;
    font-size:9px;
  }
}