/* Forge Fotos mobile experience v32
   Final mobile overrides for safe areas, app navigation and PWA install surfaces. */

:root {
  --forge-safe-top: env(safe-area-inset-top, 0px);
  --forge-safe-right: env(safe-area-inset-right, 0px);
  --forge-safe-bottom: env(safe-area-inset-bottom, 0px);
  --forge-safe-left: env(safe-area-inset-left, 0px);
  --forge-mobile-nav-height: 72px;
  --forge-mobile-nav-gap: 8px;
}

@media (max-width: 768px) {
  html {
    min-height: 100%;
    background: #07090d;
    overflow-x: clip;
  }

  body {
    min-height: 100%;
    min-height: 100dvh;
    padding-right: var(--forge-safe-right) !important;
    padding-bottom: calc(var(--forge-mobile-nav-height) + var(--forge-mobile-nav-gap) * 2 + var(--forge-safe-bottom)) !important;
    padding-left: var(--forge-safe-left) !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }

  /* The header owns only Home, Pro and Profile. The primary navigation stays at the bottom. */
  .topbar {
    position: sticky !important;
    z-index: 60 !important;
    top: 0 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    grid-template-areas: "home subscribe actions" !important;
    align-items: center !important;
    width: 100% !important;
    min-height: calc(62px + var(--forge-safe-top)) !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(8px + var(--forge-safe-top)) 12px 8px !important;
    gap: 8px !important;
    border-bottom: 1px solid #ffffff0d !important;
    background: #07090df2 !important;
    box-shadow: 0 12px 32px #0008 !important;
    backdrop-filter: blur(20px) saturate(1.12);
    -webkit-backdrop-filter: blur(20px) saturate(1.12);
    box-sizing: border-box;
  }

  .topbar::after {
    content: none !important;
  }

  .brand {
    display: none !important;
  }

  .mobile-home {
    display: grid !important;
    grid-area: home !important;
    place-items: center;
    align-self: center;
    justify-self: start;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  .top-subscribe {
    grid-area: subscribe !important;
    align-self: center;
    justify-self: center;
    min-width: 76px !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    border-radius: 15px !important;
  }

  .top-subscribe span {
    min-width: 42px !important;
    height: 30px !important;
  }

  .head-actions {
    display: flex !important;
    grid-area: actions !important;
    align-self: center;
    justify-self: end;
    width: 44px;
    height: 44px;
    margin: 0 !important;
  }

  .head-actions .search-button {
    display: none !important;
  }

  .head-actions .avatar {
    display: grid !important;
    place-items: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    overflow: hidden;
  }

  /* One stable navigation dock, clear of browser chrome and home indicators. */
  .top-nav {
    position: fixed !important;
    z-index: 80 !important;
    top: auto !important;
    right: calc(var(--forge-safe-right) + var(--forge-mobile-nav-gap)) !important;
    bottom: calc(var(--forge-safe-bottom) + var(--forge-mobile-nav-gap)) !important;
    left: calc(var(--forge-safe-left) + var(--forge-mobile-nav-gap)) !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: auto !important;
    max-width: none !important;
    height: var(--forge-mobile-nav-height) !important;
    min-height: var(--forge-mobile-nav-height) !important;
    margin: 0 !important;
    padding: 7px 5px !important;
    gap: 1px !important;
    border: 1px solid #2a323e !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #121820f7, #0b1016f7) !important;
    box-shadow: 0 20px 60px #000, inset 0 1px #ffffff0d !important;
    overflow: visible !important;
    isolation: isolate;
    box-sizing: border-box;
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
  }

  /* Final ownership rule. The mobile menu is always a bottom dock, never a row inside the header. */
  body .topbar > .top-nav {
    position: fixed !important;
    z-index: 80 !important;
    top: auto !important;
    right: calc(var(--forge-safe-right) + var(--forge-mobile-nav-gap)) !important;
    bottom: calc(var(--forge-safe-bottom) + var(--forge-mobile-nav-gap)) !important;
    left: calc(var(--forge-safe-left) + var(--forge-mobile-nav-gap)) !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  body .topbar .head-actions,
  body .topbar .head-actions .avatar {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .top-nav .nav-start {
    display: none !important;
  }

  .top-nav .nav-app-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 2px 1px !important;
    gap: 2px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #8f98a6 !important;
    transform: none;
  }

  .top-nav .nav-app-button:active {
    transform: scale(.96) !important;
  }

  .top-nav .nav-app-button.active {
    color: var(--lime) !important;
  }

  .top-nav .nav-icon {
    display: grid !important;
    place-items: center;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 10px !important;
  }

  .top-nav .nav-app-button.active .nav-icon {
    background: var(--lime) !important;
    color: #080b08 !important;
    box-shadow: 0 5px 16px #d8ff3e30 !important;
  }

  .top-nav .nav-label,
  .top-nav .nav-profile .nav-label {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    color: inherit !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 11px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-nav .nav-avatar {
    overflow: hidden;
    border-radius: 10px !important;
  }

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

  .guest-session .top-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    right: max(calc(var(--forge-safe-right) + var(--forge-mobile-nav-gap)), calc(50vw - 210px)) !important;
    left: max(calc(var(--forge-safe-left) + var(--forge-mobile-nav-gap)), calc(50vw - 210px)) !important;
  }

  /* Compact install prompt, kept above the navigation dock. */
  .pwa-install-card {
    position: fixed !important;
    z-index: 95 !important;
    top: auto !important;
    right: calc(var(--forge-safe-right) + 10px) !important;
    bottom: calc(var(--forge-safe-bottom) + var(--forge-mobile-nav-height) + 18px) !important;
    left: calc(var(--forge-safe-left) + 10px) !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    grid-template-rows: auto 44px !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 112px !important;
    max-height: 124px !important;
    margin: 0 !important;
    padding: 10px 54px 10px 10px !important;
    gap: 6px 10px !important;
    border-radius: 21px !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pwa-install-card > img {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
  }

  .pwa-install-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    gap: 1px !important;
    min-width: 0;
  }

  .pwa-install-copy small,
  .pwa-install-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pwa-install-copy small {
    font-size: 10px !important;
  }

  .pwa-install-copy strong {
    font-size: 14px !important;
  }

  .pwa-install-action {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start;
    justify-self: stretch;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    gap: 7px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  .pwa-install-action span {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
  }

  .pwa-install-action svg {
    width: 18px !important;
    min-width: 18px;
  }

  .pwa-install-close {
    top: 10px !important;
    right: 8px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid #ffffff14 !important;
    border-radius: 13px !important;
    background: #222820 !important;
    box-sizing: border-box;
  }

  /* Preserve the approved iOS help composition while making every edge safe. */
  .pwa-install-backdrop {
    z-index: 110 !important;
    align-items: end !important;
    padding-top: calc(10px + var(--forge-safe-top)) !important;
    padding-right: calc(10px + var(--forge-safe-right)) !important;
    padding-bottom: calc(10px + var(--forge-safe-bottom)) !important;
    padding-left: calc(10px + var(--forge-safe-left)) !important;
    box-sizing: border-box;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .pwa-install-sheet {
    width: min(430px, 100%) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - var(--forge-safe-top) - var(--forge-safe-bottom) - 20px) !important;
    margin: 0 !important;
    padding: 20px !important;
    border-radius: 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    box-sizing: border-box;
  }

  .pwa-sheet-close {
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .pwa-install-sheet > img {
    width: 58px !important;
    height: 58px !important;
    border-radius: 17px !important;
  }
}

/* Small iPhones, including 320 px and 375 px layouts. */
@media (max-width: 375px) {
  :root {
    --forge-mobile-nav-height: 66px;
    --forge-mobile-nav-gap: 6px;
  }

  .topbar {
    padding-right: 9px !important;
    padding-left: 9px !important;
  }

  .top-nav {
    padding: 5px 3px !important;
    border-radius: 20px !important;
  }

  .top-nav .nav-app-button {
    height: 54px !important;
    min-height: 54px !important;
  }

  .top-nav .nav-label,
  .top-nav .nav-profile .nav-label {
    font-size: 10px !important;
    line-height: 12px !important;
  }

  .pwa-install-card {
    right: calc(var(--forge-safe-right) + 6px) !important;
    bottom: calc(var(--forge-safe-bottom) + var(--forge-mobile-nav-height) + 14px) !important;
    left: calc(var(--forge-safe-left) + 6px) !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    padding: 8px 50px 8px 8px !important;
    gap: 5px 8px !important;
    border-radius: 19px !important;
  }

  .pwa-install-card > img {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }

  .pwa-install-copy small {
    font-size: 9px !important;
  }

  .pwa-install-copy strong {
    font-size: 13px !important;
  }

  .pwa-install-action {
    padding-inline: 8px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 335px) {
  .top-nav .nav-label,
  .top-nav .nav-profile .nav-label {
    font-size: 10px !important;
    line-height: 12px !important;
  }

  .pwa-install-action span {
    max-width: 130px;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }
}

@media (max-width: 320px) {
  .topbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    padding-right: 7px !important;
    padding-left: 7px !important;
  }

  .mobile-home,
  .head-actions,
  .head-actions .avatar {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .top-nav {
    right: calc(var(--forge-safe-right) + 4px) !important;
    left: calc(var(--forge-safe-left) + 4px) !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    gap: 0 !important;
  }

  .top-nav .nav-app-button {
    min-width: 44px !important;
  }

  .pwa-install-copy small {
    display: none;
  }

  .pwa-install-copy {
    align-self: center;
  }
}

/* 390 px and 430 px devices keep the complete labels with safer side margins. */
@media (min-width: 376px) and (max-width: 430px) {
  .top-nav {
    right: calc(var(--forge-safe-right) + 8px) !important;
    left: calc(var(--forge-safe-left) + 8px) !important;
  }

  .top-nav .nav-label,
  .top-nav .nav-profile .nav-label {
    font-size: 10px !important;
    line-height: 12px !important;
  }
}

/* Compact landscape dock and install prompt for phones. */
@media (max-width: 932px) and (max-height: 520px) and (orientation: landscape) {
  :root {
    --forge-mobile-nav-height: 60px;
    --forge-mobile-nav-gap: 6px;
  }

  body {
    padding-bottom: calc(var(--forge-mobile-nav-height) + 12px + var(--forge-safe-bottom)) !important;
  }

  .topbar {
    min-height: calc(54px + var(--forge-safe-top)) !important;
    padding-top: calc(5px + var(--forge-safe-top)) !important;
    padding-bottom: 5px !important;
  }

  .top-nav {
    height: var(--forge-mobile-nav-height) !important;
    min-height: var(--forge-mobile-nav-height) !important;
    padding: 4px !important;
    border-radius: 18px !important;
  }

  .top-nav .nav-app-button {
    height: 50px !important;
    min-height: 50px !important;
  }

  .top-nav .nav-icon {
    width: 27px !important;
    height: 27px !important;
  }

  .pwa-install-card {
    right: calc(var(--forge-safe-right) + 8px) !important;
    bottom: calc(var(--forge-safe-bottom) + var(--forge-mobile-nav-height) + 12px) !important;
    left: auto !important;
    width: min(370px, calc(100vw - var(--forge-safe-left) - var(--forge-safe-right) - 16px)) !important;
  }

  .pwa-install-backdrop {
    place-items: center !important;
  }

  .pwa-install-sheet {
    max-height: calc(100dvh - var(--forge-safe-top) - var(--forge-safe-bottom) - 12px) !important;
    padding: 16px 18px !important;
  }

  .pwa-ios-steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-nav .nav-app-button,
  .pwa-install-card,
  .pwa-install-sheet,
  .pwa-install-action {
    animation: none !important;
    transition: none !important;
  }
}

/* v34: session visibility and viewport-owned mobile navigation. */
.session-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  body.auth-pending .topbar > .top-nav {
    visibility: hidden !important;
  }

  body > .top-nav {
    position: fixed !important;
    z-index: 80 !important;
    top: auto !important;
    right: calc(var(--forge-safe-right) + var(--forge-mobile-nav-gap)) !important;
    bottom: calc(var(--forge-safe-bottom) + var(--forge-mobile-nav-gap)) !important;
    left: calc(var(--forge-safe-left) + var(--forge-mobile-nav-gap)) !important;
    transform: none !important;
  }

  body.guest-session > .top-nav [data-authenticated="true"],
  body.guest-session > .top-nav .authenticated-nav,
  body.guest-session .topbar > .head-actions,
  body.guest-session .topbar > .head-actions .avatar {
    display: none !important;
  }

  body .topbar > .head-actions {
    display: none !important;
  }

  body > .top-nav .nav-label,
  body > .top-nav .nav-profile .nav-label {
    font-size: 10px !important;
    line-height: 12px !important;
  }

  body.guest-session > .top-nav .nav-label {
    font-size: 11px !important;
  }
}

@media (max-width: 320px) {
  body > .top-nav {
    right: calc(var(--forge-safe-right) + 4px) !important;
    left: calc(var(--forge-safe-left) + 4px) !important;
  }
}