/**
 * SWAMI 777 WebApp — APK parity shell
 * Loaded LAST. Makes browser webapp behave like the native APK:
 *  - Fixed phone column (430px)
 *  - Body NEVER scrolls (except tall auth forms)
 *  - Only <main> scrolls
 *  - Bottom tabbar fixed inside the phone
 *  - No rubber-band / double-scroll / horizontal bleed
 */

:root {
  --phone-width: 430px;
  --phone-rail: #C4B59A;
  --phone-bg: #FDF2DF;
  --app-tab-h: 64px;
  --app-tab-pad: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* ═══════════════ Document lock ═══════════════ */
html {
  height: 100% !important;
  height: 100dvh !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: var(--phone-rail) !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

/* ═══════════════ Phone body (app frame) ═══════════════ */
body {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--phone-width) !important;
  max-width: 100% !important; /* never 100vw — avoids horizontal gap/scroll */
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
  background: var(--phone-bg) !important;
  box-shadow:
    0 0 0 1px rgba(194, 117, 128, 0.10),
    0 12px 40px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.08);
  -webkit-tap-highlight-color: rgba(194, 117, 128, 0.12);
  touch-action: manipulation;
}

@media (max-width: 430px) {
  body {
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }
}

/* ═══════════════ App shell: fill phone, no grow past ═══════════════ */
body:not(.auth-page) > .min-h-dvh,
body:not(.auth-page) .min-h-dvh,
body:not(.auth-page) .ui-page,
body:not(.auth-page) .ui-fund-page,
body:not(.auth-page) .app-container,
body:not(.auth-page) > .support-page,
body:not(.auth-page) > .gali-shell,
body:not(.auth-page) > .gp-shell,
body:not(.auth-page) > .sg-shell,
body:not(.auth-page) > .ui-dash-shell {
  height: 100% !important;
  max-height: 100% !important;
  /* Kill Tailwind min-h-dvh growth that causes double-scroll */
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  box-sizing: border-box !important;
}

/* Headers / sticky chrome never shrink away */
body:not(.auth-page) header,
body:not(.auth-page) .app-top-header,
body:not(.auth-page) .scrolling-ticker-container {
  flex-shrink: 0 !important;
}

/* ═══════════════ ONLY main scrolls (APK content area) ═══════════════ */
body:not(.auth-page) main,
body:not(.auth-page) main.flex-1,
body:not(.auth-page) main.overflow-y-auto,
body:not(.auth-page) main.home-main,
body:not(.auth-page) main.ui-main,
body:not(.auth-page) .gali-main,
body:not(.auth-page) .gp-body,
body:not(.auth-page) .sg-main,
body:not(.auth-page) .ui-dash-main,
body:not(.auth-page) .support-chat-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  /* Space for fixed tabbar + home FAB */
  padding-bottom: var(--app-tab-pad) !important;
  box-sizing: border-box !important;
}

/* Inner scroll helpers: do not create a second nested scroller on home */
body:not(.auth-page) .home-scroll {
  overflow: visible !important;
  min-height: 0 !important;
}

/* Nested pages that used pb-24 etc. — keep safe bottom, no double huge padding */
body:not(.auth-page) main.pb-24,
body:not(.auth-page) main.pb-20,
body:not(.auth-page) main.pb-28 {
  padding-bottom: var(--app-tab-pad) !important;
}

/* ═══════════════ Bottom tabbar (fixed in phone) ═══════════════ */
nav.app-tabbar,
.app-tabbar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 50 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* ═══════════════ Fixed chrome inside phone ═══════════════ */
header.sticky,
header.app-top-header,
header.bg-dark-gradient,
nav.fixed.bottom-0,
.gp-bottom,
.safe-bottom {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

/* ═══════════════ Media never overflow ═══════════════ */
body img,
body video,
body canvas,
body iframe,
body svg {
  max-width: 100% !important;
}

/* Tables / wide blocks: scroll inside, not the phone */
.overflow-x-auto,
.table-responsive,
.bids-table-container {
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════ Sidebar drawer (phone overlay) ═══════════════ */
.sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  z-index: 80 !important;
}
.sidebar-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 70 !important;
}
body.sidebar-open,
body.overflow-hidden {
  overflow: hidden !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* ═══════════════ Auth pages ═══════════════ */
/* Register / forgot / OTP: body may scroll so submit is reachable */
body.auth-page {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

/* Login: no empty scroll — fit one screen like APK splash/login */
body.auth-page.auth-page--login {
  overflow: hidden !important;
  overflow-y: hidden !important;
  justify-content: center !important;
  padding: max(10px, env(safe-area-inset-top, 0px)) 14px max(10px, env(safe-area-inset-bottom, 0px)) !important;
  overscroll-behavior: none !important;
}
body.auth-page.auth-page--login .auth-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-height: 100%;
  overflow: hidden;
  width: 100%;
}
body.auth-page.auth-page--login .auth-logo img {
  max-height: min(96px, 15vh) !important;
}
body.auth-page.auth-page--login .auth-card {
  padding: 16px 18px !important;
}

/* Keyboard / short height: allow login scroll so fields stay usable */
@media (max-height: 520px) {
  body.auth-page.auth-page--login {
    overflow-y: auto !important;
    justify-content: flex-start !important;
  }
  body.auth-page.auth-page--login .auth-container {
    overflow: visible;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
}

/* ═══════════════ Inputs: no iOS zoom ═══════════════ */
@media (max-width: 480px) {
  input.form-control,
  select.form-control,
  textarea.form-control,
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════ Utility kills that break app shell ═══════════════ */
/* Tailwind min-h-screen / min-h-dvh must not expand body */
body:not(.auth-page) .min-h-screen,
body:not(.auth-page) .min-h-dvh,
body:not(.auth-page) .h-screen,
body:not(.auth-page) .h-dvh {
  min-height: 0 !important;
}
body:not(.auth-page).h-full,
body:not(.auth-page).h-screen {
  height: 100% !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
}

/* Prevent accidental document scroll from focus jumps */
body:not(.auth-page) {
  scroll-behavior: auto !important;
}