/* MF FIX: (1) chat thread me bottom mobile menu wapas, (2) Android app "More" drawer = website brand colour.
   Ye file sabse last load hoti hai; sirf mobile/app par asar karti hai. Desktop/website drawer untouched. */
@media (max-width: 900px) {
  body.friende-chat-immersive:has(.friende-messenger-app) { --friende-chat-bottomnav-h: calc(70px + var(--fp-safe-b, 0px)); }
  body.friende-chat-immersive:has(.friende-messenger-app) .friende-mobile-nav { display: flex !important; }
  body.friende-chat-immersive:has(.friende-messenger-app) main {
    height: calc(100dvh - var(--friende-chat-topbar-h) - var(--friende-chat-bottomnav-h)) !important;
  }
  body.friende-chat-immersive:has(.friende-messenger-app) .friende-chat-input { padding-bottom: 8px !important; }
  /* Keyboard khula ho to menu chhup jaye taake typing jagah na ghere */
  body.friende-chat-immersive:has(.friende-chat-input textarea:focus),
  body.friende-chat-immersive:has(.friende-chat-input input:focus) { --friende-chat-bottomnav-h: 0px; }
  body.friende-chat-immersive:has(.friende-chat-input textarea:focus) .friende-mobile-nav,
  body.friende-chat-immersive:has(.friende-chat-input input:focus) .friende-mobile-nav { display: none !important; }
}
/* App "More" drawer: dashboard "Welcome back" banner jaisa brand gradient (fully opaque) */
html.friendse-app body > .friende-more-portal > .friende-more-sheet {
  background:
    radial-gradient(circle at calc(100% - 45px) 25px, transparent 0, transparent 87px, color-mix(in srgb, var(--c-primary) 12%, transparent) 87px, color-mix(in srgb, var(--c-primary) 12%, transparent) 115px, transparent 115px),
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--c-primary) 26%, transparent) 0%, transparent 70%),
    radial-gradient(110% 60% at 0% 100%, color-mix(in srgb, var(--c-primary) 16%, transparent) 0%, transparent 70%),
    var(--c-surface) !important;
  border-left: 1px solid var(--c-border);
}
html.friendse-app body > .friende-more-portal > .friende-more-sheet .friende-more-grid a {
  background: color-mix(in srgb, var(--c-surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary) 14%, var(--c-border));
}

/* FPSTORYPREV: brand story arrows */
.friende-story-row-wrap{position:relative}
.fp-story-arrow,.fx-tray-nav{width:34px!important;height:34px!important;border-radius:50%!important;border:2px solid #fff!important;background:linear-gradient(135deg,#2563eb,#111A3D)!important;color:#fff!important;font-size:20px!important;line-height:1!important;padding:0!important;box-shadow:0 4px 12px rgba(17,26,61,.35)!important;cursor:pointer}
.fp-story-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.fp-story-arrow:hover{transform:translateY(-50%) scale(1.08)}
.fp-story-arrow.prev{left:4px}
.fp-story-arrow.next{right:4px}
.fp-story-arrow[hidden]{display:none}
@media(max-width:640px){.fp-story-arrow,.fx-tray-nav{width:30px!important;height:30px!important;font-size:18px!important}}

/* === FIX APP ADS v2 (sirf Android app: html.friendse-app) ===
   App me sirf native AdMob banner dikhta hai; site ke admin ads yahan chhupe hain.
   AdMob banner WebView ke neeche apni alag strip me hai, isliye menu ko uthane ki zaroorat nahi. */
html.friendse-app .fp-ad,
html.friendse-app .fp-ad-rail,
html.friendse-app .fp-anchor-wrap { display: none !important; }
html.friendse-app .friende-mobile-nav { bottom: 0 !important; }
html.friendse-app body,
html.friendse-app body:not(.fpr-page):not(.friende-chat-immersive):has(.fp-ad--mobile-anchor) {
  padding-bottom: calc(70px + var(--fp-safe-b, 0px)) !important;
}
html.friendse-app .friende-cookie-banner { bottom: calc(76px + var(--fp-safe-b, 0px)) !important; }

/* === FIX NAV ICONS v1 ===
   Mobile bottom menu (Home / Search / Profile / More) ke SVG icons hamesha dikhen. */
@media (max-width: 900px) {
  .friende-mobile-nav > a:not(.fp-nav-create) > svg,
  .friende-mobile-nav > button > svg {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    width: 23px !important; height: 23px !important; flex: 0 0 auto !important;
    position: static !important; transform: none !important; stroke: currentColor !important;
  }
  .friende-mobile-nav > a:not(.fp-nav-create),
  .friende-mobile-nav > button {
    align-items: center !important; justify-content: center !important; align-self: stretch !important;
  }
}

/* === FIX NAV RENDER v1 (sirf Android app: html.friendse-app) ===
   WebView me refresh/resize ke baad blur layer icons ko chhupa deti thi.
   Blur hata kar solid background; icons hamesha visible. */
@media (max-width: 900px) {
  html.friendse-app .friende-mobile-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: var(--c-surface, #ffffff) !important;
    bottom: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html.friendse-app .friende-mobile-nav > a:not(.fp-nav-create) > svg,
  html.friendse-app .friende-mobile-nav > button > svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 23px !important;
    height: 23px !important;
    stroke: currentColor !important;
  }
}

/* === FIX NAV ITEMS v1 (sirf Android app: html.friendse-app) ===
   Refresh ke baad menu ke items 14px tak collapse ho jate the (icon/label bahar nikal jate the).
   Items ko Chrome wali 51px height par wapas laata hai. */
@media (max-width: 900px) {
  html.friendse-app .friende-mobile-nav > a,
  html.friendse-app .friende-mobile-nav > button {
    height: auto !important;
    min-height: 51px !important;
    max-height: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    contain: none !important;
    content-visibility: visible !important;
    overflow: visible !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* === FIX TOP SPACE v1 (sirf Android app: html.friendse-app) ===
   App ka WebView status bar ke neeche se shuru hota hai, phir bhi env(safe-area-inset-top)
   status bar ki height batata hai; isse top menu ke upar extra khali jagah ban jati thi. */
html.friendse-app { --fp-safe-t: 0px !important; }
html.friendse-app .friende-topbar { padding-top: 0 !important; }

/* === FIX TOAST CENTER v1 (sirf Android app: html.friendse-app) ===
   Lock / notice toasts screen ke center me, seedhe horizontal text ke saath. */
html.friendse-app .friendse-app-toasts {
  top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  justify-content: center !important; align-items: center !important; padding: 0 16px !important;
}
html.friendse-app .friendse-app-toast {
  width: max-content !important;
  max-width: 86vw !important; max-width: min(86vw, 420px) !important;
  white-space: normal !important; writing-mode: horizontal-tb !important;
  text-align: center !important; word-break: normal !important; overflow-wrap: break-word !important;
  font-size: 14px !important; padding: 14px 20px !important; border-radius: 14px !important;
}