/* Website-only layout rules. */

html.site,
body.site {
  height: 100%;
  overflow: hidden;
}

html.site {
  --tabbar-height: calc(56px + env(safe-area-inset-bottom));
  --safe-bottom: env(safe-area-inset-bottom);
}

.site .site-app-shell {
  height: 100vh;
}

.site #root {
  height: 100%;
}

.site .app-shell {
  height: 100%;
  overflow: hidden;
}

.site .app-layout {
  height: 100%;
  overflow: hidden;
}

.site .site-content-viewport {
  height: calc(100vh - var(--header-height));
  min-height: 0;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}


.site .app-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

.site .site-scroll-row {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

@media (min-width: 1024px) {
  .site .site-chat-active.site-content-viewport {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.site .site-chat-active.site-content-viewport {
  padding: 12px 12px;
}

.site .site-main-scroll {
  flex: 1 1 auto;
  display: block;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  padding: 0;
}

.site .site-chat-active .site-main-scroll {
  overflow: hidden;
  height: 100%;
}

.site .site-tab-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.site .site-sidebar {
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 16px;
  box-sizing: border-box;
}

.site .site-chat-shell {
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  max-height: 100%;
  box-sizing: border-box;
  padding-top: 0;
}

.site .site-videos-shell {
  padding-top: 0;
  box-sizing: border-box;
}

.site .site-chat-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;
  box-sizing: border-box;
}

.site .site-chat-list-scroll {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.site .site-chat-messages-scroll {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.site .site-chat-details-scroll {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.site .site-chat-gif-scroll {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.site .site-chat-shell .pwa-pt-safe-2,
.site .site-chat-shell .pwa-pt-safe-8,
.site .site-chat-shell .pwa-pt-safe-10 {
  padding-top: 0 !important;
}

.site .pwa-pb-safe-2 {
  padding-bottom: 0 !important;
}

.site .pwa-safe-bottom {
  padding-bottom: 0 !important;
}

.site .pwa-top-safe-12 {
  top: 12px;
}

.site .pwa-top-safe-10 {
  top: 10px;
}

.site .pwa-top-safe-8 {
  top: 8px;
}

.site .pwa-top-safe-2 {
  top: 2px;
}

.site .pwa-pt-safe-10 {
  padding-top: 10px;
}

.site .pwa-pt-safe-8 {
  padding-top: 8px;
}

.site .pwa-pt-safe-2 {
  padding-top: 2px;
}

.site .pwa-pt-safe-0 {
  padding-top: 0;
}

@media (min-width: 768px) {
  .site .site-comments-overlay,
  .site .pwa-comments-overlay {
    top: calc(var(--header-height) + (100vh - var(--header-height) - 85vh) / 2);
    bottom: auto;
    height: 85vh;
    min-height: 85vh;
    max-height: 85vh;
  }
  .site.site-ipad .site-comments-overlay,
  .site.site-ipad .pwa-comments-overlay {
    top: calc(var(--header-height) + (100vh - var(--header-height) - 85vh) / 2 - 18px) !important;
    bottom: auto !important;
    height: 85vh !important;
    min-height: 85vh !important;
    max-height: 85vh !important;
  }
}

.site .tabbar {
  bottom: 0;
}

.site .pwa-chat-composer {
  padding-bottom: 0;
}

.site .pwa-chat-messages-scroll {
  overflow-x: hidden !important;
}

@media (max-width: 767px) {
  .site .tabbar-safe {
    padding-bottom: 0;
    scroll-padding-bottom: 0;
    box-sizing: border-box;
    height: calc(100% - var(--tabbar-height));
    max-height: calc(100% - var(--tabbar-height));
  }

  .site .feed-scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .site .feed-scrollbar-hide::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .site .pwa-discover-scroll {
    padding-bottom: calc(56px + env(safe-area-inset-bottom) + 12px);
    scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom) + 12px);
  }

  .site .pwa-chat-list-scroll {
    padding-bottom: calc(56px + env(safe-area-inset-bottom) + 12px);
    scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom) + 12px);
  }

  @media (max-width: 767px) {
    .site .pwa-comments-composer-safe {
      padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
    }
    .site.site-input-open .pwa-comments-composer-safe {
      padding-bottom: 4px !important;
    }
    .site .pwa-chat-composer-safe {
      padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
    }
    .site.site-input-open .pwa-chat-composer-safe {
      padding-bottom: 4px !important;
    }
    .site.site-input-open .pwa-chat-composer-inner {
      padding-bottom: 6px !important;
    }
  }

  .site .pwa-reels-scroll {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    padding-bottom: 0;
    scroll-padding-bottom: 0;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #0f0f0f;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .site .pwa-reels-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .site .pwa-reels-viewport {
    position: relative;
    height: calc(100dvh - var(--tabbar-height));
    width: 100%;
    overflow: hidden;
    background: #0f0f0f;
  }

  .site .pwa-reel-item {
    position: relative;
    height: 100%;
    min-height: 0;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #0f0f0f;
    overflow: hidden;
  }

  .site .pwa-reels-scroll > * {
    height: 100%;
    min-height: 0;
  }

  .site .pwa-reel-actions {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 7;
    pointer-events: auto;
  }

  .site .site-reel-actions {
    top: auto;
    bottom: calc(56px + env(safe-area-inset-bottom) + 50px);
    transform: none;
  }

  .site.pwa-app .site-reel-actions {
    transform: translateY(30px);
  }

  .site.pwa-app .reel-scrubber {
    bottom: calc(env(safe-area-inset-bottom) - 6px) !important;
  }

  .site.pwa-app .reel-info,
  .site.pwa-app .reel-mute {
    transform: translateY(30px);
  }

  .site.pwa-app .profile-modal-root {
    padding-top: 0 !important;
  }

  .site.pwa-app .create-post-card {
    padding-bottom: 18px;
  }

  .site.pwa-app .create-media-preview {
    padding-bottom: 8px;
  }

  .site.pwa-app .create-media-strip {
    align-items: flex-start;
  }

  .site.pwa-app .create-media-add {
    width: 96px;
    height: 96px;
    border-radius: 18px;
  }

  .site.pwa-app .create-media-image {
    width: 240px;
    min-width: 240px;
    height: auto;
    border-radius: 18px;
  }

  .site .site-reel-count {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.65);
    mix-blend-mode: difference;
  }

  .site .site-reel-like-count {
    color: #ef4444;
  }

  .site .site-reel-like-unfilled {
    color: #8269C7;
  }

  .site .site-reel-comment-count {
    color: #8269C7;
  }

  .site .site-reel-action-pill {
    background: rgba(229, 231, 235, 0.9);
    padding: 8px 10px;
    min-width: 52px;
    min-height: 52px;
    justify-content: center;
    align-items: center;
  }

  .site.dark .site-reel-action-pill {
    background: #141414;
  }
}

.site-ipad-portrait .users-list-shell .pwa-frame,
.pwa-ipad-portrait .users-list-shell .pwa-frame {
  padding-left: 16px;
  padding-right: 16px;
}