/*
 * Shared mobile viewport contract.
 *
 * This is intentionally the final public stylesheet: each feature keeps its
 * own visual design, while this layer owns only viewport geometry, safe areas,
 * keyboard-safe overlays, and the minimum text size required to prevent iOS
 * focus zoom.  It contains no device dimensions, transforms, CSS zoom, or
 * JavaScript-dependent layout rules.
 */
:root {
  --zagros-viewport-block: 100vh;
  --zagros-safe-top: max(env(safe-area-inset-top, 0px), var(--zagros-native-safe-top, 0px));
  --zagros-safe-right: env(safe-area-inset-right, 0px);
  --zagros-safe-bottom: env(safe-area-inset-bottom, 0px);
  --zagros-safe-left: env(safe-area-inset-left, 0px);
  --zagros-mobile-gutter: 12px;
  --zagros-mobile-nav-control-block: 60px;
}

@supports (height: 100dvh) {
  :root { --zagros-viewport-block: 100dvh; }
}

html,
body {
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 100%;
  overflow-x: clip;
}

body {
  min-block-size: var(--zagros-viewport-block);
}

html {
  scroll-padding-block-end: calc(var(--zagros-mobile-nav-control-block) + var(--zagros-safe-bottom) + var(--zagros-mobile-gutter));
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  body {
    min-block-size: var(--zagros-viewport-block);
    overflow-x: clip;
  }

  /* Desktop framing must not become an extra band on a wide/rotated phone.
     The consumer shell already owns the real device inset below. */
  body:has(> .app-shell) {
    padding-block: 0;
  }

  /* A phone owns its full available inline size; desktop framing remains above. */
  body > .app-shell {
    inline-size: 100%;
    max-inline-size: none;
    min-inline-size: 0;
    min-block-size: var(--zagros-viewport-block);
  }

  /* Native status areas are authoritative.  The legacy decorative row was a
     second status bar on real iPhones and pushed every non-Home header down. */
  body > .app-shell > .status-bar { display: none !important; }

  /* Center fitted advertisement artwork within its existing banner on phones. */
  .app-shell :is(.home-ad-image, .home-ad-video, .section-ad-media, .section-home-ad-media) {
    object-position: center !important;
  }

  /* Non-Home pages share the same compact, safe-bottom-aware five-item bar as
     Home.  Content reserves real space for it instead of using fake spacers. */
  body > .app-shell:not(:has(#homeScreen:not([hidden]))) {
    /* Reserve exactly the native inset. A WebView already inside a native
       SafeArea reports zero here; browsers provide their remaining inset. */
    padding-block-start: var(--zagros-safe-top);
    padding-block-end: calc(var(--zagros-mobile-nav-control-block) + var(--zagros-safe-bottom) + var(--zagros-mobile-gutter));
  }

  body > .app-shell:not(:has(#homeScreen:not([hidden]))) > .bottom-nav {
    position: fixed !important;
    z-index: 45;
    inset-inline: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: var(--zagros-mobile-nav-control-block) var(--zagros-safe-bottom);
    align-items: start;
    direction: ltr;
    inline-size: 100vw !important;
    max-inline-size: none !important;
    block-size: calc(var(--zagros-mobile-nav-control-block) + var(--zagros-safe-bottom));
    min-block-size: calc(var(--zagros-mobile-nav-control-block) + var(--zagros-safe-bottom));
    margin: 0 !important;
    padding-block: 0;
    padding-inline: var(--zagros-safe-left) var(--zagros-safe-right);
    box-sizing: border-box;
    transform: translateX(-50%);
  }

  body > .app-shell:not(:has(#homeScreen:not([hidden]))) > .bottom-nav > button {
    grid-row: 1;
    block-size: var(--zagros-mobile-nav-control-block);
    min-block-size: var(--zagros-mobile-nav-control-block);
    padding-block: 6px 4px;
    font-size: 10px;
  }

  body > .app-shell:not(:has(#homeScreen:not([hidden]))) > .bottom-nav > button > i {
    margin-block-end: 3px;
    font-size: 22px;
  }

  body > .app-shell:not(:has(#homeScreen:not([hidden]))) > .bottom-nav > .post-button {
    padding-block-start: 32px;
  }

  body > .app-shell:not(:has(#homeScreen:not([hidden]))) > .bottom-nav > .post-button > i {
    top: -12px;
    inline-size: 48px;
    block-size: 48px;
    font-size: 22px;
  }

  /* The drawer belongs to the visual viewport, not to a tall document shell. */
  body > .app-shell > .side-drawer {
    position: fixed !important;
    z-index: 80;
    inset: 0 !important;
    inline-size: 100vw !important;
    max-inline-size: none !important;
    block-size: var(--zagros-viewport-block);
    min-block-size: var(--zagros-viewport-block);
    margin: 0 !important;
  }

  body > .app-shell > .side-drawer .side-drawer-panel {
    box-sizing: border-box;
    inline-size: min(82vw, 340px);
    max-inline-size: calc(100vw - var(--zagros-safe-left) - var(--zagros-safe-right));
    block-size: var(--zagros-viewport-block);
    max-block-size: var(--zagros-viewport-block);
    padding-block-start: max(20px, var(--zagros-safe-top));
    padding-block-end: max(17px, var(--zagros-safe-bottom));
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* A 16px effective control size prevents Safari from zooming the page when
     any login, filter, listing, message, or provider form receives focus. */
  /* Some editors are body-level dialogs rather than children of an app root.
     Keep the guard document-wide so every text-capable control gets the same
     iOS-safe effective size, including provider and administration overlays. */
  body :is(input:not([type='hidden']), select, textarea) {
    font-size: 16px !important;
  }

  :is(input:not([type='hidden']), select, textarea):focus {
    scroll-margin-block: var(--zagros-mobile-gutter);
  }

  /* Listing details replace the consumer shell with a standalone document.
     Its sticky toolbar paints through the real top inset and keeps controls
     below it, instead of relying on an invisible status-bar-sized spacer. */
  .public-post-page {
    min-block-size: var(--zagros-viewport-block);
  }

  .public-post-page > .post-toolbar {
    min-block-size: calc(64px + var(--zagros-safe-top));
    padding-block-start: calc(10px + var(--zagros-safe-top));
  }

  /* Business and Admin are independent entry documents.  Apply the same
     safe-area geometry to their actual headers and gates without importing
     consumer-shell styling into either product. */
  body > .business-header {
    box-sizing: border-box;
    min-block-size: calc(78px + var(--zagros-safe-top));
    padding-block-start: calc(14px + var(--zagros-safe-top));
    padding-block-end: 14px;
  }

  #adminShell,
  .admin-access-gate {
    min-block-size: var(--zagros-viewport-block);
  }

  #adminShell > .main-content > .topbar {
    box-sizing: border-box;
    min-block-size: calc(66px + var(--zagros-safe-top));
    height: auto;
    padding-block-start: var(--zagros-safe-top);
  }

  #adminShell > .sidebar {
    block-size: var(--zagros-viewport-block);
    max-block-size: var(--zagros-viewport-block);
    padding-block-start: calc(27px + var(--zagros-safe-top));
    /* Retain the drawer's original breathing room and add, rather than
       replace it with, the device gesture inset. */
    padding-block-end: calc(17px + var(--zagros-safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .am-login {
    min-block-size: var(--zagros-viewport-block);
    padding-block-start: max(12px, var(--zagros-safe-top));
    padding-block-end: max(12px, var(--zagros-safe-bottom));
  }

  /* The three shared account/listing overlays use a fixed backdrop.  Their
     cards shrink only with the real dynamic viewport and scroll internally. */
  body > .listing-modal {
    box-sizing: border-box;
    inset: 0;
    inline-size: 100vw;
    block-size: var(--zagros-viewport-block);
    min-block-size: var(--zagros-viewport-block);
    padding-block: max(var(--zagros-mobile-gutter), var(--zagros-safe-top)) max(var(--zagros-mobile-gutter), var(--zagros-safe-bottom));
    padding-inline: max(var(--zagros-mobile-gutter), var(--zagros-safe-left)) max(var(--zagros-mobile-gutter), var(--zagros-safe-right));
    overflow: hidden;
  }

  body > .listing-modal > .sell-form-card {
    box-sizing: border-box;
    max-inline-size: 100%;
    max-block-size: calc(var(--zagros-viewport-block) - var(--zagros-safe-top) - var(--zagros-safe-bottom) - (var(--zagros-mobile-gutter) * 2));
    max-height: calc(var(--zagros-viewport-block) - var(--zagros-safe-top) - var(--zagros-safe-bottom) - (var(--zagros-mobile-gutter) * 2));
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--zagros-mobile-gutter);
  }

  body > .listing-modal > .account-auth-card {
    overflow-x: clip;
    overflow-y: auto;
  }

  /* All regular dialogs/sheets share a keyboard-safe maximum.  Fullscreen
     media viewers deliberately remain full-viewport experiences. */
  body > dialog:not(.home-ad-detail):not(.vehicle-gallery-fullscreen) {
    box-sizing: border-box;
    max-inline-size: calc(100vw - var(--zagros-safe-left) - var(--zagros-safe-right) - (var(--zagros-mobile-gutter) * 2)) !important;
    max-block-size: calc(var(--zagros-viewport-block) - var(--zagros-safe-top) - var(--zagros-safe-bottom) - (var(--zagros-mobile-gutter) * 2)) !important;
    max-height: calc(var(--zagros-viewport-block) - var(--zagros-safe-top) - var(--zagros-safe-bottom) - (var(--zagros-mobile-gutter) * 2)) !important;
    min-block-size: 0 !important;
    min-height: 0 !important;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--zagros-mobile-gutter);
  }

  /* Business deliberately makes its listing editor edge-to-edge on phones.
     Once the visual viewport contracts for a keyboard, retain only the real
     safe-area/gutter margins so the editor cannot start beneath a notch. */
  body > #listingEditor {
    margin: max(var(--zagros-mobile-gutter), var(--zagros-safe-top)) max(var(--zagros-mobile-gutter), var(--zagros-safe-right)) max(var(--zagros-mobile-gutter), var(--zagros-safe-bottom)) max(var(--zagros-mobile-gutter), var(--zagros-safe-left)) !important;
  }

  /* The inbox keeps its composer inside the usable viewport while a long
     thread scrolls independently. */
  body > .global-messages[open] {
    display: flex;
    flex-direction: column;
  }

  .global-messages .global-message-list {
    min-block-size: 0;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .global-messages .global-message-compose {
    bottom: 0;
    padding-block-end: max(12px, var(--zagros-safe-bottom));
  }
}