/**
 * TRUE phone-only shell (every device = one 430px app).
 *
 * Key trick: body is a fixed 430px column + transform, so ALL
 * position:fixed descendants (header, footer, drawer, overlays)
 * are positioned relative to the phone — never the full monitor.
 * Matches matka-romigames Flutter web maxWidth: 430.
 */
:root {
  --phone-width: 430px;
  /* Soft rail — avoid near-black corners/sides next to rounded phone column */
  --phone-rail: #E8EAED;
  --phone-bg: #f9fafb;
}

html {
  background: var(--phone-rail) !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* The phone itself */
body {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  /* transform creates containing block for position:fixed children */
  transform: translateX(-50%) !important;
  width: var(--phone-width) !important;
  max-width: 100vw !important;
  height: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  background: var(--phone-bg) !important;
  /* Soft brand-tinted depth — no heavy black glow (was causing dark corner bleed) */
  box-shadow:
    0 0 0 1px rgba(122, 12, 31, 0.08),
    0 12px 40px rgba(122, 12, 31, 0.12),
    0 4px 12px rgba(122, 12, 31, 0.06);
  border-radius: 0;
  overscroll-behavior: none !important;
}

/* Real phones: fill the screen edge-to-edge */
@media (max-width: 430px) {
  body {
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-shadow: none !important;
  }
}

/* App shell fills phone; only main scrolls */
body > .min-h-dvh,
body > .support-page,
body > .gali-shell,
body > .gp-shell,
body > .sg-shell,
.min-h-dvh {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

main.flex-1,
main.overflow-y-auto,
.gali-main,
.gp-body,
.sg-main,
.support-chat-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── Fixed chrome: now relative to body (phone), so left/right 0 is correct ── */
header.sticky,
header.bg-dark-gradient,
header.app-top-header,
nav.fixed.bottom-0,
.gp-bottom,
.safe-bottom {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

/* Drawer: slide over phone content (not beside it) */
.sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: min(300px, 86%) !important;
  max-width: 300px !important;
  height: 100% !important;
  max-height: 100% !important;
  z-index: 80 !important;
  /* closed: off-screen left of phone */
  transform: translate3d(-105%, 0, 0) !important;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 8px 0 28px rgba(122, 12, 31, 0.12) !important;
}

.sidebar.active {
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

/* Dim the whole phone behind drawer */
.sidebar-overlay {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  z-index: 70 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease !important;
}

.sidebar-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Modals / sheets fill phone only */
#editProfileSheet,
.modal,
.gp-modal,
.chat-modal,
.toast-container {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

#editProfileSheet > div,
.modal-content,
.gp-modal-card {
  max-width: 100% !important;
}

/* Phone-only: no desktop table layouts */
.bids-table-container {
  display: none !important;
}
.bids-cards {
  display: block !important;
}

/* Phone frame: full-height header logo (not tiny) */
.app-top-header .app-header-logo {
  height: 100% !important;
}
.app-top-header .app-header-logo img {
  height: 38px !important;
  max-height: 38px !important;
  max-width: min(240px, 52vw) !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Sidebar open: lock scroll, never expand body past phone */
body.sidebar-open,
body.overflow-hidden {
  overflow: hidden !important;
  width: var(--phone-width) !important;
  max-width: 100vw !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

@media (max-width: 430px) {
  body.sidebar-open,
  body.overflow-hidden {
    width: 100vw !important;
  }
}

/* Prevent media blowing past phone width */
body img,
body video,
body canvas {
  max-width: 100% !important;
  height: auto;
}