/* Bingo — Mobile: stable layout + Apple glass chrome */

@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
  }

  body.app-body {
    --mobile-header-h: 52px;
    --bottom-nav-h: 52px;
    --bottom-nav-margin: 10px;
    --bottom-nav-safe: env(safe-area-inset-bottom, 0px);
    --bottom-nav-float: calc(var(--bottom-nav-h) + var(--bottom-nav-margin) + var(--bottom-nav-safe));
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-page-pad-top: calc(var(--mobile-header-h) + var(--mobile-safe-top));
    --mobile-page-pad-bottom: calc(var(--bottom-nav-float) + 16px);
    --mobile-gutter: 12px;

    overflow-x: hidden;
    width: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  body.app-body.sidebar-lock {
    overflow: hidden;
    position: fixed;
    width: 100%;
    touch-action: none;
  }

  .app-layout {
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
  }

  /* Sidebar drawer */
  .app-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 300px) !important;
    transform: translate3d(-110%, 0, 0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    pointer-events: none;
    z-index: 300;
  }

  .app-layout.sidebar-open .app-sidebar {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  .app-layout.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 250;
  }

  /* Main content — fixed padding slots */
  .app-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    min-height: 100dvh;
    padding: var(--mobile-page-pad-top) var(--mobile-gutter) var(--mobile-page-pad-bottom) !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .app-feed,
  .search-page,
  .notif-list,
  .messages-layout,
  .reels-page-grid,
  .explore-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .app-main .app-feed:not(.app-feed--padded) {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  .app-main .app-feed--padded {
    padding-left: 0;
    padding-right: 0;
    max-width: 640px;
    margin: 0 auto;
  }

  /* Profile — keep mobile top bar + bottom nav like other app pages */
  body.profile-page-active .app-main {
    padding-top: var(--mobile-page-pad-top, 0) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: var(--mobile-page-pad-bottom, 80px) !important;
  }

  body.profile-page-active.has-mobile-chrome .app-main {
    padding-top: calc(var(--shell-header-h, 56px) + env(safe-area-inset-top, 0px) + 4px) !important;
  }

  body.profile-page-active .ig-profile {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Reels full-screen page */
  body.reels-open .app-main,
  body.reels-open .bottom-nav {
    visibility: hidden;
  }

  /* Padded page elements */
  .app-main .page-header,
  .app-main .settings-tabs,
  .app-main .settings-panel,
  .app-main #ordersTabs,
  .app-main #ordersList,
  .app-main .search-input-wrap,
  .app-main .search-tabs,
  .app-main #searchResults,
  .app-main .master-category-chips,
  .app-main .profile-header,
  .app-main .profile-stats,
  .app-main .profile-actions,
  .app-main .profile-bio,
  .app-main .profile-meta {
    box-sizing: border-box;
  }

  .app-feed--padded .settings-section {
    margin-left: 0;
    margin-right: 0;
  }

  /* Fixed glass header — logo only, full width */
  .mobile-top-bar,
  #mobileTopBar.mobile-top-bar {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    position: fixed !important;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 220;
    height: var(--mobile-page-pad-top);
    padding: var(--mobile-safe-top) 14px 0;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--shell-surface, #ffffff) 72%, transparent);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-bottom: 0.5px solid var(--shell-border, rgba(0, 0, 0, 0.06));
    margin: 0 !important;
  }

  .mobile-top-bar .logo,
  .mobile-top-bar .logo-text,
  .mobile-top-bar .mobile-top-avatar,
  .mobile-top-bar a[aria-label="Profile"],
  .mobile-top-bar a[aria-label="Sign in"],
  .mobile-top-bar__slot {
    display: none !important;
  }

  .mobile-top-bar__logo {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .mobile-top-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text);
    background: color-mix(in srgb, var(--shell-surface, #ffffff) 55%, transparent);
    border: 0.5px solid var(--shell-border, rgba(0, 0, 0, 0.06));
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  }

  .mobile-top-btn .icon-svg {
    width: 20px;
    height: 20px;
  }

  .mobile-top-bar .logo-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  /* Floating glass bottom nav */
  .bottom-nav {
    display: flex !important;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(10px + var(--bottom-nav-safe));
    width: auto;
    max-width: calc(100% - 28px);
    height: 56px;
    margin: 0 auto;
    padding: 0 8px;
    border-radius: 28px;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--shell-surface, #ffffff) 68%, transparent);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 0 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    z-index: 200;
  }

  .bottom-nav-link {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: #8e8e93;
    opacity: 1;
    border-radius: 14px;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    transform: none !important;
  }

  .bottom-nav-link:active {
    opacity: 0.55;
  }

  .bottom-nav-link.active {
    color: #1d1d1f;
  }

  .bottom-nav-link.active .nav-icon .icon-svg {
    stroke-width: 2.2;
  }

  .bottom-nav-link .nav-icon .icon-svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .bottom-nav-profile .bottom-nav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e5ea;
    font-size: 10px;
    font-weight: 700;
    color: #636366;
    border: 2px solid transparent;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .bottom-nav-profile .bottom-nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bottom-nav-link.active.bottom-nav-profile .bottom-nav-avatar {
    border-color: #1d1d1f;
  }

  .bottom-nav-dot {
    position: absolute;
    top: 8px;
    right: calc(50% - 14px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b30;
    border: 1.5px solid #fff;
    pointer-events: none;
  }

  /* Stories — glass strip */
  .stories-bar {
    padding: 4px var(--mobile-gutter) 12px;
    margin: 0;
    border-bottom: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .stories-bar::-webkit-scrollbar { display: none; }

  .story-bubble {
    flex: 0 0 68px;
    width: 68px;
    max-width: 68px;
  }

  .story-bubble .story-ring {
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
    max-width: 62px;
    max-height: 62px;
  }

  .story-bubble-name {
    font-size: 10px;
    max-width: 68px;
    width: 68px;
  }

  /* Post cards — stable glass cards */
  .post-card {
    width: auto;
    margin: 0 var(--mobile-gutter) 12px;
    border-radius: 16px;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    border-left: 0.5px solid rgba(0, 0, 0, 0.06);
    border-right: 0.5px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transform: none !important;
    transition: none;
  }

  .post-card + .post-card {
    border-top: none;
    margin-top: 0;
  }

  .post-card:hover {
    transform: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  }

  .post-media {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
  }

  .post-media.post-media--original {
    aspect-ratio: auto;
    min-height: 280px;
    max-height: min(80vh, 900px);
  }

  .post-media img,
  .post-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .post-media.post-media--original .media-frame__content img,
  .post-media.post-media--original .media-frame__content video {
    object-fit: contain;
    height: auto;
    max-height: min(80vh, 900px);
  }

  .post-header,
  .post-actions,
  .post-likes,
  .post-caption,
  .post-comments-link,
  .post-time {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* FAB — fixed position */
  .fab-create,
  #fabReel {
    bottom: calc(var(--bottom-nav-float) + 8px) !important;
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    transform: none !important;
  }

  .fab-create:hover,
  #fabReel:hover {
    transform: none !important;
  }

  /* Messages */
  .messages-layout {
    height: calc(100dvh - var(--mobile-page-pad-top) - var(--mobile-page-pad-bottom));
    min-height: 320px;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .chat-list {
    width: 100%;
  }

  /* Profile — do not force column; ig-profile grid handles mobile */
  .app-main .ig-profile .profile-header,
  .app-main .ig-profile__header {
    flex-direction: unset;
    align-items: end;
    text-align: left;
  }

  body.profile-page-active .app-main .ig-profile__header,
  body.profile-page-active .app-main .ig-profile .profile-header {
    align-items: center !important;
  }

  .app-main .ig-profile .profile-stats,
  .app-main .ig-profile__stats {
    justify-content: space-around;
    width: 100%;
  }

  .app-main .ig-profile .profile-actions,
  .app-main .ig-profile__actions {
    justify-content: stretch;
    width: 100%;
  }

  .app-main .ig-profile .profile-bio,
  .app-main .ig-profile .profile-meta {
    max-width: 100%;
    text-align: left;
  }

  .profile-settings-btn {
    flex: 1;
    max-width: 200px;
  }

  /* Settings */
  .settings-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .settings-tabs::-webkit-scrollbar { display: none; }

  .settings-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .settings-section {
    margin-bottom: 12px;
  }

  .account-type-grid {
    grid-template-columns: 1fr 1fr;
  }

  .settings-link-grid {
    grid-template-columns: 1fr;
  }

  /* Search */
  .search-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    box-sizing: border-box;
  }

  .search-input-compact {
    flex: 1;
    min-width: 120px;
    padding: 8px 12px;
  }

  .search-filter-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  /* Grids */
  .explore-grid,
  .reels-page-grid {
    gap: 2px;
    margin: 0 calc(var(--mobile-gutter) * -1);
    width: calc(100% + var(--mobile-gutter) * 2);
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .page-header {
    font-size: 22px;
    padding-top: 0;
    margin-bottom: 16px;
    border-bottom: none;
  }

  /* Prevent overflow & layout shift */
  .app-main img,
  .app-main video,
  .app-main iframe,
  .app-main pre,
  .app-main table {
    max-width: 100%;
  }

  img, video, iframe {
    max-width: 100%;
  }

  .post-media img,
  .post-media video {
    height: 100%;
  }

  /* Disable hover shifts on touch */
  .post-card:hover,
  .order-card:hover,
  .product-card:hover,
  .market-card:hover,
  .settings-link-item:hover,
  .notif-item:hover,
  .suggested-user:hover {
    transform: none !important;
  }

  .notif-item:hover {
    margin: 0 !important;
    padding-left: inherit !important;
    padding-right: inherit !important;
  }

  /* No entrance animation on mobile */
  .app-feed {
    animation: none !important;
  }

  /* Order / product cards */
  .order-card,
  .product-card,
  .market-card {
    transform: none !important;
  }
}

@media (min-width: 769px) {
  .mobile-top-bar {
    display: none !important;
  }
}

/* Auth, welcome, landing — mobile layout fixes */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.auth-body,
  body.welcome-body,
  body.landing-page {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
  }

  body.auth-body .auth-page {
    display: block !important;
    width: 100%;
    max-width: 100vw;
  }

  body.auth-body .auth-visual {
    display: none !important;
  }

  body.auth-body .logo-text {
    font-size: 18px !important;
  }

  body.auth-body .logo-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
  }

  body.welcome-body {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  body.welcome-body .welcome-header {
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  }

  body.welcome-body .welcome-content {
    padding: 24px 16px max(24px, env(safe-area-inset-bottom));
    justify-content: flex-start;
  }

  body.welcome-body .welcome-emoji {
    font-size: 52px;
    margin-bottom: 18px;
  }

  body.welcome-body .welcome-title {
    font-size: 24px !important;
    line-height: 1.2;
  }

  body.welcome-body .welcome-desc {
    font-size: 15px;
    margin-bottom: 24px;
  }

  body.welcome-body .welcome-features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.welcome-body .welcome-actions .btn-lg {
    width: 100%;
    padding: 13px 18px;
    font-size: 15px;
  }

  body.landing-page {
    overflow-x: hidden;
  }

  body.landing-page .landing-nav-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.bingo-pull-hint {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 9999;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(15, 23, 42, 0.88);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.bingo-pull-hint.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}