/* Mobile layout V5 - loaded after style.css to avoid legacy cascade conflicts. */
html,body{overflow-x:hidden!important}
body.app-page{width:100%!important;max-width:480px!important;margin:0 auto!important;background:#f8faff!important;box-shadow:0 0 46px rgba(20,35,70,.10)!important}
body.app-page main.container.app-main{
  width:calc(100% - 32px)!important;
  max-width:448px!important;
  margin-left:16px!important;
  margin-right:16px!important;
  padding-left:0!important;
  padding-right:0!important;
  padding-top:64px!important;
  padding-bottom:92px!important;
  box-sizing:border-box!important;
}
body.app-page .app-title-row,
body.app-page .filter-row,
body.app-page .catalog-grid,
body.app-page .owned-grid,
body.app-page .profile-layout,
body.app-page .profile-section,
body.app-page .history-card,
body.app-page .empty-state{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}
body.app-page .catalog-card,
body.app-page .owned-card,
body.app-page .account-card,
body.app-page .profile-wallet,
body.app-page .wallet-card{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
body.app-page .app-title-row{position:relative!important;padding-right:66px!important}
body.app-page .app-title-row .page-back-button,
body.app-page .app-title-row>a.page-back-button{right:0!important;top:0!important;margin:0!important}
body.app-page .catalog-grid,body.app-page .owned-grid{grid-template-columns:1fr!important;gap:14px!important}
body.app-page .catalog-card{overflow:hidden!important;border-radius:22px!important}
body.app-page .catalog-art{width:100%!important}
body.app-page .profile-main .profile-layout{display:block!important}
body.app-page .profile-main .profile-wallet{margin-bottom:14px!important}
body.app-page .profile-main .profile-section{margin-top:22px!important}
body.app-page .mobile-bottom-nav{width:min(480px,100vw)!important;left:50%!important;transform:translateX(-50%)!important}
@media(max-width:380px){body.app-page main.container.app-main{width:calc(100% - 28px)!important;margin-left:14px!important;margin-right:14px!important}}

/* =========================================================
   Mobile layout V6
   1. Hide visible scrollbars while preserving scrolling.
   2. Pin bottom navigation to the bottom of the viewport.
========================================================= */

/* Keep scrolling enabled, but hide scrollbar tracks/thumbs. */
html,
body,
body.app-page,
body.app-page * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body.app-page::-webkit-scrollbar,
body.app-page *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Fixed mobile bottom navigation. */
body.app-page .mobile-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(480px, 100vw) !important;
    max-width: 480px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
}

/* Reserve enough space so page content is not covered by the fixed nav. */
body.app-page main.container.app-main {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
}

/* iPhone / full-screen browser safe-area support. */
body.app-page .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* =========================================================
   Support page: fixed header + scrollable messages + fixed composer
   Only the middle message list scrolls.
========================================================= */
html:has(body.support-page),
html:has(body.support-page) body {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}

body.support-page {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body.support-page .support-shell {
    position: relative !important;
    width: 100% !important;
    max-width: 480px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #f8faff !important;
    box-sizing: border-box !important;
}

body.support-page .support-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    z-index: 30 !important;
    box-sizing: border-box !important;
}

body.support-page .support-messages {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body.support-page .support-messages::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

body.support-page .support-composer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    z-index: 30 !important;
    margin: 0 !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
}

/* Customer-service page does not use the normal app bottom navigation. */
body.support-page .mobile-bottom-nav {
    display: none !important;
}

/* Support composer text wrapping fix */
body.support-page .support-composer {
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
}
body.support-page .support-composer textarea {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    resize: none !important;
    overflow-x: hidden !important;
}

/* Support textarea V2: auto-height, no inner scrollbar, comfortable vertical spacing */
body.support-page .support-composer textarea {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    min-height: 46px !important;
    max-height: 132px !important;
    height: 46px;
    padding: 11px 14px !important;
    line-height: 22px !important;
    border-radius: 23px !important;
    box-sizing: border-box !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    resize: none !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}