/* 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: 12px;
    padding-right: 12px;
  }
}

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

@media (min-width: 768px) {
  .site .site-chat-active .lg\:px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .site .site-chat-active .lg\:pb-4 {
    padding-bottom: 0.75rem !important;
  }
}

.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;
}

.site .pwa-comments-shell .px-4 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

@media (min-width: 768px) {
  .site .pwa-comments-composer.pwa-comments-composer-desktop-inset {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

.site .ribyl-settings-sheet .px-4 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.site .ribyl-settings-sheet .pt-2 {
  padding-top: 0 !important;
}

@media (min-width: 768px) {
  .site .pwa-chat-middle-panel .md\:pb-3,
  .site .pwa-chat-middle-panel .md\:pb-4,
  .site .pwa-chat-middle-panel .md\:pb-5,
  .site .pwa-chat-middle-panel .md\:pb-6,
  .site .pwa-chat-middle-panel .md\:pb-8 {
    padding-bottom: 0 !important;
  }
}

@media (min-width: 768px) {
  .site .site-comments-overlay,
  .site .pwa-comments-overlay {
    top: var(--header-height);
    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) - 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;
}

.site .recent-chats-overlay-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site .recent-chats-overlay-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.site .notifications-overlay-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site .notifications-overlay-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.site .discover-overlay-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site .discover-overlay-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.site .settings-overlay-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site .settings-overlay-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.site .chat-sidebar-overlay-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site .chat-sidebar-overlay-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.site .comments-overlay-scroll,
.site .comments-textarea-scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site .comments-overlay-scroll::-webkit-scrollbar,
.site .comments-textarea-scrollbar-hide::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@media (max-width: 767px) {
  .site .guest-deep-link-shell .mx-auto,
  .site .guest-deep-link-post {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .site .guest-deep-link-shell,
  .site .guest-deep-link-scroll {
    overscroll-behavior-y: none;
  }

  .site .guest-deep-link-profile-shell .pt-1,
  .site .guest-deep-link-profile-shell .pt-2,
  .site .guest-deep-link-profile-shell .pt-2\.5,
  .site .guest-deep-link-profile-shell .pt-3,
  .site .guest-deep-link-profile-shell .pt-4,
  .site .guest-deep-link-profile-shell .pt-5,
  .site .guest-deep-link-profile-shell .pt-6,
  .site .guest-deep-link-profile-shell .pt-8 {
    padding-top: 0 !important;
  }

  .site .guest-deep-link-profile-shell .pb-1,
  .site .guest-deep-link-profile-shell .pb-2,
  .site .guest-deep-link-profile-shell .pb-2\.5,
  .site .guest-deep-link-profile-shell .pb-3,
  .site .guest-deep-link-profile-shell .pb-4,
  .site .guest-deep-link-profile-shell .pb-5,
  .site .guest-deep-link-profile-shell .pb-6,
  .site .guest-deep-link-profile-shell .pb-8 {
    padding-bottom: 0 !important;
  }

  .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);
  }

  .site .pwa-posts-mask {
    clip-path: inset(0 0 12px 0 round 30px);
  }

  .site .pwa-posts-mask.pwa-posts-mask-flush {
    clip-path: inset(0 0 0 0 round 30px);
  }

  .site .pwa-posts-mask > .pwa-posts-scroll {
    box-sizing: border-box;
    height: calc(100% + 12px);
    padding-bottom: calc(56px + env(safe-area-inset-bottom) + 12px) !important;
    scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom) + 12px) !important;
  }

  @media (max-width: 767px) {
    .site .pwa-comments-sheet-mobile {
      overscroll-behavior: contain;
      touch-action: none;
    }
    .site .pwa-comments-composer-keyboard {
      position: fixed;
      left: 0;
      right: 0;
      bottom: var(--kb, 0px);
    }
    .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.site-input-open .pwa-chat-composer-inner {
      padding-bottom: 0 !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-y: contain;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    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: var(--app-bg);
  }

  .site .pwa-reels-mask {
    position: absolute;
    top: -12px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: 30px;
    clip-path: inset(12px 0 0 0 round 30px);
  }

  .site .pwa-reels-mask > * {
    pointer-events: auto;
  }

  .site .pwa-reels-scroll {
    scroll-padding-top: 0;
    scroll-padding-bottom: 0;
  }

  .site .pwa-reel-item {
    position: relative;
    height: 100%;
    min-height: 0;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: var(--app-surface-muted);
    overflow: hidden;
    border-radius: 30px;
  }

  .site .pwa-reel-video {
    width: 100%;
    height: 100%;
    background: var(--app-surface-muted);
    overflow: hidden;
    border-radius: 30px;
  }

  .site .pwa-reel-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--app-surface-muted);
    pointer-events: none;
    border-radius: 30px;
  }

  .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 {
    left: 24px !important;
    right: 24px !important;
    bottom: 0 !important;
  }

  .site.pwa-app .reel-info,
  .site.pwa-app .reel-mute {
    transform: none;
  }

  .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: 0 !important;
  }

  .site .create-media-carousel-scroll,
  .site .create-media-carousel-scroll.pb-1,
  .site .create-media-carousel-scroll.pb-2,
  .site .create-media-carousel-scroll.pb-2\.5,
  .site .create-media-carousel-scroll.pb-3,
  .site .create-media-carousel-scroll.pb-4,
  .site .create-media-carousel-scroll.pb-5,
  .site .create-media-carousel-scroll.pb-6,
  .site .create-media-carousel-scroll.pb-8 {
    padding-bottom: 0 !important;
  }

  .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-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;
}